AI智能
改变未来

jquery选择器(id.class.element等)


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\")           //文件
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » jquery选择器(id.class.element等)