JQuery基础

学习

jQuery的时候，很快过了一遍，发现好多知识点不清晰。看来还是要

写出来

加深印象，平时多练习！

jQuery是一个Javascript函数库，轻量级，“写得少，做的多！”，它有以下功能：

· HTML元素选取

· HTML元素操作

· CSS操作

· HTML事件函数

· JavaScript特效和动画

· HTML DOM遍历和修改

· AJAX

· Utilities（实用工具）

很多大公司都在使用

jQuery:Google,Microsoft,IBM等。jQuery兼容所有主流浏览器，包括IE6

（不失为解决兼容性的一种方法）。

注意：

jQuery 2以上版本不支持IE6,7,8浏览器；

IE版本小于9，引入jquery1.9.0版本；IE版本大于等于9，引入jquery2.0版本。　　

(lt(<):less than;　　 gt(>):great than;　　 gte(>=):great than equal; 　　ne(不等于):not equal)

第一部分：安装：

从

jquery.com 中下载，然后用script标签引入即可。

jQuery有两个版本：

· production version:用于生产、实际的网络，代码已被精简和压缩；

· development version：用于开发测试，可阅读源码。

两种方式引入

jQuery文件：

下载：

1 <script type="text/javascript" src="jquery-2.0.0.js"></script>

不下载，通过

CDN（内容分发网络）引用它。百度、新浪、谷歌和微软的服务器都存有 jQuery。

示例百度

CDN:

1 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

注意：

1.国内站点不推荐Google CDN,访问不稳定。

2.CDN:Content Delivery Netword，内容分发网络。

基本思路：尽可能的避免互联网上有可能影响网络传输速率和稳定性的因素。使得用户可以就近取得所需内容，提高网站访问速度。

使用大公司

CDN好处：

·

许多用户在访问其它站点时，已经从百度、新浪、谷歌和微软加载过

jQuery。当用户访问我的站点时，会从缓存中加载jQuery，这样可以有效减少加载时间！

·

大多数

CDN都可以确保用户请求文件时，会就近服务器进行响应，从而提高加载速率。

第二部分：jQuery语法：

1.jQuery语法是通过选取HTML元素，然后对选取的元素进行某些操作。

基础语法：

$(selector).action()

·

美元符号

$定义jQuery

·

选择器（

selector）:“查询”和“查找”HTML元素

· action()：对元素进行操作

实例（结尾处有分号）：

2.文档就绪事件：

　这是为了防止文档在加载完成前执行

jQuery代码，即在DOM加载完成后才可以对DOM进行操作。　　

第三部分：jQuery选择器：

1.

元素选择器：

$("p")

2. id选择器：$("#test")

3.

类选择器：

$(".test")

4. $("*")：选择所有元素

5. $(this)：选取当前html元素

6. $("p.test")：选取class为test的<p>元素

7. $("p:first")：选取第一个<p>元素

8. $("ul li:first")：选取第一个<ul>元素中的第一个<li>元素

9. $("ul li:first-child")：选取每个<ul>元素下的第一个<li>元素

10. $("[href]")：选取所有带有href的元素

11. $("a[target='_blank']")：选取所有taget=_blank的<a>元素

12. $("a[target!='_blank']")：选取所有target不等于_blank的<a>的元素

13. $(":button")：选取所有type=button的button和input元素

14. $("tr :even")：选取所有偶数位置的<tr>元素

15. $("tr :odd")：选取所有奇数位置的<tr>元素

第四部分：jQuery事件：

1.事件：页面对不同访问者作出的响应。事件处理程序：当HTML中发生某些事件调用的方法。常见DOM事件：

·

鼠标事件：

click（单击元素）,dbclick（双击元素）,mouseenter(鼠标指针移入元素),mouseleave（鼠标指针移出元素）事件；

·

键盘事件：

keypress（键被按下）,keydown（键按下的过程）,keyup（键松开）,事件；ps:keypress不会触发所有的键（如alt,ctrl,esc,shift）,请使用keydown()方法检测

·

表单事件：

submit（提交表单时）,change（元素值（适用于表单字段）发生改变时）,focus（元素获得焦点）,blur（元素失去焦点）事件；

·

文档

/窗口事件：load（元素已加载触发，在jQuery1.8中废除。ajax中也有load()方法）,resize（调整浏览器窗口大小时触发）,scroll（滚动指定的元素）,unload（jQuery1.8中废弃）事件。

另：

hover()：模拟光标悬停事件。当鼠标指针移动到元素上时，会触发第一个函数（mouseenter）；当鼠标指针移出这个元素时，会触发第二个函数（mouseleave）。

第五部分：jQuery效果

1.隐藏和显示：

　　

可选的

speed规定隐藏或显示的速度，取值可以为"slow","fast"或毫秒；

　　

可选的

callback是隐藏或显示后执行的函数名称。

　　

toggle可以切换show和hide状态。

2.淡入淡出：

　　

fadeIn()：隐藏的元素淡入；fadeOut()：显示的元素淡出；fadeToggle()：切换fadeIn()和fadeOut()状态；fadeTo()：渐变为不透明度（opacity值在0~1之间）。

　　

speed,callback参数含义与上述“显示与隐藏”一致。

3.滑动：

　　

slideDown()：对隐藏的元素向下滑动；slideUp()：对显示的元素向上滑动收起；slideToggle()：切换两种状态改变。

4.动画：jQuery animate()方法用于创建自定义动画。语法：

　　

params：必选参数，形成动画的css属性；

　　

speed：可选参数；

　　

callback：可选参数。

ps:params支持多个属性，中间用","隔开，同时属性值（不加引号时）用驼峰标记法：如：margin-left改为marginLeft；属性值加引号按照css写法。

例如：

　　

ps1：color属性值10px要添加引号，如'10px'

；

　　

ps2：上述代码中color属性设置无效，因为色彩动画不包括在核心jQuery库中。如需使用：需从 jquery.com 下载

颜色动画

插件。

默认：

jQuery animate()采用队列来操作效果。队列：先进先出。

5.停止动画：

stop()方法用于停止动画效果，适用于所有jQuery效果函数，包括滑动，淡入淡出，自定义动画。

　　可选的

stopAll：是否清除动画队列。

默认

false

：仅停止当前活动动画，允许插入的动画向后执行；

　　可选的

goToEnd：是否立即完成当前动画。

默认

false

。

　　因而，默认的

stop()会清除当前元素上的动画。（不带参数）

6.jQuery链(chaining)

链：顾名思义，锁链，即一环套一环。

jQuery中将动作/方法链接在一起，因此，在相同元素上，我们可以在一条语句上运行多个jQuery方法。

如：

第六部分：jQuery HTML

1.获取内容和属性

--　　获取内容：

text()：设置或获取所选元素的文本内容

html()：设置或获取所选元素的内容(包括HTML标记)

val()：设置或获取表单字段的值

--　　获取属性：

attr()：设置或获取属性值

　　

ps1：以上函数不传入参数时是获取；传入参数时是设置。

　　

ps2：以上函数均有最后一个参数设置为回调函数。回调函数有两个值：当前选中元素下标，旧值。

2.添加元素

· append()：在被选元素的末尾插入内容

· preappend()：在被选元素的开头插入内容

· after()：在被选元素之后插入内容

· before()：在被选元素之前插入内容

ps：append/preappend：选择元素内部嵌入；before/after：选择元素外部追加。

想要学习前端开发的同学，可以加群：

543627393 学习哦！