jquery选择器案例,Jquery选择器
JQuery中基础过滤选择器用法实例分析
本文实例讲述了JQuery中基础过滤选择器用法。分享给大家供大家参考。具体如下：
!DOCTYPE
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title基础过滤选择器/title
style
type="text/css"
#main{
width:600px;
border:1px
solid
green;
margin:auto;
padding:10px;
}
#tbl{
border-collapse:collapse;
border-top:1px
solid
red;
border-left:1px
solid
red;
margin:auto;
}
#tbl
td{
width:60px;
height:60px;
border-collapse:collapse;
border-bottom:1px
solid
red;
border-right:1px
solid
red;
}
/style
script
src="jquery-1.6.2.min.js"
type="text/javascript"/script
script
type="text/javascript"
$(function
()
{
//=============举例1========================
//:first
说明:
匹配找到的第一个元素
//....1修改第一个单元格的背景色
//var
$tds
=
$("#tbl
td:first");
//$tds.css("backgroundColor",
"blue");
//....2修改第一行的背景色
//var
$trs
=
$("#tbl
tr:first");
//$trs.css("backgroundColor",
"blue");
//=============举例2========================
//:last
说明:
匹配找到的最后一个元素.与
:first
相对应.
//...1修改随后一个单元格的背景色
//var
$tds
=
$("#tbl
td:last");
//$tds.css("backgroundColor",
"blue");
//=============举例3========================
//:not(selector)
去除所有与给定选择器匹配的元素.有点类似于”非”
//...1把所有class不为tdClass的列的文本进行修改
//var
$tds
=
$("#tbl
td:not(.tdClass)");
//$tds.text("Not
tdClass");
//=============举例4========================
//:even
说明:
匹配所有索引值为偶数的元素，从
开始计数.js的数组都是从0开始计数的.
//例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
//...1把索引值为偶数的行变成黄色
//var
$trs
=
$("#tbl
tr:even");
//$trs.css("backgroundColor",
"yellow");
//=============举例5========================
//:
odd
说明:
匹配所有索引值为奇数的元素,和:even对应,从
开始计数.
//var
$trs
=
$("#tbl
tr:odd");
//$trs.css("backgroundColor",
"yellow");
//=============举例6========================
//:eq(index)
说明:
匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
//...1设置第二个单元格的背景色
//var
$tds
=
$("#tbl
td:eq(1)");
//$tds.css("backgroundColor",
"gray");
//=============举例6========================
//:gt(index)
说明:
匹配所有大于给定索引值的元素.
//...1把下标索引大于1的所有单元格背景色设置为灰色
//var
$tds
=
$("#tbl
td:gt(1)");
//$tds.css("backgroundColor",
"gray");
//=============举例7========================
//:lt(index)
说明:
匹配所有小于给定索引值的元素.
//...1把下标索引小于3的所有单元格背景色设置为灰色
var
$tds
=
$("#tbl
td:lt(3)");
$tds.css("backgroundColor",
"gray");
//=============举例8========================
//:header(固定写法)
说明:
匹配如
h1,
h2,
h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
//...1把所有的h标签背景色进行修改
var
$hs
=
$(":header");
$hs.css("backgroundColor",
"gold");
//=============举例8========================
//slice
获取下标范围内元素
var
$trs
=
$("#tbl
tr").slice(1,
3);
$trs.css("backgroundColor",
"gold");
});
/script
/head
body
div
id="main"
h1我是h1/h1
h2我是h2/h2
h3我是h3/h3
table
id="tbl"
tr
td1/tdtd1/tdtd1/td
/tr
tr
td
class="tdClass"2/tdtd2/tdtd2/td
/tr
tr
td3/tdtd3/tdtd3/td
/tr
tr
td4/tdtd4/tdtd
class="tdClass"4/td
/tr
tr
td5/tdtd5/tdtd5/td
/tr
tr
td6/tdtd6/tdtd
class="tdClass"6/td
/tr
/table
/div
/body
/html
希望本文所述对大家的jQuery程序设计有所帮助。
jQuery基本筛选选择器实例代码
本文实例为大家分享了jQuery基本筛选选择器的具体代码，供大家参考，具体内容如下
!DOCTYPE
html
html
head
meta
http-equiv="Content-type"
content="text/html;
charset=utf-8"
/
title/title
link
rel="stylesheet"
href="imooc.css"
type="text/css"
script
src=""/script
/head
body
h2基本筛选器/h2
h3:first/:last/:even/:odd/h3
div
class="left"
div
class="div"
pdiv:first/p
p:even/p
/div
div
class="div"
p:odd/p
/div
div
class="div"
p:even/p
/div
div
class="div"
p:odd/p
/div
div
class="div"
p:even/p
/div
div
class="div"
pdiv:last/p
p:odd/p
/div
/div
script
type="text/javascript"
//找到第一个div
$(".div:first").css("color",
"#CD00CD");
/script
script
type="text/javascript"
//找到最后一个div
$(".div:last").css("color",
"#CD00CD");
/script
script
type="text/javascript"
//:even
选择所引值为偶数的元素，从
开始计数
$(".div:even").css("border",
"3px
groove
red");
/script
script
type="text/javascript"
//:odd
选择所引值为奇数的元素，从
开始计数
$(".div:odd").css("border",
"3px
groove
blue");
/script
h3:eq/:gt/:lt/h3
div
class="left"
div
class="aaron"
p:lt(3)/p
/div
div
class="aaron"
p:lt(3)/p
/div
div
class="aaron"
p:eq(2)/p
/div
div
class="aaron"
/div
div
class="aaron"
p:gt(3)/p
/div
div
class="aaron"
p:gt(3)/p
/div
/div
script
type="text/javascript"
//:eq
//选择单个
$(".aaron:eq(2)").css("border",
"3px
groove
blue");
/script
script
type="text/javascript"
//:gt
选择匹配集合中所有索引值大于给定index参数的元素
$(".aaron:gt(3)").css("border",
"3px
groove
blue");
/script
script
type="text/javascript"
//:lt
选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".aaron:lt(2)").css("color",
"#CD00CD");
/script
h3:not/h3
div
class="left"
div
input
type="checkbox"
name="a"
/
pAaron/p
/div
div
input
type="checkbox"
name="b"
/
p慕课/p
/div
div
input
type="checkbox"
name="c"
checked="checked"
/
p其他/p
/div
/div
script
type="text/javascript"
//:not
选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
$("input:not(:checked)
+
p").css("background-color",
"#CD00CD");
/script
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
jQuery层次选择器用法示例
本文实例讲述了jQuery层次选择器用法。分享给大家供大家参考，具体如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title2-5/title
!--
引入jQuery
--
script
src="js/jquery-1.10.1.min.js"
type="text/javascript"/script
script
src="js/assist.js"
type="text/javascript"/script
link
rel="stylesheet"
type="text/css"
href="css/style.css"
/
script
type="text/javascript"
$(document).ready(function(){
//选择
body内的所有div元素.
$('#btn1').click(function(){
$('body
div').css("background","#bbffaa");
})
//在body内的选择
元素名是div
的子元素.
$('#btn2').click(function(){
$('body
div').css("background","#bbffaa");
})
//选择
所有class为one
的下一个div元素.
$('#btn3').click(function(){
$('.one
+
div').css("background","#bbffaa");
})
//选择
id为two的元素后面的所有div兄弟元素.
$('#btn4').click(function(){
$('#two
~
div').css("background","#bbffaa");
})
});
/script
/head
body
h3层次选择器./h3
button
id="reset"手动重置页面元素/button
input
type="checkbox"
id="isreset"
checked="checked"/
label
for="isreset"点击下列按钮时先自动重置页面/label
br
/
br
/
input
type="button"
value="选择
body内的所有div元素."
id="btn1"/
input
type="button"
value="在body内,选择子元素是div的。"
id="btn2"/
input
type="button"
value="选择
所有class为one
的下一个div元素."
id="btn3"/
input
type="button"
value="选择
id为two的元素后面的所有div兄弟元素."
id="btn4"/
br
/
br
/
!--
测试的元素
--
div
class="one"
id="one"
id为one,class为one的div
div
class="mini"class为mini/div
/div
div
class="one"
id="two"
title="test"
id为two,class为one,title为test的div.
div
class="mini"
title="other"class为mini,title为other/div
div
class="mini"
title="test"class为mini,title为test/div
/div
div
class="one"
div
class="mini"class为mini/div
div
class="mini"class为mini/div
div
class="mini"class为mini/div
div
class="mini"/div
/div
div
class="one"
div
class="mini"class为mini/div
div
class="mini"class为mini/div
div
class="mini"class为mini/div
div
class="mini"
title="tesst"class为mini,title为tesst/div
/div
div
style="display:none;"
class="none"style的display为"none"的div/div
div
class="hide"class为"hide"的div/div
div
包含input的type为"hidden"的div
input
type="hidden"
size="8"/
/div
span
id="mover"正在执行动画的span元素./span
/body
/html
效果图：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery选择器用法总结》、《jQuery操作DOM节点方法总结》、《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。
JQuery中层次选择器用法实例详解
本文实例讲述了JQuery中层次选择器用法。分享给大家供大家参考。具体如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title层次选择器/title
script
src="jquery-1.6.2.min.js"
type="text/javascript"/script
script
type="text/javascript"
$(function
()
{
//------1.在给定的祖先元素下匹配所有后代元素
//(包含了子元素,以及子元素的元素,一直往下延伸)
var
$divs
=
$("#main
div");
for
(var
i
=
0;
i
$divs.length;
i++)
{
alert($divs.get(i).id);
}
//------2.在给定的父元素下匹配所有子元素,只包括直接子元素
//(不包含子元素的子元素)
var
$divs
=
$("#main
div");
for
(var
i
=
0;
i
$divs.length;
i++)
{
alert($divs.get(i).id);
}
//-----3.prev
+
next
$("lable
+
input
")
:
匹配所有紧接在prev后的next元素
//注意:只能去到第一个，并且是紧挨着的，如果不是紧挨着div1后面的则取不到
//.....1.例子1
var
$divBrother
=
$("#div1
+
div");
//用#div1
ID选择器
,只取到div2
alert($divBrother.get(0).id);
//.....2.例子2
var
$divBrothers
=
$("div
+
div");
//用div
标签选择器，相邻的div都能取到
divSun1(和divSun相邻),div2(和div1相邻)
for
(var
i
=
0;
i
$divBrothers.length;
i++)
{
alert($divBrothers.get(i).id);
}
//-----4.prev
~
siblins
//$("form
~
input")
:
匹配prev元素之后的所有siblings元素
//注意:在匹配之后的元素,不包含该元素在内，
//并且siblings匹配的是和prev同辈的元素，其后辈元素不被匹配。
var
$divBrothers
=
$("#main
~
div");
for
(var
i
=
0;
i
$divBrothers.length;
i++)
{
//得到main1,main2,main3
alert($divBrothers.get(i).id);
}
}
);
/script
/head
body
div
id="main"
div
id="div1"
class="myDiv"我是div1
div
id="divSun"我是孙子div
div
id="divSunSun"我是孙子的孙子div/div
/div
div
id="divSun1"我是孙子div/div
/div
div
id="div2"
class="myDiv"我是div2/div
/div
div
id="main1"/div
div
id="main2"/div
input
type="button"
value="button"
/
div
id="main3"/div
/body
/html
更多关于jquery选择器相关内容感兴趣的读者可查看本站专题：《jquery选择器用法总结》
希望本文所述对大家的jQuery程序设计有所帮助。
jQuery中:lt选择器用法实例
本文实例讲述了jQuery中:lt选择器用法。分享给大家供大家参考。具体分析如下：
此选择器匹配所有小于给定索引值的元素。
索引值最小是从0开始的。
语法结构:
复制代码
代码如下:$(":lt(index)")
此选择器一般也要和其他选择器配合使用，比如类选择器和元素选择器等等。
例如:
复制代码
代码如下:$("li:lt(3)").css("color","blue")
以上代码能够将索引小于3的li元素中的字体颜色设置为蓝色。
如果不和其他选择器配合使用，则默认状态是和*选择器配合使用，例如$(":lt")等同于$("*:lt")。
参数列表:
参数
描述
index
给定的索引值。
实例代码:
实例一:
复制代码
代码如下:
!DOCTYPE
html
html
head
meta
charset="
utf-8"
meta
name="author"
content=""
/
title脚本之家/title
script
type="text/javascript"
src="mytest/jQuery/jquery-1.8.3.js"/script
script
type="text/javascript"
$(document).ready(function(){
$("#btn").click(function(){
$("li:lt(3)").css("color","blue");
});
})
/script
/head
body
ul
lihtml专区/li
lidiv+css专区/li
lijQuery专区/li
liJavascript专区/li
/ul
button
id="btn"点击查看效果/button
/body
/html
以上代码可以将li元素集合中，索引值小于3的li元素中的字体颜色设置为蓝色。
实例二:
复制代码
代码如下:
!DOCTYPE
html
html
head
meta
charset="
utf-8"
meta
name="author"
content=""
/
title脚本之家/title
script
type="text/javascript"
src="mytest/jQuery/jquery-1.8.3.js"/script
script
type="text/javascript"
$(document).ready(function(){
$("#btn").click(function(){
$("*").each(function(){
alert(this.tagName);
})
})
$("#show").click(function(){
$(":lt(11)").css("border","1px
solid
red");
})
});
/script
/head
body
ul
lihtml专区/li
lidiv+css专区/li
lijQuery专区/li
liJavascript专区/li
/ul
button
id="btn"遍历所有元素/button
button
id="show"点击查看选择器效果/button
/body
/html
由于以上代码并没有指定与:lt选择器相配合使用的选择器，所以就默认和*选择器配合使用，于是以上代码可以将当前文档中所有元素中索引值小于11的的元素的边框颜色设置为红色。
希望本文所述对大家的jquery程序设计有所帮助。
jQuery选择器案例
$(document).ready(function() { $('table tr:not(:first)').each(function() { $(this).children('td:not(:first)').hover(function() { $(this).css('color', 'red'); }, function() { $(this).css('color', 'black'); }).click(function() { alert($(this).html()); }); }); });