基础选择器:id选择器,标签名选择器,类选择器,选择所有html元素,同时选择多个元素层次选择器:祖先-后代选择器,父子选择器,前后选择器,前后兄弟选择器

可以给HTML元素设置一个id,根据id选取该HTML元素。 例如,使用$("#menu")可以选取id为menu的HTML元素。

p注意:同一页面不要出现多个id相同的元素。当出现这种情况时,id选择器将只选择页面中第一个符合条件的元素。

<html>

<head>

<script type="text/javascript" src="http://img.studyofnet.comJquery-1.11.2.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#button1").click(function(){

alert("hello");

});

});

</script>

</head>

<body>

<button id="button1">单击我</button>

</body>

</html>

使用标签名可以选取网页中所有该类型的元素。

例如: p使用$("div")可以选取网页中所有的<div>元素;

使用$("a")可以选取网页中所有的<a>元素;

使用$("p")可以选取网页中所有的<p>元素;

使用$(".ClassName")可以选取网页中所有应用了CSS类(class属性为ClassName)的HTML元素

使用$("*")可以选取网页中所有的HTML元素。

使用$(selector1, selector2, selectorN)可以同时选取网页中的多个HTML元素。

即用 ,号 分隔多个选择器。

<script>

$(document).ready(function(){

$("div, span").css("border","3px solid red");

});

</script>

<style>

……

层次选择器

ancestor descendant选择器可以选取指定祖先元素的所有指定类型的后代元素。 例如,使用$("form input")可以选择表单内(任何层次)的所有input元素。

parent > child选择器可以选取指定父元素的所有子元素,子元素必须包含在父元素中。 例如,使用$("form > input")可以选择form元素下一层(即孩子)的所有input元素。

prev next选择器可以选取紧接在指定的prev元素后面的next元素。 例如,使用$("label input")可以选择所有紧接在label元素后面的input元素。

prev ~ siblings选择器可以选取指定的prev元素后面根据siblings过滤的元素。 例如,使用$("#prev ~ div")可以选择所有在id为prev的元素后面的div元素。

,