首页 > 代码库 > 2.1 、寻找元素 (重要的选择器和筛选器)

2.1 、寻找元素 (重要的选择器和筛选器)


 2 、寻找元素 (重要的选择器和筛选器)  


 2.1、选择器

         1.1 基本选择器      $("*")    $("#id")   $(".class")   $("element")   $(".class, p, div")


  •  【基本选择器】代码展示:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=http://www.mamicode.com/"jquery-1.12.4.js"></script>
</head>
<body>
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
<span id="foo:bar">1</span>
<span id="foo[bar]">2</span>
<span id="foo.bar">3</span>
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

<script>
// id 选择器
var x1 = $("#myDiv") // 默认获取的列表 [ <div id="myDiv">id="myDiv"</div> ]
x1.each(function () {
console.log("id 选择器",this)
})

var x2 = $("#foo\\[bar\\]") // 重点注意转义。
x2.each(function () {
console.log("id 选择器",this)
})

// 标签选择器
var x3 = $("div") // [ <div>DIV1</div>, <div>DIV2</div> ]
x3.each(function () {
console.log("标签选择器 ",this)
})

// class 选择器
var x4 = $(".myClass") // [ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
x4.each(function () {
console.log("class 选择器 ",this)
})
$("*")

/*
匹配所有元素
多用于结合上下文来搜索
*/

// selector1,selector2,selectorN
/*将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。
*/
$("div,span,p.myClass") //[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

</script>

</body>
</html>

    

 1.2 、层级选择器       $(".outer div")(所有的后代)    $(".outer>div")(所有的子代)      $(".outer+div")(匹配所有跟在.outer后面的div)    $(".outer~div")(.outer后面的所有div)

  • 【层级选择器】代码展示:

 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=http://www.mamicode.com/"../../jquery-1.9.1.min.js"></script>
</head>
<body>

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


<script>
// 后代选择器 ancestor descendant
// 在给定的祖先元素下匹配所有的后代元素
var x1 = $("form input") //[ <input name="name" />, <input name="newsletter" /> ]
x1.each(function () {
console.log("后代选择器 ",this)
})
// 儿子选择器 在给定的父元素下匹配所有的子元素
var x2 = $("form > input") //[ <input name="name" /> ]

// 只要是相邻的即可
var x3 = $("label + input") //[ <input name="name" />, <input name="newsletter" /> ]

// 兄弟选择器
var x4 = $("form ~ input") //[ <input name="none" /> ]

</script>
</body>
</html>

   


    1.3 基本筛选器      $("li:first")   $("li:eq(2)")   $("li:even")(偶数)   $("li:gt(1)")

         冒号的基本选择器

         代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=http://www.mamicode.com/"jquery-1.12.4.js"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>

<input name="apple" />
<input name="flower" checked="checked" />
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>

<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
<button id="run">Run</button><div></div>


<script src=http://www.mamicode.com/"jquery-1.12.4.js">
// first last
var x1 = $("li:first") //[ <li>list item 1</li> ]

// not()
var x2 = $("input:not(:checked)") //[ <input name="apple" /> ]

// even 偶数

var x3 = $("tr:even") //[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
// odd 奇数
var x4 = $("tr:odd") // [ <tr><td>Value 1</td></tr> ]

// eq 找索引 gt() lt() $("div:lang(en)")
var x5 = $("tr:eq(1)") //[ <tr><td>Value 1</td></tr> ]
// :header 匹配如 h1, h2, h3之类的标题元素
$(":header").css("background", "#EEE"); //[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]

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

$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});
// focus
// :root html元素
</script>

</body>
</html>

    

  1.4 属性选择器      $(‘[id="div1"]‘)   $(‘["alex="sb"][id]‘)

          
   >>1.4.1、内容选择器:
        代码展示:

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=http://www.mamicode.com/"jquery-1.12.4.js"></script>
</head>
<body>



<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

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

<div><p>Hello</p></div>
<div>Hello again!</div>

<script>
// contains() 匹配包含给定文本的元素
var x6 = $("div:contains(‘John‘)") //[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

// empty 匹配所有不包含子元素或者文本的空元素
$("td:empty") //[ <td></td>, <td></td> ]
//:has(selector) 匹配含有选择器所匹配的元素的元素

$("div:has(p)").addClass("test"); //[ <div class="test"><p>Hello</p></div> ]


//:parent 匹配含有子元素或者文本的元素
$("td:parent") //[ <td>Value 1</td>, <td>Value 2</td> ] 查找所有含有子元素或者文本的 td 元素



</script>
</
body>
</
html>



>> 1.4.2、可见性:
      代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=http://www.mamicode.com/"jquery-1.12.4.js"></script>
</head>
<body>

<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>

<form>
<input type="text" name="email" />
<input type="hidden" name="id" />
</form>

<script>
// :hidden 匹配所有不可见元素,或者typehidden的元素
$("tr:hidden") //[ <tr style="display:none"><td>Value 1</td></tr> ]
$("input:hidden") //[ <input type="hidden" name="id" /> ]

//:visible 匹配所有的可见元素
$("tr:visible") //[ <tr><td>Value 2</td></tr> ]

</script>


</body>
</html>


    
>> 1.4.3、属性:
     代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=http://www.mamicode.com/"jquery-1.12.4.js"></script>
</head>
<body>

<div>
<p>Hello!</p>
</div>
<div id="test2"></div>

<input type="checkbox" name="newsletter" value=http://www.mamicode.com/"Hot Fuzz" />
<input type="checkbox" name="newsletter" value=http://www.mamicode.com/"Cold Fusion" />
<input type="checkbox" name="accept" value=http://www.mamicode.com/"Evil Plans" />
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />

<script>

//[attribute] 匹配包含给定属性的元素。注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可。
$("div[id]") //[ <div id="test2"></div> ]
//[attribute=value] 匹配给定的属性是某个特定值的元素
$("input[name=‘newsletter‘]").attr("checked", true); //[ <input type="checkbox" name="newsletter" value="http://www.mamicode.com/Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="http://www.mamicode.com/Cold Fusion" checked="true" /> ]
//[attribute!=value] [attribute^=value]


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

//[attribute*=value] 匹配给定的属性是以包含某些值的元素
$("input[name*=‘man‘]") //[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

</script>


</body>
</html>



 1.5 表单选择器      $("[type=‘text‘]") 简写成 $(":text")                    注意: 只适用于input标签
        
         表单选择器
        代码展示:
       $("input:checked")
 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=http://www.mamicode.com/"jquery-1.12.4.js"></script>
</head>
<body>

<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>

<script>
$(":input") //所有input
$(":password") //[ <input type="password" /> ]
$(":checkbox")
</script>
</body>
</html>

     








来自为知笔记(Wiz)


2.1 、寻找元素 (重要的选择器和筛选器)