jQuery快速入门
---恢复内容开始---
jQuery 快速入门
jQuery介绍
1、jQuery是一个轻量级的、兼容多浏览器的JavaScript 库。
2、jQuery使用户能够更方便的处理HTML Document、Events、实现动画效果， 方便的进行Ajax交互， 能够极大的简化JavaScript编程。
它的宗旨就是：write less. do more.
jQuery 的优势
1、一款轻量级的JS框架， jQuery 核心js文件才几十kb,不会影响页面加载速度。
2、丰富的DOM 选择器用起来很方便，比如要找到某个DOM对象的相邻元素， JS可能要写好几行代码， 而 jQuery一行代码就搞定了， 再比如要将一个表格的隔行变色， jQuery也是一行代码搞定。
3、链式表达式： jQuery的链式操作可以把多个操作卸载一行代码里，更加简洁。
4、事件，样式， 动画支持。 jQuery还简化了js 操作css的代码，并且代码的可读性也比Js要强。、
5、Ajax操作支持。 jQuery简化了AJAX操作，后端只需返回一个json 格式的字符串就能完成与前端的通信。
6、跨浏览器兼容。Jquery基本兼容了现在主流的浏览器， 不用在为浏览器的兼容问题而伤脑筋了。
7、插件扩展开发。jquery有着丰富的第三方插件， 例如树形菜单， 日期控件， 图片切换插件， 弹出窗口等等基本前端页面上的组件都有对应的插件。
并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件， 简单实用。
Jquery内容
1、选择器，
2、筛选器
3、样式操作
4、文本操作
5、属性操作
6、文档处理
7、事件
8、动画效果
9、插件
10、each，data，Ajax
jquery版本
- 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
- 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
- 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。
jquery对象
jquery对象就是通过jquery包装DOM 对象后产生的对象。jquery对象是jquery独有的。如果一个对象是jquery对象，那么它就可以使用jquery里的方法：
例如$("#i1").html()。
$("#i1").html()的意思是：获取id值为i1的元素html 代码。其中html()是jquery里的方法。
相当于 document.getElenmentById("i1").innerHTML;
虽然jquery对象是包装DOM 对象后产生的，但是jquery对象 无法使用DOM 对象的任何方法， 同理DOM 对象也不能使用
Jquery里的方法。
一个约定。我们在声明一个jquery 对象变量的时候 在变量名前加上$:
VAR $variable = Jquery 对象 var variable =DOM对象 $variable//Jquery对象转化成DOM 对象
拿上面那个例子来举例，jquery对象和DOM 对象的使用：
$("#i1").html();//jquery对象可以使用jquery的方法 $("#i1")[0].innerHTML;//DOM对象使用的DOM 的方法
JQUERY基础语法
$(selector).action()
查找标签
选择器
id选择器 用（“#”）
$("#id")
标签选择器 （“标签名”）
$("tagName")
class选择器： (".类名”）
$(".classname")
配合使用：
$("div.c1") //找到又c1 class类的div 标签
所有元素选择器：（“*”）
$("*")
组合选择器：中间用“，”隔开。
$("#id, .classname, tagname")
层级选择器： x,y可以为任意选择器
$("X Y"),// x 的所有后代y(子子孙孙） $("X>Y");//X 的所有儿子y(只是儿子，没有孙子，子孙） $("x+y");// 找到所有的紧挨在x后面的y $("x~y");// x之后所有的兄弟y
基本选择器：
：first //第一个 用法： $("#ul>li:first") :last //最后一个 用法：$("#ul>li:last") ：eq(index)//索引等于index的那个元素 用法：$("ul>li:eq(3)") ：even//匹配所有索引值为偶数的元素 从0开始计算 用法：$("ul>li:even") // 找到ul 下 li 标签里索引值为偶数的元素 ：odd//匹配所有索引值为奇数的元素， 从0开始计数 用法：$("ul>li:odd") //找到ul下li标签里索引值为奇数的元素 ：gt(index)//匹配所有大于给定索引值的元素 用法：$("ul>li:gt(3)") //找到所有 ul 下li 标签里索引值大于3 的元素 ：lt(index)//匹配所有小于给定索引值的元素 用法：$("ul>li:lt(3)") //找到所有的ul下li标签里前3个元素 ：not（元素选择器）//移除所有满足not条件的标签 用法：$("li:not(.cl)") //找到所有不包含cl样式类的li标签 ：has(元素选择器）//选取所有包含一个或多个标签在其内的标签（指的是从后代元素找） 用法：$("li:not(:has(a))") //找到所有后代中不含a标签的li标签
属性选择器：
[attributeName] [attributeName=value] //属性等于 [attribute!=value]//属性不等于
例子：
<input type = 'text'> <input type="password"> <input type="checkbox"> $("input [type='checkbox']"); //取到checkbox 类型的input 标签 $("input[type !='text']") //取到类型不是text的input标签
表单常用筛选：
：text #文本格式
：password 密码
：file 文件
：radio html中的单选按钮
：checkbox 检查框 复选框
：submit 提交
：reset 重置 清零
：button 按钮
例子：
$(":checkbox")//找到所有的checkbox
表单对象属性：
：enable 可用的 ：disabled 暂时禁用输入框 ：checked 选择器选取所有选中的复选框或单选按钮 ：selected 找到所有被选中的
例子：
1： <form> <input name="email" disable="disabled"/> <input name="id"/> <form> $("input:enabled") //找到可用的input标签 2： <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select>
$(":selected") //找到所有被选中的option
筛选器
下一个元素：
$("#id").next() 找出id里的下一个标签 $("#id").nextAll() 找出id里后面的所有的标签 $("#id").nextUntil("#i2") 找到id后面的标签知道i2 为止
上一个元素：
$("#id").prev() 找id上一个元素 $("#id").prevAll() 找id上所有的元素 $("#id").prevUntil("#i2") 找id上所有的元素 直到i2为止
父亲元素：
$("#id").parent() 找id的父元素 $("#id").parents() 找当前元素的所有父辈元素 $("#id").parensUntil() 找当前元素的所有的父辈元素直到遇到那个匹配的元素为止
儿子和兄弟元素：
$("#id").children() //儿子们 $("#id"）.siblings() //兄弟们
查找元素：
$("#id").find()//搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
补充：
.first() //获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() //保留包含特定后代的元素， 去掉那些不含有指定后代的元素。
---恢复内容结束---
