jQuery--选择器详解

来源：互联网发布：国家与地区顶级域名编辑：程序博客网时间：2024/06/12 20:10

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的第一个子孙元素 2last是一样的3 所有p标签除了某(些)标签p:not(".a") 4 偶数开始的p标签，从下标0开始计数（参照js） 所以看页面是奇数变样式p:even5 与上面相反p:odd6 指定位数下标(索引)标签p:eq(3) 第四个变样式7 指定下标之后的所有p:gt(2） 下标大于28 与上面相反p:lt(2)9选取h1-h6标签 :header10 .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:empty4 选取含有子元素或文本内容的标签p:parent*//*可见性选择器1 css里div标签有 div{display:none}上面这个div 页面就看不到它了div:hidden2 与上面相反div:visible  */ /* 属性选择器1 [title]属性=xxx的p标签p[title=xxx]2属性 不写值也可以p[title]3还可以多属性，都符合才行&&p[title][name=xxx]*//*子元素过滤选择器1 选择e标签下子元素f里的第一个元素div p:first-child2last-child同样的用法3只包含一个子元素的only-child4和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标签:text3xx:password4 x:radio5x:checkbox上面这些也可以用 属性选择器也能做到6hiddenx:hidden 使用条件1不在页面可见2不占据位置表单属性选择器1 input:disabled   不可修改的2 xx:enabled3 :checked4 :selected /    select option:selected*/alert($(':text').val());alert($('input[type=text').val()); </script></html>

0 0