jQuery选择器,简单来讲就是【$】,你要对html页面上的东西进行操作的话,就要把东西“拿出来”,而这“拿出来”的动作就是利用$选择器。
1 选择器基本用法
$("p")选择p签的元素,$("#id")选择ID=id的元素,$(".test")选择class=test的元素
2 过滤选择器:
input :checked 选择input 标签下 同时状态是checked的元素
.基本过滤选择器
•:first :选取第一个元素 实例:$(“div:first”) 选取所有<div>元素中第一个<div>元素
•:last:选取最后一个元素 实例:$(“div:last”) 选取所有<div>元素中最后一个<div>元素
•:not(selector) 取出所有与给定选择器匹配的元素。例如:$(“input:not(.myClass)”) 选取class不是myClass的<input>元素
•:even 选取索引是偶数的所有元素,索引从0开始 例如:$(“input:even”) 选取索引是偶数的<input>元素
•:odd 选取索引是奇数的所有元素,索引从0开始 例如:$(“input:odd”) 选取索引是奇数的<input>元素
•:eq(index) 选取索引等于index的元素(index从0开始) 例如:$(“input:eq(1)”) 选取索引等于1的<input>元素
•:gt(index) 选取索引大于index的元素(index从0开始) 例如$(“input:get(1)”) 选取索引大于1的<input>元素(注:大于1,而不包括1)
•:lt(index) 选取索引小于index的元素(index从0开始) 例如:$(“input:lt(1)”) 选取索引小于1的<input>元素。
•:header 选取所有的标题元素,例如h1,h2,h3等等 例如$(“:header”) 选取所有网页中的<h1>,<h2><h3>…..
•:animated 选取当前正在执行动画的所有元素 例如:$(“div:animated”) 选取正在执行动画的<div>元素
属性过滤选择器
[attribute] 选取拥有此属性的元素 例子:$(“div[id]”) 选取拥有属性id的元素。
•[attribute=value] 选取属性的值为value的元素 例子:$(“div[title=test]”) 选取属性title为”test” 的<div>元素
•[attribute!=value] 选取属性的值不等于value的元素 例子:$(“div[title!=test]”) 选取属性title不等于“test“的<div>元素(注意:没有属性title的<div>元素也会被选取)
•[attribute^=value] 选取属性的值以value开始的元素 例子:$(“div[title^=test]”) 选取属性title以“test“开始的<div>元素
•[attribute$=value] 选取属性的值以value结束的元素 例子:$(“div[title$=test]”) 选取属性title以”test”开始的<div>元素。
•[attribute*=value] 选取属性值包含有value的元素 例子$(“div[title*=test]”) 选取属性title含有“test“的<div>元素。
•[selector1][selector2][selectorN] 用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围 。例子:$(“div[id][title$=’test’]”) 选取拥有属性id,并且属性title以“test“结束的<div>元素。
下面记了几个常用的jQuery方法、例子。
一 隔行显示变色
$("#tb tbody tr:even").css("backgroundColor","#888");//刚开始写的时候不知道jquery下tb、tbody 、tr怎么连接的,
//现在知道了:找到id是tb的元素,寻找他下面的tbody标签,tr标签,even过滤偶数的tr元素
//css("property","value"); 设置jquery对象的样式
二 针对"name","Type"属性的操作
//===========对多选框进行操作,输出选中的多选框的个数
$("#btn").click(function(){
//alert($("input[type='checkbox']:checked").length);
alert($("input[name='check']:checked").length);//jquery的选择器有对id的有对class的也有对标签的,但是没有对name 和 type的,所以要这样表示
})
在这之前 我有过一个博客《JavaScript的相关问题》是说这一块内容
当时是不理解为什么自己先前的方法不行,但是后来理解了。
三 输入内容
html代码:
可用元素:<input name="add" value="可用文本框" /><br />
jQuery代码:
$("#form1 input:enabled").val("这里变化了");//div,span,em 这些使用html()输入内容,input 是用val()输入内容
讲解:选择id=form1 的元素,input标签,过滤: 可用的元素(【:】表示过滤),输入“这里变化了”
四 子元素和父元素的甄别
html代码:
<form id="form1" runat="server">
<div class="test">
<div style="display:none;">aa</div>
<div style="display:none;">bb</div>
<div style="display:none;">cc</div>
<div class="test" style="display:none;">dd</div>
</div>
<div class="test" style="display:none;">ee</div>
<div class="test" style="display:none;">ff</div>
</form>
jQuery代码:
var $t_a=$(".test>div");//带空格的jQuery选择器,与下面的语句 功能相同,找儿子元素
//var $t_a=$(".test :hidden");//带空格的jQuery选择器,选取的是后代的的隐藏元素。 输出4
//这里的后代:class=test的元素的儿子们,这里说明,不选取孙子。
// <div class="test" style="display:none;">ff</div>
//上面这个class=test的元素,即 <div> 他没有儿子,即 子节点,所以length是0
var $t_b=$(".test:hidden");//不带空格的jQuery选择器,选取class=test 并且是隐藏的元素,理论上讲应该输出3.
var len_a=$t_a.length;
var len_b=$t_b.length;
alert("有空格的"+len_a);
alert("没空格的"+len_b);
var $t_b=$(".test:hidden");//不带空格的jQuery选择器,选取class=test 并且是隐藏的元素 应该输出3,但是我运行发现结果是4,这里不知道怎么回事,求解答
五 jQuery和DOM的转换
var $cr=$("#cr"); //jQuery对象
var cr=$cr[0]; //dom对象,或者var cr=$cr.get(0)
六其他方法一览
show()//:显示隐藏的匹配元素
css(name,value)//:给元素设置样式
text(string)//:设置所有匹配元素的文本内容,类似输入
filter(expr)//:筛选出与指定表达式匹配的元素结合,expr可以是多个选择器的组合.filter()是在平级找也就是同一辈份元素中找 find是在子元素中找
addClass(class)//:为匹配的元素添加指定的类名
$(".SubCategoryBox ul li:gt(5):not(:last)").css("display","none");//gt()选取大于index的元素,index从0开始;not就是不包括、排除,last就是最后一个