JQuery知识点总结

一、

1、JavaScript是Netscape公司开发的一种脚本语言（scripting language）.JavaScript的出现实现了网页和用户之间实时的，动态的和交互的关系，使网页包含更多活跃的元素和更加精彩的内容。

2、JQuery是一个由John Resig创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了的JavaScript开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发Ajax的操作。

3、JQuery的优势：轻量级、强大的选择器、出色的DOM操作的封装、可靠的事件处理机制、完善的Ajax、不污染顶级变量、出色的浏览器兼容性、链式操作方式、隐式迭代、行为层和结构层的分离、丰富的插件支持、完善的文档、开源

4、Window.onload与$(document).ready()区别：

Window.onload  执行时机：必须等待网页中所有的内容加载完毕后（包括图片）才能执行

编写个数：不能同时编写多个，否则覆盖

$(document).ready()

执行时机：网页中所有DOM结构绘制完毕后执行，可能DOM元素关联的东西并没有完全加载完。

编写个数：能同时编写多个

5、Jquery对象和DOM（Docuement Object Model）对象的转化

Jquery对象转换成DOM对象的2中方式：即[index]和get(index)

DOM对象转换成Jquery对象的方式：$(DOM对象)

6、解决JQuery和其他库的冲突

(1)、JQuery库在其他库之后导入

调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库。然后就可以将jQuery()函数作为jQuery对象的制造工厂。例如：

$(function () {

    jQuery.noConflict();//将变量$的控制权移交给其他库
    jQuery(function () {//使用jQuery
        jQuery("p").click(function () {
            alert("Hello World");
        });
    });
    $("pp").style.display = 'none';//其他javaScript使用$
});

此外，还有一种选择，如果想确保jQuery不会与其他库冲突，但又想自定义一个快捷方式，可以这样：

var $j =jQuery.noConflict();  //自定义个一个快捷方式

如果不想给jQuery自定义这些备用名称，还想使用$而不管其他库$()方法，同时又不想与其他库相冲突，可以有以下两种解决方式：

$(function () {

    jQuery.noConflict();//将变量$的控制权移交给其他库,例如prototype.js
    jQuery(function ($) {//使用jQuery设定页面加载时执行的函数
        $("p").click(function () {//在函数内部继续使用$()方法，此时$()是jquery方法
            alert("Hello World");
        });
    });
    $("pp").style.display = 'none';//$()方法是prototype.js方法
});

另一种方式，使用匿名方法：

