jquery选择器操作一

1.jquery符号说明：

 1）  $（）用来制造jquery对象，转换为jquery对象后才能对其进行jquery操作；反之如果取得的是dom对象应该用dom对象操作的方法，而不能使用jquery对象的操作方法

 2） jquery对象和dom对象转化：jquery通过选择器$("条件")来获取对象、dom通过w3c规定的方法获取对象

例子

将dom对象加上$就可转化为jquery对象：jqueryObejct = $(dom)；

将jquery对象转化为dom对象：i.var domObject = $jqueryObejct【0】

                                                       ii.var domObject = $jqueryObejct.get【0】

2.jquery选择器分类及其说明：

jquery选择器写法简洁、支持css选择器、强大的事件处理机制

1）基本选择器

2）层次选择器

说明：$("prev + next") 等价于 $("prev").next("next")

           $("prev ~ siblings") 等价于 $("prev").nextAll("siblings")

3）基本过滤选择器

4）内容过滤选择器

5）可见性过滤选择器

可见性过滤选择器需要注意的是，选取hidden标签的时候，不仅包括样式属性display为none的元素，也包括表单隐藏域，以及visibility：hiiden的元素

本节测试代码：

例子一：body code:

id为divId的div元素
class为one的div元素

	
class为two的子元素p
	class为two的子元素a

js code:

//输出id为divId的文本内容
alert($("#divId").text());
//class为one的div元素背景色改为#295
$(".one").css("background-color","#295");
//输出a标签的文本内容
alert($("a").text());
//所有的div背景色改为#259
$("*").css("background-color","#259");
//输出class为one,id为divId的文本内容
alert($(".one,#divId").text());

例子二：

css code：

body code:

手动重置页面元素
点击下列按钮时先自动重置页面


基本选择器.

  









	id为one,class为one的div
	
class为mini


		id为two,class为one,title为test的div.
	
class为mini,title为other
	
class为mini,title为test


	
class为mini
	
class为mini
	
class为mini
	



	
class为mini
	
class为mini
	
class为mini
	
class为mini,title为tesst
	
style的display为"none"的div
class为"hide"的div
包含input的type为"hidden"的div
正在执行动画的span元素.

js code:

$("#reset").click(function(){
	$("*").removeAttr("style");
});
		
//给id为mover的元素添加动画.
function animateIt() {
	$("#mover").slideToggle("slow", animateIt);
}
animateIt();
		
$("input[type=button]").click(function(){
	if($("#isreset").is(":checked")){$("#reset").click();}
});
		
//btn1 选择 id为 one 的元素
$("#btn1").click(function(){
	$("#one").css("background-color","#f00");
});
		
//btn2 选择 class 为 mini 的所有元素
$("#btn2").click(function(){
	$(".mini").css("background-color","#0f0");
});
		
//btn3 选择 元素名是 div 的所有元素
$("#btn3").click(function(){
	$("div").css("background-color","#00f");
});
		
//btn4 选择 所有的元素
$("#btn4").click(function(){
	$("*").css("background-color","#59f");
});
		
//btn5 选择 所有的span元素和id为two的元素
$("#btn5").click(function(){
	$("span,#two").css("background-color","#59f");
});