JQuery学习第一天(基本知识、选择器)

jQuery是一个js库,写得少，做得多，优势如下：
-轻量级
-强大的选择器
-出色的DOM操作的封装
-可靠的事件处理机制
-完善的Ajax
-出色的浏览器兼容性
-链式操作方式
…

<!-- 导入jQuery库-->
<script type="text/javascript" src="要导入的jQuery包的位置">	</script>
<script type="text/javascript">
//$(function(){})相当于window.onload,代码写在{}之间

	$(function(){
		//1.选取button：$("button")
		//2.为button添加onclick响应函数: $("button").click()
		$("button").click(function(){
			//3.弹出helloworld
			alert("helloworld");
		});		
	})
</script>

JQuery对象

jQuery对象就是通过jQuery($())包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery例的方法：
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲persontab").htm….
var $variable = jQuery对象
var variable = DOM对象

jQuery对象转为DOM对象

jQuery对象不能使用DOM中的方法，但如果jQuery没有封装想要的方法，不得不使用DOM对象的时候，有如下两种处理方法：
(1)jQuery对象是一个数组对象，可以通过[index]的方法得到对应的DOM对象。
var $cr = $("#cr");
var cr = $cr[0];
(2)使用jQuery中的get(index)方法得到相应的DOM对象
var $cr = $("#cr");
var cr = $cr.get(0);

DOM对象转为jQuery对象

对于一个DOM对象，只需要用$()把DOM对象包装起来(jQuery对象就是通过jQuery包装DOM对象后产生的对象)，就可以获得一个jQuery对象。
var cr = document.getElementById(“cr”);
var $cr = $(cr);

案例：

//1.由jQuery对象转为DOM对象
//1).获取一个jQuery对象
var $btn = $("button");
//2).jQuery对象是一个数组
alert($btn.length);
//3).可以通过数组的下标转为DOM对象
alert($btn[1].firstChild.nodeValue);

//2.由DOM对象转为jQuery对象
//1).选取一个DOM对象
var btn = document.getElementById("btn");
//2).把DOM对象转为一个jQuery对象：使用$()进行包装
alert("--" + $(btn).text());   

jQuery选择器

优点：写法简洁，具有完整的事件处理机制

基本选择器

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id,class和标签名来查找DOM元素（在网页中id只能使用一次，class允许重复使用）
选择器 描述 返回
#id 根据给定的id匹配一个元素 单个元素
.class 根据给定的类名匹配元素 集合元素
element 根据给定的元素名匹配元素 集合元素

•   							匹配所有元素								 集合元素
  

selector 将每一个选择器匹配到的元素 集合元素
合并后一起返回

层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等，则需要使用层次选择器。
选择器 描述 返回
$(“ancestor descendant”) 选取ancestor的所有descendant(后代)元素 集合元素
$(“parent>child”) 选取 parent元素下的child(子)元素,与
$(“ancestor descendant”)有区别， 集合元素
$(“ancestor descendant”)选择的是后代元素
$(“prev + next”) 选取紧接在prev元素后的下一个next元素 集合元素
$(“prev ~ sibling”) 选取prev元素后的所有sibling元素 集合元素

注意：(“prev ~ div”) 选择器只能选择 “#prev”元素后面的同辈元素;而jQuery中的方法siblings()与前后位置无关，只要是同辈节点就可以选取。

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，该选择器都以":"开头
按照不同的过滤规则，过滤选择器可以分为基本过滤,内容过滤，可见性过滤，子元素过滤和表单对象属性过滤选择器。

基本过滤选择器

选择器 描述 返回
:first 选取第一个元素 单个元素组成的集合
:last 选取最后一个元素 集合元素
:not(selector) 去除所有和给定选择器匹配的元素 集合元素
:even 选取索引时偶数的所有元素 集合元素
:odd 选取索引时奇数的所有元素，索引从0开始 集合元素
:eq(index) 选取索引等于index的元素，索引从0开始 集合元素
:gt(index) 选取索引大于index的元素，索引从0开始 集合元素
:lt(index) 选取索引小于index的元素，索引从0开始 集合元素
:header 选取所有的标题元素，如：h1,h2等 集合元素
:animated 选取当前正在执行动画的所有元素 集合元素

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
选择器 描述 返回
:contains(text) 选取含有文本内容为text的元素 集合元素
:empty 选取不包含子元素或者文本的空元素 集合元素
:has(selector) 选取含有选择器所匹配的元素的元素 集合元素
:parent 选取含有子元素或者文本的元素 集合元素