$(function () {

    jQuery.noConflict();//将变量$的控制权移交给其他库,例如prototype.js
    (function ($) {//定义匿名函数并设置形参$
        $(function () {
            $("p").click(function () {//匿名函数内部的$均为jQuery
                alert("Hello World");
            });
        });
    })(jQuery);//执行匿名函数并传递实参jQuery
    $("pp").style.display = 'none';//其他javaScript使用$

(2)、JQuery库在其他库之前导入

如果jQuery库在其他库之前就导入了，那么可以直接使用”jQuery“来做一些jQuery的操作，同时，可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。

二、jQuery选择器

1、jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

基本选择器：通过元素id,class和标签名等来查找DOM元素。

层次选择器：后代元素，子元素，相邻元素和兄弟元素

$("ancestor descendant") 选取ancestor元素里所有descendant元素

$("parent>children") 选取parent元素下child子元素，父元素是parent的子元素children

$("pre + next")选取紧接在pre元素后的next元素

$("pre~siblings") 选取pre元素之后所有的siblings元素

过滤选择器：选择器都以(":")开头

:first

:last

:not(selector) 去除所有与给定选择器匹配的元素

:even  选取索引是偶数的所有元素，索引从0开始

:odd 选取索引是奇数的所有元素，索引从0开始

:eq(index) 选取索引等于index的元素（index从0开始）

:gt(index) 选取索引大于index的元素（index从0开始）

:lt(index) 选取索引小于index的元素（index从0开始）

:contains(text)

:empty

:has(selector)选取含有选择器所匹配的元素的元素

:hidden

:visible

属性过滤选择器：

[attribute]   选择拥有此属性的元素

[attribute=value] 选取属性的值为value的属性

[attribute!=value] 选取属性的值不等于value的属性

[attribute^=value]选取属性的值以value开头的属性

[attribute$=value]选取属性的值以value结尾的属性

[attribute*=value]选择属性的值包含value的属性

子元素过滤选择器：

:nth-child(index/even/odd/equation)  选取每个父元素下的第index个子元素或者奇数偶数（index从1开始算）

:first-child

:last-child

:only-child 如果某个元素是它父元素中唯一一个子元素，那么将会匹配。如果父元素中含有其他元素，则不会匹配。

表单对象属性过滤器：

:enabled

:disabled

:checked

:selected

表单选择器：

:input

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden

2、选择器中有特殊符号的注意事项，例如选择器中含有".", "#", "(", "]".....

example:

<div id="id#b"></div>

selector：

$('#id\\#b')   //转义特殊字符“#”

三、JQuery操作DOM元素

1、DOM操作的分类：

DOM Core 并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它。

JavaScript中的getElementById(),getElementByTagName(),getAttribute(),setAttribute()等方法，都是DOM COre的组成部分。

HTML- DOM只能用来处理Web文档， document.forms   element.src

CSS-DOM 主要作用是获取和设置style对象的各种属性。 element.style.color='red';

2、JQuery的DOM操作

attr() 查找属性结点,attr()方法的参数可以是一个，也可以是两个，当参数是一个时，则是要查询的属性的名字；参数是两个时，则是赋值操作。

创建元素节点：例如 (1)、创建两个<li>新元素 var elment1=$('<li title='newElement1'>new element1</li>');

var element2 =$('<li title='newElement2'>new element2</li>');

(2)、将这个两个新元素插入文档中 $('ul').append(element1);

$('ul').append(element2);

插入节点的其他方法：append(),appendTo(),prepend(),prependTo(), after(), insertAfter(), before(), insertBefore()

删除节点：remove()删除所有匹配的元素，传入的参数用于根据jQuery表达式筛选元素。

$('ul li:eq(1)').remove();//获取第二个li元素节点后，将它从网页中删除。当这个节点remove()之后，该节点所包含的所有后代节点将同时被删除，这个方法返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这个些元素。

remove()方法也可以通过传递参数来选择性地删除元素，例：$('ul li').remove('li[title!=newElement1]');

empty()方法并不是删除节点，而是清空节点，它将清空元素中所有后代节点。 $("ul li:eq(1)").empty();

复制节点：

$("ul li").click(function(){

$(this).clone().appendTo("ul");

});

复制节点后，被复制的新节点并不具有任何行为，如果需要新元素也具有复制功能(本例中是单击事件),可以在clone()方法中传递一个参数true。

$(this).clone(true).appendTo("ul");//它的含义是复制元素的同时复制元素中所绑定事件，因此该元素的副本也具有了单击事件的功能。

替换节点：

replaceWith()   replaceAll()

包裹节点：将某个节点用其他标记包裹起来，wrap()

$("strong").wrap("<b></b>");//用<b>标签把<strong>元素包裹起来。

wrapAll()方法：该方法会将所有匹配的元素用一个元素包裹，它不同于wrap()方法，wrap()方法是将所有元素进行单独的包裹。

wrapInner()方法：该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

属性操作：

attr()方法传递一个参数获取元素的属性，传递二个参数设置元素的属性。一次性设置多个属性，

例：$("p").attr({"title":"your title","name":"your name"});

removeAttr()删除元素属性

样式操作：

获取样式：$("p").attr("class");

设置样式：$("p").attr("class","class1 class2");//class1与class2并存

追加样式：addClass()

CSS中有以下两条规定：

(1)、如果给一个元素添加多个class值，那么就相当于合并了它们的样式。

(2)、如果有不同的class设定了同一样式属性，则后者覆盖前者。

移除样式：removeClass()

切换样式：toggleClass()

判断是否含有某个样式：hasClass(),如果有，则返回true，否则返回false.

例：$("p").hasClass("class1");

等价于

$("p").is(".class1");

设置和获取HTML 文本和值

html()用来读取和设置某个元素中的HTML内容。

text()

val()设置和获取元素的值，无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值，如果元素为多选，则返回一个包含所有选择的值的数组。

$(":checkbox").val(["check2","check3"]);//设置复选框选中

$(":radio").val(["radio2"]);//设置单选选中

focus()处理获得焦点时的事件。

blur()失去焦点时的事件。

children()方法只考虑子元素而不考虑任何后代元素。

next()取得匹配元素后面紧邻的同辈元素。

prev()取得匹配元素前面紧邻的同辈元素。

siblings()取得匹配元素前后所有的同辈元素。

closest() 用来取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则向上查找父元素，逐级向上直到匹配选择器的元素，如果什么也没找到则返回一个空的jQuery对象。

例：$(document).bind("click",function(e){

$(e.target).closest("li").css("color","red");

});

3、CSS-DOM操作

css();例：$("p").css({fontSize:"30px","backgroupColor":"#888888"});

Note:(1)、如果值是数字，将自动转化为像素值。

(2)、在css()方法中，如果属性中带有"-"符号，例如 font-size和backgroup-color属性，如果在设置这些属性的时候不带引号，那么就要用驼峰式写法，如上例。

offset()获取元素在当前视窗的相对偏移，返回一个top和left，它只对可见元素有效。

position()获取元素相对于最近要给postion样式属性设置relative或者absolute的祖父节点的相对偏移。

scrollTop()和scrollLeft()获取元素的滚动条距顶端和左端的距离。

四、jQuery中的事件和动画

1、事件绑定：bind()方法来对匹配元素进行特定事件的绑定，bind方法的调用格式：

bind(type,[,data],fn);

第一个参数是事件类型，第二个参数是可选参数，第三个参数是用来绑定的处理函数。

合成事件：

hover(enter,leave)

Note:CSS中有伪类选择符，例如：":hover"，当用户光标悬停在元素上时，会改变元素的外观。

hover()方法准确来说是替代jQuery中的bind("mouseenter")和bind("mouseleave")而不是替代bind("mouseout").

toggle()方法的语法结构：

toggle(fn1,fn2,....fnN);依次触发，直到最后一个，随后的每次单击都重复对这几个函数的轮番调用。

阻止事件冒泡：event.stopPropagation();

阻止事件的默认行为：event.preventDefault();

如果同时对事件对象停止冒泡和默认行为，可以在事件处理中返回false.这是对在事件对象上同时调用stopPropagation()方法和preventDefault()方法的一种简写方式。

event.stopPropagation();

event.preventDefault();

等同于： return false;

移除事件： unbind([type],[,data]);

第一个参数是事件类型，第二个参数是将要移除的函数

说明：(1)、如果没有参数，则删除所有绑定的事件。

(2)、如果提供了事件类型作为参数，则只删除该类型的绑定事件。

(3)、如果把绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

例：

$(function(){

$('#btn').one("click",myFun1 =function(){

$("test").append("<p>This is my first method</p>");

}).one("click",myFun2 =function(){

$("test").append("<p>This is my second method</p>");

})

});

$('#delTwo').click(function(){$('#btn').unbind("click",myFun2)});//单独删除第二个事件。

One()方法的结构与bind()方法类似，使用方法也与bind()方法相同。使用one()方法为button元素绑定点击事件后，只在用户第一次点击按钮时，处理函数才执行，之后的单击毫无作用。

模拟操作：

模拟当用户进入页面后就触发click事件：$("#btn").trigger("click");

$("#btn").click();

触发自定义事件：$("#btn").trigger("myclick");//myclick 是自定义的click name。

传递数据：trigger(type,[,data])方法有两个参数，第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据，以数组形式传递，通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发。

$("#btn").bind("myclick",function(event,message1,message2){//获取数据

$("#test").append("<p>"+message1+message2+"</p>");

});

$("#btn").trigger("myclick",["testmessage1","testmessage2"]);   //传递两个数据

执行默认行为：

trigger()方法触发事件后，会执行浏览器默认操作，例如：$("input").trigger("focus");

以上代码不仅会触发为<input>元素绑定focus事件，也会使<input>元素本身得到焦点（这是浏览器的默认操作）。

如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法---triggerHanlder()方法。

2、jQuery中的动画

show();参数包括slow:600ms; normal:400ms; fast:200ms;还可以指定数字，单位是毫秒

fadeIn()和fadeOut()方法只改变元素的不透明度，而不改变其高度和宽度。

slideUp()方法和slideDown()方法只改变元素的高度。

自定义动画方法animate();

语法结构：animate(params, speed, callback);

params: 一个包含样式属性及值的映射，比如{property1:"value1",property2;"value2",...}

speed:速度参数，可选

callback：在动画完成时执行的函数，可选。

例：$(function(){

$("#p").css("opacity","0.5");//设置透明度

$("#p").click(function(){

$(this).animate({left:"400px",height:"200px",opacity:'1'},3000)

.animate({top:"200px",width:"200px"},3000,function(){

$(this).css("border","5px solid blue");

});

});

});

停止元素的动画

stop(); 语法结构为：stop([clearQueue][,gotoEnd]);

参数clearQueue和gotoEnd都是可选的参数，为Boolean值（true或false）.clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。

判断元素是否处于动画状态

if(!$(element).is(":animated"))//判断元素是否处于动画状态

{

}

五、JQuery对表单，表格的操作及更多应用

1、表单的组成：

表单标签：包含处理表单数据所应用的服务器端程序URL以及数据提交到服务器的方法。

表单域：文本框，密码框，隐藏域.....

表单按钮：包括提交按钮，复位按钮和一般按钮

阻止表单提交方法：return false;

var hasSelected =$(this).hasClass('selected');

$(this)[hasSelected?"removeClass":"addClass"]('selected');//如果选中则移除selected类，否则就加上selected类

等价于：

$(this).removeClass('selected');

$(this).addClass('selected');

或者：

$(this)["removeClass"]('selected');

$(this)["addClass"]('selected');

六、jQuery与Ajax的应用

1、Ajax全称"Asynchronous JavaScript and XML"（异步JavaScript和XML）,并不是指一种单一的技术，而是有机地利用一系列交互式网页应用相关的技术所形成的结合体。它的出现，揭示了无刷新更新页面的新时代，并有替代传统的Web方式和通过隐藏的框架来进行异步提交的趋势，是Web开发应用的一个里程碑。

AJax优势：

(1)、不需要插件支持

(2)、优秀的用户体验

(3)、提高web程序的性能

传统模式中数据提交是通过表单（Form）来实现的，而数据获取全靠页面刷新来重新获取整页的内容，而Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据，即按需发送。

(4)、减轻服务器和带宽的负担

Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户与服务器响应异步化，它在客户端创建Ajax引擎，把传统方式下的一些服务器负担工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担。

2、jQuery方法：

load():语法结构 load(url [,data] [,callback])

url:请求HTML页面的URL地址

data（可选）： 发送至服务器的key/value数据

callback（可选）： 请求完成时的回调函数，无论请求成功或失败

(1)、筛选载入的HTML文档

load()方法的URL参数的语法结构为："url  selector".注意，URL和选择器之间有一个空格。

$("#p").load("test.html .para");//加载test.html页面中class为"para"的内容到id为p的元素上。

(2)、传递方式

load()方法的传递方式根据参数data来自动指定。如果没有参数，则采用GET方式传递；反之，则会自动转换为POST方式。

$("#p").load("test.html",function(){   });//无参数传递，则是GET方式

$("#p").load("test.html",{name:"name1",age:"100"},function(){  });//有参数则是POST方式

(3)、回调函数

对于必须在加载完成后才能继续的操作，load()方法提供了回调函数(callback)，该函数有3个参数，分别代表请求返回的内容，请求状态和XMLHttpRequest对象。

$("#p").load("test.html",function(responseText, textStatus, XMLHttpRequest){

});

//responseText：请求返回的内容

//textStatus：请求状态 success, error, notmodified, timeout4种

//XMLHttpRequest: XMLHttpRequest对象

$.get()方法和$.post()方法

load()方法通常用来从web服务器上获取静态的数据文件

$.get()方法使用GET方式来进行异步请求。

$.get(url [,data] [,callback] [,type]);

参数：

url：请求的HTML页的URL地址

data: 发送至服务器的key/value数据会作为QueryString附加到请求的URL中

callback: 载入成功时回调函数（只有当Response的返回状态是success才调用该方法）自动将请求结果和状态传递给该方法。

type:(可选) 服务器端返回内容的格式，包括 xml,html, script, json, text,和_default

$.get()方法的回调函数只有两个参数：

function(data, textStatus)

{

//data: 返回的内容，可以是XML文档，JSON文件，HTML片段等等

//textStatus:请求状态：success,error, notmodified, timeout4种

}

$.get()和$.post()区别：

GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。

GET方式对传输的数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大很多（理论上不受限制）。

GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就可以避免这些问题。

$.getScript()方法和$.getJson()方法

$.ajax()方法 ，结构：$.ajax(options)

url:发送请求的地址

type: 请求方式(POST或GET)

timeout: 设置请求超时时间（毫秒）

data: Object或String

dataType: 预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息返回resposeXML或responseText，并作为回调函数参数传递。

xml: 返回XML文档，可用jquery处理

html: 返回纯文本HTML信息，包含script标签会在插入DOM时执行

script:返回纯文本JavaScript代码，不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有POST请求都将转为GET请求。

json: 返回JSON数据

jsonp:JSONP格式

beforeSend: 发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义的HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest对象是唯一的参数。

complete:请求完成后调用的回调函数（请求成功或失败时均调用）。

参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

function(XMLHttpRequest， textStatus)

{

this;//调用本次Ajax请求时传递的options参数。

}

success: 请求成功后调用函数，有两个参数

function(data, textStatus)

{

//data 可能是xmlDoc，jsonObj，html，text等等

//this; 调用本次Ajax请求时传递的options参数

}

error：请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象，错误信息，捕获的错误对象

function(XMLHttpRequest, textStatus， errorThrown)

{

}

global: 默认是true，表示是否触发全局Ajax事件。设置为false将不会触发全局Ajax事件，AJaxStart或AJaxStop可用于控制各种Ajax事件。

七、JQuery plugin

1、引入jquery.validate.js实现验证与HTML元素属性无直接关联，而是通过name属性来关联和验证规则的验证写法，这种方法可以实现行为与结构的分离。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>
    <script type="text/javascript" src="js/CustomValidate.js"></script>
</head>
<body>
    <form class="cmxform" id="commentForm" method="get" action="">
        <fieldset>
            <legend>a simply example that validate the html validation</legend>
            <p>
                <label for="username">username</label><em>*</em>
                <input id="username" name="username" size="25" />
            </p>
            <p>
                <label for="emai">email</label><em>*</em>
                <input  id="email" name="email" size="25"/>
            </p>
            <p>
                <label for="url">website</label><em>*</em>
                <input id="url" name="url" size="25" value="" />
            </p>
            <p>
                <label for="comment">comment</label><em>*</em>
                <textarea id="comment" name="comment" cols="22"></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="submit" />
            </p>
        </fieldset>
    </form>
</body>
</html>

CustomValidate.js代码

$(function () {
    $("#commentForm").validate({
        rules: {
            username: {
                required: true,
                minlength:2
            },
            email: {
                required: true,
                email:true
            },
            url: "url",
            comment:"required"
        }
    });
});

2、jQuery表单插件--Form

jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易，无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法--ajaxForm()和ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进程的功能。

ajaxForm()方法和ajaxSubmit()方法的参数

ajaxForm()和ajaxSubmit()方法都能接受0个或者1个参数。当为单个的参数时，该参数既可以是一个回调函数，也可以是一个options对象。

定义一个options对象，设置参数：

var options={

target: '#output1', //把服务器返回的值放入id为output1的元素中

beforeSubmit:  showRequest, //提交前的回调函数

success: showResponse, //提交后的回调函数

url: url, //默认是form的action，如果声明，则会覆盖

type: type, //默认是form的method('get' or 'post'), 如果声明则会覆盖

dataType: null, //xml, script,or json 接收服务器端返回的类型

clearForm: true, //成功提交后，清除所有表单元素的值

resetForm: true, //成功提交后，重置所有表单元素的值

timeout:3000 //限制请求的时间，当请求大于3秒后，跳出请求

};

定义options对象后，就可以将这个options对象传递给ajaxForm()方法，jQuery代码如下：

$("#myForm").ajaxForm(options);

回调函数的参数：

function showRequest(formData,jqForm,options){

var queryString =$.param(formData);

return true;

}

第一个参数formData是数组对象。使用$.param()将它转化为字符串，得到如下格式 name=1&address=2

第二个参数jqForm是一个jQuery对象，它封装了表单的元素。

第三个参数是options对象。

function  showResponse(responseText, statusText)

{

}

3、jQuery.Cookie.js

写入Cookie

$.cookie('the_cookie', 'the_value', {path: '/', expires:10 });// the_cookie为待读取的Cookie名

读取Cookie

$.cookie('the_cookie');

删除Cookie

$.cookie('the_cookie',null);// 必须与之前设置相同的路径(path)和域名(domain)才可以正确删除Cookie。

其他可选参数：

$.cookie('the_cookie', 'the_value', {

expires:7, //(Number|date)有效期。可以设置一个整数作为有效期（单位：天），也可以直接设置一个日期对象作为Cookie的过期日期。如果指定日期为负数，例如：已经过去的日子，那么Cookie将被删除；如果不设置或者设置为null，那么此Cookie将作为Session Cookie处理，并且在浏览器关闭后删除。

path:'/', //（string）cookie的路径属性，默认是创建该Cookie的页面路径

domain: 'jquery.com' //domain(string) Cookie的域名属性，默认是创建该Cookie的页面域名。

secure: true （Boolean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如HTTPS。

});