手册的选择器部分

1,#id  

$("#div"); 查找html标签中id为div的元素

<div id="div"></div>

2,element

$("div");   查找标签中 元素为div的所有元素

<div>1</div>

<div>1</div>

<p>1</p>

3,.class

$(".a"); 查找标签中class为a的所有元素

<div class=“a”></div>

<div class=“b”></div>

<div class=“c”></div>

4,*

$("*"); 查找html中所有的元素

<div></div>

<p></p>

<span></span>

5,selector1,selector2,selectorN

$("div,p.myClass,no"); 查找多个类型的  最后返回每一个结果

<div>div</div> <p class="myClass">p class="myClass"</p> <span>span</span> <p class="no">p</p>

6,ancestor,descendant

$("ul li"); 查找ul 下面的li

<ul>

<li></li>

</ul>

7,parent > child

$("ul>li"); 查找ul 下面的子类li

<ul>

<li></li>

</ul>

8,prev + next

$(".a + .b");   匹配所有跟在 .a后面的 .b元素

<ul>

<li class=“a”>1</li>

<li class=“b”>2</li>

</ul>

9,prev ~ siblings

$("form ~ input");找到 form 元素的所有同辈 input 元素

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

10,:first 获取第一个元素

$(‘li:first‘);

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
</ul>

11,:last 获取最后个元素

$(‘li:last‘);

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
</ul>

12,:not(selector)

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

<input name="flower" checked="checked" />

13,:even

$("tr:even")匹配所有索引值为偶数的元素,从 0 开始计数

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

14,:odd

$("tr:odd")匹配所有索引值为奇数的元素,从 0 开始计数

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

15,:eq(index)

$("tr:eq(1)"); 匹配一个给定索引值的元素

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

16,:gt(index)

$("tr:gt(1)"); 匹配所有大于给定索引值的元素

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

17:lt(index)

$("tr:lt(1)"); 匹配所有小于给定索引值的元素

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

18:lang(language)

$("p:lang(it)") 选择所有<P> 的语言属性

19 :header

$(":header").css("background", "#EEE"); 匹配如 h1, h2, h3之类的标题元素

20:animated

$("div").animate({ left: "+=20" }, 1000);  匹配所有正在执行动画效果的元素

21 :focus  匹配当前获取焦点的元素

$( "#content" ).delegate( "*", "focus blur", function( event ) {
    var elem = $( this );
    setTimeout(function() {
       elem.toggleClass( "focused", elem.is( ":focus" ) );
    }, 0);
});

22:root 选择该文档的根元素

$(":root").css("background-color","yellow");

23 :target 选择由文档URI的格式化识别码表示的目标元素。

$("p, button, h1, h2").click(function(event){  $("div").html("Triggered by a " + event.target.nodeName + " element.");});

24 :contains(text)

$("div:contains(‘John‘)") 匹配包含给定文本的元素
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

25 :empty

$("td:empty") 匹配所有不包含子元素或者文本的空元素
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

26 :has(selector)

$("div:has(p)").addClass("test");匹配含有选择器所匹配的元素的元素

27:parent

$("td:parent") 匹配含有子元素或者文本的元素

28 :hidden

$("tr:hidden")匹配所有不可见元素,或者type为hidden的元素

29 :visible

$("tr:visible")匹配所有的可见元素

30 [attribute]

$("div[id]") 匹配包含给定属性的元素。
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

31  [attribute=value]

$("input[name=‘newsletter‘]").attr("checked", true); 匹配给定的属性是某个特定值的元素
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

32 [attribute!=value]

$("input[name!=‘newsletter‘]").attr("checked", true); 匹配所有不含有指定的属性,或者属性不等于特定值的元素

33[attribute^=value]

$("input[name^=‘news‘]") 匹配给定的属性是以某些值开始的元素

34 [attribute$=value]

$("input[name$=‘letter‘]") 匹配给定的属性是以某些值结尾的元素

35 [attribute*=value]

$("input[name*=‘man‘]")匹配给定的属性是以包含某些值的元素

36 [selector1][selector2][selectorN]

$("input[id][name$=‘man‘]") 复合属性选择器,需要同时满足多个条件时使用
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />

37 :first-child

$("ul li:first-child") 匹配第一个子元素

38 :first-of-type

$("div:first-of-type") 选择所有相同的元素名称的第一个兄弟元素

39 :last-child

$("ul li:last-child")查找最后一个元素

40  :last-of-type

$("p:last-of-type") 选择器匹配在文档树中具有相同的父元素并且相同的元素名称,后面没有任何其他元素 的元素。

41 :nth-child

$("ul li:nth-child(2)") 其父元素下的第N个子或奇偶元素

42 :nth-last-child(n|even|odd|formula)

$("ul li:nth-last-child(2)"); 选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个

43 :nth-last-of-type(n|even|odd|formula)

$("ul li:nth-last-of-type(2)"); 选择的所有他们的父级元素的第n个子元素,计数从最后一个元素到第一个

44 :nth-of-type(n|even|odd|formula)

