jQuery学习笔记第二部分：jQuery选择器及应用

1.jQuery中的选择

DOM中获取元素的方式：

• 1.document.getElementById("id的值");根据id获取元素（只能获取一个元素）
• 2.document.getElementsByTagName("标签的名字");根据标签的名字获取元素（可以获取多个）
• 3.document.getElementsByClassName("类样式的名字");根据的是类样式的名字来获取元素（多个）

jQuery中获取元素的方式：通过各种选择器来获取元素（类似于CSS选择器）

• 1.根据id来获取---->id选择器----->$("#id的值")；---->只能选择一个
• 2.根据标签名---->标签选择器----->$("标签的名字")；----->多个
• 3.根据类样式的名字---->类选择器---->$(".类样式的名字")；----->多个

2.id选择器

案例代码：
1.HTML代码：

<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>

2.CSS代码：

div{
	width:300px;
	height:200px;
	background-color:pink;
}

3.jQuery代码：

$(function(){
	//获取按钮--根据id选择器获取调用点击事件的方法
	$("#btn").click(function(){
		//设置div中的显示内容
		$("dv").text("这是一个有颜色的div")；	//相当于DOM中的innerText或者textContent
		$(#dv").css("backgroundColor","yellow");	//设置元素的样式（使用了id选择器）
		})；
})；

*最终效果：点击按钮div元素区域出现文字并且变色。

3.标签选择器

案例：点击按钮，p标签里边的文本改变

1.HTML代码：

<input type="button" value="设置内容" id="btn"/>
<p>吃饭</p>
<p>睡觉</p>
<p>打豆豆</p>

2.jQuery代码：

$(function(){
	//获取按钮，调用点击事件，获取所有的p，设置内容
	$("#btn").click(function(){
		//获取所有的p----->标签选择器
		$("p").text("我们都是一个P");		//使用标签选择器
		});
});

4.类选择器

案例：设置页面上应用cls类样式的元素的背景颜色（类选择器）

1.HTML代码：

<input type="button" value="显示效果" id="btn"/>
<span class="cls">这是一个span</span>
<p class="cls">这是一个p</p>

2.CSS代码：

.cls{
	background-color:pink;
}

3.jQuery代码：

//点击按钮，设置页面上应用cls类样式的元素的背景颜色（类选择器）
//页面加载的事件
$(function(){
	//获取按钮，调用点击事件，获取所有应用了cls类样式的元素
	$("#btn").click(function(){
		//类选择器来获取元素
		$(".cls").css("backgroundColor","green");
		});
});

5.标签+类选择器

案例：点击按钮设置页面上应用cls类样式li标签的背景颜色

1.HTML代码：

<input type="button" value="设置样式" id="btn"/>
<ul>
	<li>乔峰</li>
	<li>张无忌</li>
</ul>

2.CSS代码：

.cls{
	background-color:red;
}

3.jQuery代码：

$(function(){
	//获取按钮，注册点击事件
	$("#btn").click(function(){
		//获取应用cls类样式的li标签
		//标签+类样式的选择器
		$("li.cls").css("backgroundColor","yellow");
		});
});

6.多条件选择器

案例：点击按钮，设置页面中的span标签，li标签，div标签的背景颜色

1.HTML代码：

<input type="button" value="显示效果" id="btn"/>
<span>这是一个span标签</span>
<p>我是一个小pp</p>
<ul>
	<li>哈哈</li>
	<li>哈哈哈</li>
	<li>啊哈哈哈哈</li>
</ul>
<div></div>

2.CSS代码：

div{
	width:200px;
	height:100px;
	background-Color:blue;
}

3.jQuery代码：

$(function(){
	//通过多条件选择器获取元素，统一设置背景颜色
	$("#btn").click(function(){
		$("span,p,li,div").css("backgroundColor","yellow");
		});
});

7.层次选择器（后代选择器、子代选择器）

1.HTML代码：

<div id="dv">
	<p>这是第一个p标签</p>
	<ul>
		<li>这是第一个li标签</li>
		<li><p>这是第二个li中的一个p标签</p></li>
		<li>这是第三个li标签</li>
	</ul>
	<p>这是div中的第二个p标签</p>
</div>

<p>这是div后面的第一个p标签</p>
<p>这是div后面的第二个p标签</p>
<p>这是div后面的第三个p标签</p>

<input type="button" value="显示效果" id="btn"/>

2.jQuery代码：

$(function(){
	//获取div中的相关元素
	$("#btn").click(function(){
		//获取的是div中的所有的p标签元素
		$("div p").css("backgroundColor","red");
		//只获取div中子p标签元素
		$("#div">p).css("backgroundColor","red");
		});
});

8.常见的几个方法（.val()方法 .css()方法）

案例：点击按钮设置文本框中的值

1.HTML源码：

<input type="button" value="显示效果" id="btn"/>
<input type="text" value="这是文本框" id="txt"/>
<div id="dv"></div>

2.jQuery源码：

第一种方法：

$("#txt").val("哈哈，我又变帅了");
console($("#txt").val());

解析：

• 1..val()方法，小括号中写内容就是设置元素的value属性
• 2..val()方法，小括号中什么也不写，获取元素的value属性值
• 3..val()就是元素的value属性值，只是在jQuery中封装成了方法

第二种方法：

//.css();方法，该方法如果只是设置一个样式的属性值，那么这个方法写两个参数，第一个参数是属性，第二个参数是值。
$("#dv").css("backgroundColor","yellow");
//.css();方法，里面可以直接写键值对的方式
$("#dv").css({"width":"300px","height":"200px","backgroundColor":"yellow"});

9.层次选择器

案例：鼠标移到的当前li标签会变红（高亮显示），移开红色消失
1.HTML代码：

<ul id="uu">
	<li>马刺</li>
	<li>火箭</li>
	<li>公牛</li>
</ul>

2.jQuery源码：

$(function(){
	//根据层次选择器获取li
	$("#uu>li").mouseover(function(){
		//鼠标进入
		$(this).css("backgroundColor","red");
	});
	$("#uu>li").mouseout(function(){
		//鼠标离开
		$(this).css("backgroundColor","");
	});
});

10.通配符选择器

案例：点击按钮修改层中所有的标签的背景颜色

1.HTML源码：

<input type="button" value="显示效果" id="btn"/>
<div id="dv">
	<p>这是一个小pp啊</p>
	<span>这是一个小小span啊</span>
</div>

2.jQuery源码：

$(function(){
	$("#btn").click(function(){
		//*是所有元素（通配符）
		$("#dv *").css("backgroundColor","yellow");
	});
});

11.层次选择器案例

案例：下拉菜单

1.HTML源码：

<div class="wrap">
	<ul>
		<li>
			<a href="javascript:void(0);">一级01</a>
			<ul>
				<li><a href="javascript:void(0);">二级01</a></li>
				<li><a href="javascript:void(0);">二级02</a></li>
				<li><a href="javascript:void(0);">二级03</a></li>
			</ul>
		</li>
		<li>
			<a href="javascript:void(0);">一级02</a>
			<ul>
				<li><a href="javascript:void(0);">二级01</a></li>
				<li><a href="javascript:void(0);">二级02</a></li>
				<li><a href="javascript:void(0);">二级03</a></li>
			</ul>
		</li>
		<li>
			<a href="javascript:void(0);">一级03</a>
			<ul>
				<li><a href="javascript:void(0);">二级01</a></li>
				<li><a href="javascript:void(0);">二级02</a></li>
				<li><a href="javascript:void(0);">二级03</a></li>
			</ul>
		</li>
	</ul>
</div>

2.CSS源码：

* {
	margin:0;
	padding:0;
}