saber 酱的抱枕

Fly me to the moon

12/8
2014
学习

jq选择器大全

saber 撰写 无回复 1,047次查看

元素选择器：使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

属性选择器：使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

组选择器: 同时选择多个对象，逗号分隔

$("div,#test1,p,.test2,#test3")

后代选择器: 一个节点后的多个对象

$("div .test")

子选择器: :仅选择一个节点后的第一个子对象

$("div>.test")

临近选择器: 选取下一个兄弟节点

$("div + #test")

jq选择器大全

11/3
2014
学习

CSS属性选择器

saber 撰写 无回复 1,449次查看

这个知识在之前的《css选择器》里有提到，但是比较少用，今天用到了，我就单独再写一篇文章记下。

以前我已经熟悉了对input通过type来区分对待的css属性：

input[type=input]{border:1px solid #ccc;}
input[type=submit]{border:none;}

刚才要屏蔽友言的版权文字，但是它所在的标签没有class或者id的选择器，最后我想到了属性选择器，根据它的标签来选中它。

a[title="社会化评论是什么？"]{display:none;}

事实上，用a的href属性做选择器都可以的。
Read More →

CSS属性选择器

08/11
2014
学习

jq选择器大全

saber 撰写 无回复 1,069次查看

今天用到了$("#uc>dd").hide();这样的用法，稍后补全

一、基本选择器

 选择器  描 述  返回  示例
 #id  根据给定id匹配一个元素  单个元素  $("#test") 选取id为test的元素
 .class  根据给定类名匹配一个元素  集合元素  $(".test") 选取class为test的元素
 element  根据给定元素名匹配一个元素  集合元素  $("p") 选取p元素
 selector1,selector2...selectorN  将每一个选择器匹配到元素合成后一起返回  集合元素  $("div , span ,p , myClass")选取所在div span 和拥有class为myClass的标签的一组元素
 *  匹配所有元素  集合元素  $("*") 选取所在的元素

Read More →

jq选择器大全

08/5
2014
学习

CSS选择器

saber 撰写 无回复 1,480次查看

有些选择器我还不怎么会用，所以从w3复制过来

选择器 例子 例子描述 CSS
.class .intro 选择 class="intro" 的所有元素。 1
#id #firstname 选择 id="firstname" 的所有元素。 1
* * 选择所有元素。 2
element p 选择所有

元素。

 1
element,element div,p 选择所有

元素和所有

元素。

 1
element element div p 选择

元素内部的所有

元素。

 1
element>element div>p 选择父元素为

元素的所有

元素。

 2
element+element div+p 选择紧接在

元素之后的所有

元素。

 2
[attribute] [target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择活动链接。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的 input 元素。 2
:first-letter p:first-letter 选择每个

元素的首字母。

 1
:first-line p:first-line 选择每个

元素的首行。

 1
:first-child p:first-child 选择属于父元素的第一个子元素的每个

元素。

 2
:before p:before 在每个

元素的内容之前插入内容。

 2
:after p:after 在每个

元素的内容之后插入内容。

 2
:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个

元素。

 2
element1~element2 p~ul 选择前面有

元素的每个

    元素。
 3
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 元素。 3
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 元素。 3
:first-of-type p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

 3
:last-of-type p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

 3
:only-of-type p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

 3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个

元素。

 3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

 3
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个

元素的每个

元素。

 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。 3
:last-child p:last-child 选择属于其父元素最后一个子元素每个

元素。

 3
:root :root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个

元素（包括文本节点）。

 3
:target #news:target 选择当前活动的 #news 元素。 3
:enabled input:enabled 选择每个启用的 元素。 3
:disabled input:disabled 选择每个禁用的 元素 3
:checked input:checked 选择每个被选中的 元素。 3
:not(selector) :not(p) 选择非

元素的每个元素。

 3
::selection ::selection 选择被用户选取的元素部分。 3

CSS选择器