JQuery入门（一）—— 基本简介与基本选择器的使用
一、jQuery简介
jquery是2006年1月由美国人John Resig在纽约barcamp发布，目前已经成为辅助javascript开发的最流行的javascript库。
1、HTML/CSS/JS
HTML：结构化输入输出内容
CSS：样式处理
JS：行为动作
2、JQuery优点
(1)、jquery是一个优秀的免费的开源的javascript库，兼容CSS3及各种浏览器，从jquery2.0开始官方宣称不再支持IE6/7/8浏览器。
(2)、jquery能更加方便的让用户处理HTML、事件、效果等功能，并且能为网站提供更加简单的AJAX操作方式。
(3)、jquery有一个很大的优势就是文档非常全面及详细，并且配合了很多详细的案例。
二、jQuery能做什么
封装JS函数——实现了简化开发的效果，一个JS函数库[类库]，让JS变得更加简洁，使用更加方便；封装JS兼容性问题，直接使用即可，不需要再关心兼容性的问题。
1、HTML 元素的选取
2、HTML 元素的操作
3、CSS 操作
4、HTML 事件函数
5、JS特效和动画
6、HTML DOM 操作
7、Ajax
8、工具操作 —— UI、插件等等
三、网页中引入 JQuery
1、网页中引入JQuery
(1)、1.1 从 http://jquery.com/下载JQuery，引入js文件的形式引入
(2) 、从CDN中载入JQuery【如要考虑是国外或者国内】
2.1 官方CDN: http://code.jquery.com/jquery-migrate-1.2.1.min.js
2.2 百度CDN：http://libs.baidu.com/jquery/2.0.0/jquery.min.js
2.3 微软：http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js
2、版本
v1.*支持IE6+（公司常用版本）
v2.*支持IE9+
v3.*新出版本
四、quick start基本语法
1、基础语法简介
$(selector).action(); === $:用于表示JQuery (selector)：选择器，用来选择HTML元素 action();执行对元素的动作
案例：$(“p”).hide();表示选中当前元素p，并执行hide()隐藏操作。
2、创建项目
3、引入JQuery支持
4、quick start
注意：jquery被使用来操作HTML网页上的内容，要操作这些内容，就必须要对操作的内容进行选定。所以JQuery的最核心的部分就是对页面标签的选择。
核心：选择器-> dom操纵-> 动画特效 -> ajax操作
(1)、$(document)===指代当前网页对象——DOM对象document_jquery$(documnet)
(2)、$(window)=== 指代当前浏览器窗口对象
(3)、$(document).ready()和JQuery()和$()；
a、JS中的window.onload用于在页面数据完全加载完成后的函数调用
b、$(document).ready()的作用类似与传统的window.onload()方法。都是在网页加载的时候执行指定的代码的。它们之间存在一些区别
(4)、执行时间
window.onload()必须等到页面内容包括图片的所有元素加载完成之后才能执行。
$(document).ready()是DOM结构绘制完毕即刻执行，不需要等到所有资源加载完毕。
(5)、编写个数
window.onload不能同时写多个，如果编写多个只会执行一个
$(document).ready()可以同时写多个，并且都会执行
(6)、简化写法
window.onload没有简化写法
$(document).ready(function(){});可以简化为jQuery(function() {})或者$(function() {})
5、基本选择器——JQuery中最简单和直接的选择器，在项目开发中的使用频率非常高。
(1)、通用选择器
通过通配符的形式来选择标签，匹配所有元素
语法：$("*");
案例：找到每一个元素
HTML代码：<div>DIV</div>
<span>SPAN</span>
<p>P</p>
JQuery代码：$("*");
输出结果：[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
(2)、标签选择器
根据标签的名称来选择对应的标签数据
语法：$(“element”);
案例：查找一个 DIV 元素。
HTML代码：<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
JQuery代码：$(“div”);
输出结果：[ <div>DIV1</div>, <div>DIV2</div> ]
(3)、类选择器/样式选择器
根据标签的class属性值来选择对应的一组标签数据
语法：$(".class");
案例：查找所有类是 "myClass" 的元素.
HTML代码：
<div class="notMe">notMe</div>
<div class="myClass">div中的myClass</div>
<span class="myClass">span中的myClass</span>
JQuery代码：$(".myClass");
输出结果：[ <div class="myClass">div中的myClass</div>, <span class="myClass">span中的myClass</span> ]
(4)、复合选择器
同时选中多个制定的标签
语法：$(selector1,selector2,...,selectorN);
案例：找到匹配任意一个类的元素.
HTML代码：
<div>div</div>
<p class="myClass">p标签中的myClass</p>
<span>span</span>
<p class="notMyClass">p标签中的notMyClass</p>
JQuery代码：$("div,span,p.myClass")；
输出结果：[ <div>div</div>, <p class="myClass">p标签中的myClass</p>, <span>span</span> ]
(5)、层级选择器
在很多情况下，基本选择器不一定能满足用户的需要，如：要选择某一个指定的div标签下面的所有的ul标签；或者要选择指定的div下面的第一级的ul标签，基本选择器在使用的过程中就会出现很麻烦的情况。这时候就要用到层级选择器了。
5.1、包含选择器
选中指定标签A中包含的所有的指定标签的B
语法： ancestor descendant （在给定的祖先元素下匹配所有的后代元素）
案例：找到表单中所有的input元素
HTML 代码：
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
JQuery代码：$("form input");
输出结果：[ <input name="name" />, <input name="newsletter" /> ]
5.2、子标签选择器
选中指定标签A的子标签中所有指定的标签B
语法： parent > child （在给定的父元素下匹配所有的子元素）
案例：HTML代码：（如上5.1代码） 匹配表单中所有的子级input元素。
JQuery代码：$("form > input")；
输出结果：[ <input name="name" /> ]
5.3、相邻标签选择器
选中指定标签A后面紧跟的一个指定的标签B
语法： prev + next （匹配所有紧接在 prev 元素后的 next 元素）
案例：HTML代码：（如上5.1代码）匹配所有跟在 label 后面的 input 元素
JQuery代码：$("label + input");
输出结果：[ <input name="name" />, <input name="newsletter" /> ]
5.4、兄弟标签选择器
选中指定标签A之后所有的指定标签B
语法： prev ~ siblings （匹配 prev 元素之后的所有 siblings 元素）
案例：HTML代码：（如上5.1代码） 找到所有与表单同辈的 input 元素
JQuery代码：$(“form ~ input”);
输出结果：[ <input name="none" /> ]
5.5、伪类选择器
一种特殊的选择符号，用于选中特定的标签，常见的伪类选择器：
选择器 描述示例
:first 匹配找到的第一个元素$(li:first)
:last 匹配找到的最后一个元素 $(li:last)
:eq 匹配一个给定索引值的元素返回该元素的JQuery对象 $(tr:eq(1))
:even 匹配所有索引值为偶数的元素 $(tr:even)
:odd 匹配所有索引值为奇数的元素 $(tr:odd)
:gt(index) 匹配大于给定索引值的所有元素 $(tr:gt(1))
:lt(index) 匹配小于给定索引值的所有元素 $(tr:lt(2))
:not 去除所有与给定选择器匹配的元素 $(input:not(“.n”))
:contains(text) 匹配包含给定文本的元素 $(div:contains(‘john’))
:empty 匹配所有不包含子元素或者文本的空元素 $(td:empty)
:has(selector) 匹配包含selector选中元素的外层元素 $(div:has(p))
:parent 匹配所有包含子元素或者文本的外层元素 $(td:parent)
:hidden 匹配所有不可见或者type=hidden的元素 $(input:hidden)
:visible 匹配所有的可见的元素 $(tr:visible)
:nth-child(num) 匹配其父元素下的第num个元素。从1开始计算 $(ul li:nth-child(2))
:first-child 匹配指定元素下的第一个子元素 $(ul li:first-child)
:last-child 匹配最后一个子元素 $(ul li:last-child)
:only-child 匹配只有一个子元素 $(ul li:only-child)
:input 匹配所有表单元素 $(:input)
:text 匹配所有单行文本框 $(:text)
：... ... ...
5.6、属性选择过滤器
通过判断是否包含给定的属性或者属性值的方式选中标签
语法：selector[attribute] 或者 selector[attribute=value]
选择器 描述示例
selector[attr] 匹配包含attr属性的元素 $(“div[id]”)
selector[attr=value] 匹配指定属性值的元素 $(input[type=”text”])
selector[attr!=value] 匹配不含有指定属性或者属性不是特定值的元素 $(input[name!=”age”])
selector[attr^=value] 匹配属性值是以value开头的元素 $(input[name^=”un”])
selector[attr$=value] 匹配属性值是以value结束的元素$(input[name$=”me”])
selector[attr*=value] 匹配属性值包含value的所有的元素 $(input[name*=”un”])