jquery的选择器总结(部分):
1.id选择器(格式为#开头)
<div id=\"div1\"></div>$(\"#div1\").html(\"我爱你\");
2.element元素选择器(格式为直接写)
<div></div>$(\"div\").html(\"我爱你\");
3.class类选择器(格式为.开头)
<div class=\"div3\"></div>$(\".div3\").html(\"我爱你\");
4.层级选择器(找到menudiv下的所有li添加红色背景)
<div class=\"menu1div\"><div class=\"menu1Title\" onclick=\"menu1Click(\'ul1\')\">数据管理</div><ul id=\"ul1\"><li onclick=\"kehu()\">客户管理</li><li onclick=\"xiangmu()\">项目管理</li><li onclick=\"picture()\">图片管理</li></ul></div>
$(\".menu1div li\").css(\"background-color\",\"red\");
5.不知道应该叫什么 父子选择器???
<form><label>Name:</label><input name=\"name\" /><fieldset><label>Newsletter:</label><input name=\"newsletter\" /></fieldset></form>$(\"form > input\") //找到form表单下的所有子级input标签
6.组合选择器
$(\"h1, h2, h3\"); // 匹配 <h1>、<h2> 和 <h3> 元素$(\"body>p, div.div1\"); // 如上,匹配body下面的p标签,以及类名为div1的div
7.匹配所有跟在 label 后面的 input 元素
<form><label>Name:</label><input name=\"name\" /><fieldset><label>Newsletter:</label><input name=\"newsletter\" /></fieldset></form><input name=\"none\" />
$(\"label + input\")
8.找到所有与表单同辈的 input 元素
<form><label>Name:</label><input name=\"name\" /><fieldset><label>Newsletter:</label><input name=\"newsletter\" /></fieldset></form><input name=\"none\" />
$(\"form ~ input\") //匹配到为name=\"none\"的input
9.获取匹配的第一个元素
<ul><li>li 1</li><li>li 2</li><li>li 3</li><li>li 4</li><li>li 5</li></ul>
$(\"li:first\"); //匹配到li 1$(\"li:last\"); //匹配到li 5
10.查找所有未选中的 input 元素
<input id=\"a\" /><input id=\"b\" checked=\"checked\" />
$(\"input:not(:checked)\") //匹配到id为a的input
11.匹配所有索引值为偶数的元素,从 0 开始计数
<table><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr></table>
$(\"tr:even\") //匹配到1,3,5,7等,即下表0,2,4,6。$(\"tr:odd\") //匹配到2,4,6,8等,即下标1,3,5,7。
12.匹配到指定索引的元素
<table><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3/td></tr></table>
$(\"tr:eq(1)\") //匹配到2,因为下标从0开始。 指定索引$(\"tr:gt(0)\") //匹配到2,3 即匹配大于给定索引的元素$(\"tr:lt(2)\") //匹配到1,2 即匹配小于给定索引的元素
13.匹配含有指定文本的元素(cintains)
<div>朱仁彬</div><div>李飞</div><div>朱强</div><div>汪勇兴</div>
$(\"div:contains(\'朱\')\") //匹配到朱仁彬和朱强
14.匹配空元素
$(\"td:empty\") //匹配空的td元素
15.匹配含有选择器所匹配的元素 (has)
$(\"div:has(p)\").addClass(\"test\"); //匹配含有p标签的div 为其添加一个class
16.匹配含有子元素或者文本的元素
<table><tr><td>1</td><td></td></tr><tr><td>2</td><td></td></tr></table>
$(\"td:parent\") //匹配到1,2
17.匹配所有不可见元素,或者type为hidden的元素
<table><tr style=\"display:none\"><td>1</td></tr><tr><td>Value 2</td></tr></table><input type=\"hidden\" name=\"id\" />
$(\"tr:hidden\") // 匹配到不可见的tr 1$(\"input:hidden\") // 匹配到类型为hidden的input$(\"tr:visible\") // 匹配到可见的tr 2
18.找到name为abc的input为其添加一个选中(!=不等于,^=开头,$=结尾,*=包含)
$(\"input[name=\'abc\']\").attr(\"checked\", true);$(\"input[name!=\'abc\']\").attr(\"checked\", true); //此行为对立的不等于 匹配name不为abc的input$(\"input[name^=\'abc\']\").attr(\"checked\", true); //匹配name以abc开头的input$(\"input[name$=\'abc\']\").attr(\"checked\", true); //匹配name以abc结尾的input$(\"input[name*=\'abc\']\").attr(\"checked\", true); //匹配name包含abc的input
19.复合属性选择器,找到含有id属性且name以man结尾的input
$(\"input[id][name$=\'man\']\")
20.根据类型查找
$(\":text\") //查找文本框$(\":password\") //查找密码框$(\":radio\") //查找单选按钮$(\":checkbox\") //复选按钮$(\":submit\") //提交按钮$(\":image\") //图片$(\":reset\") //重置按钮$(\":button\") //所有按钮$(\":file\") //文件