Javascript的基础知识

时间 2019-11-12

标签 javascript 基础知识栏目 JavaScript 繁體版

原文原文链接

在全局做用域中定义的变量或者在局部做用域中没有经过var声明的变量，咱们都称之为全局变量。【以函数为界进行定义】javascript

1.变量的类型:php

String:字符类型css

Number：数字类型html

Boolean:布尔类型java

Undefined：未定义类型（一个变量有声明但未赋值）node

Null:空类型jquery

Object：对象类型linux

流程结构：web

顺序结构、分支结构（if…else…/switch）、循环结构(for/while/do…while)ajax

一、函数

函数的做用：

代码重用、模块化编程【高内聚，低耦合】

将函数赋值给一个变量其实是将函数在栈区中的地址赋值给变量了

Function display(){} // 函数的定义，在代码段开辟一段连续的内存空间

Display: // 函数的名称，指向函数在内存中的首地址

Display(): // 函数的调用，是在内存中找到函数的首地址并执行连续的内存空间

函数在定义时不管有名仍是无名，在定义的时候都会返回函数在内存中的首地址---匿名函数

Arguments属性

Arguments 是函数的参数数组列表，使用arguments 的时候无须指明函数的参数列表，在函数调用的时候能够任意的填充，arguments是一个特殊的对象，功能和数组相似，但并非一个数组

三、做用域链

做用域：经过函数来进行划分做用域

全局做用域：定义在函数外边和在函数中没有进行声明的变量

局部做用域：定义在函数的内部的做用域

做用域的访问

全局做用域能够对全局变量进行访问，在全局做用域中不能对局部变量进行访问，在局部做用域中是能够访问全局变量的[闭包的缘由]

缘由：做用域的不一样，当函数执行完毕之后会将内部的变量进行回收

注：做用域只是相对的，能够在函数的内部定义函数，对该局部变量进行调用，可是在函数内部须要对该函数进行调用,若是没有被调用则会被释放,此局部变量相对于函数内部的函数来讲就是全局变量，在函数内部是能够访问全局变量的

在javascript中函数内部的函数是被包含的关系，在内存中也是这样存在的，当外部的函数被调用之后，若没有调用内部的函数，那么在执行完外部的函数之后，内部的函数将会被释放，因此在全局做用域中是没法对内部函数的调用的

在php中函数内部的函数与外部的函数在内存中是并行存放的，不存在谁包含谁，因此在外部是能够正常的调用的

做用域链

在函数的内部，若是定义了一个没有var声明的变量，那么系统会自动在当前的做用域寻找var的声明语句,若是没有找到那么会继续向上一级做用域中取寻找，若没有找到那么直至全局做用域，若是找到那么就使用，没有找到会本身在全局做用域中声明该变量，这种链式的查询就称之为做用域链

Script 代码端的执行流程

① 读入第一个代码段

② 编译[变量声明、函数声明、语法检查、语义检查、代码优化、分析获得代码树]

③ 执行[变量赋值、函数的调用、代码的执行]

④ 读入下一个代码段….

编译错误：变量声明、函数声明、语法检查；

不管是编译错误仍是执行错误都只会对当前的代码段有影响，而不会对下一段代码产生影响

函数的执行

当函数进入执行阶段的时候会产生一个AO对象，一样有编译和执行阶段

在执行的阶段才会对变量赋值，此时函数内部的变量尚未进行赋值，因此为undefined

四、数组

【数组的定义】

显示建立：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);

五、基本事件

1、基本事件

鼠标事件：click/blur/focus/load/mouseOver/mouseOut/mouseMove/mouseUp/mouseDown

鼠标事件的触发顺序为：移动—悬浮—移动—离开

键盘事件：onkeydown/onkeyup

表单事件：onsubmit/onreset

其余：onchange/onselect

二、 事件绑定的三种形式

行内绑定、动态绑定、事件的监听

行内绑定：

函数在全局做用域没有被谁调用的时候，此时的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则出现负值，当在点击触发某个事件的时候显示出该鼠标的坐标

六、系统类

一、string字符串类

Length：获取字符串的长度

Indexof(string):返回参数在字符串中的位置

Substr(num1,num2): 截取指定长度的字符串

