初识jQuery

jQuery简介：

2006年创建的一个JavaScript库jQuery，为了解决开发过程中的兼容性问题；集 JavaScript、CSS、DOM 和 Ajax 于一体的强大框架体系；

它的主旨是以更少的代码实现更多的功能（Write?less,do?more）

jQuery的基本功能：

a. 访问和操作 DOM 元素

b. 对页面事件的处理

c. 大量插件在页面中的运用

d. 与 Ajax 技术的完美结合

e. 大幅提高开发效率

jQuery环境安装：

方式一：从 jquery.com 下载 jQuery 库

<head>

<script src="jquery-1.10.2.min.js"></script>

</head>

方式二：从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

<head>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

</head>

jQuery语法：

美元符号$定义 jQuery

$(document).ready(function(){});

类似JavaScript代码:window.οnlοad=function(){}

$(document).ready 在页面框架下载完毕后就执行；

而 window.onload 必须在页面全部加载完毕（包括下载图片）后才能执行。

$(document).ready(function(){   })

可以简写成 $(function(){   })

$("#btn").click(function(){});  

使用 click() 方法，将函数绑定到指定元素的click 事件中，单击按钮时，绑定的函数就会执行

代码示例：

$(document).ready(function(){

$("#btn").click(function(){

$('.show').show();

});

});

jQuery 选择器:

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 中所有选择器都以美元符号开头：$()

选择器分类：

1.基本选择器：

概念：jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。

选择器    功能                          返回值

#id       根据id属性值选取元素         单个元素

.class   根据class属性值选取元素      元素集合

element   根据给定的标签名选取元素     元素集合

*   选取所有元素,包括html和body  元素集合

selector1 ,selector2....将每一个选择器匹配到的元素合并后一起返回

2.过滤选择器：

概念：过滤选择器附加在所有选择器的后面，通过特定的过滤规则来筛选出一部分元素，书写时以冒号（:）开头

过滤选择器可以分为:

a. 基本过滤选择器

b. 内容过滤选择器

c. 可见性过滤选择器

d. 属性过滤选择器

基本过滤选择器          功能

first()或:first     获取第一个元素

last()或:last  获取最后一个元素

:not(selector)  获取除给定选择器之外的所有元素

:even  获取索引|值为偶数的元素，索引号从0开始

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

:eq(index)  获取索引值等于index的元素，索引号从0开始

:gt(index)  获取索引值大于index的元素，索引号从0开始

:lt(index)  获取索引值小于index的元素，索引号从0开始

:header  获取所有标题元素，如h1~h6

:animated  获取正在执行动画效果的元素

内容过滤选择器

:contains(text) 获取含有文本内容为text的元素

:empty 获取不包含后代元素或者文本的空元素

:has(selector) 获取含有后代元素为selector的元素

:parent 获取含有后代元素或者文本的非空元素

注意：在 :contains(text) 内容过滤选择器中，如果参数 text内容出现在匹配元素的任何后代元素中，也认为该元素含有文本内容 text。

如果参数 text 使用英文字母，则有大小写的区别；

<input>、<img>、<br> 和 <hr> 等标签属于不包含后代元素和文本的空元素。

可见性过滤选择器

:hidden   选取不可见元素

元素集合，如$(":hidden") 选取所有隐藏的元素

:visible 选取可见元素

元素集合，如$(":visible") 选取所有可见的元素

设置元素不可见的三种方式：

1.css 样式中 display 属性值为 none 的元素、

2.type 属性值为 hidden 的 <input> 元素

3.元素宽高设置为 0 。

属性过滤选择器

概念：属性过滤选择器根据元素的某个属性获取元素，

以“[”号开始、以“]”号结束。

[attr] 获取拥有该属性的所有元素，

如 $('li[title]') 表示获取所有包含title 属性的 <li> 元素

[attr=value] 获取某属性值为 value 的所有元素，

如 $('li[title=test2]') 表示获取所有包含 title 属性且属性值等于 test2 的 <li> 元素

[attr!=value] 获取某属性值不等于 value 的所有元素，

如 $('li[title!=test2]') 表示获取所有包含 title 属性且属性值不等于 test2 的 <li> 元素

[attr^=value] 选取属性值以 value 开头的所有元素，

如 $('a[href^="mailto:"]') 表示获取所有包含 href 属性，且属性值以 mailto: 开头的 <a> 元素

[attr$=value] 选取属性值以 value 结束的所有元素，

如 $('a[href$=".zip"]') 表示获取所有包含 href 属性，且属性值以 .zip 结尾的 <a> 元素

[attr*=value] 选取属性值中包含 value 的所有元素，

如 $('a[href*="jquery.com"]') 表示获取所有包含 href 属性且属性值中包含 jquery.com的 <a> 元素

层次选择器和表单选择器

概念：层次选择器通过 DOM 元素之间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻和兄弟关系。层次选择器由两个选择器组合而成。

后代选择器

语法：selector1 selector2

功能：从 selector1 的后代元素里选取 selector2

栗子：如 $(“#nav span”) 表示选取 #nav下所有的<span>元素

子选择器：

语法：selector1>selector2

功能：从 selector1 的子元素里选取 selector2

栗子：如("#nav>span")表示选取 #nav 的子元素<span>

相邻选择器：

语法：selector1+selector2

功能：从 selector1 后面的第一个兄弟元素里选取 selector2

栗子：如 $("h2+dl") 表示选取紧邻<h2>元素之后的同辈元素 <dl>

可以使用 jQuery 对象的 next() 方法代替

$('h2').next();

同辈选择器：

语法：selector1~selector2

功能：从 selector1 后面的所有兄弟元素里选取 selector2

栗子：如 $("h2~dl") 表示选取 <h2> 元素之后所有的同辈元素<dl>

<div>

<h2></h2>

<dl></dl>

<dl></dl>

</div>

表单选择器：

:input

获取<input> <textarea> <selet> <button元素

:text

获取符合[type=text]的<input> 元素

:password

获取符合[type=password]的<input>元素

:radio

获取符合[type=radio]的<input>元素

:checkbox

获取符合type=checkbox]的<input>元素

:image

获取符合[type=image]的<input>元素

:file

获取符合[type=file]的<input> 元素

:hidden

参考“可见性过滤选择器”

:button

获取butto>元素和符合tye=button的<input>元素

:submit

获取符合[type=submit的<input>元素

:reset

获取符合[type=reset]的<input>元素

表单对象属性过滤选择器

概念：表单对象属性过滤选择器也是专门针对表单元素的选择器，它属于过滤选择器的范畴，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行过滤。

:enabled

选取可用的表单元素

:disabled

选取不可用的表单元素

:checked

选取被选中的<input>元素

:selected

选取被选中的<option>元素