1.ID选择器
选择器就是通过ID来查询元素!
$(“#id”),这就可以通过id来获取jquery元素了!Jquery元素与DOM元素有些不同,既它们支持的属性和方法不同而已。
script type="text/javascript">
$(function(){
//document.getElementByIdx_x("id");//返回的是一个dom对象不是jquery对象
//获取到div内的所有内容包括标签(html内容)
alert($("#notMe").html());
//获取div内的不含标签的内容
alert($("#notMe").text());
});
div id="notMe"><</span>p>id="notMe"</</span>p></</span>div>
div id="myDiv">id="myDiv"</</span>div></</span>script>
2.元素选择器:
元素选择器就是通过元素来查询元素!
$(“elementName”),这就可以通过元素名来获取jquey元素。但与id选择器不同的是名称相同的元素有很多,所以获取到的jquery元素中包含了很多dom元素
div>div1</</span>div>
div>div2</</span>div>
$(function(){
//查找的所有的元素!它返回的是一个jquery对象,但jquery对象中包含了多个dom对象
alert($("div").length);
//text("xxx")将这个获取到的对象中的值变为了xxx
$("div").text("xxx");
//打印出所有的div的值
alert($("div").text());
//打印出第一个div的值
alert($("div").html());
});
3.类选择器:
(css类名)来查询元素!
$(“.myClass”),这就可以把所有包含了class=”myClass”的元素查询出来了
div class="notMe">class="notMe"</</span>div>
div class="myClass">class="myClass"</</span>div>
span class="myClass">class="myClass"</</span>span>
$(function(){
//把所有使用myClass的元素的内容变成‘消失’
$(".myClass").text("消失");
//把所有使用myClass的元素的内容变成‘消失’
$(".myClass").html("消失");
});
4.属性选择器
通过属性名和属性值来查询元素!
$(“[name]”)查找所有存在name的属性的元素!
用户名:<</span>input type="text" name="name"/>
密 码:<</span>input type="password" name="name"/>
学 历:
select name="">
option value="1">大学</</span>option>
option value="2">中学</</span>option>
option value="3" selected="selected">小学</</span>option>
select>
<</span>input type="submit" value="提交"/>
$(function(){
//获取属性名称为name的所有元素
alert($("[name]").length);
//获取属性名称是name和属性值是name的所有元素,并这些元素的value属性的属性值设置其为"张三"
$("[name=name]").val("张三");
//获取到selected属性和属性值等于selected的元素,并修改了其文本值为xxx
$("[selected=selected]").text("xxx");
//获取到option下的selected属性和属性值等于selected的元素,并修改了其文本值为yyy
$("option[selected=selected]").text("yyy");
//也可以使用表单选择器来获取
alert($(":selected").text());
});
5.表单选择器:
表单选择器指的是查询表单元素!
1.$(“:input”)查询所有表单元素,包括:input,textarea,select和button元素;
2.$(“.text”)查询所有”text”元素
3.$(“:password”)查询所有”password”.../>元素
4.$(“:radio”)查询所有”radio”.../>元素
5.$(“:checkbox”)查询所有”checkbox”.../>元素
6.表单对象属性:
radio和checkbox都有checked属性,可以通过这个属性值来查询元素。
$(“:checked”)查询所有被选中的radio或checkbox元素
input type="radio" name="name" value="大学"/>大学
input type="radio" name="name" value="中学" checked="checked"/>中学
input type="radio" name="xxx" value="小学" checked="checked"/>小学
$(function(){
//获取checked的元素的值并打印
alert($(":checked").val());
//获取name=xxx下的含有checked属性的元素
alert($("[name=xxx]:checked").val());
});
7.内容过滤选择器:
8.基本过滤选择器:
9.层次选择器:
11.子元素过滤选择器:
12.表单对象属性过滤选择器:
13.表单选择器: