随笔记之Jquery选择器

一：九种选择器

1）基本选择器：

#id 根据id属性值查找一个元素, 例如 $(“#mydiv")

.class 根据class属性值查找元素, 例如 $(“.class")

element 根据元素的标签名称查找指定元素

* 匹配所有元素, 例如 $(“*")

selector1, selector2, selector3 将多个选择器合并到一起返回 例如$(“div, p")

2）层级选择器：

层级选择器是根据dom元素的层级关系选择对应的标签.

dom元素的层级关系: 祖先后代关系, 父子关系, 兄弟关系等.

祖先 后代: 获取祖先元素下的所有后代元素 $(“form input") 父亲>孩子: 获取父元素下的所有子元素 $(“form>input") 当前元素+兄弟 : 获取紧挨当前元素的下一个兄弟元素 $(“label+input") 当前元素~兄弟 : 获取当前元素的所有兄弟元素 $(“label~input")

注意:

空格: 选取 当前元素的所有后代元素

> : 选取 当前元素的所有子元素

+: 选取 当前元素的下一个兄弟元素

~: 选取 当前元素的所有兄弟元素

实现：

$(function(){

// 1．将class属性值为itcast的元素下所有a元素字体变为红色

// $(".itcast a").css("color", "red");

// 2．将class属性值为itcast的元素下直接a元素字体变为蓝色

// $(".itcast>a").css("color", "blue");

// 3．将div元素后所有兄弟a元素，字体变为黄色，大小变为30px

$("div~a").css({

    "color" : "yellow",

   "font-size" : "30px"

});

3）基本过滤选择器：

l:first  选取第一个元素 $("tr:first")

l:last   选取最后一个元素 $("tr:last")

l:not(selector)  去除所有与给定选择器匹配的元素 $("input:not(:checked)")

l:even  选取所有元素中偶数索引的元素，从 0 开始计数 $("tr:even")

l:odd  选取所有元素中奇数索引的元素 ，从 0 开始计数 $("tr:odd")

l:eq(index) 选取指定索引的元素  $("tr:eq(1)")

l:gt(index)  选取索引大于指定index的元素  $("tr:gt(0)")

l:lt(index)   选取索引小于指定index的元素  $("tr:lt(2)")

l:header  选取所有的标题元素  如：h1, h2, h3   $(":header")

l:animated  匹配所有正在执行动画效果的元素

实现：

$(function(){

// 1．设置表格第一行，显示为红色

$("table tr:first").css("color", "red");

// 2．设置表格除第一行以外 显示为蓝色

$("table tr:not(:first)").css("color", "blue");

// 3．设置表格奇数行背景色 黄色

$("table tr:odd").css("background", "yellow");

// 4．设置表格偶数行背景色 绿色

$("table tr:even").css("background", "green");

// 5．设置页面中所有标题 显示为灰色

$(":header").css("color", "gray");

// 6．设置页面中正在执行动画效果div背景黄色，不执行动画div背景绿色

$("div:not(:animated)").css("background", "green");

$("div").click(function(){

$(this).slideUp("slow");

$("div:animated").css("background", "yellow");

});

});

4）内容过滤选择器：

l:contains(text) 选取包含text文本内容的元素  $("div:contains('John')")

l:empty 选取不包含子元素或者文本节点的空元素 $("td:empty")  <td></td>

l:has(selector) 选取含有选择器所匹配的元素的元素

l     $("div:has(p)").addClass("test");

l:parent  选取含有子元素或文本节点的元素  $("td:parent")

实现：

$(function(){

// 1．设置含有文本内容 "传智播客" 的 div 的字体颜色为红色

$("div:contains('传智播客')").css("color", "red");

// 2．设置没有子元素的div元素 文本内容 "这是一个空DIV“

$("div:empty").html("这是一个空DIV");

// 3．设置包含p元素 的 div 背景色为黄色

$("div:has('p')").css("background", "yellow");

// 4．设置所有含有子元素的span字体为蓝色

$("span:parent").css("color", "blue");

});

5）可见过滤选择器

:hidden 选取所有不可见的元素

:visible 选取所有可见的元素

观察结果:

visibility:hidden 可以实现隐藏效果, 但是占用体积

display:none 可以实现隐藏效果, 可以不占体积

当前选择器匹配的元素有: display:none 和 input type="hidden"的标签

实现：

$(function(){

// 1．为表单中所有隐藏域  添加 class属性，值为itcast

$(":hidden").attr("class", "itcast");

// 2．设置table所有 可见 tr 背景色 黄色

$("table tr:visible").css("background", "yellow");

// 3．设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值

alert($("table tr:hidden").css("color", "red").show().text());

});

6）属性过滤选择器

l[attribute] 选取拥有此属性的元素  $("div[id]") l[attribute=value] 选取指定属性值为value的所有元素: $("div[id=’mydiv’]")   l[attribute !=value] 选取属性值不为value的所有元素 l[attribute ^= value] 选取属性值以value开始的所有元素 l[attribute $= value] 选取属性值以value结束的所有元素 l[attribute *= value]  选取属性值包含value的所有元素 l[selector1] [selector2]…[selectorN] 复合性选择器，首先经[selector1]选择返回集合A，集合A再经过[selector2]选择返回集合B，集合B再经过[selectorN]选择返回结果集合

说明: div[id][class] 表示 既有id属性也有class属性的div标签

实现：

$(function(){

// 1.设置所有含有id属性的div，字体颜色红色

$("div[id]").css("color", "red");

// 2.设置所有class属性值 含有itcast元素背景色为黄色

$("[class*=itcast]").css("background", "yellow");

// 3.对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容

$("div[id][class]").click(function(){

alert($(this).html());

});

// 4 获取属性name="hobby"的input标签, 打印value属性值

$("input[name='hobby']").each(function(){

alert($(this).val());

});

});

7）子元素过滤选择器

对某元素的子元素进行选取

l:nth-child(index/even/odd) 选取索引为index的元素、索引为偶数的元素、索引为奇数的元素  ----- index 从1开始 区别 eq l:first-child  此选择符将为每个父元素匹配第一个子元素 l:last-child  此选择符将为每个父元素匹配最后一个子元素 l:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配

实现：

$(function(){

// 1.在每个表格 下3的倍数行，字体颜色为红色

$("table tr:nth-child(3n)").css("color", "red");

// 2.每个表格 奇数行 背景色 黄色

$("table tr:nth-child(odd)").css("background", "yellow");

// 3.每个表格 偶数行 背景色 灰色

$("table tr:nth-child(even)").css("background", "gray");

// 4.每个tr 只有一个td的  字体为 蓝色

$("tr td:only-child").css("background", "blue");

});

8）表单过滤选择器

l选取表单元素的过滤选择器

l:input  选取所有<input>、<textarea>、<select >和<button>元素

l:text     选取所有的文本框元素 <input type="text">

l:password 选取所有的密码框元素 <input type="password">

l:radio          选取所有的单选框元素 <input type="radio">

l:checkbox  选取所有的多选框元素 <input type="checkbox">

l:submit       选取所有的提交按钮元素 <input type="submit">

l:image        选取所有的图像按钮元素

l:reset          选取所有重置按钮元素

l:button       选取所有按钮元素 <input type="button"> <button>

l:file             选取所有文件上传域元素 <input type="file">

l:hidden       选取所有不可见元素 <input type="hidden">

:checkbox 等价于 input[type='checkbox']

实现：

$(function(){

//1．对所有text框和password框，添加离焦事件，校验输入内容不能为空

$(":text, :password").blur(function(){});

$("input[name='username'], input[name='password']").blur(function(){});

//2．对button 添加 点击事件，提交form表单

$(":button").click(function(){});

});

9）表单对象属性过滤选择器

l:enabled  选取所有可用元素

l:disabled  选取所有不可用元素

l:checked  选取所有被选中的元素，如单选框、复选框 (经常使用)

l:selected  选取所有被选中项元素，如下拉列表框、列表框  (经常使用)

实现：

$(function(){

//需求1: 观察只读和不可用标签的联系和区别

// 联系: 只能看,不能修改

// 区别:

// 只读虽然不能修改,但是可以随表单一起提交

// 不可用不仅不能修改, 还不能表单一起提交

//需求2: 点击button 打印radio checkbox select 中选中项的值

$(":button").click(function(){

var sex = $("input[name=gender]:checked").val();

alert("性别: " + sex);

$("input[name=hobby]:checked").each(function(){

alert("爱好: " + $(this).val());

});

alert("城市1: " + $("select[name='city']").val());

alert("城市2: " + $("select[name='city'] option:selected").val());

});

});