ToLowerCase(): 返回小写字符串

ToUpperCase(): 返回大写字符串

Replace(str1,str2): 使用str2替换str1

二、 Date 日期和时间类

getYear() ：返回年份（有兼容性问题）

getFullYear() ：返回完全年份

getMonth() ：返回月份（0-11）

getDate() ：返回当月的第几天（1-31）

getDay() ：返回星期几（0-6） 0：星期天

getHours() ：返回小时数

getMinutes() ：返回分钟数

getSeconds() ：返回秒数

getMilliseconds() ：返回毫秒数

getTime() ：返回当前时间的时间戳

new Date() // 获取一个时间对象，经过以上的函数来获取相应的时间，必须在有日期对象的时候才能获取

三、 Math 数学对象

ceil(数值) ：返回大于或等于该数的最小整数

floor(数值) ：返回小于或等于该数的最大整数

min(数值1,数值2) ：返回最小数

max(数值1,数值2) ：返回最大数

pow(数值1,数值2) ：返回数值1的数值2次方 2的次方4

random() ：返回0-1之间的随机数

round(数值) ：返回四舍五入后的结果

sqrt(数值) ：返回平方根 4开平方根2

七、自定义类

在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 就指向了该对象的属性

}

八、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对象转化为数组

九、原型链

原型对象:当系统加载构造函数时，系统会自动生成一个原型对象

即建立一个函数(类)的时候,在这个构造器中存在一个prototype属性会执行person这样一个原型对象，而在原型对象中存在一个constructor 属性指向了构造对象

当person构造器的实例访问一个不存在的属性和方法时，系统会自动到当前的构造器的原型对象中去寻找

应用:若是发现类中缺乏某个方法或方法,而不想更改源代码,能够在原型对象中添加属性和方法 person.prototype.email = ‘xm@sohu.com’

原型对象是由stdclass?基类产生,产生的时间为实例化一个新的p1对象的时候,将会产生该类的原型对象，此时的原型对象将会执行，类名.prototype = new Object(); ????????

原型对象的意义：当person构造器的实例p1访问一个不存在的属性或方法时，系统会在当前的person构造器中的原型对象中去寻找，若是找不到，将会继续向上一级寻找，知道Object原型对象，咱们把这种链式查询关系就称之为‘原型链’

十、Object类

object类是全部类的基类(父类),var obj = new Object(),不管是自定义对象仍是系统对象都会继承Object类中全部的属性和方法,

原型继承：

因为person原型对象与object构造器是实例化关系，因此person原型对象会自动继承Object类中全部的属性和方法,因为原型对象的关系，当p1对象访问一个不存在属性和方法时，系统会自动到当前的构造器的原型对象中去寻找,因此p1对象能够继承object中的全部属性和方法，这种继承就称之为’原型继承’;

十一、静态属性和方法

在javascript中的静态属性的添加

静态属性：类名 . 属性

静态方法：类名 . 属性 = function(){}

十二、函数的闭包

闭包的含义：在函数外是不能直接使用函数内的变量或者是函数，做用域的缘由[javascript具备垃圾回收机制]，可是在函数的外部又须要使用函数内部的函数或者是变量，能够利用内部函数去引用内部的变量,而后return fun 该函数名，将该函数的地址传递给变量，使用可变变量进行函数的调用,

function fun(){

var i = 0;

function fn(){

alert(‘i++’);

}

return fn;

}

var test = fun();

test();

在类中的实际使用