$("span:nth-of-type(2)"); 选择同属于一个父元素之下,并且标签名相同的子元素中的第n个

查找每个span,这个 span 是 其所有兄弟span元素中的第二个元素

<div>
<span>John</span>
<b>Kim</b>
<span>Adam</span>
<b>Rafael</b>
<span>Oleg</span>
</div>
<div>
<b>Dave</b>
<span>Ann</span>
</div>
<div>
<i><span>Maurice</span></i>
<span>Richard</span>
<span>Ralph</span>
<span>Jason</span>
</div>

45 :only-child

$("ul li:only-child") 如果某个元素是父元素中唯一的子元素,那将会被匹配

46 :only-of-type

$("button:only-of-type").text("Alone").css("border", "2px blue solid");选择所有没有兄弟元素,且具有相同的元素名称的元素。

47 :input

$(":input") 匹配所有 input, textarea, select 和 button 元素

48 :text

$(":text")匹配所有的单行文本框
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

49 :password

$(":password") 查找所有密码文本框

50 :radio

$(":radio") 查找所有单选按钮

51 :checkbox

$(":checkbox") 查找所有复选框

52  :submit

$(":submit") 查找所有提交按钮

53   :image

$(":image") 查找所有图像域

54 :reset

$(":reset") 查找所有重置按钮

55 :button

$(":button") 查找所有按钮

56 :file

$(":file") 查找所有文件域

57 :hidden

$("tr:hidden") 匹配所有不可见元素,或者type为hidden的元素

58 :enabled

$("input:enabled") 查找所有可用的input元素

59 :disabled

$("input:disabled") 查找所有不可用的input元素

60  :checked

$("input:checked") 查找所有选中的复选框元素

61 :selected

$("select option:selected") 查找所有选中的选项元素

时间: 2024-08-02 12:47:30

手册的选择器部分的相关文章

css3参考手册

最近在学习CSS3,刚从网上找到CSS3参考手册与大家分享: CSS 参考手册 CSS 参考手册 CSS 选择器 W3School 的 CSS 参考手册定期通过所有主流浏览器进行测试. CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打印 Ruby 语音 表格 文本 2D/3D 转换 过渡 用户界面 "CSS" 列指示该属性是在哪个 CS

CSS3 [attribute^=value] 选择器

定义和用法 [attribute^=value] 选择器匹配元素属性值带指定的值开始的元素. 浏览器支持 所有主流浏览器都支持[attribute^=value] 选择器. 注意: [attribute^=value]在IE8中运行,必须声明<!DOCTYPE> 实例 设置class属性值以"test"开头的所有div元素的背景颜色: div[class^="test"] { background:#ffff00; } 在线运行 原文地址:http://

CSS规范 - 代码格式

选择器.属性和值都使用小写 在xhtml标准中规定了所有标签.属性和值都小写,CSS也是如此.单行写完一个选择器定义 便于选择器的寻找和阅读,也便于插入新选择器和编辑,便于模块等的识别.去除多余空格,使代码紧凑减少换行. 如果有嵌套定义,可以采取内部单行的形式. /* 单行定义一个选择器 */ .m-list li,.m-list h3{width:100px;padding:10px;border:1px solid #ddd;} /* 这是一个有嵌套定义的选择器 */ @media all

jQuery 教程

jQuery 教程简介 JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应

一些工作总结

1.<form :input path=>和el表达${}都是可以往前传也可以往后传的 2.在jssite的框架里面,可以使用vo.permInterfaceInfo.interfaceUrlCode,是可以取到的 SELECT * from tc_perm_interface_info i LEFT JOIN tc_perm_interface_role_ref ir On i.id IN ( SELECT irr.interface_id FROM tc_perm_interface_ro

[转]jQuery 双击事件(dblclick)时,不触发单击事件(click)

例1: 链接:http://www.w3school.com.cn/jquery/event_dblclick.asp HTML 系列教程 浏览器脚本 服务器脚本 ASP.NET 教程 XML 系列教程 Web Services 系列教程 建站手册 jQuery 教程 jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 效果 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画

CSS 选择器语法参考手册

转自:http://www.w3school.com.cn/cssref/css_selectors.asp CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指示该属性是在哪个 CSS 版本中定义的.(CSS1.CSS2 还是 CSS3.) 选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna

jquery选择器(照着jq手册写的)

基本 1.id 概述 根据给定的ID匹配一个元素. 使用任何的元字符(如 !"#$%&'()*+,./:;<=>[email protected][\]^`{|}~)作为名称的文本部分, 它必须被两个反斜杠转义:\\. 参见示例. 用于搜索的,通过元素的id属性中给定的值 //查找ID的为"myDiv"的元素.并给他个css样式 <div id="myDiv">I am div</div> <div id=

css选择器参考手册

选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstname" 的所有元素. 1 * * 选择所有元素. 2 element p 选择所有 <p> 元素. 1 element,element div,p 选择所有 <div> 元素和所有 <p> 元素. 1 element element div p 选择 <di