JQuery

一、简介：

　　JQuery是一套跨浏览器的JavaScript库，所谓JavaScript库（也可以叫做JavaScript框架），就是将JavaScript中的一些常用函数，对象封装成一个js文件，方便重复调用，可以简化HTML与JavaScript之间的操作，基本解决了在不同浏览器中的兼容性问题。

　　1、好处：

　　　　　　简化JS操作；不需要关心兼容性；提供了大量实用方法

　　2、JQuery的使用：

　　　　　　 jQuery实际上就是一个js文件，只需要在网页中引入这个文件就可以使用

　　　　　　在开发测试过程中，使用未压缩版本：jquery-1.7.2.js

　　　　　　在上线项目中，使用压缩后的版本：jquery-1.7.2.min.js

　　3、jQuery的核心函数

　　　　　　$在JQuery中被称为JQuery的核心函数，$就是JQuery，也就是一个函数

　　4、onload与核心函数区别

　　　　　　window.onload=function( ){ }   是表示整个文档加载完毕之后执行这里面的代码，jQuery的写法：$(document).ready(function(){ });

　　　　　　$(function( ){ });     表示的是加载本地文档完成之后就会执行的代码

　　5、$的4种用法：

　　　　　　　　$(function(){  })          类似于window.onload=function(){     };，它会在文档加载完成之后运行

　　　　　　　　$("html字符串")        根据这个字符串创建元素节点对象

　　　　　　　　$("选择器")               根据选择器查找元素节点对象

　　　　　　　　$(DOM对象)             将DOM对象包装为jQuery对象

　　6、jQuery对象

　　　　①DOM对象： 通过原生JS获取的对象是DOM对象

　　　　var btnEle=document.getElementById("btn");

　　　　②jQuery对象： 通过jQuery核心函数包装过的对象叫做jQuery对象

　　　　var $btn=$("#btn");

　　　　③比较： 两种对象之间不能互相调用对方的方法
　　　　　　　　jQuery对象命名时习惯加上$,加以区分。
　　　　④转换
　　　　　　　　DOM --> jQuery
　　　　　　　　　　　　var $jQuery对象=$(DOM对象);      

　　　　var $btn=$(btnEle);

　　　　　　　　jQuery --> DOM
　　　　　　　　　　　　使用数组下标：jQuery对象[索引]：       如：var  btnEle=$btn[0];

　　　　　　　　　　　　使用get(index)方法：   var btnEle=$btn.get(0)

　　　　var p=$("p")[0];
　　　　var p=$("p").get(0);

　　　　jQuery对象的本质就是DOM对象的数组，所以可以通过给对象加下标的形式获取数组中的DOM对象

二、jQuery选择器

　　1、基本选择器

基本选择器

选择器	描述	示例
#id	根据id匹配元素	$("#one")
element	根据元素名匹配	$("div")
.class	根据类名匹配	$(".mini")
*	匹配所有元素	$("*")
selector1,selector2..selectorN	将每一个选择器匹配到的元素合并后一起返回	$("span,#two")

　　

　　2、层级选择器

层级选择器

选择器	描述	示例
ancestor  descendent	在给定的祖先元素下匹配后代元素	$("body div")
parent > child	在给定的父元素下匹配所有子元素	$("body>div")
prev + next	匹配所有紧接在 prev 元素后的 next 元素	$("#one+div")
prev ~ siblings	匹配 prev 元素之后的所有 siblings 元素	$("#two~div")

　　3、过滤选择器

基本过滤选择器

选择器	描述	示例
:first	获取第一个元素	$("div:first")
:last	获取最后一个元素	$("div:last")
:not(selector)	获取与选择器不匹配的元素	$("div:not(.one)")
:even	匹配索引值为偶数的元素	$("div:even")
:odd	匹配索引值为奇数的元素	$("div:odd")
:eq(index)	匹配索引值等于给定索引值的元素	$("div:eq(3)")
:gt(index)	匹配索引值大于给定索引值的元素	$("div:gt(3)")
:lt(index)	匹配索引值小于给定索引值的元素	$("div:lt(3)")
:header	匹配标题元素	$(":header")
:animated	匹配所有动画元素	$("div:animated")
:focus	触发每一个匹配元素的focus事件	$("#login:focus");

内容过滤选择器

选择器	描述	示例
:contains(text)	匹配包含给定文本的元素	$("div:contains('di')")
:empty	匹配所有空元素	$("div:empty")
:has(selector)	匹配所有包含 给定选择器所匹配的元素 的元素	$("div:has(.mini)")
:parent	匹配所有不空元素	$("div:parent")

可见性过滤选择器

选择器	描述	示例
:hidden	匹配所有不可见元素，或者type为hidden的元素	$("div:hidden")
:visible	匹配所有的可见元素	$("div:visible")