jQuery选择器笔记
和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>