function fun(){

this.getName(){

alert(‘a’);

}

var p = new fun();

p.getName();

能够进行连续的调用，让变量长期的处于内存当中,而不会被释放,一样变量也将会改变值

闭包的做用：经过全局做用域能够访问局部变量,让局部变量一直驻留在计算机的内存中；虽然闭包有不少好处，可是不建议常用闭包，可能会产生内存泄露

1三、私有属性的定义

一、私有属性的定义

function person(){

this.属性; // 公有属性

var 属性; // 私有属性

}

1四、apply和call

使用apply和call方法，能够改变this的指向

经过call或apply方法来进行调用公共函数

call(thisObj[arg1[,arg2]])

apply(thisObj[arg1[,arg2]])

经过原型继承的方式来实现类的继承

类 . prototype = new Object()

1五、正则对象

建立对象：

显示建立：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、查什么

\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:/

小结：? 添加的位置将会影响匹配的多少，所以?能够限制匹配

四、 从哪查

^ : 输入的开始位置

$ : 输入的结束位置 /^ abc $/

\b: 匹配一个单词边界

\B: 匹配一个非单词边界

\b 遇到空格或单词的开头或单词的结尾(匹配一个单词后空格的位置),\B \b书写的顺序将决定了匹配的内容

五、 转译符

转译符主要是转译在[]内或者单个的字符，须要对其进行匹配

须要转译的有: * + ? . \ / ( ) [ ] { } ^ $ ([] 表示一个范围须要转译)

六、 匹配符

| 表明多重匹配,匹配不一样规则的内容 /love(php|linux)/

七、 特殊用法

我在学习网站,你在学习书法

(?=) 正向预查

/我在学习(?=网站)/ // 匹配是’网站’ 前的字符串

(!=) 反向预查

/我在学习(!=网站)/ // 匹配不是’网站’前的字符串

(?:) 输出内容,但不捕获(一般配合子表达式使用)

/?:(网站|书法)/ // 匹配到内容但不捕获

手机号的匹配：/^1[34578]\d{9}$/ 从1开始匹配[34578]的一个字符后接9位数字

邮箱验证： /^\w+([\.-]\w+)*@\w+([\.-]\w+)*(\.\w{2,3})+$/

结巴程序将代码

1六、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

1七、JSONP

原因：因为Ajax技术因为受到浏览器的限制,该方法不容许跨域通讯

同源策略：阻止从一个域上加载的脚原本获取或操做另外一个域上的文档属性,也就是说数据的请求只能是在当前的域下进行操做,浏览器会隔离其余域的数据或操做

解决办法：借助<scritpt src=’’></script> 标签来进行跨域请求数据，返回的数据放在script标签中，借助callback()函数来处理返回的函数

源码实现的方式：

一、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中

二、script 来处理数据

function callback(msg){ // 处理从index.php返回的数据 }

</script>

三、 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是不安全的。

1八、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(){

四、判断与执行

Xhr.status==200&&Xhr.readyStatus==4

}

二、xhr.open(‘get’,’?.php’) //初始化ajax对象指定请求方式和get请求

三、xhr.setRequestHeader (‘content-type’,’application/x-www-form-urlencoded’) //post请求

若是没有设置head头信息,服务将收不到数据

四、发送信息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格式

1九、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是能够实现接收的

2一、JQ对象与DOM对象

JQ对象与DOM对象之间的转换

DOM对象 = Jq对象[index] var dom = $(jq)[0]

JQ对象 = $(DOM对象) var jq = $(DOM)

2二、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标签也不能解析

2三、事件的编程

在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) ：当表单提交时触发

2四、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对象

2五、事件的冒泡

所谓的事件的冒泡就是事件的响应就像水泡同样从底层的对象一层层上升至顶层对象,这个过程就叫作事件的冒泡

IE下冒泡的禁止：window.enent.cancelBubble = true;

W3C下冒泡的禁止: envent.stopPropagation();

默认行为的阻止：

IE: window.event.returnValue = false;

W3C: event.preventDefault();

2六、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才能为其定位

2七、jq的扩展机制

在实际的开发中,若是发现JQ中没有封装咱们须要到功能,咱们能够jq的插件机制来实现拓展 jQuery.fn.extend(object) 或 $.fn.extend(object) object参数要求是一个json对象

其谁调用内部的this就会指向谁

语法:

$.fn.extend({

fn1.function(){ this },

fn2.functon(){ this }

});

each的使用

jq对象的本质是一个DOM对象的集合,这个集合能够经过数组的形式进行表示，能够经过

each 对这个集合进行遍历

$().each(function(i,item){

i:每次遍历的时候会将索引元素的下标放置于i中

item:每次遍历的元素放置于item中,因为JQ就是一个DOM对象故item就是DOM对象

})

2八、JQ中的Ajax的使用

底层的实现

$.ajax({

type:’get/post’,

url:’localhost’,

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