第12讲jquery基础-强大的选择器1t12.pptx

北风网项目培训 第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