jQuery选择器笔记

2019-01-08  本文已影响0人  五更月下琉璃

和css的class选择器、id选择器一样对HTML 的元素组或单个元素进行操作。

实例:

$(document).ready(function(){

$(''button").click(function(){

$("p").hide();

});

});

意思是点击这个按钮后所有的<p>会被隐藏


#id选择器,id是唯一的,需要选取唯一的元素的时候通过#id选择器来选取

$(document).ready(function(){

$(''button").click(function(){

$("#test").hide();

});

});

点击后id="test"的元素会被隐藏。


.class选择器:通过指定的class查找元素

$(".test")这是语法。

实例

$(document).ready(function(){

$(''button").click(function(){

$(" .test").hide();

});

});

点击之后所有class="test"的元素被隐藏。


常用的选取:

$("xx")    //选取所有元素

$(this)    //选取当前HTML元素

$("p.emm")    //选取class为emm的<p>元素

$("p.first")      //选取第一个<p>元素

$(div p span)    //层级选择器,div下的p元素中的span元素

$(div>p)    //父子选择器,div下的所有p元素

$("ul li:first")    //选取第一个<ul>元素的第一个<li>元素

$("ul li:first-child")    //选取每个<ul>元素的第一个<li>元素

$("[herf]")    //选取带有herf属性的元素

$("a[target='_blank']")    //选取所有target属性等于"_blank"的<a>元素

$(":button")选取所有type=”button“的<input>元素和<button>元素


为了方便维护jQuery函数,将其单独放到一个.js文件里会比较好,

<head>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script src="my_jquery_functions.js">

</script>

</head>

上一篇下一篇

猜你喜欢

热点阅读