可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素
选择器 描述 返回
:hidden 选取所有不可见的元素 集合元素
:visible 选取所有可见的元素 集合元素
可见选择器：hidden不仅包含样式属性display为none的元素，也包含文本隐藏域()和visible:hidden之类的元素。

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
选择器 描述 返回
[attribute] 选取拥有此属性的元素 集合元素
[attribute=value] 选取指定属性的值为value的元素 集合元素
[attribute!=value] 选取指定属性的值不等于value的元素 集合元素
[attribute^=value] 选取指定属性的值以value开始的元素 集合元素
[attribute$=value] 选取指定属性的值以value结束的元素 集合元素
[attribute*=value] 选取指定属性的值含有value的元素 集合元素
集合元素
[selector1][selector2]… 用属性选择器合并成一个复合属性选择器，
[selectorN] 满足多个条件，每选择一次，缩小一次范围

子元素过滤选择器

选择器 描述 返回
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素 集合元素
:first-child 选取每个父元素的第一个子元素 集合元素
:last-child 选取每个父元素的最后一个子元素 集合元素
:only-child 如果某个元素是它父元素中唯一的子元素，那么将被匹配 集合元素

nth-child()选择器详情如下:
:nth-child(even/odd):能选取每个父元素下的索引值为偶(奇)数的元素
:nth-child(2):能选取每个父元素下的索引值为2的元素
:nth-child(3n):能选取每个父元素下的索引值为3的倍数的元素
:nth-child(3n+1):能选取每个父元素下的索引值为3n+1的元素

$(".one :nth-child(2)").css(“background”,“ffbbaa”); //选取子元素，需要在选择器前添加一个空格。

表单对象属性过滤选择器

选择器 描述 返回
:enabled 选取所有可用的元素 集合元素
:disabled 选取所有不可用元素 集合元素
:checked 选取所有被选中的元素(单选框，复选框) 集合元素
:selected 选取所有被选中选项元素（下拉列表） 集合元素

//实际被选择的不是select,而是select的option子节点
//所以要加一个空格
var len = $("select :selected").length;
alert(len);

//因为$("select :selected")选择的是一个数组，当该数组中有多个元素时，通过.val()方法就只能获取第一个被选择的值了。
//alert($("select :selected").val());

//jQuery对象遍历的方式使each,在each内部的this是正在得到的DOM对象,而不是一个jQuery对象
$("select :selected").each(function(){
	alert(this.nodeName	);
})

表单选择器

选择器 描述 返回
:input 获取所有,,,和元素 集合元素
:text 获取所有的单行文本框 集合元素
:password 获取所有的密码框元素 集合元素
:radio 获取所有的单选框 集合元素
:checkbox 获取所有的多选框 集合元素
:submit 选取所有的提交按钮 集合元素
:image 选取所有的图像按钮 集合元素
:reset 选取所有的重置按钮 集合元素
:button
:file 选取所有的上传域 集合元素
:hidden 选取所有的不可见元素 集合元素

实验一

1.给网页中所有的

元素添加onclick事件。
2.是一个特定的表格隔行变色。
3.对多选框进行操作，输出选中的多选框的个数。

$(function(){
	//1.点击所有的p节点，能够弹出其对应的文本内容
	/*
	1.jQuery对象可以进行隐式迭代:$("p").click(function(){...})为选取的所有的p节点都添加了click响应函数.
	jQuery对象本身就是一个DOM对象的数组。
	2.在响应函数中，this是一个DOM对象。若想使用jQuery对象的方法需要把其包装为jQuery对象:使用$()把this包起来。
	3.text()方法是一个读写的方法:不加任何参数，读取文本值；加参数为属性节点添加文本值(文本节点)
	*/
	$("p").click(function(){
		alert($(this).text());
		//alert(this.firstChild.nodeValue);
	});
	//2.使第一个table隔行变色
	$("table:first tr:even").css("background","#ffaacc");
	//3.点击button,弹出checkbox被选中的个数
	$("button").click(function(){
			alert($(":checkedbox:checked").length);
		});
	});