在全局作用域中定义的变量或者在局部作用域中没有通过var声明的变量，我们都称之为全局变量。【以函数为界进行定义】
1.变量的类型:
String:字符类型
Number：数字类型
Boolean:布尔类型
Undefined：未定义类型（一个变量有声明但未赋值）
Null:空类型
Object：对象类型
流程结构：
顺序结构、分支结构（if…else…/switch）、循环结构(for/while/do…while)
1、 函数
函数的作用：
代码重用、模块化编程【高内聚，低耦合】
将函数赋值给一个变量实际上是将函数在栈区中的地址赋值给变量了
Function display(){} // 函数的定义，在代码段开辟一段连续的内存空间
Display: // 函数的名称，指向函数在内存中的首地址
Display(): // 函数的调用，是在内存中找到函数的首地址并执行连续的内存空间
函数在定义时无论有名还是无名，在定义的时候都会返回函数在内存中的首地址---匿名函数
Arguments属性
Arguments 是函数的参数数组列表，使用arguments 的时候无须指明函数的参数列表，在函数调用的时候可以任意的填充，arguments是一个特殊的对象，功能和数组类似，但并不是一个数组
3、作用域链
作用域：通过函数来进行划分作用域
全局作用域：定义在函数外边和在函数中没有进行声明的变量
局部作用域：定义在函数的内部的作用域
作用域的访问
全局作用域可以对全局变量进行访问，在全局作用域中不能对局部变量进行访问，在局部作用域中是可以访问全局变量的[闭包的原因]
原因：作用域的不同，当函数执行完毕以后会将内部的变量进行回收
注：作用域只是相对的，可以在函数的内部定义函数，对该局部变量进行调用，但是在函数内部需要对该函数进行调用,如果没有被调用则会被释放,此局部变量相对于函数内部的函数来说就是全局变量，在函数内部是可以访问全局变量的
在javascript中函数内部的函数是被包含的关系，在内存中也是这样存在的，当外部的函数被调用以后，若没有调用内部的函数，那么在执行完外部的函数以后，内部的函数将会被释放，所以在全局作用域中是无法对内部函数的调用的
在php中函数内部的函数与外部的函数在内存中是并行存放的，不存在谁包含谁，所以在外部是可以正常的调用的
作用域链
在函数的内部，如果定义了一个没有var声明的变量，那么系统会自动在当前的作用域寻找var的声明语句,如果没有找到那么会继续向上一级作用域中取寻找，若没有找到那么直至全局作用域，如果找到那么就使用，没有找到会自己在全局作用域中声明该变量，这种链式的查询就称之为作用域链
Script 代码端的执行流程
① 读入第一个代码段
② 编译[变量声明、函数声明、语法检查、语义检查、代码优化、分析得到代码树]
③ 执行[变量赋值、函数的调用、代码的执行]
④ 读入下一个代码段….
编译错误：变量声明、函数声明、语法检查；
无论是编译错误还是执行错误都只会对当前的代码段有影响，而不会对下一段代码产生影响
函数的执行
当函数进入执行阶段的时候会产生一个AO对象，同样有编译和执行阶段
在执行的阶段才会对变量赋值，此时函数内部的变量还没有进行赋值，所以为undefined
4、数组
【数组的定义】
显示创建：arr[n1,n2…] 隐式创建：new array(n1,n2…);/new array(size) àarr[]
【数组的遍历】
For()
For…in… For(var i in arr){arr[i]}
【数组相关的函数】
添加：
ArrayObject.push(e1,e2…) 在数组元素的尾部追加元素
ArrayObject.unshift(e1,e2) 在数组的尾部追加元素
ArrayObject.splice(index,howmany,e1,e2…) 在数组的之指定位置添加指定个数的的元素
删除：
ArrayObject.pop() 删除数组尾部的元素
arrayObject.shift() 删除数组头部的元素
arrayObject.splice(index,howmany) 删除指定位置的指定长队的元素
合并与截取
ArrayObject.slice(start[,end]) 截取从start到end结束的数组元素
ArrayObject.concat(array1,array2…) 数组的合并
链接操作：
arrayObject.join(separator) 把数组转化为字符串
stringObject.split(separator) 把字符串分割成数组元素
【下拉菜单的制作】
// 生成option对象
Var op = new Option(name,value);
// 将op对象添加到options对象集合中
对象.options.add(op);
5、基本事件
1、基本事件
鼠标事件：click/blur/focus/load/mouseOver/mouseOut/mouseMove/mouseUp/mouseDown
鼠标事件的触发顺序为：移动—悬浮—移动—离开
键盘事件：onkeydown/onkeyup
表单事件：onsubmit/onreset
其他：onchange/onselect
2、 事件绑定的三种形式
行内绑定、动态绑定、事件的监听
行内绑定：
函数在全局作用域没有被谁调用的时候，此时的this指向的对象是window对象，当被对象进行调用的时候，此时的this就会指向当前所调用该函数的对象，即谁调用指向谁
动态绑定：
动态绑定就是获取某个对象为其添加一个事件，故动态绑定中函数内部的this就指向了该对象本身
3、事件的监听：
为同一个对象绑定多个/同一事件的处理程序，
IE下：
DOM对象.attachEvent(type,callback);
Type:事件类型 onclick
W3C下:
DOM对象.addEventListener(事件类型,callback,capture);
Type:事件类型 click --不带on前缀
capture 捕获模型/冒泡模型
区别：
①语法不同：IE使用attachEvent W3C使用addEventListener
②参数不同: W3c下拥有第三个参数,浏览器模型（捕获与冒泡模型）
③事件类型不同：IE具有on前缀,W3C没有on前缀
④触发的顺序是不同的:IE是倒序触发，W3C是正序触发
4、事件的移除
事件的移除前提是处理程序必须是有名程序，而匿名函数是不能被移除的
IE：
detachEvent(type,callback);
W3C：
RemoveEventListener(type,callbackName);
5、事件对象
在javascript代码中,当事件发生时，系统会将一系列的相关值放入一个event对象中,我们把这个对象就称之为’事件对象’，如鼠标的移动事件发生时，系统会将鼠标的横纵坐标放入事件的对象中
获取事件对象
IE中：事件对象 = window.event
W3C: DOM对象.事件 = function(event){//获取对象的事件event.pageX}
获取键盘的键值：keyCode offsetX/offsetY clientX/clientY pageX/pageY(获取鼠标的位置)
ScreenX/screenY 为鼠标在屏幕上的距离从屏幕的左上角定位
PageX/pageY 从document的左上角开始定位，页面会很长
clientX/clientY 从浏览器的显示区域的左上角定位，固定不变的点
offsetX/offsetY IE中是从显示区域的边界定位，有border则出现负值，当在点击触发某个事件的时候显示出该鼠标的坐标
6、系统类
1、string字符串类
Length：获取字符串的长度
Indexof(string):返回参数在字符串中的位置
Substr(num1,num2): 截取指定长度的字符串
ToLowerCase(): 返回小写字符串
ToUpperCase(): 返回大写字符串
Replace(str1,str2): 使用str2替换str1
2、 Date 日期和时间类
getYear() ：返回年份（有兼容性问题）
getFullYear() ：返回完整年份
getMonth() ：返回月份（0-11）
getDate() ：返回当月的第几天（1-31）
getDay() ：返回星期几（0-6） 0：星期天
getHours() ：返回小时数
getMinutes() ：返回分钟数
getSeconds() ：返回秒数
getMilliseconds() ：返回毫秒数
getTime() ：返回当前时间的时间戳
new Date() // 获取一个时间对象，通过以上的函数来获取相应的时间，必须在有日期对象的时候才能获取
3、 Math 数学对象
ceil(数值) ：返回大于或等于该数的最小整数
floor(数值) ：返回小于或等于该数的最大整数
min(数值1,数值2) ：返回最小数
max(数值1,数值2) ：返回最大数
pow(数值1,数值2) ：返回数值1的数值2次方 2的次方4
random() ：返回0-1之间的随机数
round(数值) ：返回四舍五入后的结果
sqrt(数值) ：返回平方根 4开平方根2
7、自定义类
在js中没有显示的创建对象class的语句，但是可以通过隐式的来创建对象
语法：
创建一个类：function person(){}
实例化一个对象：var p1 = new person();
为什么要创建对象? 为了跟多的保存数据
在javascript代码中，一切都是对象，在JavaScript代码中，是不存在变量和函数这种说法的，因为所有的变量和函数都是以属性的形式添加到window下的,所以person()相当于window.person();
属性定义
P1.name=’xiaoming’; p1[‘name’]=’xiaoming’
属性调用
P1.name p1[‘name’]
js中数据的存储的形式
值类型数据存储在栈中，对象存储在堆区中
对象的赋值时地址的传递
js中的三大关键词
typeof:判断变量的数据类型
instanceof：判断当前对象是否是某个类的实例
constructor: 返回当前对象的构造函数
函数内部的this指向
function person(){} // 类
var p1 = new person()
默认情况下，没有实例化对象时，此时person函数(类)是由window对象进行调用，所以内部的this对象指向全局window对象
当实例化对象后，person函数内部的this指向了对象，故谁调用了函数，函数内部的this就指向了谁
在函数的内部也可以使用this来添加属性，如this.age 当谁调用该对象时内部的属性和方法将会被该对象继承
在全局作用域中也存在一个this指向了window对象
在函数形参不会影响实参（值的传递），但是对象类型是引用传递
遍历对象属性
for...in... for(var i in p1){p[i]} //在for...in...中遍历时需要[],使用 . 会当做属性
自定义对象的删除
delete p1.age
成员方法的定义
实质：将函数的首地址赋值给成员的属性，通过访问成员属性来达到访问成员方法
function person(p_name,p_age){ // 类
this.name=p_name;
this.age = p_age; // 谁调用指向谁
this.speak=function(){ // 将函数的首地址赋值给speak属性
this.name // this 就指向了该对象的属性
}
}
8、JSON
含义：JSON是一组无序的属性的集合，JSON主要用于大批量数据传输与存储，是一种通用的数据传输格式,用于JS中
语法：var json对象={‘属性1’:值1,’属性2’:值2....} // 文本要使用引号
调用：json对象.属性 json对象[‘属性’]
使用json对象保存大批量数据，可以放在数组中
// 此时一个{}就当做一个数组中的值，下标为0
var person = [{‘name’:’xiao’},{‘name’:’ming’},{}]
使用for...in...来进行遍历
for(var i in person){person[i].name}
在php中使用json_encode将数组转化为json数据,使用json_decode将json对象转化为数组
9、原型链
原型对象:当系统加载构造函数时，系统会自动生成一个原型对象
即创建一个函数(类)的时候,在这个构造器中存在一个prototype属性会执行person这样一个原型对象，而在原型对象中存在一个constructor 属性指向了构造对象
当person构造器的实例访问一个不存在的属性和方法时，系统会自动到当前的构造器的原型对象中去寻找
应用:如果发现类中缺少某个方法或方法,而不想更改源代码,可以在原型对象中添加属性和方法 person.prototype.email = ‘xm@sohu.com’
原型对象是由stdclass?基类产生,产生的时间为实例化一个新的p1对象的时候,将会产生该类的原型对象，此时的原型对象将会执行，类名.prototype = new Object(); ????????
原型对象的意义：当person构造器的实例p1访问一个不存在的属性或方法时，系统会在当前的person构造器中的原型对象中去寻找，如果找不到，将会继续向上一级寻找，知道Object原型对象，我们把这种链式查询关系就称之为‘原型链’
10、Object类
object类是所有类的基类(父类),var obj = new Object(),无论是自定义对象还是系统对象都会继承Object类中所有的属性和方法,
原型继承：
由于person原型对象与object构造器是实例化关系，所以person原型对象会自动继承Object类中所有的属性和方法,由于原型对象的关系，当p1对象访问一个不存在属性和方法时，系统会自动到当前的构造器的原型对象中去寻找,所以p1对象可以继承object中的所有属性和方法，这种继承就称之为’原型继承’;
11、静态属性和方法
在javascript中的静态属性的添加
静态属性：类名 . 属性
静态方法：类名 . 属性 = function(){}
12、函数的闭包
闭包的含义：在函数外是不能直接使用函数内的变量或者是函数，作用域的原因[javascript具有垃圾回收机制]，但是在函数的外部又需要使用函数内部的函数或者是变量，可以利用内部函数去引用内部的变量,然后return fun 该函数名，将该函数的地址传递给变量，使用可变变量进行函数的调用,
function fun(){
var i = 0;
function fn(){
alert(‘i++’);
}
return fn;
}
var test = fun();
test();
test();
在类中的实际使用
function fun(){
this.getName(){
alert(‘a’);
}
}
var p = new fun();
p.getName();
可以进行连续的调用，让变量长期的处于内存当中,而不会被释放,同样变量也将会改变值
闭包的作用：通过全局作用域可以访问局部变量,让局部变量一直驻留在计算机的内存中；虽然闭包有很多好处，但是不建议经常使用闭包，可能会产生内存泄露
13、私有属性的定义
1、私有属性的定义
function person(){
this.属性; // 公有属性
var 属性; // 私有属性
}
14、apply和call
使用apply和call方法，可以改变this的指向
通过call或apply方法来进行调用公共函数
call(thisObj[arg1[,arg2]])
apply(thisObj[arg1[,arg2]])
通过原型继承的方式来实现类的继承
类 . prototype = new Object()
15、正则对象
创建对象：
显示创建：new regExp(‘正则表达式’,’匹配模式’);
隐式创建：var reg = /正则表达式/匹配模式
匹配模式
g:global 全局匹配
i: ignore 忽略大小写
正则对象相关方法！！！
reg = /表达式/g;
test(): 判断在正则模式下是否含有某个字符串 reg.test(str)
exec(): 返回指定模式下的字符串 reg.exec(str)
string类下方法！！！
reg = /表达式/g;
string.search(reg); 返回指定模式下字符串出现的位置
string.match(reg); 返回指定模式下匹配的字符串，返回数组
string.replace(reg); 将指定模式下的字符串替换为需要的字符串
string.split(reg); 按指定模式的字符串来分割字符串
子表达式|捕获|反向引用
子表达式：在正则中使用()括起来的内容就成为子表达式
捕获：子表达式中的内容会被js捕获，放入相同的相应缓冲区中
反向引用：在正则的表达式中可以通过\n(n为第几个括号)的形式来实行对括号中内容的引用
exec()方法的遍历
exec()方法只能返回第一次的匹配结果，可以使用while循环进行遍历
正则表达式的使用心法
1、查什么
2、查多少
3、怎么查
1、查什么
\w: 查找[A-Za-z0-9_ ]包括下划线的任何单词字符
\d : 查找[0-9]中的数字
\w 可以匹配字符串中所有的单个的字符
\w\w 可以匹配字符串中2个连续的字符
\d 同理
[abc]: 查找[]内的所有字符，在不指定个数的时候只匹配单个所有字符，指定时为连续的abc
[a-z]: 查找[]内的所有字符，在不指定的时候会匹配所有的单个字符,指定时为多个连续字符
[^a-z]: 取反
\W \D ：取非
小结：当在使用以上的字符的时候只会匹配单个的字符
2、查多少(连续)
*：查找0或多个
+：查找1或多个
?：查找0个或1个
{m,n}：查找至少m个最多n个
{m}: 查找确定的m个
{m,} 查找至少m个
3、贪婪匹配
在正则表达式下默认的是贪婪匹配,按照匹配规则匹配最多的符合情况的字符串
http://www.baidu.com/hind/index.php
/h.*\// 在贪婪模式下将会匹配到http:/ 和 hind/
/h.*?\// 在非贪婪模式下将会匹配到 http:/
小结：? 添加的位置将会影响匹配的多少，因此?可以限制匹配
4、 从哪查
^ : 输入的开始位置
$ : 输入的结束位置 /^ abc $/
\b: 匹配一个单词边界
\B: 匹配一个非单词边界
\b 遇到空格或单词的开头或单词的结尾(匹配一个单词后空格的位置),\B \b书写的顺序将决定了匹配的内容
5、 转译符
转译符主要是转译在[]内或者单个的字符，需要对其进行匹配
需要转译的有: * + ? . \ / ( ) [ ] { } ^ $ ([] 表示一个范围需要转译)
6、 匹配符
| 代表多重匹配,匹配不同规则的内容 /love(php|linux)/
7、 特殊用法
我在学习网站,你在学习书法
(?=) 正向预查
/我在学习(?=网站)/ // 匹配是’网站’ 前的字符串
(!=) 反向预查
/我在学习(!=网站)/ // 匹配不是’网站’前的字符串
(?:) 输出内容,但不捕获(通常配合子表达式使用)
/?:(网站|书法)/ // 匹配到内容但不捕获
手机号的匹配：/^1[34578]\d{9}$/ 从1开始 匹配[34578]的一个字符 后接9位数字
邮箱验证： /^\w+([\.-]\w+)*@\w+([\.-]\w+)*(\.\w{2,3})+$/
结巴程序将代码
16、BOM模型
定义：当我们打开某一Web应用程序时，系统会自动生成一个模型，该模型的最顶级对象就是Window对象，我们把这个模型就称之为“BOM模型”。
window 对象
alert(message) // 弹出窗口
confirm(message) // 确认窗口（常用于删除）
open(url[，name[，features]]) // 创建新窗口（常用于OA系统）
close() // 关闭窗口
print() // 打印
scrollTo(x,y) ：绝对滚动() // 滚动到窗口的什么位置(返回顶)
setTimeout(表达式，毫秒) // 定时器
clearTimeout(定时器对象) // 清除定时器
Navigator 浏览器对象
appCodeName // 浏览器内核名称
appName // 浏览器名称
appVersion // 浏览器的版本
platform // 操作系统信息
online // 是否脱机工作
cookieEnabled // cookie是否可用
userAgent // 判断浏览器的代理信息
Screen 屏幕对象
availHeight // 可用高度
availWidth // 可用宽度
colorDepth // 颜色色深
height // 显示器高度
width // 显示器宽度
Location 对象
host //获取主机信息
port //获取端口信息
href // 获取当前页面的url
pathname //获取路径信息
protocol //获取请求协议（http/https）
search //获取查询参数（问号后面的内容）
assign(url) //跳转到指定的url
17、JSONP
缘由：由于Ajax技术由于受到浏览器的限制,该方法不允许跨域通信
同源策略：阻止从一个域上加载的脚本来获取或操作另一个域上的文档属性,也就是说数据的请求只能是在当前的域下进行操作,浏览器会隔离其他域的数据或操作
解决办法：借助<scritpt src=’’></script> 标签来进行跨域请求数据，返回的数据放在script标签中，借助callback()函数来处理返回的函数
源码实现的方式：
1、JS原生代码的实现请求
var script = document.createElement(‘script’); // 生成一个script标签
script.src = ‘http://localhost/index.php?fn=callback’ //为script添加一个属性,传递fn回调函数
document.getElementsByTagName(‘head’)[0].appendChild(script) //将script添加到head中
2、script 来处理数据
<script>
function callback(msg){ // 处理从index.php返回的数据 }
</script>
3、 index.php 接口返回jsonp形式的数据
我们在做接口的时候,如果是JSONP形式的，则为：
<?php
$fn = $_GET[‘fn’]；
$data = array();
$data = json_encode($data);
echo $fn.”(‘$data’)”;
jquery直接请求jsonp的方法
1、$.ajax({type,url,datatype,success});
$.ajax({
type:’get’,
url:’http://localhost/index.php’
datatype:’jsonp’,
jsonp:’fn’, // 设置jsonp的属性
success:function(msg){
alert(typeof msg); // msg为string对象
}
});
2、$.get(url,data,callback);
$.get(
’http://localhost/index.php?fn=?’,
[data],
function(msg){ //msg的类型为string对象
//函数体
},
‘jsonp’
);
3、$.getJSON(url,data,callback)
$.getJSON(
url:’http://localhost/index.php?fn=callback’，
data:
function(msg){ //msg的类型为string对象
// 函数体
}
);
底层ajax实现JSONP的请求
JSON.parse() 与 eval(‘(‘+msg+’)’) 区别
//msg的类型为string对象 使用JSON.parse(msg)来进行json解析，
JSON.parse()之可以解析json格式的数据，并且会对要解析的字符串进行格式检查
如果格式不正确则不进行解析,而eval((‘+msg+’))则可以解析任何字符串，eval是不安全的。
18、Ajax原生
ajax的定义：是一种web技术,在不跳转而刷新页面的时候,可以通过js的事件向web服务器发送一个请求,服务器在将数据处理后可以返回多种格式的数据,如：string,json,xml,web页面通过数据来处理相应的业务的处理。
注：如果返回的是XML数据需要加header(‘content-type:text/xml’)
Ajax对象的创建
W3C: Xhr = new XMLHttpRequest() // Xhr 为新建的Ajax对象
Ie: Xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
Ajax的使用步骤
1创建ajax对象(通过try{return new XMLHttpRequest()}catch(e){}异常机制来解决兼容性问题)
设置回调函数 xhr.onreadystatechange=function(){
4、 判断与执行
Xhr.status==200&&Xhr.readyStatus==4
}
2、xhr.open(‘get’,’?.php’) //初始化ajax对象指定请求方式和get请求
3、xhr.setRequestHeader (‘content-type’,’application/x-www-form-urlencoded’) //post请求
如果没有设置head头信息,服务将收不到数据
4、发送信息xhr.send(null) //get请求发送的参数带在url后,post参数组装后send发送
在IE浏览器下缓存的解决
A、随机数
B、时间戳
C、通过设置缓存文件的最后修改时间(在某段时间内第二次请求某个页面时服务器会检查文件的最后的修改时间,来判断文件是否存在于客户端中)
setRequestHeader(‘If-modifiy-since’，‘0’) //需设在open后
D、在服务器端设置
Heaer(‘Cache-control:no-cache; must-revalidate’); //无缓存必须从响应
缓存的好处:减少对放武器的请求次数,加快响应时间
Ajax获得服务器返回的数据有xml json string
Xhr.responseText //string格式
Xhr.responseXML //xml 格式服务器端要使用header(‘content-type:text/xml’)
eval(‘(‘+ Xhr.responseText +’)’) // json格式
19、Ajax中的XML和JSON
释义：可扩展的标记语言,主要用于数据的存储和传输（完成大批量数据的传输,超过两条）
XML
PHP和JS中xml的解析的区别
PHP: 在php中为非标准的DOM模型 à 将值存储在最后的子节点中(聚簇型)
JS: 在js中为标准的DOM模型 à 将值存储在其他的节点(索引型)
标准DOM模型
PHP DOM模型: 主要实现数据的增、删、改功能
PHP SimpleXML模型: 主要实现数据的查询功能
方法一:
PHP DOM模型解析查询
$dom=new DOMDocument(‘1.0’,’utf-8’); //面
$dom->load($str);
$nd=$dom->getElementsByTagName(“TagName”); //串
$value=$nd->item(0)->nodeValue //点
方法二:
PHP SimpleXml模型解析查询
$xml=simplexml_load_string($str);
$first = $xml->first; // first/second为标签
$second= $xml->second;
方法三:
Xpath指令查询
创建一个simpleXml模型使用Xpath指令来进行查询
非标准DOM模型
JS(Ajax)中的解析xml数据(标准型)
var xml=xmlHttp.responseXML; // js中接收返回的xml数据
nodevalue=xml.getElementsByTagName(“TagName”). node[0].childNodes[0].nodeValue;
注:childNodes 中包含该节点下所有的子节点
如果服务器端想要返回xml数据则必须设置
header(‘content-type:text/xml;charset=utf-8’)
JSON
json是一组无序属性的集合,在Javascript中可以通过{}来表示这组集合,它是Object类实例
定义: var json = [{ },{ },{ },{ }...]
实际应用:
在实际的开发中,尽管服务器返回的是json格式的数据,但是ajax中并不能识别为string类型,
所以需要通过JSON.parse(string) 或者是 eval(‘(‘+string+’)’) 来进行转换,建议使用parse();
json的调用：
一维：{‘a’:1,’b’:2,’c’:3...} json.a json.b
二维: [{ },{ },{ },...] 使用for...in... for(var i in json){ json[i].e }
20、Jquery
jquery就是JS的一个类库,封装了很多的功能,节省开发周期
基本选择器
#id: id选择器 $(‘#id’)
.class: class属性选择器 $(‘.cls’)
Element: 标签选择器 $(‘span’)
E1,E2,E3...: 群组选择器,匹配所有符合条件的标签 $(‘input,p,span’)
层级选择器
ancetor descendant: 匹配当前元素的所有后代元素 $(‘form input’)
parent > child: 匹配当前元素的所有子元素 $(‘form>input’)
prev + next : 匹配当前元素的近邻的下一个元素 $(‘label + input’)
prev~siblings: 匹配当前元素后的所用指定的同级兄弟元素 $(‘ul~li’) $(‘form~input’)
简单选择器
:first 匹配第一个元素 $(‘li:first’)
:last 匹配最后一个元素
:even 匹配所有的偶数元素 $(‘tr:even’)
:odd 匹配所有的奇数元素 $(‘tr:odd’)
:eq(index)匹配索引等于index的元素,默认索引从0开始 $(‘tr:eq(1)’)
:gt(index) 匹配索引大于
:lt(index)
:not(selectot) 匹配出指定选择器以外的元素
内容选择器
:contains(text) 匹配内容包含text的元素 $(‘div:contains(‘lucky’)’)
:empty 匹配内容为空的元素 $(‘td:empty’)
:has(selector) 匹配具有指定选择器的元素 $(‘div:has(‘p’)’)
:parent 匹配具有子元素的元素(内容不为空的子元素) $(‘td:parent’)
可见性选择器
:hidden 匹配所有隐藏元素,包含隐藏表单和display:none的元素 $(‘form:hidden’)
:visible 匹配所有可见的元素
属性选择器
[attribute] 匹配指定属性的元素 $(‘div[id]’)
[attribute=value] 匹配指定某个指定属性值的元素 $(“input[name=’name’]”)
另:
!= 不等于
^= 以特定的值开始 // 多个name属性值开始
$= 以某些值结束的 // 有点像正则
*= 包含某些值
[selector1],[selector2].. // 同时匹配具有多个属性的元素 $(input[‘id’][name=’pwd’])
子选择器
:nth-child(index/even/odd) 从1算起,根据(索引/偶数/奇数)匹配子元素 $(“ul li:nth-child(2)”)
:first-child 匹配第一个子元素 $(‘ul li:first-child’)
:last-child 匹配最后一个子元素 $(‘ul li:last-child’)
:only-child 如果当前是唯一一个子元素则匹配
表单选择器
:input 匹配所有的表单选择器---匹配所有的选择器包括<select><textarea> $(:input)
input 只能匹配带有input的表单元素,只是简单的表单选择器
:text 匹配所有的文本框(非密码框)同checkbox一样是将值保存在:text变量中,需要进行变量输出
:checkbox 匹配所有的复选框 $(:checkbox)
表单对象选择器
:enabled 匹配所有可用的表单元素
:disabled 匹配所有不可用的表单元素
:checked 匹配所有选中的元素 $(“input:checked”)
:selected 匹配所有下拉选中的元素 $(“input:selected”)
另:disabled = ‘true’与readonly=’readonly’区别
disabled 是不能在php页面中进行接收的,而readonly是可以实现接收的
21、JQ对象与DOM对象
JQ对象与DOM对象之间的转换
DOM对象 = Jq对象[index] var dom = $(jq)[0]
JQ对象 = $(DOM对象) var jq = $(DOM)
22、JQ对象对属性的操作
普通属性的操作
attr(name) 获取对象
attr(key,value) 设置属性的值
attr(properties) 为元素设置多个属性,properties必须为json对象
attr(key,fn) 通过函数的返回值,来设置元素的属性
removeAttr(name) 移除某个属性
Class属性操作
addClass(class) 为元素添加Class属性
removeClass(class) 移除元素的Class样式
toggleClass(class) 切换Class的属性,存在则移除,反之
hasClass(class) 判断元素是否具有某个class样式
Css操作
css(name) 获取css的样式
css(name,value) 设置css属性值
css(properties) 同时为元素设置多个css样式 json格式
offset位置操作
offset() 获取元素的位置信息,返回json对象,包含left和top两个属性
offset({top:x,left:y}); 设置对象的位置
尺寸操作
width(): 获取元素的宽度
width(value) 设置元素的宽度
height() 获取元素的高度
height(value) 设置元素的高度
文本/值
html() 获取元素的值,双标签内的值以及html内容,浏览器可以将其解析
html(val) 设置元素的值
val() 获取表单元素的值
val(val) 设置表单元素的值
text() 获取元素的值
text(val) 设置元素的值,获取所有的文本值,存在html标签也不能解析
23、事件的编程
在DOM中页面的载入是通过window.onload,在JQ中是通过$(document).ready(fn)的方式来进行载入页面,window.onload方法是等待当前的页面所有的资源(images,js,css)加载完毕再执行,而ready是当内存中的DOM树已经形成后,自动执行,可能外部的资源没有加载完成或失败就会执行
JQ中常用的编程
常用事件：
blur(fn) ： 当失去焦点时触发
change(fn) ： 当状态改变时触发
click(fn) ： 当单击时触发
dblclick(fn) ： 当双击时触发
focus(fn) ： 当获得焦点时触发
键盘
keydown(fn) ： 键盘按下时触发
keyup(fn) ： 键盘弹起时触发
keypress(fn) ： 键盘按下时触发 // 不能获取功能键的值
load(fn) ： 功能与ready方法类似,当页面载入时触发
unload(fn) ： 当页面关闭时触发
鼠标
mousedown(fn) ：鼠标按下时触发
mouseup(fn) ： 鼠标弹起时触发
mousemove(fn) ：鼠标移动时触发
mouseover(fn) ：鼠标悬浮时触发
mouseout(fn) ：鼠标离开时触发
窗口
resize(fn) ：当浏览器窗口大小改变时触发
scroll(fn) ：当滚动条滚动时触发
select(fn) ：当表单文本选中时触发
submit(fn) ：当表单提交时触发
24、JQ常用方法
hover(over,out) // 鼠标的悬浮与离开
toggle(fn1,fn2...) // 轮换点击事件
bind(type,[data],fn) // 为事件绑定相关的事件处理程序
bind({type:fn1,type:fn2..}) // 为事件绑定多个事件处理程序
one(type,[data],fn) // 为元素绑定一次触发程序
unbind(type) // 移除某个事件,无名函数也是可以的
原生JS代码中this的指向
行内绑定时,函数内部的this指向window对象,谁调用指向谁
动态绑定时其内部的this指向DOM对象
事件的监听中this具有兼容性的问题 IE指向window对象,W3C指向当前的DOM对象
JQ中this的指向
在jq中无论是IE还是W3C浏览器,事件的绑定时,其内部的this都指向了当前要操作的DOM对象,需要使用JQ中的方法的时候将需要进行转化为JQ对象
25、事件的冒泡
所谓的事件的冒泡就是事件的响应就像水泡一样从底层的对象一层层上升至顶层对象,这个过程就叫做事件的冒泡
IE下冒泡的禁止：window.enent.cancelBubble = true;
W3C下冒泡的禁止: envent.stopPropagation();
默认行为的阻止：
IE: window.event.returnValue = false;
W3C: event.preventDefault();
26、JQ中的动画效果
show([speed[,callback]]) //显示/动画效果显示
hide([speed[,callback]]) //隐藏/动画效果隐藏
toggle() : //显示与隐藏/开关
toggle(switch) //显示与隐藏 值为true/false
toggle(speed[,callback])
slideDown(speed[,callback]) // 向下滑动
slideUp(speed[,callback])
slideToggle(speed[,callback])
fadeIn(speed[,callback])
fadeOut(speed[,callback]) //淡出
fadeTo() // 可以设置透明度
animate(parames[,speed]) // 自定义动画,必须设置position才能为其定位
27、jq的扩展机制
在实际的开发中,如果发现JQ中没有封装我们需要到功能,我们可以jq的插件机制来实现拓展 jQuery.fn.extend(object) 或 $.fn.extend(object) object参数要求是一个json对象
其谁调用内部的this就会指向谁
语法:
$.fn.extend({
fn1.function(){ this },
fn2.functon(){ this }
});
<script> $().fn()1 </script>
each的使用
jq对象的本质是一个DOM对象的集合,这个集合可以通过数组的形式进行表示，可以通过
each 对这个集合进行遍历
$().each(function(i,item){
i:每次遍历的时候会将索引元素的下标放置于i中
item:每次遍历的元素放置于item中,由于JQ就是一个DOM对象故item就是DOM对象
})
28、JQ中的Ajax的使用
底层的实现
$.ajax({
type:’get/post’,
cache:fasle,
data:string
datatype:json/xml/text
success:function(msg){
// xml的解析
$(msg).find(‘field’).text();
//Json的解析
$(msg).field // 单条数据
$(msg).each(function(i,item){
item.field
});
}
});
高级实现
$.get(type,data,callback);
$.post(type,data,callback);
区别
高级实现与底层实现的区别在与发送的data数据类型不一样
底层: string
高级: string,json
注意: 在xml/json/text中返回的是DOM对象,而返回为JSONP时为string需要转换为对象
详见: jsonp
1444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
