- 1、本文档共20页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
北风网项目培训
第12讲:强大的jQuery选择器(1)
讲师:风舞烟
JavaScript-JQuery系列全程精通+图书馆管理系统实战
目录
什么是选择器?
选择器的作用
基本选择器
层次选择器
综合案例
什么是选择器?
jQuery选择器
其继承了CSS的风格,利用jQuery选择器可以快速 的定位和选择DOM元素,然后附加后继操作,而无需担心浏览器是否支持这一选择器,是学习jQuery的核心和基础.
了解一下CSS:
什么是选择器?
示例如下:
….
p id=“myp” class=“red”这是一个测试!/p
….
script
….
$(“.red”).html(“更改段落P”);
$(“#myp”).html(“更改段落P”);
….
/script
jQuery选择器的优势
1、简洁的写法
2、支持CSS1到CSS3的选择器
3、完善的排错处理机制
选择器的分类
基本选择器
层次选择器
过滤选择器
表单选择器
!-- 测试的元素 --
div class=one id=one
id为one,class为one的div
div class=miniclass为mini/div
/div
div class=one id=two title=test
id为two,class为one,title为test的div.
div class=mini title=otherclass为mini,title为other/div
div class=mini title=testclass为mini,title为test/div
/div
div class=one
div class=miniclass为mini/div
div class=miniclass为mini/div
div class=miniclass为mini/div
div class=mini/div
/div
div class=one
div class=miniclass为mini/div
div class=miniclass为mini/div
div class=miniclass为mini/div
div class=mini title=tesstclass为mini,title为tesst/div
/div
div style=display:none; class=nonestyle的display为none的div/div
div class=hideclass为hide的div/div
div
包含input的type为hidden的divinput type=hidden size=8/
/div
span id=mover正在执行动画的span元素./span
Style.css
div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
基本选择器
基本选择器是jQuery最常用的选择器,也是最简单的选择器,它通过id,class,标签名等来查找DOM元素,
基本说明见下表:
基本选择器示例
eg1:
//选择 id为 one 的元素
$(#btn1).click(function(){
$(#one).css(background,#bfa);
});
eg2:
//选择 class 为 mini 的所有元素
$(#btn2).click(function(){
$(.mini).css(background,#bfa);
});
eg3:
//选择 元素名是 div 的所有元素
$(#btn3).click(function(){
$(div).css(background,#bfa);
});
eg4:
//选择 所有的元素
$(#bt
您可能关注的文档
- 纤维增强混凝土项目可行性研究报告.pdf
- 杭州市2012年度教育科学规划课题107.pdf
- 在windows server2008r2中使用web方式修改ad域用户账户密码.pdf
- 4.22索引选项-页面范围与交叉引用.pdf
- 人教版初二上英语第17讲unit9词汇篇教师版.pdf
- 讲师授课用.内训课后测试试卷new test1ans.pdf
- 办公应用立体化教程(WPSOffice版)全套PPT课件.pptx
- 基于Swift语言的iOS App 商业实战教程-全套PPT课件.ppt
- 网店商品图片与视频拍摄及处理-全套PPT课件.pptx
- 电脑组装、维护、维修全能一本通(全彩版)全套PPT课件.pptx
文档评论(0)