您的位置：首页 > Web前端 > JQuery

jQuery--选择器详解

2016-03-01 20:10 597 查看

1 基本选择器

2 层次选择器

3 过滤选择器

4 内容选择器

5 可见性选择器

6 属性选择器

7 子元素过滤选择器

8 表单选择器

9 表单属性选择器

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<span>span</span>
<input type="text" value="ahaha"></input>

</body>
<script type="text/javascript">
/*jq选择器优势：1不担心浏览器兼容问题 2容错机制（html的id名写错，相同情况下js报错 jq不报*/

/*基本选择器
1 id选择器
$('#id')
2 类
$('.class')
3 标签
$('p')
x4 *选择器所有的节点都添加样式基本不会用
5 多重选择器
$('p,div')

层次选择器
e f为标签名

1 e f e的所有后代
2 e>f e的子后代（没有孙后代）
$('div>p')
3 e+next e 邻近的也就是下一个标签
$('p+span')
或者$('div').next()

4 e~sibling 把div后的所有p标签
$('div~p')
$('div').nextAll()

*/

// alert($('p+p').html());
// alert($('div').next().html());

/*
过滤选择器 ps下面省略若干$()

1
$('p:first')
在所有p标签中的第一个p标签

p :first (注意 p后面的空格)
是第一个p的第一个子孙元素

2
last是一样的

3
所有p标签除了某(些)标签
p:not(".a")

4
偶数开始的p标签，从下标0开始计数（参照js）所以看页面是奇数变样式
p:even

5
与上面相反
p:odd

6
指定位数下标(索引)标签
p:eq(3) 第四个变样式

7
指定下标之后的所有
p:gt(2）下标大于2

8
与上面相反
p:lt(2)

9
选取h1-h6标签
:header

10
.animate({'left':'100'},10000)

选取运动的样式
:animated
*/

$('p:gt(1)').css('border','solid 10px orange');

/*

内容选择器
1 p标签内有所写文本的p标签
p:contains("内容")

2 有某子孙标签的p标签
p:has("strong")

3 选择空的标签
p:empty

4 选取含有子元素或文本内容的标签
p:parent

*/

/*
可见性选择器
1 css里div标签有 div{display:none}
上面这个div 页面就看不到它了
div:hidden

2 与上面相反
div:visible

*/

/*
属性选择器
1 [title]属性=xxx的p标签
p[title=xxx]

2属性不写值也可以
p[title]

3还可以多属性，都符合才行&&
p[title][name=xxx]

*/

/*
子元素过滤选择器
1 选择e标签下子元素f里的第一个元素
div p:first-child

2last-child同样的用法

3只包含一个子元素的
only-child

4和eq不一样是从1开始的，根据css来的规范
子元素的第x个
nth-child(2)

还可以
nth-child(2n)偶数
nth-child(2n-1)奇
nth-child(odd)奇数
nth-child(even)偶

*/

/*表单选择器

1input textarea 等所有表单元素
$(':input')

2input type为text的input标签
:text

3
xx:password

4
x:radio

5
x:checkbox
上面这些也可以用属性选择器也能做到

6hidden
x:hidden 使用条件1不在页面可见2不占据位置

表单属性选择器
1 input:disabled 不可修改的
2 xx:enabled
3 :checked
4 :selected / select option:selected*/

alert($(':text').val());
alert($('input[type=text').val());

</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery javascript

相关文章推荐

新的分享

章节导航