1. 优先使用ID选择器和标记选择器
2. 使用jQuery对象缓存
3. 给选择器一个上下文
格式:$(expression,[context]),expression是选择器表达式,context是选择器查找的范围。这样会比在全局查找效率高一些。
实例:
<script type="text/javascript"> $( function() { window.$objPub = { //在全局范围中,定义一个windows对象 $objTmp0: $( "#div0", ".MyCls0" ), $objTmp1: $( "#div1") } TestFun(); }) function TestFun() { //自定义显示div内容的函数 $objPub.$objTmp0.html( "Tmp0").css("width" ,"100px"); $objPub.$objTmp1.html( "Tmp1"); } </script >
1. 选择器属性中包含特殊符号:特殊字符前添加转义字符\\。
2. 选择器中空格符:包含空格时表示祖先元素和后代元素的关系;不包含空格时表示一个选择器中两种筛选条件的合并。
<script type="text/javascript"> $( function() { var $objTmp0 = $(".MyCls :hidden" );//含有空格符,.MyCls子元素中的隐藏元素 var $objTmp1 = $(".MyCls:hidden" );//没有空格符,.MyCls类名并且隐藏的元素 var $objTest = $("#div\\[test\\]" );//选择器特殊符号 }) </script >
使用jQuery.noConflict()转让$使用权,然后只能使用jQuery变量访问jQuery对象。
1.jQuery库先于其他库导入
无需使用jQuery.noConflict()方法。只要使用jQuery方法时不要使用$符号而是使用jQuery符号就可以了。
2.jQuery库后于其他库导入
需要先使用jQury.noConflict(),然后使用jQuery符号操作jQuery中的对象。如果仍然想使用简洁符号,有两种方法
①自定义其他符号用作快捷方式:
var j=jQuery.noConflict(); j( function() { j( "#Button1").click(function () { 获取对象 var $objTmp = j("#txtName" ); 显示内容 j( "#divTmp").html("J_" + $objTmp.val()); }) })
②在jQuery方法内部继续使用$符号。
jQuery.noConflict(); jQuery( function($) { $( "#Button1").click(function () { //获取对象 var $objTmp = $("#txtName" ); //显示内容 $( "#divTmp").html("J_" + $objTmp.val()); }) })
<script type="text/javascript"> $( function() { //定义数组 var arrList = ["list0" , "list1", "list2", "list3" , "list4", "list5"]; var strList = "" ; //初始化字符 $.each(arrList, function(index) { //遍历后累加数组元素 strList += ( "<li>" + arrList[index] + "</li>" ); }) //一次性完成DOM元素的增加 $( "#ulFrame").append(strList); }) </script >
1.DOM对象和jQuery对象定义的区别
2.DOM对象和jQuery对象的转换
如果想使DOM对象和jQuery对象之间的方法相互调用,需要先将对象进行类型转换。
<script type="text/javascript"> $( function() { //***** DOM对象转成jQuery对象 *****// //DOM对象 var objDom0 = document.getElementById("div0"); //转成jQuery对象 var $obj0 = $(objDom0); //调用jQuery中的方法设置其中的内容 $obj0.html( "DOM对象转成jQuery对象后设置的内容" ); //***** jQuery对象转成DOM对象 *****// //jQuery对象 var $obj1 = $("#div1" ); //转成DOM对象 var objDom1 = $obj1[0];//或者$obj1.get(0); //调用JavaScript中的对象方法设置内容 objDom1.innerHTML = "jQuery对象转成DOM对象后设置的内容" ; }) </script >
原文:http://www.cnblogs.com/janes/p/3541455.html