- 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等
注意:
Ajax中的全局事件GET方式不适合传递数据量较大的数据
GET方式请求的历史信息会在浏览器的缓存中,有一定的安全风险
ajaxStart和ajaxStop这两个全局事件的使用频率非常高。前者是当请求开始执行时触发,往往用于编写一些准备性的工作,如提示“正在获取数据...”字样;后者是当请求结束时触发,在这一事件中,常常与前者配合,说明请求的最后进展状态,如将显示中的“正在获取数据...”字样修改为“成功获取数据...”字样,然后渐渐消失。
jQuery中调用JSON和XML数据
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。
替换内容
巧用jQuery中的事件strObject.replace(regexp/substr,newstr):在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子字符串
$(selector).replaceAll(content):用指定的HTML内容或元素替换被选元素
jQuery性能优化常用策略: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
避免过度使用jQuery对象据预算新版本的1秒内执行的次数是旧版本的10几倍,可以明显看出新版本框架在性能上的优势。
优化DOM元素的操作在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代码段