JQuery详解

1.jQuery介绍

jQuery通过取名可以看出是由JavaScript和Query（查询），它就是辅助JavaScript开发的js类库。它的核心思想是：write less，do more（写的更少，做的更多），实现了很多浏览器的兼容问题。
jQuery是免费的、开源的，它的语法设计使得开发更加方便快捷。

下面通过一个小例子引出jQuery。
只给出Script部分

<script type="text/javascript">

	//使用$()代替window.onload
	$(function(){
		//使用选择器获取按钮对象，随后绑定单击响应函数
		$("#btnId").click(function(){
			//弹出Hello
			alert('Hello');
		});
	});
</script>

与原来书写方式对比

<script type="text/javascript">
		 window.onload = function () {
		 	var btnObj = document.getElementById("btnId");
		 	btnObj.onclick = function () {
				alert("hello");
		 	}
		 }
	</script>

2.核心函数

由以上两个代码对比可以看出，$符号是jQuery的核心函数。

1. 传入参数为[函数]时：表示页面加载完成以后，相当于window.οnlοad=function(){}
2. 传入参数为[html字符串]时：会对我们创建这个html标签对象

<script type="text/javascript">
		$(function(){
			$("    <div>" +
            "        <span>div-span1</span>" +
            "        <span>div-span2</span>" +
            "    </div>").appendTo("body");
		})

	</script>

3.传入参数为选择器字符串时：

$("#id"):id选择器，根据id查询标签对象
$(“标签名”):标签名选择器，根据指定的标签名查询标签对象
$(".class属性值"):类型选择器，可以根据class属性查询标签对象

4.传入参数为Dom对象时：
会把这个dom对象转换为jQuery对象

3.jQuery对象和Dom对象

Dom对象：

• 通过getElementById()查询出来的标签对象是Dom对象
• 通过getElementsByName()查询出来的标签对象是Dom对象
• 通过getElementsByTagName()查询出来的标签对象是Dom对象
• 通过creatElement()方法创建的对象，是Dom对象

DOM 对象 Alert 出来的效果是：[object HTML 标签名 Element]

jQuery对象：

• 通过jQuery提供的API创建出来的对象是jQuery对象
• 通过jQuery包装的Dom对象也是jQuery对象
• 通过jquery查询的对象也是jQuery对象

jQuery 对象 Alert 出来的效果是：[object Object]
jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。
两者相互转换
dom转换为 jQuery

先有Dom对象，${dom对象}就可以转换为jQuery对象

jQuery对象转换为ddom对象

先有jQuery对象，通过jQuery的下标取出dom对象

4.jQuery选择器

4.1基本选择器

• #id选择器：根据id查找标签对象
• .class选择器：根据class查找标签对象
• element选择器：根据标签名查找标签对象
• *选择器：表示查找任意的元素
• selector1，selector2组合选择器：合并选择器1,2的结果并返回

4.2层级选择器

• ancestor descendant后代选择器：在给定的祖先元素下匹配所有的后代选择器

$("#btn1").click(function(){
	$("body div").css("background", "#bbffaa");
});

• parent > child 子元素选择器：在给定的父元素下匹配所有的子元素。
• prev + next 相邻元素选择器：匹配所有的紧接在prev元素后的next元素。
• prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素。

5.过滤选择器

5.1基本选择器

• :first：获取第一个元素
  

• :last：获取最后一个元素
  

• :not(selector):去除所有与给定选择器匹配的元素
  

• :even：匹配所有索引值为偶数的元素，从 0 开始计数
  

• :odd：匹配所有索引值为奇数的元素，从 0 开始计数
  

• :eq(index) 匹配一个给定索引值的元素
  

• :gt(index) 匹配所有大于给定索引值的元素
  

• :lt(index) 匹配所有小于给定索引值的元素
  

• :header 匹配如 h1, h2, h3 之类的标题元素
  
  10.:animated 匹配所有正在执行动画效果的元素
  

5.2内容过滤器

• :contains(text) 匹配包含给定文本的元素
• :empty 匹配所有不包含子元素或者文本的空元素
• :parent 匹配含有子元素或者文本的元素
• :has(selector) 匹配含有选择器所匹配的元素的元素

5.3属性过滤器

• [attribute] 匹配包含给定属性的元素。
• [attribute=value] 匹配给定的属性是某个特定值的元素
• [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
• [attribute^=value] 匹配给定的属性是以某些值开始的元素
• [attribute$=value] 匹配给定的属性是以某些值结尾的元素
• [attribute*=value] 匹配给定的属性是以包含某些值的元素 [attrSel1]
• [attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。

5.4表单过滤器

1. :input 匹配所有 input, textarea, select 和 button 元素
2. :text 匹配所有 文本输入框
3. :password 匹配所有的密码输入框
4. :radio 匹配所有的单选框
5. :checkbox 匹配所有的复选框
6. :submit 匹配所有提交按钮
7. :image 匹配所有 img 标签
8. :reset 匹配所有重置按钮
9. :button 匹配所有 input type=button 按钮
10. :file 匹配所有 input type=file 文件上传
11. :hidden 匹配所有不可见元素 display:none 或 input type=hidden

5.5表单对象属性过滤器

• :enabled 匹配所有可用元素
• :disabled 匹配所有不可用元素
• :checked 匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象
• :selected 匹配所有选中的 option