jQuery获取元素的方法
1. 利用标签名改变格式
语法: $(‘标签名’)
2.通过id获取元素
语法: $(‘#id’)
3.通过类名获取元素
语法: $(‘.类名’)
4. 一次性获取多个元素
语法: $(‘元素名,元素名,元素名,…’)
演示例1:html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script src="./jquery-1.8.3.js"></script>
<script src="./jquery.js"></script>
</head>
<body>
<p><span>这是一个span标签</span></p>
<div id="div1">id号为div1</div>
<p class="p1">通过类名获取标签改变样式</p>
</body>
</html>
js代码:
$(function(){
$("span").css("color","red");
$("#div1").css("color","blue");
$(".p1").css("color","yellow");
$("span,#div1,.p1").css("background","pink");
})
5.通过指定层次关系获取元素
语法:
$('祖先,子孙')
$('父,子')
$('前+后')
$('兄~弟')
演示例2: html代码:
<form>
<lahel>子节点</lahel>
<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>
js代码:
$(function(){
$("form input").css("background","pink");
$("form > label").css("color","blue");
$("label+input").css("color","yellow");
$("form~label").css("border","5px solid purple");
});
6.根据元素的属性值获取元素
语法:
[attribue] , 获取拥有指定属性的元素
[attribue = value] , 获取拥有指定属性且设定值一致的元素的元素
[attribue != value] , 获取拥有指定属性且设定值不一致的元素的元素
[attribue ^= value] , 获取拥有指定属性且设定值的最初部分一致的元素
[attribue $= value] , 获取拥有指定属性且设定值的最后部分一致的元素
[attribue *= value] , 获取拥有指定属性且设定值包含指定字符串的元素
演示例3: html代码:
<div>div标签无id</div>
<div id="div1" class="class1">div标签有id</div>
<p id="p1" class="class1">p标签有id1</p>
<p id="p2" class="class2">p标签有id2</p>
<p id="p3" class="class2">p标签有id3</p>
js代码:
$(function(){
$("p[id]").css("color","yellow");
$("div[id=div1]").css("color","pink");
$("p[id!=p1]").css("color","blue");
$("p[id^=p3]").css("color","green");
$("p[id$=1]").css("color","purple");
$("p[id^=p][class=class1]").css("color","red");
});
7.通过过滤器获取元素
过滤器:
:first , 获取第一个元素
:last , 获取最后一个元素
:not(filter) , 获取除了了指定元素外的元素
:even , 获取偶数序号的元素
:odd , 获取奇数序号的元素
:eq(index),获取指定序号的元素
:gt(index),获取指定序号后的元素
:lt(index),获取指定序号前的元素
:header ,获取标题元素
:animated , 获取动画元素
:contains(text),获取包含字符串的元素
:empty ,获取空元素
:has(selector),获取拥有子孙的元素
:parent , 获取非空元素
演示例4: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>第4个li标签</li>
</ul>
js代码:
$("li:first").css("color","red");
$("li:last").css("color","pink");
$("li:not(:first)").css("color","green");
$("li:even").css("background","yellow");
$("li:odd").css("background","purple");
8.获取表单元素
方法:
:input , 获取所有表单元素
:text , 获取text属性的元素
:password , 获取password属性的元素
:radio , 获取单选按钮元素
:checkbox , 获取多选按钮元素
:submit , 获取submit属性的元素
:image , 获取image属性的元素
:button , 获取button属性的元素或button标签
:file , 获取file属性的元素
提示:使用 “ :hidde n” 时可以获取HTML/xHTML文档中的所有隐藏元素,要获取表单中hidden属性的元素,应使用 “ input:hidden ” 。
9.通过过滤器获取表单元素
过滤器:
:enahled , 获取可输入状态的元素
:disabled , 获取不可输入状态的元素
:checked , 获取选中状态的元素
:selected , 获取下拉框中选中状态的元素
演示例5:html代码:
<form action="#">
<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>
js代码:
$(function(){
$("input:text:enabled").val("能输入");
$("input:text:disabled").val("不能输入");
(function checkboxClick(){
$(":checkbox").unbind("check",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).each() + ',';
});
$("#option").html("选择的选项是:" + txt);
}).trigger("change");
});
10.从集合元素中通过指定序号获取元素
语法: eq(index)
11.获取指定条件一致的元素
语法:filter(expr)
12.获取指定范围的元素
语法:slice(start,[end])
13.获取与表达式一致的元素
语法:is(expr)
14.获取元素的下一个元素
语法:next([expr])
15.获取元素的前一个元素
语法:prex([expr])
16.获取元素的父元素
语法:parent([expr])
17.获取元素的子元素
语法:children([expr])
演示例6: html+css代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script src="./jquery-1.8.3.js"></script>
<script src="./jquery.js"></script>
<style>
p{
width: 50px;
border:1px solid #000000;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="contain">
<p>0</p>
<p class="center">1</p>
<p class="center">2</p>
<p class="center">3</p>
<p>4</p>
<p >5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p class="blue">9</p>
<p>10</p>
<p class="yellow">11</p>
<p>12</p>
<p>13</p>
<p class="yes">14</p>
<p>15</p>
<p class="yes">16</p>
<p>17</p>
</div>
</body>
</html>
js代码:
$(function(){
$("p").eq(0).css("background","red");
$("p").css("color","blue").filter(".center").css("background","yellow");
$("p").slice(4,7).css("background","green");
$("p").each(function(){
switch(true){
case $(this).is(".blue"):$(this).css("background","pink");
case $(this).is(".yellow"):$(this).css("background","purple");
default:break;
}
});
$("p").next('.yes').css('background','grey');
$("p").prev('.yes').css('background','lightblue');
$("p").parent().css('background','grey');
$("#contain").children(".yes").css('color','red');
});
本文参考:jQuery即学即用 (电子工业出版社)