济南建网站价格消费品展,网站上的搜索怎么做,中国建设工程招聘信息网站,建设企业网站服务一、优化选择器执行速度 1. 优先使用ID选择器和标记选择器 使用选择器时应该首选ID选择器($(#id))#xff0c;其次是标记选择器#xff08;$(div)#xff09;#xff0c;最后再选用class、属性等选择器。避免重复使用ID号修饰ID号#xff0c;例如…一、优化选择器执行速度 1. 优先使用ID选择器和标记选择器 使用选择器时应该首选ID选择器($(#id))其次是标记选择器$(div)最后再选用class、属性等选择器。避免重复使用ID号修饰ID号例如$(#div1 #div2)。也避免使用tagclass等修饰ID号例如$(.title #id)。使用属性选择器时尽量使用标记进行修饰。例如$(div[titleaa])。2. 使用jQuery对象缓存 如果多次操作同一个DOM元素可以将其存在全局变量中避免重复调用选择器。缓存JQuery的变量命名规则尽量以$开头。如果同一个DOM对象进行多个操作尽量使用链式写法。3. 给选择器一个上下文 格式$(expression,[context])expression是选择器表达式context是选择器查找的范围。这样会比在全局查找效率高一些。 实例 script typetext/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 typetext/javascript$( function() {var $objTmp0 $(.MyCls :hidden );//含有空格符.MyCls子元素中的隐藏元素var $objTmp1 $(.MyCls:hidden );//没有空格符.MyCls类名并且隐藏的元素var $objTest $(#div\\[test\\] );//选择器特殊符号})/script 三、解决jQuery库与其他库$冲突问题 使用jQuery.noConflict()转让$使用权然后只能使用jQuery变量访问jQuery对象。 1.jQuery库先于其他库导入 无需使用jQuery.noConflict()方法。只要使用jQuery方法时不要使用$符号而是使用jQuery符号就可以了。 2.jQuery库后于其他库导入 需要先使用jQury.noConflict()然后使用jQuery符号操作jQuery中的对象。如果仍然想使用简洁符号有两种方法 ①自定义其他符号用作快捷方式 var jjQuery.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());})}) 四、其他优化 尽量减少对DOM元素直接操作的次数。 script typetext/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 使用子查询优化选择器性能。五、区分DOM对象和jQuery对象 1.DOM对象和jQuery对象定义的区别 DOM对象通过传统js方法获取的DOM元素对象jQuery对象通过jQuery方法包装原始的DOM对象后生成的新对象。2.DOM对象和jQuery对象的转换 如果想使DOM对象和jQuery对象之间的方法相互调用需要先将对象进行类型转换。 DOM转jQueryDOM对象通过$()方法进行包装就可以转换为jQuery对象。jQuery转DOM通过get(index)或者[index]方法可以将jQuery对象转换为DOM对象。 script typetext/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 转载于:https://www.cnblogs.com/janes/p/3541455.html
