下载提示
- 1.该资料是网友上传的，本站提供全文预览，预览什么样，下载就什么样。
- 2.下载该文档所得收入归上传者、原创者。
- 3.下载的文档，不会出现我们的网址水印。
文档列表
文档介绍
Jquery第一课
jQuery选择符
要对页面上的某个元素进行操作,首先要选中它,这就要用到选择符。选择符可以认为是一个增强版的getElementById方法。getElementById方法返回的是一个HTML元素,jQuery选择符返回的是HTML元素的一个包装。利用这个包装集,jQuery赋予了HTML元素更多的可以操作的方法。在JQuery中,处于核心地位的一个函数就是$。对,它就是一个函数,名字有点古怪。这个函数就是选择函数,其一般用法是
var obj=$(selector);
其中selector是一个字符串,就是下面要着重介绍的选择符。返回的是元素的包装集合。事实上,JQuery的核心$函数的威力远不止当作选择符来用,当它的参数是一个函数的时候,它的作用是类似onload事件,当页面的DOM元素完全加载后,它参数内的方法就会被执行。它比onload更有优势,onload只能注册1个函数,但是它可以多次被调用,也就是可以注册多个函数到DOM加载完全后执行,而且onload是要等页面上的所有内容都加载完毕后再执行的,如果有大图片等内容,可能造成函数执行延时。而$函数只要DOM结构完全加载就可以执行。下面看一个简单的例子
<html xmlns="9/xhtml"> <head> <title>JQuery First Page</title> <script type="text/javascript" src="jquery-"></script> <script type="text/javascript"> $(function(){ var p=$('#p1'); alert(p); }); </script> </head> <body> <p id="p1">I'm a p</p> </body> </html>
可以看到,最简单的选择器就是和getElementById类似的,利用元素的ID作为选择符。可以看看p到底是什么,
p是一个类似数组的对象,里面包含了被选中的元素。打开[Methods]结点可以看到很多方法,都是jQuery提供的方法。在这个例子中,元素只有一个,因此通过p[0]就能获得该HTML元素,p[0]就是和getElementById获得的对象是一样的。
jQuery选择符的强大之处在于它几乎完全兼容CSS2的选择符,而不管你的浏览器是否兼容CSS2。对于选择到的元素,可以给他施加很多方法,这些方法不是本文介绍的重点,这里先介绍一个,就是css(attr,value)方法,,我们可以以此区分出某个选择符到底选中了哪些元素。这个例子和我上一篇的例子的内容几乎是一样的,我就不加解释了,只是这篇的例子也都适用于IE6!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-"> <html xmlns="9/xhtml"> <head> <title>JQuery Selector</title> <script type="text/javascript" src="jquery-"></script> <script type="text/javascript"> $(function(){ $("h1,h2").css("color","Red"); //element selector $(".warning").css("font-style","italic"); //class selecotr $("").css("color","Red"); $("").css("font-size","x-large");//multi-class selector $("*[id]").css("color","red"); //attribute selector $("p[class]").css("color","blue"); $("p[class][id]").css("font-size","x-large"); $("div[title='title']").css("font-weight","bold"); $("div[title^='title']").css("color","red"); $("div[title$='World']").css("color","blue"); $("div[titl
jQuery选择符
要对页面上的某个元素进行操作,首先要选中它,这就要用到选择符。选择符可以认为是一个增强版的getElementById方法。getElementById方法返回的是一个HTML元素,jQuery选择符返回的是HTML元素的一个包装。利用这个包装集,jQuery赋予了HTML元素更多的可以操作的方法。在JQuery中,处于核心地位的一个函数就是$。对,它就是一个函数,名字有点古怪。这个函数就是选择函数,其一般用法是
var obj=$(selector);
其中selector是一个字符串,就是下面要着重介绍的选择符。返回的是元素的包装集合。事实上,JQuery的核心$函数的威力远不止当作选择符来用,当它的参数是一个函数的时候,它的作用是类似onload事件,当页面的DOM元素完全加载后,它参数内的方法就会被执行。它比onload更有优势,onload只能注册1个函数,但是它可以多次被调用,也就是可以注册多个函数到DOM加载完全后执行,而且onload是要等页面上的所有内容都加载完毕后再执行的,如果有大图片等内容,可能造成函数执行延时。而$函数只要DOM结构完全加载就可以执行。下面看一个简单的例子
<html xmlns="9/xhtml"> <head> <title>JQuery First Page</title> <script type="text/javascript" src="jquery-"></script> <script type="text/javascript"> $(function(){ var p=$('#p1'); alert(p); }); </script> </head> <body> <p id="p1">I'm a p</p> </body> </html>
可以看到,最简单的选择器就是和getElementById类似的,利用元素的ID作为选择符。可以看看p到底是什么,
p是一个类似数组的对象,里面包含了被选中的元素。打开[Methods]结点可以看到很多方法,都是jQuery提供的方法。在这个例子中,元素只有一个,因此通过p[0]就能获得该HTML元素,p[0]就是和getElementById获得的对象是一样的。
jQuery选择符的强大之处在于它几乎完全兼容CSS2的选择符,而不管你的浏览器是否兼容CSS2。对于选择到的元素,可以给他施加很多方法,这些方法不是本文介绍的重点,这里先介绍一个,就是css(attr,value)方法,,我们可以以此区分出某个选择符到底选中了哪些元素。这个例子和我上一篇的例子的内容几乎是一样的,我就不加解释了,只是这篇的例子也都适用于IE6!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-"> <html xmlns="9/xhtml"> <head> <title>JQuery Selector</title> <script type="text/javascript" src="jquery-"></script> <script type="text/javascript"> $(function(){ $("h1,h2").css("color","Red"); //element selector $(".warning").css("font-style","italic"); //class selecotr $("").css("color","Red"); $("").css("font-size","x-large");//multi-class selector $("*[id]").css("color","red"); //attribute selector $("p[class]").css("color","blue"); $("p[class][id]").css("font-size","x-large"); $("div[title='title']").css("font-weight","bold"); $("div[title^='title']").css("color","red"); $("div[title$='World']").css("color","blue"); $("div[titl
Jquery第一课 jQuery选择符 来自淘豆网www.taodocs.com转载请标明出处.
猜你喜欢
- 2024年师徒结对心得体会 34页
- 肝硬化常见并发症的治疗课件 21页
- 基于应力集中结构的麦克风设计的开题报告 2页
- 基于平衡计分卡的我国企业社会责任评价体系的.. 2页
- 2024年市场营销毕业的实习总结 34页
- 2024年市场营销实习报告(15篇) 83页
- 2024年市场营销专业简历自我评价通用 9页
- 基于学术搜索的论文推荐系统的开题报告 2页
- 2024年工程项目审计报告 10页
- 基于多元样条的三维曲面重构的开题报告 2页
- 基于基础不均匀变形的框架结构承载性状的试验.. 2页
- 经络学说与中药经絡辨证 32页
- 基于图像处理的矿用电机车行人预警系统中期报.. 2页
- 基于国内外经验的中国企业跨文化管理研究的开.. 2页
- 老年高血压治疗对策 96页
相关文档 更多>>
非法内容举报中心
相关标签
最近更新
- 感恩母爱的优秀演讲稿（35篇）
- 2024年年终总结 个人年终总结 年终总结模板..
- 水粉-大字体PPT课件
- 大学生创新创业教育研究——以河北省为例的..
- 扶贫座谈会主持词开场白模板（31篇）
- 拍卖会主持词开场白
- 收房委托书（28篇）
- 多边环形宽带频率选择表面的研究中期报告
- 多蛋白质生物界面的构建及其电化学生物传感..
- 有关保护环境演讲稿600字（33篇）
- 多孔结构In2O3的制备及气敏性能研究的开题报..
- 正常足月儿和早产PPT课件
- 初中物理光学作图题练习
- 江苏省常州市钟楼实验中学七年级英语下册 U..
- 接单员制度
- 铝酸盐水泥水化机理
- 学校党风廉政建设一岗双责工作新版制度
- 浅谈马蜂窝的处置学习教案
- 梯形、矩形渠道水力计算表
- 稀土矿工业品味与质量标准模板
- 明人星案研究(库古合一)
- 罗织经Kindle
- 蒋纬国眼里的“国共战争”.pdf