本文共 6339 字，大约阅读时间需要 21 分钟。

• 1、jQuery常用插件

• 2、jQuery基础知识点----jQuery选择器、元素属性操作

jQuery代码风格：

1. $(document).ready(function(){})可简写为$(function(){})其在页面框架下载完毕后就执行;而window.οnlοad=function(){}必须在页面全部加在完毕（包含图片下载）后才能执行。很明显前者的执行效率高于后者。

2. 在jQuery选择器定位页面元素时，无须考虑定位元素在页面中是否存在，即使不存在，浏览器也不会报错！

jQuery事件

事件在触发后分为两个阶段，一个是捕获（Capture），另一个则是冒泡（Bubbling）但遗憾的是，大多数浏览器并不支持捕获阶段，jQuery也不支持。

1.所谓的冒泡其实实质就是事件执行中的顺序。防止冒泡的发生：除了使用stopPropagation()方法阻止事件的冒泡过程外，还可以通过语句return false实现停止事件的冒泡过程。

2. 在jQuery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度。遇到执行ready()方法时，通过查看isReady值是否被设置，如果未被设置，那么就说明页面并未加载完成，在此情况下，将未完成的部分用一个数组缓存起来，待ready()方法加载完成后，再将未完成的部分通过缓存一一执行。PS：ready()其在页面框架下载完毕后就执行

jQuery实用工具类

在jQuery中，实用工具是指直接依附于jQuery对象，针对jQuery对象本身定义的方法，即全局性的函数。可分为几大类别：浏览器的检测、数组和对象的操作、字符串操作、测试操作、URL操作。调用方式：$.函数名() 或 jQuery.函数()

遍历数组：$.each(obj,fn(para1,para2))

其中，参数obj表示要遍历的数组或对象，fn为每个遍历元素执行的回调函数，该函数包含两个参数：para1表示数组的序号或对象的属性；para2表示数组的元素和对象的属性值。

筛选数组中的元素：$.grep(array,function(elementOfArray,indexInArray),[invert])

    其中，elementOfArray为数组中的元素；indexInArray为元素在数组中的序列号；invert=false不取反。

    例：$.grep(arrNum,function(ele,index){

return ele>5 && index<8;  //元素值大于5且序号小于8

    })

在数组中搜索某个元素，可以使用工具函数$.inArray()

 该方法相当于javascript中的indexOf()函数搜索字符串中的某个字符

 找到指定元素，返回对应索引号，否则返回-1。

    var arr = [2,9,2];

    $.inArray(2,arr);    //0

    $.inArray(2,arr,1);  //2

     $.inArray(2,arr,3);  //-1

$.proxy()在处理不同作用域对象事件时相当实用，其返回一个新的函数。

$.extend(target,obj1,...[obj2]) target表示合并后的对象。存在相同参数的名称，后面对象中的参数值将覆盖前面对象中的参数值

jQuery动画与特效

Ajax在jQuery中应用

Ajax(Asynchronous JavaScript and XML)，其核心是通过XMLHttpRequest对象，以一种异步的方式，向服务器发送数据请求，并通过该对象接收请求返回的数据，从而完成人机交互的数据操作。Ajax技术并不局限于Web动态页面，在普通的静态HTML页面中同样可以实现！

load(url,[data],[callback])方法实现Ajax功能

 load()方法可以很快地加载数据到页面中，但如需对获取的数据进行处理，必须在先插入页面中，然后才能进行，执行效率较低。

 例：$("#divTip").load("b.html"); //load()方法加载数据

getJSON(url,[data],[callback])函数获取数据

采用将要获取的数据集另存为一种轻量级的数据交换格式，即JSON文件格式

