版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
jQuery
第三章：基本语法、选择器
目录jQuery的基本语法jQuery对象与DOM对象的相互转换使用jQuery实现简单特效选择器基本选择器层次选择器属性选择器基本过滤选择器可见性过滤选择器jQuery简介jQuery由美国人JohnResig于2006年创建jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装jQuery能做什么访问和操作DOM元素控制页面样式对页面事件进行处理扩展新的jQuery插件与Ajax技术完美结合jQuery的优势体积小，压缩后只有100KB左右强大的选择器出色的DOM封装可靠的事件处理机制出色的浏览器兼容性使用隐式迭代简化编程丰富的插件支持jQuery库文件jQuery库分开发版和发布版在页面中引入jQuery名称大小说明jquery-1.版本号.js（开发版）约268KB完整无压缩版本，主要用于测试、学习和开发jquery-1.版本号.min.js（发布版）约91KB经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目<scriptsrc="js/jquery-1.8.3.js"type="text/javascript"></script>jQuery基本语法使用jQuery弹出提示框$(document).ready()与window.onload的区别<script>
$(document).ready(function(){alert("我欲奔赴沙场征战jQuery，势必攻克之！");});</script>为页面加载事件绑定方法window.onload$(document).ready()执行时机必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完编写个数同一页面不能同时编写多个同一页面能同时编写多个DOM模型浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构以对象描述文档的方式就是DOM节点对象就被称为DOM对象节点类型元素节点：文档中的所有元素<h2>……</h2>
文本节点：元素节点内的文本内容<p>你最喜欢的食品是？</p>
属性节点：元素节点的子节点<ptitle="提示">……</p>
DOM对象和jQuery对象DOM对象：直接使用JavaScript获取的节点对象
jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法varobjDOM=document.getElementById("title");varobjHTML=objDOM.innerHTML;$("#title").html();等同于document.getElementById("title").innerHTML;jQuery语法结构语法工厂函数$()：将DOM对象转化为jQuery对象选择器selector：获取需要操作的DOM元素方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法“$”等同于“jQuery”$(selector).action()
;
$(document).ready()=jQuery(document).ready()$(function(){...})=jQuery(function(){...})
jQuery语法结构-示例<styletype="text/css">li{list-style:none;line-height:22px;cursor:pointer;}.current{background:#6cf;font-weight:bold;color:#fff;}</style><scriptsrc="js/jquery-1.8.3.js"type="text/javascript"></script><scripttype="text/javascript">$(document).ready(function(){ $("li").click(function(){ $("#current").addClass("current"); });});</script></head><body> <ul> <liid="current">jQuery简介</li> <li>jQuery语法</li> </ul></body>为元素添加类样式常用语法举例css("属性","属性值")为元素设置CSS样式的值addClass()为元素添加类样式next()获得元素其后紧邻的同辈元素$(document).ready(function(){$("h2").click(function(){ $("h2").css("background-color","#CCFFFF").next().css("display","block"); });});</script><h2>什么是受益人?</h2><p> <strong>解答：</strong>
受益人是指人身保险中由被保险人或者…..</p>练习-制作帮助中心问答特效需求说明点击标题后，显示回答的内容，同时标题加上背景色DOM对象转jQuery对象使用$()函数进行转化：$(DOM对象)注意vartxtName=document.getElementById("txtName");//DOM对象var$txtName=$(txtName);//jQuery对象jQuery对象命名一般约定以$开头在事件中经常使用$(this)，this是触发该事件的对象jQuery对象转DOM对象jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象通过get(index)方法得到相应的DOM对象var$txtName=$("#txtName");//jQuery对象vartxtName=$txtName[0];//DOM对象var$txtName=$("#txtName");//jQuery对象vartxtName=$txtName.get(0);//DOM对象$(document).ready(function(){ varh1=document.getElementById("title"); var$h1=$(h1); $h1.click(function(){ alert('非常满意'); });});....<h1id='title'>请为我们的服务做出评价</h1>jQuery选择器jQuery选择器类似于CSS选择器，用来选取网页中的元素获取并设置网页中所有<h3>元素的背景“h3”为选择器语法，必须放在$()中$(“h3”)返回jQuery对象css()是为jQuery对象设置样式的方法$("h3").css("background","#09F");jQuery选择器分类jQuery选择器功能强大，分类如下类CSS选择器基本选择器层次选择器属性选择器过滤选择器基本过滤选择器可见性过滤选择器基本选择器基本选择器标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器名称语法构成描述示例标签选择器element根据给定的标签名匹配元素$("h2"
)选取所有h2元素类选择器.class根据给定的class匹配元素$(".title")选取所有class为title的元素ID选择器#id根据给定的id匹配元素$("#title")选取id为title的元素并集选择器selector1,selector2,...,selectorN将每一个选择器匹配的元素合并后一起返回$("div,p,.title"
)选取所有div、p和拥有class为title的元素交集选择器element.class或element#id匹配指定class或id的某元素或元素集合$("h2.title")选取所有拥有class为title的h2元素全局选择器*匹配所有元素$("*"
)选取所有元素基本选择器<divid="box">id为box的div<h2class="title">class为title的h2</h2><h3class="title">class为title的h3</h3><h3>热门排行</h3><dl> <dt><imgsrc="images/case_1.gif/></dt> <ddclass="title">斗地主</dd> <dd>休闲游戏</dd> <dd>QQ斗地主是国内同时在线人......</dd></dl></div>$(function(){$("h2").click(function(){ $("h3").css("background-color","#09F");
//$(".title").css("background","#09F"); //$("#box").css("background","#09F"); //$("h2,dt,.title").css("background","#09F");//并集选择器 //$("h3.title").css("background","#09F");//交集选择器 //$("*").css("color","red");//全局选择器});});所有class为title的<h3>元素层次选择器层次选择器通过DOM元素之间的层次关系来获取元素名称语法构成描述示例后代选择器ancestordescendant选取ancestor元素里的所有descendant（后代）元素$("#menuspan"
)选取#menu下的<span>元素子选择器parent>child选取parent元素下的child（子）元素$("#menu>span"
)选取#menu的子元素<span>相邻元素选择器prev+next选取紧邻prev元素之后的next元素$("h2+dl"
)选取紧邻<h2>元素之后的同辈元素<dl>同辈元素选择器prev~sibings选取prev元素之后的所有siblings元素$("h2~dl"
)选取<h2>元素之后所有的同辈元素<dl>层次选择器<divid="menu"><h2>全部旅游产品分类</h2> <dl> <dt>北京周边旅游<span>特价</span></dt> <dd><ahref="#">按天数</a><ahref="#">海边旅游</a><ahref="#">草原</a></dd> </dl> <dl> <dt>景点门票</dt> <dd><ahref="#">名胜</a><ahref="#">暑期</a><ahref="#">乐园</a></dd> <dd><ahref="#">山水</a><ahref="#">双休</a></dd> </dl> <span>更多分类</span></div>样式与jQuery代码层次选择器<styletype="text/css">*{margin:0;padding:0;line-height:30px;}#menu{border:2pxsolid#03C;padding:10px;}a{text-decoration:none;margin-right:5px;}span{font-weight:bold;padding:3px;}h2{margin:10px0;}</style>$(function(){ $("h2").click(function(){ $("#menuspan").css("background-color","#09F");
//$("#menu>span").css("background-color","#09F"); //$("h2+dl").css("background-color","#09F"); //$("h2~dl").css("background-color","#09F"); });});属性选择器属性选择器通过HTML元素的属性来选择元素名称语法构成描述示例属性选择器[attribute]选取包含给定属性的元素$("[href]"
)选取含有href属性的元素[attribute=value]选取等于给定属性是某个特定值的元素$("[href='#']"
)选取href属性值为“#”的元素[attribute
!=value]选取不等于给定属性是某个特定值的元素$("[href
!='#']"
)选取href属性值不为“#”的元素[attribute^=value]选取给定属性是以某些特定值开始的元素$("[href^='en']"
)选取href属性值以en开头的元素[attribute$=value]选取给定属性是以某些特定值结尾的元素$("[href$='.jpg']"
)选取href属性值以.jpg结尾的元素[attribute*=value]选取给定属性是以包含某些值的元素$("[href*='txt']"
)选取href属性值中含有txt的元素[selector][selector2][selectorN]选取满足多个条件的复合属性的元素$("li[id][title=新闻要点]"
)选取含有id属性和title属性为新闻要点的<li>元素属性选择器<divid="box"><h2class="odds"title="cartoonlist">动画列表</h2> <ul> <liclass="odds"title="kn_jp">名侦探柯南</li> <liclass="evens"title="hy_jp">火影忍者</li> <liclass="odds"title="ss_jp">死神</li> <liclass="evens"title="yj_jp">妖精的尾巴</li> <liclass="odds"title="yh_jp">银魂</li> <liclass="evens"title="hm_da">黑猫警长</li> <liclass="odds"title="xl_ds">仙履奇缘</li> </ul></div>#box{background-color:#FFF;border:2pxsolid#000;padding:5px;}属性选择器$(function(){$("h2").click(function(){$(“h2[title]”).css(“background-color”,“#09F”);//含有title属性的<h2>元素
//$("[class=odds]").css("background-color","#09F");//class属性的值为odds
//的元素
//$(“[id!=box]”).css(“background-color”,“#09F”);//id属性的值不为box的元素
//$(“[title^=h]”).css(“background-color”,“#09F”);//title属性的值中以h开头的元素
//$("[title$=jp]").css("background-color","#09F");//title属性的值中以jp结尾的元素
//$("[title*=s]").css("background-color","#09F");//title属性的值中含有s的元素
//$("li[class][title*=y]").css("background-color","#09F");//包含class属性，//且title属性的值中含有y的<li>元素
});});属性选择器也支持属性值的模糊匹配过滤选择器过滤选择器通过特定的过滤规则来筛选元素语法特点是使用“:”，如使用$(“li:first”)来选取第一个li元素主要分类如下：基本过滤选择器可见性过滤选择器表单对象过滤选择器在后面课程中讲解基本过滤选择器基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素名称语法构成描述示例基本过滤选择器:first选取第一个元素$("li:first"
)选取所有<li>元素中的第一个<li>元素:last选取最后一个元素$("li:last"
)选取所有<li>元素中的最后一个<li>元素:even选取索引是偶数的所有元素（index从0开始）$("li:even"
)选取索引是偶数的所有<li>元素:odd选取索引是奇数的所有元素（index从0开始）$("li:odd"
)选取索引是奇数的所有<li>元素基本过滤选择器基本过滤选择器可以根据索引的值选取元素名称语法构成描述示例基本过滤选择器:eq(index)选取索引等于index的元素（index从0开始）$("li:eq(1)"
)选取索引等于1的<li>元素:gt(index)选取索引大于index的元素（index从0开始）$("li:gt(1)"
)选取索引大于1的<li>元素（注：大于1，不包括1）:lt(index)选取索引小于index的元素（index从0开始）$(“li:lt(1)”
)选取索引小于1的<li>元素（注：小于1，不包括1）基本过滤选择器基本过滤选择器还支持一些特殊的选择方式名称语法构成描述示例基本过滤选择器:not(selector)选取去除所有与给定选择器匹配的元素$("li:not(.three)"
)选取class不是three的元素:header选取所有标题元素，如h1~h6$(":header"
)选取网页中所有标题元素:focus选取当前获取焦点的元素$(":focus"
)选取当前获取焦点的元素基本过滤选择器$(function(){$("h2").click(function(){ $("li:first").css("background-color","#09F");//第1个<li>元素
//$("li:last").css("background-color","#09F");//最后一个<li>元素
//$("li:not(.three)").css("background-color","#09F");//class不为three的<li>元素
//$("li:even").css("background-color","#09F");//索引值为偶数的<li>元素
//$("li:odd").css("background-color","#09F");//索引值为奇数的<li>元素
//$("li:eq(1)").css("background-color","#09F");//索引值等于1的<li>元素
//$("li:gt(1)").css("background-color","#09F");//索引值大于1的<li>元素
//$("li:lt(1)").css("background-color","#09F");//索引值小于1的<li>元素
//$(“:header”).css(“background-color”,“#09F”);//所有标题元素
//$(":focus").css("background-color","#09F");//当前获取焦点的元素
});});基本过滤选择器示例可见
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 锅炉招标投标合同
- 房屋买卖合同样式分享
- 变压器招标文件与合同的条款解读
- 钢管架施工要点
- 数码打印机购买合同
- 实习生与单位间的实习协议
- 电梯维修养护招标
- 专业法律培训合同
- 招标文件的组成要素详解与分析
- 茶楼茶叶品牌授权合同
- 注册资本金代缴协议书范本
- 机加车间工作思路
- 国家自然科学基金项目申报建议
- 三中全会专题研讨交流发言
- 2024-2030年中国抗菌肽行业市场发展分析及发展趋势与投资前景研究报告
- 《第11课 有序的世界》参考课件2
- 人教新课标一年级数学上册 5.5 《加减混合》说课稿
- 2024至2030年中国非开挖工程行业市场发展监测及投资潜力预测报告
- 常用血管活性药物应用课件
- 第1项-中核集团高处作业安全指导手册
- DL-T 438-2023 火力发电厂金属技术监督规程
评论
0/150
提交评论