04.JavaScript语法下
一、内置对象
1、document
document.referrer //获取上一个跳转页面的地址(需要服务器环境)
2、location
window.location.href //获取或者重定url地址
window.location.search //获取地址参数部分
我们来看一个例子
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取地址栏参数title>
<script type="text/javascript">
window.onload = function(){
var Dat = window.location.search;
alert(Dat);//弹出?name=tom
var oSpan = document.getElementById('span01')
var arr = Dat.split('=');
var name = arr[1];
oSpan.innerHTML = name;
}
script>
head>
<body>
<div>欢迎<span id="span01">span>访问我的主页！div>
body>
html>我们在浏览器地址后面添加上参数 file:///F:/jscsdn/02/012.html?name=tom
window.location.hash //获取页面锚点或者叫哈希值
var hash = window.location.hash;//在地址后面添加#12（谷歌浏览器有效），如例file:///F:/jscsdn/02/013.html#12
alert(hash);//弹出#123、Math
Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整
<script type="text/javascript">
for(var i=0;i<5;i++){
var a=Math.random();//从0到1的随机数，比如0.4266489619677658
alert(a);
alert(Math.floor(a));//向下取整，永远都为0
alert(Math.ceil(a));//向上取整，永远都为1
}
script>二、面向对象
面向过程与面向对象编程
1、面向过程：所有的工作都是现写现用。
2、面向对象：是一种编程思想，许多功能事先已经编写好了，在使用时，只需要关注功能的运用，而不需要这个功能的具体实现过程。
javascript对象
将相关的变量和函数组合成一个整体，这个整体叫做对象，对象中的变量叫做属性，变量中的函数叫做方法。javascript中的对象类似字典。
创建对象的方法
1、单体
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单体title>
<script type="text/javascript">
var Tom = {
name:'tom',
age:18,
showname:function(){
alert(this.name);
},
showage:function(){
alert(this.age);
}
}
Tom.showname();//调用方法
script>
head>
<body>
body>
html>2、工厂模式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>工厂模式title>
<script type="text/javascript">
function Person(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.showname = function(){
alert(this.name);
}
o.showage = function(){
alert(this.age);
}
o.showjob = function(){
alert(this.job);
}
return o;
}
var Tom = Person('tom',18,'engineer');
var Jack = Person('jack',19,'worker');
Tom.showjob();
Jack.showjob();
script>
head>
<body>
body>
html>3、构造函数
<html lang="en">
<head>
<meta charset="UTF-8">
<title>构造函数title>
<script type="text/javascript">
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.showname = function(){
alert(this.name);
}
this.showage = function(){
alert(this.age);
}
this.showjob = function(){
alert(this.job);
}
}
var Tom = new Person('tom',18,'engineer');
var Jack = new Person('jack',19,'worker');
//Tom.showjob();
alert(Tom.showname==Jack.showname);//弹出false
script>
head>
<body>
body>
html>3、原型模式
prototype是每一个对象共用的属性，为了不造成资源浪费，可以把每一个对象共用的方法和属性设置在prototype上。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原型模式title>
<script type="text/javascript">
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
}
Person.prototype.showname = function(){
alert(this.name);
}
Person.prototype.showage = function(){
alert(this.age);
}
Person.prototype.showjob = function(){
alert(this.job);
}
var Tom = new Person('tom',18,'engineer');
var Jack = new Person('jack',19,'worker');
Tom.showage();
Jack.showage();
alert(Tom.showage==Jack.showage);//弹出true
//重写方法后showage是tom独有的方法了。
// Tom.showage = function(){
// alert('我的年龄是'+this.age);
// }
// alert(Tom.showage==Jack.showage);//弹出false
script>
head>
<body>
body>
html>4、继承
function fclass(name,age){ this.name = name; this.age = age; } fclass.prototype.showname = function(){ alert(this.name); } fclass.prototype.showage = function(){ alert(this.age); } function sclass(name,age,job) { fclass.call(this,name,age); this.job = job; } sclass.prototype = new fclass(); sclass.prototype.showjob = function(){ alert(this.job); } var tom = new sclass('tom',19,'全栈工程师'); tom.showname(); tom.showage(); tom.showjob();三、call和apply
这里先看一段代码，普通的function里面的this指向是那个对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>call和applytitle>
<script type="text/javascript">
function aa(a,b){
alert('我的this是'+this+',我的a是'+a+',我的b是'+b);
}
aa(1,2);
script>
head>
<body>
body>
html>
使用call和apply
<html lang="en">
<head>
<meta charset="UTF-8">
<title>call和applytitle>
<script type="text/javascript">
function aa(a,b){
alert('我的this是'+this+',我的a是'+a+',我的b是'+b);
}
aa.call('abc',2,3);
// aa.apply('abc',[2,3]);
script>
head>
<body>
body>
html>
这里可以看到，没有调用call和apply之前，function里面的this指向的是window,使用call和apply能使this指向发生改变，call和apply的功能一样，只是调用的方式不同，apply的参数是使用数组的方式
四、新选择器
1、document.querySlector()
2、document.querySlectorAll()
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增选择器title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.querySelector('#div1');//选择单个
var aLi = document.querySelectorAll('.list li');//选择多个
alert(aLi.length);//弹出8
}
script>
head>
<body>
<div id="div1">这是一个div元素div>
<ul class="list">
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
<li>6li>
<li>7li>
<li>8li>
ul>
body>
html>