- jQuery即学即用
- 王志刚编著
- 653字
- 2020-08-27 04:35:56
第2部分 jQuery的基础应用
jQuery库中提供了很多的方法,本部分将介绍其中使用得比较频繁的方法。特别selector的指定方法是使用jQuery库时重要的方法,读者必须掌握;另外将详细介绍动画效果和effect特效等jQuery的特色部分。
第5章 获取元素
实际上取得的是HTML/xHTML的元素。在jQuery中使用CSS匹配(CSS like)来进行元素指定,比其他的JavaScipt库都简单,这也正是jQuery在网页设计人员大受欢迎的理由了。
5.1 利用标签名改变格式
在CSS中需要为某一个标签设置背景或者改变标签中的文字的颜色时使用$来指定,在jQuery中也可以用同样方法来获取标签元素。
如果使用普通JavaScript,则必须用如“document.getElementsByTagName(‘标签名’)”这样的格式编写代码。而jQuery方法与CSS相同,指定需要操作的标签名即可操控所有的标签。
5.1.1 语法
操作span标签的语法如下:
$(‘标签名’)
5.1.2 应用实例
本例将此标签中的所有文字变为红色。
HTML的部分代码
<p><span>span标签的颜色变为红色</span></p> <p><span>这个也变为红色</span></p> <p>这个不变色</p>
JavaScript部分代码
$(function(){ $("span").css("color","red"); });
实现结果如图5-1所示。
图5-1 实现结果
5.2 通过id获取元素
在CSS中经常使用id来控制元素,在jQuery中获取元素时,也使用同样方法。与CSS一样,在id的前面加上“#”字符。
5.2.1 语法
$('#id')
可以控制指定id的HTML/xHTML元素,在HTML/xHTML中有id不可重复的规定,因此可以控制文档内部惟一的元素。如果定义了多个同名的id元素,则只有最初出现的同名id有效。在JavaScript中使用[document.getElementById('id名')]来获取元素,在jQuery中以如下代码获取[id="id_name"]的元素:
$(‘#id_name’)
5.2.2 应用实例
本例将指定ID元素中的颜色变为红色。
HTML代码
<div>这个标签没有指定ID,因此不变色</div> <div id="id_name">标签id为id_name,变红色</div> <p id="id_1">标签id不是id_name,这个不变色</p>
JavaScript代码
$(function(){ $("#id_name").css("color","red"); });
实现结果如图5-2所示。
图5-2 实现结果
5.3 通过类名获取元素
可以获取拥有同一类名的多个HTML/xHTML元素,编写方式同CSS,即在类名的前面加上[.](点)。
5.3.1 语法
$('.类名')
通过类名获取元素可以控制所有同一类名的对象。在JavaScript中,以document. getElementsByClassName('类名')方式获取相同的元素。如下代码获取class='className'的元素:
$('.className')
5.3.2 应用实例
本例将类名为“className”的元素的背景变为红色。
部分HTML代码
<div class="className">这个标签的类名为className,因此变为红色</div> <div>没有定义标签的类名,不改变颜色</div> <p class="className">尽管为P标签,但类名为className,因此也变为红色</p>
JavaScript代码
$(function(){ $(".className").css("backgroundColor","red"); });
实现结果如图5-3所示。
图5-3 实现结果
5.4 一次性获取多个元素
可以一次获取完全不相关的以标签名,或者以id和类名为标识的元素,这些标识之间用逗号“,”分隔。
5.4.1 语法
$('元素名,元素名,元素名,…')
例如,对于诸如p标签、id为“id_name”且类名为“className”的这些元素可以使用jQuery的方法一次性获取,而使用普通的JavaScript无论如何都做不到:
$('p,#id_name,.className')
其他可以使用“*”一次性获取所有的元素:
$('*')
5.4.2 应用实例
本例将多个元素的背景都变为红色。
部分HTML代码
<div id="id_name">id为id_name,因此变为红色</div> <div>没有定义id及class,不改变颜色</div> <div class="className">这个标签的类名为className,因此变为红色</div> <p >P标签也变为红色</p>
JavaScript代码
$(function(){ $("p, #id_name, .className").css("backgroundColor","red"); });
实现结果如图5-4所示。
图5-4 实现结果
5.5 通过指定层次关系获取元素
可以通过指定HTML/xHTML文档的标签层次关系来获取元素,与CSS指定层次关系的方式相同;另外可以组合多种层次关系。
5.5.1 语法
$('祖先,子孙') $('父 > 子') $('前+后') $('兄~弟')
可以指定form标签中的input或label标签来完成相关设置,还可以指定input标签前的label标签执行操作。
5.5.2 应用实例
部分HTML代码
<form> <label>子节点</label><input type="text" value="背景变成红色"> <fieldset> <label>孙节点</label><input type="text" value="背景变成红色"> </fieldset> </form> <label>form外</label><input type="text" value="背景不变色"> <fieldset> <label>form外</label><input type="text" value="背景不变色"> </fieldset>
JavaScript代码
(1)$('祖先,子孙')的实例
$(function(){ $("form input").css("backgroundColor","red"); });
实现结果如图5-5所示。
图5-5 实现结果
(2)$('父 > 子')的实例
$(function(){ $("form > label").css("color","red"); });
实现结果如图5-6所示。
图5-6 实现结果
(3)$('前+后')的实例
$(function(){ $("label+input").css("color","blue"); });
实现结果如图5-7所示。
图5-7 实现结果
(4)$('兄~弟')的实例
$(function(){ $("form~label").css("border","3px solid red"); });
实现结果如图5-8所示。
图5-8 实现结果
5.6 根据元素的属性值获取元素
5.6.1 语法
通过在[]中指定标签(tag)的属性,可以获取标签元素,从而应用在需要更细微操作的情况。表5-1所示为指定属性的语法及其说明,其中Attribute代表属性;value代表值。
表5-1 指定属性值的语法及其说明
5.6.2 应用实例
下面各个实例中除了提示文字不同外,其他结构均相同。
部分HTML代码
<div>div标签中没定义id属性,不变色</div> <div id="div_test" class="class1">div标签中定义了id属性,也不变色</div> <p id="p_test1" class="class1">p标签中定义了id属性,变红色</p> <p id="p_test2" class="class2">p标签中定义了id属性,变红色</p>
JavaScript代码
(1)获取拥有指定属性的元素
$(function(){ $("p[id]").css("color","red"); });
实现结果如图5-9所示。
图5-9 实现结果
(2)获取拥有指定属性且设定值一致的元素
$(function(){ $("div[id=div_test]").css("color","red"); });
实现结果如图5-10所示。
图5-10 实现结果
(3)获取拥有指定属性且设定值不一致的元素
$(function(){ $("p[id!=p_test2]").css("color","red"); });
实现结果如图5-11所示。
图5-11 实现结果
(4)获取拥有指定属性且设定值的最初部分一致的元素
$(function(){ $("p[id^=p]").css("color","red"); });
实现结果如图5-12所示。
图5-12 实现结果
(5)获取拥有指定属性且设定值的最后部分一致的元素
$(function(){ $("[id$=test]").css("color","red"); });
实现结果如图5-13所示。
图5-13 实现结果
(6)获取拥有指定属性且设定值中包含指定字符串的元素
$(function(){ $("[id^=p][class=class1]").css("color","red"); });
实现结果如图5-14所示。
图5-14 实现结果
5.7 通过过滤器获取元素
通过过滤器(又称“滤镜”)的方法来获取元素主要用于操作集合型的标签,尤其适用于需要操作列表标签或表标签的情况下。通过“元素名:过滤器名”的形式来使用这种方法。
所有过滤器及其说明如表5-2所示。
表5-2 所有过滤器及其说明
例如,要设置表格中奇偶数行的不同背景色时,过滤器方法非常适用。
应用实例的部分HTML代码
<ul> <li>第0个li的文字变为红色</li> <li><h3><span>第1个li</span>不变色</h3></li> <li>第2个li不变色</li> <li><span>第3个li不变色</span></li> <li>最后一个li不变色</li> </ul>
JavaScript代码
(1)获取第1个元素
$(function(){ $("li:first").css("color","red"); });
实现结果如图5-15所示。
图5-15 实现结果
(2)获取最后一个元素
$(function(){ $("li:last").css("color","red"); });
实现结果如图5-16所示。
图5-16 实现结果
(3)获取指定元素外的元素
$(function(){ $("li:not(:first)").css("color","red"); });
实现结果如图5-17所示。
图5-17 实现结果
(4)获取偶数序号的元素
$(function(){ $("li:even").css("backgroundColor","grey"); $("li:even").css("color","white"); });
实现结果如图5-18所示。
图5-18 实现结果
(5)获取奇数序号的元素
$(function(){ $("li:odd").css("backgroundColor","grey"); $("li:odd").css("color","white"); });
实现结果如图5-19所示。
图5-19 实现结果
(6)获取指定序号的元素
$(function(){ $("li:eq(2)").css("color","red"); });
实现结果如图5-20所示。
图5-20 实现结果
(7)获取指定序号后的元素
$(function(){ $("li:gt(2)").css("color","red"); });
实现结果如图5-21所示。
图5-21 实现结果
(8)获取指定序号前的元素
$(function(){ $("li:lt(2)").css("color","red"); });
实现结果如图5-22所示。
图5-22 实现结果
(9)获取标题元素
$(function(){ $("li :header").css("color","red"); });
实现结果如图5-23所示。
图5-23 实现结果
(10)获取动画元素
$(function(){ (function animate(){ $("li:eq(2)").toggle('slow',animate); })(); $("li:animated").css("color","red"); });
实现结果如图5-24所示。
图5-24 实现结果
(11)获取包含指定字符串的元素
$(function(){ $("li:contains('红色')").css("color","red"); });
实现结果如图5-25所示。
图5-25 实现结果
(12)获取空元素
$(function(){ $(“li:empty”).text(“空元素”).css(“color”,”red”); });
实现结果如图5-26所示。
图5-26 实现结果
(13)获取拥有子孙元素的元素
$(function(){ $("li:has(span)").css("color","red"); });
实现结果如图5-27所示。
图5-27 实现结果
(14)获取非空元素
$(function(){ $("li:parent").css("color","red"); });
实现结果如图5-28所示。
图5-28 实现结果
5.8 获取表单元素
在检查表单(Form)的输出数据时需要获取表单元素。
获取表单元素的方法如表5-3所示。
表5-3 获取表单元素的方法
提示
使用“:hidden”时可以获取HTML/xHTML文档中的所有隐藏元素,要获取表单中hidden属性的元素,应使用“input:hidden”。
部分HTML代码
<form> <ul> <li><label>文字输入框</label><input type = "text"/></li> <li><label>密码输入框</label><input type = "password"/></li> <li><input type = "radio" name="rad1"/><label>单选按钮1</label></li> <li><input type = "radio" name="rad1"/><label>单选按钮2</label></li> <li><input type = "checkbox" /><label>多选按钮1</label></li> <li><input type = "checkbox" /><label>多选按钮2</label></li> <li><input type = “submit” value= “提交”/></li> <li><input type = "image" src= ""/></li> <li><input type = "reset"/></li> <li><input type = "button" value="测试按钮"/></li> <li><input type = "file" /></li> <li><input type = "hidden" value="test"/></li> <li><select><option>选项</option></select/></li> </ul> </form>
JavaScript代码
$(function(){ $("#msg").html( "input元素有"+$(":input").length+"个(取得所有表单元素)<br/>"+ "text属性的元素有"+$(":text").length+"个(取得text属性的元 素)<br/>"+ "password属性元素有"+$(":password").length+"个(取得password属性的 元素)<br/>"+ "radio元素有"+$(":radio").length+"个(取得单选按钮元素)<br/>"+ "checkbox元素有"+$(":checkbox").length+"个(取得多选按钮元 素)<br/>"+ "submit或image属性元素有"+$(":submit").length+"个(取得submit属性 或image属性的元素)<br/>"+ "image属性元素有"+$(":image").length+"个(取得image属性的元 素)<br/>"+ "reset属性元素有"+$(":reset").length+"个(取得reset属性的元 素)<br/>"+ "button属性元素有"+$(":button").length+"个(取得button属性的元素或 button标签)<br/>"+ "file属性元素有”+$(":file").length+"个(取得file属性的元素)<br/>"+ "hidden属性元素有"+$("input:hidden").length+"个(取得hidden属性的 表单元素)" ); });
实现结果如图5-29所示。
图5-29 实现结果
5.9 通过过滤器获取表单元素
通过过滤器可以获取特定的表单元素,如非输入项目或者单选按钮的已选项目等元素。可用的表单过滤器及其说明如表5-4所示。
表5-4 可用的表单过滤器及其说明
部分HTML代码
<form> <ul> <li><label>订单号码</label><input type = "text" name="" disabled="disabled"/></li> <li><label>订单所有者</label><input type = "text"/></li> <li><input type = "checkbox" name="category" value="红"/><label>红</label> <input type = “checkbox” name=”category” value=”黄”/><label>黄</label> <input type = "checkbox" name="category" value="蓝"/><label>蓝</label> <input type = “checkbox” name=”category” value=”紫”/><label>紫</label> <input type = “checkbox” name=”category” value=”白”/><label> 白</label></li> <li><select multiple= "multiple " > <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> </select/></li> </ul> </form> <div id="msg"> <p id="category"></p> <p id="option"></p> </div>
JavaScript代码
$(function(){ $("input:text:enabled").val("能输入"); $("input:text:disabled").val("不能输入"); (function checkboxclick(){ $(":checkbox").unbind("click",checkboxclick); var val=''; $(":checkbox:checked").each(function(){ val += $(this).val()+','; }); $("#category").html("选择的数据:"+val); $(":checkbox").click(checkboxclick); })(); $("select").change(function(){ var txt=''; $("select option:selected").each(function(){ txt += $(this).text() + ','; }); $("#option").html("选择的选项是:"+txt); }).trigger("change"); });
实现结果如图5-30所示。
图5-30 实现结果
5.10 从集合元素中通过指定序号获取元素
可以通过指定序号获取HTML/xHTML文档中的某一类型的标签元素。
5.10.1 语法
eq(index)
例如,如下的代码操作序号为2号(序号从0开始)的p元素:
$('p').eq(2)
5.10.2 应用实例
部分HTML代码
<style type="text/css"> p{ width:40px; border: 1px solid #000; margin: 0; padding: 0; } </style> <p>0号</p> <p>1号</p> <p>2号</p> <p>3号</p> <p>4号</p> <p>5号</p> <p>6号</p> <p>7号</p>
Javascript代码
$(function(){ $("p").eq(2).css("backgroundColor","red"); });
实现结果如图5-31所示。
图5-31 实现结果
5.11 获取指定条件一致的元素
可以从标签集合中获取与指定条件一致的特定标签元素。
5.11.1 语法
filter(expr)
下例从p标签集合元素中获取类属性名为center的标签元素:
$('p').filter('.center');
5.11.2 应用实例
部分HTML代码
<p>0号</p> <p class="center">1号</p> <p class="center">2号</p> <p class="center">3号</p> <p class="center">4号</p> <p class="center">5号</p> <p class="center">6号</p> <p>7号</p>
JavaScript代码
//所有p标签的文字颜色变为蓝色,同时将类名为“center”的标签背景色变成黄色 $(function(){ $("p").css("color","blue").filter(".center").css("backgroundC olor","yellow"); });
实现结果如图5-32所示。
图5-32 实现结果
5.12 获取指定范围的元素
5.12.1 语法
slice(start,[end])
start与end都是数字,end可选,实际为指定数字基础上减1的元素。
下面的代码指定4号~6号的元素:
$('p').slice(4,7);
5.12.2 应用实例
部分HTML代码
<p>0号</p> <p>1号</p> <p>2号</p> <p>3号</p> <p>4号</p> <p>5号</p> <p>6号</p> <p>7号</p>
JavaScript代码
//设置4~6标签的背景色成黄色 $(function(){ $("p").slice(4,7).css("backgroundColor","yellow"); });
实现结果如图5-33所示。
图5-33 实现结果
5.13 获取与条件表达式一致的元素
可以使用条件表达式来判断,条件一致时获取当前元素。
5.13.1 语法
is(expr)
一般首先循环标签集合,当条件表达式为真时获取当前标签元素,执行相关设置操作。
5.13.2 应用实例
部分HTML代码
<p>0号</p> <p>1号</p> <p class="blue">2号</p> <p>3号</p> <p>4号</p> <p>5号</p> <p class="yellow">6号</p> <p>7号</p>
JavaScript代码
//将类名为“blue”和“yellow”的对象设置为不同的背景色 $(function(){ $("p").each(function(){ switch(true){ case $(this).is(".blue"): $(this).css("backgroundColor","blue"); break; case $(this).is(".yellow"): $(this).css("backgroundColor","yellow"); break; default: break; } }) });
实现结果如图5-34所示。
图5-34 实现结果
5.14 获取元素的下一个元素
可以在div标签中指定q标签,然后获取下一个q标签。
5.14.1 语法
next([expr])
5.14.2 应用实例
部分HTML代码
<p class="yes">0号</p> <p>1号</p> <p class="yes">2号</p> <p>3号</p> <p>4号</p> <p>5号</p> <p class="yes">6号</p> <p>7号</p>
JavaScript代码
$(function(){ $("p").next('.yes').css('backgroundColor','yellow'); });
实现结果如图5-35所示。
图5-35 实现结果
5.15 获取元素的前一个元素
5.15.1 语法
prev([expr])
5.15.2 应用实例
部分HTML代码
<p class="yes">0号</p> <p>1号</p> <p class="yes">2号</p> <p>3号</p> <p>4号</p> <p>5号</p> <p>6号</p> <p class="yes">7号</p>
JavaScript代码
$(function(){ $("p").prev('.yes').css('backgroundColor','yellow'); });
实现结果如图5-36所示。
图5-36 实现结果
5.16 获取元素的父元素
可以指定元素的父元素,并将父元素的条件细化以获取特定的父元素。
5.16.1 语法
parent([expr])
expr是可选且可进一步细化的条件。
5.16.2 应用实例
部分HTML代码
<div id="content"> <p>0号</p> <p>1号</p> <p>2号</p> <p>3号</p> <p>4号</p> <p>5号</p> <p>6号</p> <p>7号</p> <div>
JavaScript代码
$(function(){ $("p").parent().css('backgroundColor','yellow'); });
实现结果如图5-37所示。
图5-37 实现结果
5.17 获取元素的子元素
可以获取指定元素的子元素,还可以将要获取子元素条件的细化,以获取特定的子元素。
5.17.1 语法
children([expr])
5.17.2 应用实例
部分HTML代码
<div id="content"> <p>0号</p> <p>1号</p> <p class="yes">2号</p> <p>3号</p> <p>4号</p> <p>5号</p> <p>6号</p> <p>7号</p> <div>
JavaScript代码
$(function(){ $("#content").children(".yes").css('backgroundColor','yellow'); });
实现结果如图5-38所示。
图5-38 实现结果