getScript(url,[data],[callback])函数获取js文件内容

 <script type="text/javascript" src="js/*.js"><scirpt>  //传统方式

 $("<script type="text/javascript" src="js/*.js" />").appendTo("head");  //传统方式

 例：$.getScript("UserInfo.js");//打开已获取返回数据的文件

 

get(url,[data],[callback],[type])实现异步获取xml文档数据，[type]：表示返回数据的格式，如HTML、XML、JS、JSON、TEXT等

注意：

GET方式不适合传递数据量较大的数据

GET方式请求的历史信息会在浏览器的缓存中，有一定的安全风险

ajaxStart和ajaxStop这两个全局事件的使用频率非常高。前者是当请求开始执行时触发，往往用于编写一些准备性的工作，如提示“正在获取数据...”字样；后者是当请求结束时触发，在这一事件中，常常与前者配合，说明请求的最后进展状态，如将显示中的“正在获取数据...”字样修改为“成功获取数据...”字样，然后渐渐消失。

JSON的结构包含两种：一种是name/value形式，另一种为数组格式。

var strInfo = "{'name':'ligang','age':24,'sex':'male'}";   //strInfo.name ==> undefined  

var objInfo = eval('('+strInfo+')');    //objInfo.name ==> "ligang" 

 

完整地解析一个XML格式的数据，有两种方式：一种方式是通过DOM文档模型进行解析，另一种方式是遍历各个标签的节点。

与传统的JavaScript调用XML相比，使用jQuery解析方便的多，其先使用$.ajax()方法请求并打开指定的XML文件，然后，在回调函数中获取返回的XML文件数据对象，使用find()、children()、text()方法获取各个标签下的元素并读取元素的值。

1. var arrGrade = new Array(980886, 980666);  

2. var strHTML = ""; //初始化保存内容变量  

3. $.ajax({  

4.     url: 'Xml/7-6.xml?',  

5.     dataType: 'xml',  

6.     success: function(data) {  

7.         $.each(arrGrade, function(i) {  

8.             var $strUser = $(data).find("User[grade=" + arrGrade[i] + "]");  

9.             strHTML += "<h3>年级：" + arrGrade[i] + "</h3>";  

10.             $strUser.each(function() {  

11.                 strHTML += "姓名：" + $(this).children("name").text() + "<br>";  

12.                 strHTML += "性别：" + $(this).children("sex").text() + "<br>";  

13.                 strHTML += "邮箱：" + $(this).children("email").text() + "<hr>";  

14.             });  

15.         });  

16.         $("#Tip").html(strHTML); //显示处理后的数据  

17.     }  

18. });  

1. <?xml version="1.0" encoding="utf-8" ?>  

2. <Info>  

3.   <User grade="980886">  

4.     <name>ligang</name>  

5.     <sex>男</sex>  

6.     <email>ligang@163.com</email>  

7.   </User>  

8.   <User grade="980886">  

9.     <name>leegang</name>  

10.     <sex>男</sex>  

11.     <email>leegang@163.com</email>  

12.   </User>  

13.   <User grade="980666">  

14.     <name>lg</name>  

15.     <sex>男</sex>  

16.     <email>lg@163.com</email>  

17.   </User>  

18. </Info>  

1. var $tip = $("#tip"); //1  

2. $tip.html("hello"); //2  

3.   

4. if($tip.html()){  //3  

5.     alert($tip.html());  

6. }  

7.   

8. if($tip.length>0){  //4  

9.     alert($tip.html());  

10. }  

使用html()方法不仅可以检测元素是否存在，还可以查看元素中是否包含内容；而length属性仅是判断元素是否在页面中存在，而不检测其内容。因此，将上述事例2代码注释后，3将返回false，而4返回true。

 

替换内容

strObject.replace(regexp/substr,newstr)：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子字符串

$(selector).replaceAll(content)：用指定的HTML内容或元素替换被选元素

1. 禁止页面的右键菜单，只需要在页面的“contextmenu”事件中返回false即可。除此之外，由于在该事件中，还可以传递一个“e”对象，进行检测用户按键情况。

2. 限制文本输入框中字符数量

1. $("textArea").maxLength(140,"divMaxNum");  

2. /*max：最大允许数据字符长度 

3.  *ele：显示还可输入字符数元素ID 

4.  *输入框的字符总数超出指定的长度后，则通过substring方法截取指定长度内的字符，从而实现限制文本输入框字符总数的功能 

5.  */  

6. jQuery.fn.maxLength = function(max,ele) {  

7.     this.each(function() {  

8.         var type = this.tagName.toLowerCase();  

9.         var inputType = this.type ? this.type.toLowerCase() : null;  

10.         if (type == "input" && inputType == "text" || inputType == "password") {  

11.             this.maxLength = max;  

12.         }  

13.         else if (type == "textarea") {  

14.             this.onkeypress = function(e) {  

15.                 var ev = e || event;  

16.                 var keyCode = ev.keyCode;  

17.                 return !(this.value.length >= max && (keyCode == 32 || keyCode == 13) && !ev.ctrlKey && !ev.altKey);  

18.             };  

19.             this.onkeyup = function() {  

20.                 if (this.value.length > max) {  

21.                     this.value = this.value.substring(0, max);  

22.                 }  

23.                 $("#"+ele).html(max - this.value.length);  

24.             };  

25.             this.onchange = this.onkeyup;  

26.         }  

27.     });  

28. };  

1. 优先使用ID与标记选择器

    在jQuery中，最快访问DOM元素的方式是通过元素ID号，其次是通过元素的标记。前者源于JavaScript中的document.getElementById()方法，而后者基于document.getElementsByTagName()方法。

2. 使用jQuery对象缓存

    所谓对象缓存，就是在jQuery对象时尽量使用变量先保存对象名，然后通过变量进行相应的方法操作。

1. var $objTmp = $("#divTip"); //先使用变量进行保存

2. $objTmp.bind();

3. $objTmp.css();

jQuery内部将自动调用浏览器的原生方法，执行速度依据各浏览器支持情况ID和元素标签选择器(各浏览器都支持)>元素类型选择器(各浏览器对应原生方法各不相同)>伪类型和属性选择器(没有对应的原生方法)$("#id") > $(".class") > $(":input")/$("div[title='A']")

建议尽量减少使用伪类型及属性选择器去定位页面元素，少量在遍历时使用选择器，从而提升页面执行速度，不断优化代码的性能。

 

使用最新版本的jQuery

据预算新版本的1秒内执行的次数是旧版本的10几倍，可以明显看出新版本框架在性能上的优势。

在jQuery中，用户每次使用选择器获取页面中的元素时，都会自动生成一个jQuery对象，该对象包括众多的属性和方法，而通过对象自身去调用这些方法时，资源消耗相对要大很多；为了减少这样的消耗，可以通过对象调用方法对应的函数。

1. var strname = "";  

2. var $name = $("#name");  

3. strname = $name.text();  //通过调用对象方法获取它的值  

4. strname = $.text($name); //通过调用jQuery函数获取它的值  

 

DOM元素操作的原理：先在内存中创建DOM结构，然后更新现有的DOM结构。

jQuery对象；通过jQuery语法包装原始的DOM对象后生成的新对象

在jQuery中，只需要调用jQuery中提供的[index]与get(index)方法；另外，DOM对象只要通过jQuery方法$()进行包装，就可以转换成jQuery对象。

 

jQuery库与其他库冲突解决方案

1. jQuery在其他库前面导入，可以直接使用jQuery符号处理相应的jQuery事物，无需调用jQuery.noConflict()函数

2. jQuery在其他库后面导入，需要引入jQuery.noConflict()函数，声明转让变量“$”的使用权

 

比较实用的jQuery代码段