- 浏览: 433272 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
springaop_springmvc:
apache lucene开源框架demo使用实例教程源代码下 ...
Java搜索工具——Lucene实例总结(一) -
chengang292214:
总结的不错
Web开发中的路径问题 -
liuyuanhui0301:
aka~
Java 归并排序(基于数组) -
IT人_:
不错
远程连接MySQL,防火墙阻止访问,解决办法 -
zhuchao_ko:
借鉴。
JNDI访问LDAP
1. 优化选择器的执行速度
- 优先使用ID与标记选择器
var eleName0=$(“#divTip”);
var eleName1=$(”div”);
var eleName2=$(”.myclass”);
ID选择器速度最快,但是应避免重复修饰:
var eleName0=$(“#divTip/.myclass/div #divShow”);//错误的修饰方式
如果通过元素的属性访问,应使用tag修饰 var eleName3=$(“div[title=’tmp’]”)
- 使用jQuery对象缓存
jQuery对象缓存,就是在使用jQuery对象时,先尽量使用变量保存对象名,然后通过变量名进行相应的方法操作。
$(“#divTip”).bind(“click”,function(){}) $(“#divTip”).css(“widht”:”20px”); 优化的代码如下: Var objTmp=$(“#divTip”); objTmp.bind(“click”,function(){}) objTmp.css(“widht”:”20px”);
定义全局变量:$符号命名,目的是用来避免与其他变量名冲突
window.$objPub={ $objTmp:$(“#divTip”) }
使用全局变量调用方式:$objPub. $objTmp.bind(“click”,function(){})
- 给选择器一个上下文
$(expression,[context]) 指定查找范围context效率低
例子:
$(function() { window.$objPub = { //在全局范围中,定义一个windows对象 $objTmp0: $("#div0", ".MyCls0"), $objTmp1: $("#div1") } TestFun(); }) function TestFun() { //自定义显示div内容的函数 $objPub.$objTmp0.html("Tmp0"); $objPub.$objTmp1.html("Tmp1"); } //HTML: <div class="MyCls0"> <div id="div0" class="MyCls" title="tmp0"></div> </div> <div class="MyCls1"> <div id="div1" class="MyCls" title="tmp1"></div> </div>
2. 处理选择器中的不规范元素标志
- 选择器含有特殊符号
<div id=”div#1[4]” class=”myclass”></div>
按$(”div#1[4]”)获取元素,不能成功获取,需要转义$(”div\\#1\\[4\\]”)
- 选择器中含有空格符号
3. 优化事件中的冒泡现象
4. 使用data()方法缓存数据
data()方法可以针对元素定义数据,在元素中存取数据。
- 取数据data([name])
- 设置数据 data(name,value)
- 移除数据 removeData(name)
在元素上存取移除数据
$(function() { $("p").data("tmpData"); //初始时 //显示初始化数据 $("#divTip").append($("p").data("tmpData") == null ? "初始时:null" : $("p").data("tmpData")); $("p").data("tmpData", "陶国荣") //设置 //显示设置后数据 $("#divTip").append("<br>赋值后:" + $("p").data("tmpData")); $("p").removeData("tmpData") //移除 //显示移除后数据 $("#divTip").append($("p").data("tmpData") == null ? "<br>移除时:null" : $("p").data("tmpData")); })
data()方法除了可以存储一般的数据外,还可以存储json格式的值:
$(function() { $("p").data("tmpData"); //初始时 //显示初始化数据 $("#divTip").append($("p").data("tmpData") == null ? "初始时:null" : $("p").data("tmpData")); $("p").data("tmpData", { name: "李建洲", sex: "女", score: "80" }); //设置 //显示设置后数据 $("#divTip").append("<br>赋值后:" + $("p").data("tmpData").name + "/" + $("p").data("tmpData").sex + "/" + $("p").data("tmpData").score); $("p").removeData("tmpData") //移除 //显示移除后数据 $("#divTip").append($("p").data("tmpData") == null ? "<br>移除时:null" : $("p").data("tmpData")); })
5. 解决jQuery库与其他库的冲突
6. 使用子查询优化选择器性能
例如:
$(function() { //var $divF = $("#divFrame");//保存最外层对象 //var $ulF = $divF.find(".ulFrame");//在外层对象中查找 //var $li0 = $ulF.find(".li0"); //var $spn = $li0.find("span");//在最近一层中查找 //var $li1 = $ulF.find(".li1"); $spn = $("div ul li span"); $li1 = $("div ul .li1"); var strTmp = "最终数据:" //初始化显示内容 strTmp += "<br>" + $spn.html(); //获取内容 strTmp += "<br>" + $li1.html(); //获取内容 $("#divTip").append(strTmp); //显示在页面中 })
$spn = $("div ul li span");$li1 = $("div ul .li1");可以获得同样的查询结果,但是它没有做缓存,性能较低。对于嵌套元素的查找,应尽量使用子查询访问元素。
7. 减少对DOM元素直接操作
DOM元素的操作原理:先在内存中创建DOM结构,然后更新现有的DOM结构。如果直接对DOM进行操作,效率低下。有必要在直接修改DOM前完善大部分DOM操作,最后通过一次直接操作,更新其DOM结构。
$(function() { //定义数组 var arrList = ["list0", "list1", "list2", "list3", "list4", "list5"]; var strList = ""; //初始化字符 $.each(arrList, function(index) { //遍历后累加数组元素 strList += ("<li>" + arrList[index] + "</li>"); }) //一次性完成DOM元素的增加 $("#ulFrame").append(strList); })
8. 正确区分DOM对象与jQuery对象
- DOM对象
:是指通过传统的Javascript方法获取的DOM元素对象,如:
var objDom=document.getElementById("#txtTmp");
var DomValue= objDom.value;
其中objDom保存的就是表单中的某个指定文本框对象,即DOM对象。变量DomValue获取了Id号为txtTmp的DOM对象的值。
- jQuery对象
:指的是通过jQuery语法包装原始的DOM对象后生成的新对象。只要是jQuery对象,就可以使用jQuery库中的所有方法与事件。
var $obj=$("#txtTmp");
var Domvalue=$obj.val();
变量$obj保存的就是表单中指定的文本框对象,由于被$()方法包装,该对象就是jQuery对象。DomValue变量保存通过jQuery中的val()方法获取的jQuery对象的值。
不能使用DOM对象调用jQuery对象的方法,例子:
var objDom=document.getElementById("#txtTmp");
var Domvalur=objDom.val();//这是错误的
同样,也不能使用jQuery对象调用DOM对象方法,例子:
var $obj=$("#txtTmp");
var DomValue=$obj.value;//这是错误的
- DOM对象与jQuery对象类型转换
Jquery对象转换为DOM对象:调用jQuery中提供的[index]与get(index)方法即可
DOM对象转换为jQuery对象:DOM对象通过jQuery方法$()进行包装即可
例子:
$(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.get(0); //调用JavaScript中的对象方法设置内容 objDom1.innerHTML = "jQuery对象转成DOM对象后设置的内容"; })
发表评论
-
How tomcat works
2011-10-30 10:01 10831. Tomcat 模型:connector--------- ... -
jQuery Cookie插件
2011-10-06 10:49 0back>> cookie插件可以很 ... -
jQuery form表单插件
2011-10-06 10:45 1015back>> http://www.cnbl ... -
jQuery验证插件
2011-10-06 10:40 1414back>> 使用示例: <!DOCTY ... -
jQuery中工具函数
2011-10-06 10:06 5242back>> 工具函数的一般格式如下:$.函数名 ... -
ajax在jQuery中的应用
2011-10-06 09:50 1822back>> 1. 加载异步数据 ... -
jQuery动画与特效
2011-10-05 15:26 2222back>> 1. 显示与隐 ... -
jQuery事件
2011-10-05 15:08 2627back>> 1. 事件机制 ... -
Jquery Dom操作
2011-10-05 14:44 1633back>> 1. 元素属性操作 ... -
jQuery选择器
2011-10-05 09:04 2728back>> 1. 表格各 ... -
jQuery权威指南
2011-10-05 08:58 835jQuery权威指南 1. jQuery入门 2. ... -
Jquery入门
2011-09-28 14:41 11861. Jquery基本功能 * 访问和操作D ... -
comet pushlet
2011-08-12 17:49 21751.http://www.ibm.com/developerw ... -
Ajax开发
2011-07-25 21:50 15641. netbeans 中文版改成英文版 在NetBea ... -
CSS+DIV
2011-06-28 16:02 1130精通CSS+DIV网页样式与布局 曾顺 人民邮电出 ... -
jquery
2011-06-09 08:08 997http://www.css888.com/ jQuer ... -
jsp乱码解决大全(转自csdn一高手)
2011-03-04 17:01 2208好文章, ... -
Unicode 控制字符
2011-03-03 11:44 3182<li> : &am ... -
URL中汉字乱码问题
2011-02-26 12:01 1596返回 Oak>> 服务器 ... -
分 页
2011-02-23 18:27 855返回Oak>> 1. 几种不同的分 ...
相关推荐
**jQuery性能优化** jQuery作为一款广泛使用的JavaScript库,极大地简化了网页中的DOM操作、事件处理、动画制作等任务。然而,随着网站复杂性的增加,优化jQuery代码以提高页面加载速度和用户体验变得至关重要。...
jquery性能优化高级技巧,下面主要从七个方面对jquery性能优化做介绍: 1.通过CDN(Content Delivery Network)引入jQuery库 2.减少DOM操作 3.适当使用原生JS 4.选择器优化 5.缓存jQuery对象 6.定义一个可以...
jQuery性能优化28条建议 一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些。找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来。我也做了一个jQuery性能优化的简明...
以下是一些关于jQuery性能优化的关键知识点,这些内容可能在"jQuery性能优化指南1.htm、jQuery性能优化指南2.htm、jQuery性能优化指南3.htm"中有所涉及。 1. **选择器优化**:jQuery的选择器是强大的,但过度使用...
### jQuery性能优化指南 在网页开发中,使用jQuery可以极大地简化HTML文档遍历、事件处理、动画等操作,但随着项目复杂度的增加,如何优化jQuery的使用,以提升页面性能变得至关重要。以下是对给定文件《jQuery性能...
在进行jQuery性能优化时,有几个关键点可以帮助提升代码运行效率,从而提高网页的加载速度和用户体验。以下是对这些优化策略的详细解释: 1. **总是从 ID 选择器开始继承**: ID选择器是最高效的,因为它直接对应...
在JavaScript的世界里,jQuery是一个广泛使用的库,它简化了DOM...通过阅读《jQuery性能优化指南(1).htm》和《jQuery性能优化指南(2).htm》,可以深入了解每个技巧的详细实践方法,进一步提升您的jQuery项目性能。
《jQuery性能优化手册》是一份指导开发者提升jQuery代码执行效率的重要文档。以下是对其中关键知识点的详细解释: 1. **始终从ID选择器开始继承**:由于JavaScript的`getElementById()`方法是直接针对ID查找元素,...
以下是根据提供的文件内容总结的38个jQuery性能优化建议: 1. **定义jQuery变量时使用var关键字**:确保变量作用域清晰,避免全局污染,提高代码可读性。 2. **合并变量声明**:当声明多个变量时,使用一个var...
《jQuery性能优化指南》系列文章主要探讨如何提升jQuery代码的执行效率,以达到更好的用户体验。在Web开发中,性能优化是关键,特别是对于用户交互频繁的网页应用,jQuery的高效运用能显著改善页面加载速度和响应...
jQuery性能优化是提升网页加载速度和用户体验的关键环节。在jQuery中,选择器的选取对性能影响显著。根据提供的文档,本文将详细介绍如何利用选择器优化jQuery的性能,并提供一些实用的建议。 首先,我们强调的是...
本文主要探讨了提高jQuery性能的一些优化技巧,这些技巧有助于提升网页的加载速度、交互流畅度和整体性能。 首先,提高性能的一个基本原则是缓存变量。这是因为DOM(文档对象模型)的遍历非常消耗资源,因此需要...