首页 > 代码库 > jquery中的选择器
jquery中的选择器
jquery中的选择器用于获取文档中的对象。通常的有id选择器，类选择器，element选择器等。其选择器部分与css中的选择器大体上一样，在细微处有点区别。匹配多个元素
1,id选择器，累选择器，element选择器，*选择器（4个）
//html代码<div id="box"></div><div class="content"></div><p>this is p</p>//jquery代码$("#box");//获取第一个div元素("id="box")$(".content");//获取第二个div元素（class="content"）$("p");//获取p元素
&("*");//获取文档中所有的元素
2.匹配多个元素以及祖先下匹配的所有后代元素和子元素（3个）
//html<div class="wrap"><p>this is a p</p><p calss="another"> this is a p another</p><div class=""content> <p>this is a p in content</p></div></div><img src="" /><h1>this is h1</h1>//jquery$(".content,img")//匹配<div class=""content><p>this is a p in content</p></div>和<img src="" />
$(".wrap p")//匹配<p>this is a p</p><p calss="another"> this is a p another</p><p>this is a p in content</p>$(".wrap>p")//匹配<p>this is a p</p><p calss="another"> this is a p another</p>3.prev+next,prev~siblings(2个）
//html<div class="one"><img src="" /><p>just a p</p><input type="text"/><input type="password"/></div><div><p>it‘s a p</p></div>//jquery$(".one p+input")//<input type="text"/>$(".one p~input")//<input type="text"/><input type="password"/>4.:first,not,even,odd,:last（5个）
//html<ul class="item"><li>1</li><li class="two">2</li><li>3</li><li>4</li><li>5</li></ul>//jquery$(".item li:first")//<li>1</li>第一个
$(".item li:last")//<li>5</li>最后一个
&(".item li:not(.two)//<li>1</li><li>3</li><li>4</li><li>5</li>
$(".items li:even")//<li>1</li><li>3</li><li>5</li>索引值为偶数，从0开始
$(".items li:odd")//<li>2</li><li>4</li>索引值为奇数5：eq(index),:gt(index)，:lt(index) ,:lang() （4个）
//html<ul><li>1</li><li lang="en>2</li><li>3</li></ul>//jquery$("li:eq(0)")//<li>1</li>索引值为0$("li:gt(0)")//<li>2</li><li>3</li>索引值在0之后的所有相匹配的元素$("li:lt(2)")//<li>1</li><li>2</li>索引值在2之前的所有相匹配的元素$("li:lang(en)")//<li>2</li>lang的值为en地li元素 6,:header
//html<h1>it‘s h1</h1><p>text</p><h2>it‘s h2</h2><p>footer</p>//jquery$(":header")//<h1>it‘s h1</h1><h2>it‘s h2</h2>匹配所有标题元素h1~h67:animated
//html<div class="box></div><div class="circle"></div>//jquery$(".box").animate({maeginLeft:100px},)//.box运动￥（“div:animated”）//匹配<div class="box></div>8,:focus获取当前获得焦点的元素，:root获取元素的根元素，即html，：target选择由文档URI的格式化识别码表示的目标元素。(3个）
//html<input type="text" autofocus/>//自动获得焦点<button><button><input type="password"/>//jquery$(":focus")//<input type="text" autofocus/>获取焦点的元素9：contains,:empty:has(selector),:parent,:hidden,:visible(6个)
//html<div><p>abc 123</p></div><div></div><p>abc 456</p><p></p><p><a href="">159</a></p><div hidden><img src="" /></div>//jquery$("p:contains(‘abc)")//<p>abc 123</p>和<p>abc 456</p>文本节点中包含有字符串abc的p元素$("div:empty")//<div></div>不包含子元素或文本的空div元素$("div:has(p)")//<div><p>abc 123</p></div>包含有p元素的div元素$("p:patent")//<p>abc 456</p>,<p>abc 123</p>,<p><a href="">159</a></p>含有子元素或文本节点的p元素$("div:hidden")//<div hidden><img src="" /></div>所有隐藏的div元素￥（“div:vidible”）//<div><p>abc 123</p></div>,<div></div>所有可见得div元素10，[attribute],[attribute=value],[attributeQ!=value],[attribute^=value],[attribute$=value],[attribute*=value],[attrSel1][attrSel2]（7个）
//html<input type="text" name="text1"/><input type="text" name="novel2" /><input type="text" name="text3" /><input type="text" name="text4"/><input type="text" value="http://www.mamicode.com/text"/><input type="text" value="http://www.mamicode.com/text" class="abc"/>//jquery$("input[value)")//<input type="text" value="http://www.mamicode.com/text"/>含有value属性$("input[name=‘text1‘]")//<input type="text" name="text1"/>name属性值为text1的input$("input[name！=‘text1‘]")//<input type="text" name="novel2"/>,<input type="text" name="text3"/>,<input type="text" name="text4"/>,<input type="text" value="http://www.mamicode.com/text"/>name属性名不为text1的input$("input[name^=‘text‘]")//<input type="text" name="text1"/>,<input type="text" name="text3"/>,<input type="text" name="text4"/>name属性值以text开头的input元素$("input[name$=‘2‘]")//<input type="text" name="novel2"/>name属性值以2结尾的input$("input[name*=‘e‘]")//<input type="text" name="text1"/>,<input type="text" name="novel2"/>,<input type="text" name="text3"/>,<input type="text" name="text4"/>name属性值包含2的input$("input[class][type=‘text‘]")//<input type="text" value="http://www.mamicode.com/text" class="abc"/>有class属性且type属性值为text的input11，：first-child,:first-of-type,:last-child,:last-of-type,:nth-child,:nth-last-child,:nth-of-type,:nth-of-last-type,:only-of-type,:only-child(10个)
//html<ul><li>1</li><li>2</li><li>3</li></ul><ul><li>no</li></ul><p>aaaa</p><p>aaaa</p><p>aaaa</p>//jquery$("ul li:first-child")//<li>1</li>,<li>no</li>$("ul li:first-of-type")//<li>1</li>,<li>no</li>$("ul li:last-child")//<li>3</li>,<li>no</li>$("ul li:last-of-child")//<li>3</li>,<li>no</li>$("ul li:nth-child(2)//<li>2</li>序号从1开始$("ul li:nth-of-type(2)//<li>2</li>$("ul li:nth-last-child(2)//<li>2</li>倒数$("ul li:nth-last-of-type(2)//<li>2</li>倒数$("ul li:only-child")//<li>no</li>只有一个$("ul li:only-of-type")//<li>no</li>12.:input,:text,:password,:radio,:checkbox,:submit,:image,:reset,:file,:button(10个)
//html<form> <input type="button" value="http://www.mamicode.com/Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option</option></select> <textarea></textarea> <button>Button</button></form>//jquery$(":input")//<input type="button" value="http://www.mamicode.com/Input Button"/>,<input type="checkbox" />,<input type="file" />,<input type="hidden" />,<input type="image" />
,<input type="password" />,<input type="radio" />,<input type="reset" />,<input type="submit" />,<input type="text" />,<select><option>Option</option></select>,<textarea></textarea> ,<button>Button</button>
$(":text")//<input type="text" />
$(":password")//<input type="password" />
$(":radio")//<input type="radio" />
$(":checkbox")//<input type="checkbox" />
$(":submit")//<input type="submit" />
$(":image")//<input type="image" />
$(":resrt")//<input type="reset" />
$(":button")//<button>Button</button>
$(":file")//<input type="file" /> 13.:enabled,:disabled,:checked,:selected(4个)
//html<form> <input name="email" disabled="disabled" /> <input name="id" /> <input type="checkbox" name="newsletter" checked="checked" value="http://www.mamicode.com/Daily" /> <input type="checkbox" name="newsletter" value="http://www.mamicode.com/Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="http://www.mamicode.com/Monthly" /> <option value="http://www.mamicode.com/1">Flowers</option> <option value="http://www.mamicode.com/2" selected="selected">Gardens</option> </form>//jquery$("input:enabled")//<input name="id" />,<input type="checkbox" name="newsletter" checked="checked" value="http://www.mamicode.com/Daily" />,<input type="checkbox" name="newsletter" value="http://www.mamicode.com/Weekly" />,<input type="checkbox" name="newsletter" checked="checked" value="http://www.mamicode.com/Monthly" />, <option value="http://www.mamicode.com/1">Flowers</option>,<option value="http://www.mamicode.com/2" selected="selected">Gardens</option>$("input:disabled")//<input name="email" disabled="disabled" />$("input:checked")//<input type="checkbox" name="newsletter" checked="checked" value="http://www.mamicode.com/Daily" />$("option:selected")//<option value="http://www.mamicode.com/2" selected="selected">Gardens</option>jquery中的选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。