欢迎来到天天文库
浏览记录
ID:40949909
大小:104.50 KB
页数:21页
时间:2019-08-11
《详解jQuery选择器与dom对象区别与应用技术》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、详解jQuery选择器与dom对象区别与应用技术编写任何javascript程序我们要首先获得对象,jQuery选择器能彻底改变我们平时获取对象的方式,可以获取几乎任何语意的对象,比如“拥有title属性并且值中包含test的元素”,完成这些工作只需要编写一个jQuery选择器字符串。无论是在写程序还是看API文档,我们要时刻注意区分Dom对象和jQuery包装集。Dom对象概述在传统的javascript开发中,我们都是首先获取Dom对象,比如:vardiv=document.getElementById
2、("testDiv");vardivs=document.getElementsByTagName("div");我们经常使用document.getElementById方法根据id获取单个Dom对象,或者使用document.getElementsByTagName方法根据HTML标签名称获取Dom对象集合。另外在事件函数中,可以通过在方法函数中使用this引用事件触发对象(但是在多播事件函数中IE6存在问题),或者使用event对象的target(FF)或srcElement(IE6)获取到引发事件的Dom
3、对象。注意我们这里获取到的都是Dom对象,Dom对象也有不同的类型比如input、div、span等。Dom对象只有有限的属性和方法:jQuery包装集jQuery包装集可以说是Dom对象的扩充。在jQuery的世界中将所有的对象,无论是一个还是一组,都封装成一个jQuery包装集,比如获取包含一个元素的jQuery包装集:varjQueryObject=$("#testDiv");jQuery包装集都是作为一个对象一起调用的,jQuery包装集拥有丰富的属性和方法,这些都是jQuery特有的:Dom对象与jQu
4、ery对象的转换1)Dom转jQuery包装集如果要使用jQuery提供的函数,就要首先构造jQuery包装集。我们可以使用本文即将介绍的jQuery选择器直接构造jQuery包装集,比如:$("#testDiv");上面语句构造的包装集只含有一个id是testDiv的元素。或者我们已经获取了一个Dom元素,比如:vardiv=document.getElementById("testDiv");上面的代码中div是一个Dom元素,我们可以将Dom元素转换成jQuery包装集:vardomToJQueryObje
5、ct=$(div);2)jQuery包装集转Dom对象jQuery包装集是一个集合,所以我们可以通过索引器访问其中的某一个元素:vardomObject=$("#testDiv")[0];注意,通过索引器返回的不再是jQuery包装集,而是一个Dom对象!jQuery包装集的某些遍历方法,比如each()中,可以传递遍历函数,在遍历函数中的this也是Dom元素,比如:$("#testDiv").each(function(){alert(this)})如果我们要使用jQuery的方法操作Dom对象,怎么办?用上
6、面介绍过的转换方法即可:$("#testDiv").each(function(){$(this).html("修改内容")})知道了DOM对象与jQuery之间的区别,我们就可以这样在遍历中运用自如:varmydiv=$("div");for(vari=0;iDIV
7、SPAN
P
8、ss"jQuery代码:$(".myClass");结果:[divclass="myClass"
此文档下载收益归作者所有