文档介绍：
学习 web 前端必备的 jQuery11 个技巧 web 前端主要包括 html 、 css 、 JavaScript 以及 jQuery 四大板块,而 jQuery 更是 web 前端的重点难点,学习 web 前端必备的 jQuery11 个技巧,希望可以帮助大家学习好 jQuery 。技巧一、关于页面元素的引用通过 jquery 的$ 引用元素包括通过 id、 class 、元素名以及元素的层级关系及 dom 或者 xpath 条件等方法, 且返回的对象为 jquery 对象( 集合对象), 不能直接调用 dom 定义的方法。技巧二、如何获取 jQuery 集合的某一项对于获取的元素集合, 获取其中的某一项( 通过索引指定) 可以使用 eq或 get(n) 方法或者索引号获取,要注意, eq 返回的是 jquery 对象,而 get(n) 和索引返回的是 dom 元素对象。对于 jquery 对象只能使用 jquery 的方法,而 dom 对象只能使用 dom 的方法, 如要获取第三个元素的内容。有如下两种方法: $("div").eq(2).html; // 调用 jquery 对象的方法$("div").get(2).innerHTML; // 调用 dom 的方法属***三、同一函数实现 set 和 get Jquery 中的很多方法都是如此,主要包括如下几个: $("#msg").html; // 返回 id为 msg 的元素节点的 html 内容。$("#msg").html("new content"); //将“ new content ”作为 html 串写入 id为 msg 的元素节点内容中, 页面显示粗体的 new content $("#msg").text; // 返回 id为 msg 的元素节点的文本内容。$("#msg").text("new content"); //将“ new content ”作为普通文本串写入 id为 msg 的元素节点内容中, 页面显示 new content $("#msg").height; // 返回 id为 msg 的元素的高度$("#msg").height("300"); //将 id为 msg 的元素的高度设为 300 $("#msg").width; // 返回 id为 msg 的元素的宽度$("#msg").width("300"); //将 id为 msg 的元素的宽度设为 300 $("input").val("); // 返回表单输入框的 value 值$("input").val("test"); // 将表单输入框的 value 值设为 test $("#msg").click; // 触发 id为 msg 的元素的单击事件$("#msg").click(fn); //为 id为 msg 的元素单击事件添加函数同样 blur,focus,select,submit 事件都可以有着两种调用方法技巧四、 jQuery 对象与 dom 对象的转换只有 jquer y 对象才能使用 jquer y 定义的方法。注意 do m 对象和 jquer y 对象是有区别的, 调用方法时要注意操作的是 dom 对象还是 jquery 对象。普通的 dom 对象一般可以通过$ 转换成 jquery 对象。如: $(document.getElementById("msg")) 则为 jquery 对象,可以使用 jquery 的方法。由于 jquery 对象本身是一个集合。所以如果 jquery 对象要转换为 dom 对象则必须取出其中的某一项,一般可通过索引取出。如: $("#msg")[0] , $("div").eq(1)[0] , $("div").get[1] , $("td")[5] 这些都是 dom 对象, 可以使用 dom 中的方法,但不能再使用 Jquery 的方法。以下几种写法都是正确的: $("#msg").html; $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 技巧五、集合处理功能$.extend({ min: function(a, b){return a< b?a:b; }, max: function(a, b){return a> b?a:b; } }); //为 jquery 扩展了 min,max 两个方法使用扩展的方法( 通过“$. 方法名”调用): alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20)); 技巧六、支持方法的连写所谓连写,即可以对一个 jquery 对象连续调用各种不同的方法。例如: $("p").click(function{alert($(this).html)}) .mouseover(function{alert('mouse over event')}) .each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]}); 技巧七、完善的事件处理功能 Jquery 已经为我们提供了各种事件处理方法,我们无需在 html 元素上直接写事件,而可以直接为通过 jquery 获取的对象添加事件。如: $("#msg").click(function{alert("good")}) // 为元素添加了单击事件$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]}) // 为三个不同的 p 元素单击事件分别设定不同的处理 jQuery 中几个自定义的事件: (1)hover(fn1,fn2) :一个模仿悬停事件( 鼠标移动到一个对象上面及移出这个对象) 的方法。当鼠标移动到一个匹配的元素上面时, 会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。// 当鼠标放在表格的某行上时将 class 置为 over ,离开时置为 out 。$("tr").hover(function{ $(this).addClass("over"); }, function{ $(this).addClass("out"); }); (2)ready(fn): 当 DOM 载入就绪可以查询及操纵时绑定一个要执行的函数。$(document).ready(function{alert("Load ess")}) // 页面加载完毕提示“ Load ess ”, 相当于 onload 事件。与$(fn) 等价(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素, 则触发指定的第一个函数, 当再次点击同一元素时, 则触发指定的第二个函数。随后的每次点击都重复对这两个函数的

12>