一 认识 jQuery
jQuery 是 JavaScript Query 的缩写形式. jQuery 是一款非常优秀的 JavaScript 库, 即便是 MVVM 框架盛行的今天, 也有超过半数的网页及应用直接或间接的使用了 jQuery.jQuery 的设计理念是 "Write Less, Do More", 即写的更少, 做的更多! 使用 jQuery 可以大大简化我们的 JS 代码, 从而提高开发效率.
jQuery 现在有 3 个大的版本, 分别是 1.x,2.x,3.x. 你可以从 jQuery 官方网站下载需要的版本, 然后从本地引入到自己的项目, 也可以使用 CDN 引入. 在你下载 jQuery 时一般有两个可选的版本, 一个是压缩版(不包含换行和空格, 体积更小, 多用于实际项目开发), 另一个是未压缩版(包含换行和空格, 体积稍大, 多用于学习和测试).
另外, jQuery 从第二个大的版本开始, 为了优化网络响应和使语法更加简洁, 抛弃了对 IE6,7,8 的支持, 并且从 2.1.0 开始, 压缩版本的文件中也不再包含注释信息了. 为了获得更好的兼容性, 我们这里使用的 jQuery 文件版本号是 1.12.4.
二 jQuery 核心
1,$ 符号
jQuery 实际上是一个函数对象. 事实上, jQuery 通过全局变量 jQuery 引用该函数对象,$ 符号是 jQuery 变量的一个别名, 为了写的更少, 我们通常都使用 $ 符号表示该对象.
- Windows.jQuery === Windows.$; //true
- jQuery === $;// true
- typeof($);// 'function'
如果你还使用了其他框架, 或自定义了 $ 变量, 那么有可能和 jQuery 的 $ 符号造成冲突.
jQuery.noConflict();
在使用 jQuery 编程之前, 首先调用 noConflict()方法, 解除 jQuery 对 $ 符号的占用, 这样就可以解决这一问题了. 但往后就只能通过变量 jQuery 来使用 jQuery 的所有功能了.
2, 参数
$ 核心函数可以接收 3 种类型的参数, 分别是函数引用, 字符串, DOM 对象.
a) 接收一个函数
- $(function(){
- //some code
- });
- // 这种方式的完整写法应该是:
- //$(document).ready(function(){
- some code
- });
这种方式类似原生 JS 的 Windows.DOMContentLoaded 方法, 只要 html 文档解析完毕并生成 DOM tree 就会触发该事件. 但是在 jQuery 中可以同时存在多个该方法.
b) 接收字符串
- var box1 = $('div');
- // 接收 CSS 选择器字符串, 可以拿到 DOM tree 中相应的 DOM 元素, 并把它包装成 jQuery 对象
- var box2 = $('');
- // 接收 HTML 代码片段, 可以创建相应的 DOM 元素, 并把它包装秤 jQuery 对象
c) 接收 DOM 元素
- var box = document.getElementById('#box');
- var jBox = $(box);//jQuery obj
如果核心函数接收一个 DOM 元素, 那么它会把该 DOM 元素包装成一个 jQuery 对象, 并返回.
jQuery 对象事实上是一个类数组, 保存了获取到的 DOM 元素. 只有通过 jQuery 对象才可以访问 jQuery 提供的属性和方法.
3, 静态方法
jQuery 提供了一些静态方法, 例如遍历数组, 字符串去空格, 判断数据类型等等, 这些方法在 ES5 之前都是很实用的方法, 但 ES5 之后, 原生 JS 就已经实现了这类似的方法, 所以这里就不再详细讲解了, 有兴趣可以自行查看官方文档. jQuery 把 Ajax 相关操作也封装为静态方法, 稍后会专门讲解. 这里要讲的只有 holdReady 方法.
- $.holdReady(true);
- $(function(){
- //some code
- });
- $.joldReady(false);
- // 参数 true, 暂停 ready 方法的执行, 参数 false, 恢复 ready 方法的执行
三 jQuery 属性和节点
1, 选择器
选择器是 jQuery 的核心功能. 绝大多数 CSS 支持的选择器都可以在 jQuery 得到支持.
- $('p');// 标签选择器
- $('.class');// 类选择器
- $('#id');//id 选择器
- $('[type=text]');// 属性选择器
- $('input[type=email]');// 组合选择器
- $(#id p);// 后代选择器
- $(#id p:first-child);// 筛选选择器
- //...
通过核心函数获取到的 DOM 元素都被包装成 jQuery 对象, 以类数组的形式存储. 我们可以通过 eq 方法获取其中某一个, 还可以通过 get 方法获取 DOM 对象. 1
- var divList = $('div');// 获取所有 div
- var domDiv = divList.get(0);// 获取第一个 Dom 元素, 如果有的话
- var jqDiv = divList.eq(0);// 获取第一个 jq 对象, 如果有的话
- var another = $(domDiv);// 把 Dom 元素转化成 jq 对象
另外 jQuery 还提供了一些通过层级结构查找元素的方法.
- $('div').find('span');// 查找 div 内部的 span, 等同于 $('div span')
- $('li').first();// 获取匹配的元素中的第一个
- $('li').last();// 获取匹配的元素中的最后一个
- $('div').next();// 获取所有匹配到的 div 的下一个兄弟元素的集合
- $('div').prev();// 获取所欲匹配到的 div 的上一个兄弟元素的集合
- $('div').parent();// 获取匹配到的 div 的共同父元素
- $('div').children();// 获取 div 的子元素集合
- $('div').siblings();// 获取 div 的兄弟元素集合
- //...
2, 属性操作
获取 DOM 元素之后, jQuery 把它们包装成 jq 对象, 然后你就可以通过 jQuery 提供的方法修改相应的 DOM 元素了, 包括 CSS, 文本, 属性节点, HTML 结构等等.
属性及属性节点相关:
- $('div').attr('name','test');// 设置属性名: name, 属性值: test
- $('div').attr('name');// 获取属性 name 的值
- $('div').removeAttr('name');// 删除属性 name
- ******************************
- $('div').prop('name','test');
- $('div').prop('name');
- $('div').removeProp('name');
- //prop 的用法和 attr 一模一样, 唯一不同的是 prop 既可以操作 DOM 元素的属性, 也可以操作它的属性节点
当属性没有被显示的设置时, 通过 attr()方法获取将返回 undefined, 而 prop()方法可以返回 true 或者 false, 所以, 如果你要检索和更改 DOM 属性, 比如元素的 checked,selected, 或 disabled 状态, 推荐使用 prop()方法, 其他时候都使用 attr 方法.
注意, 使用上诉方法获取属性值时, 返回的只是第一个匹配的 DOM 元素的相应属性值. 但是设置的时候却是为所有匹配的 DOM 元素都添加该属性.
class 类相关:
- $('div').addClass('test');// 添加类, 如需添加多个类, 使用空格隔开即可
- $('div').removeClass('test');// 删除类, 如需删除多个类, 也用空格隔开即可
- $('div').toggleClass('test');// 切换类, 如果 DOM 元素已经有该类了, 那么就删除, 如果没有则添加
文本及结构相关:
- $('div').HTML();// 获取第一个匹配到的 div 的内容
- $('div').HTML('
我是段落
- ');// 设置所有匹配到的 div 的内容
- $('div').text();// 获取所有匹配元素的文本内容
- $('div').text('hello');// 设置所有匹配到的 div 的文本内容
- $('input').val();// 获取匹配元素 value 值
- $('input').val('hello');// 获取匹配元素 value 值
CSS 相关:
- $('div').CSS('background-color','red');// 设置元素的单个 CSS 属性
- $('div').CSS({
- width:'200px',
- height:'200px',
- background-color:'red'
- });// 通过对象设置多个 CSS 属性
尺寸及位置相关:
- $('div').width();// 获取 div 的内容区宽度, 可传参设置
- $('div').height();// 获取 div 的内容区高度, 可传参设置
- //innerWidth,innerHeight 表示 content+padding 的宽高
- //outerWidth,outerHeight 表示 content+padding+border 的宽高
- $('div').offset();// 获取 div 相对视口的偏移量, 返回值是一个包含 top 和 left 属性, 且值为数字的对象
- $('div').position();// 获取 div 相对父元素的偏移量, 返回值是一个包含 top 和 left 属性, 且值为数字的对象
- //offset 和 position 都以像素计, 并且只对可见的元素起作用
3, 节点
jQuery 也提供了节点的增, 删, 改, 查相关方法.
- $("div").append("
- Hello
- ");// 在 div 内部的末尾插入元素
- $("div").prepend("
- Hello
- ");// 在 div 内部的开头插入元素
- $("div").after("
- Hello
- ");// 紧挨着 div 的后面插入元素
- $("div").before("
- Hello
- ");// 紧挨着 div 的前面插入元素
- $("div").remove();// 删除 div 元素, 但是会保留文本
- $("div").empty();// 清空 div 中的所有内容
四 jQuery 事件
1, 事件绑定和移除
jQuery 提供了两种绑定事件的方式, 第一种是 on + 事件名称的具体事件方法, 第二种是直接使用 on 方法.
- $('div').onclick(function(){
- });
- $('div').on('click',function(){
- });
- // 事件处理函数可以是匿名函数, 也可以是函数引用, 如果涉及到解除事件绑定, 建议使用函数引用的方式
jQuery 的事件绑定类似原生 JS 的 addEventListener 方法, 可以同时绑定同一类型的多个事件, 而不会相互覆盖.
jQuery 通过 off 方法解除事件绑定.
- function test(){
- };
- $('div').on('click',test);
- $('div').off();// 移除 div 绑定的所有事件
- $('div').off('click');// 移除 div 绑定的所有 click 事件
- $('div').off('click',test);// 移除 div 绑定的具体事件
2, 阻止事件冒泡和默认行为
使用 jQuery 阻止事件冒泡和默认行为与原生 JS 一样. 不太清楚的可以查看我的《DOM 之事件(一)》.
- $('div').on('click',function(){
- //some code
- e.stopPropagation();
- });
- // 阻止事件冒泡
- $('a').on('click',function(){
- //some code
- return false;// 简单方式
- //e.preventDefault();//W3C 标准方式
- });
- // 阻止默认行为
3, 一次性事件和自动触发事件
通常我们给元素绑定的事件处理程序需要特定的事件才能触发, 比如 click,mouseover 等等, jQuery 提供了 triggerHandler 方法, 你可以通过该方法手动触发元素绑定的事件处理程序, 而不用等到特定事件发生.
- $('div').on('click',function(){
- //some code
- });
- // 一般需要等到用户点击 div, 函数才会被执行
- $('div').triggerHandler('click');
- // 自动触发 div 的 click 事件, 不用等到用户点击
jQuery 还提供了另一个方法: trigger. 它的功能和 triggerHandler 方法一样. 他们的不同之处在于 triggerHandler 不会触发事件的默认行为和冒泡.
- $('div').one('click',function(){
- //some code
- });
- //jQuery 通过 one 方法绑定一个只会被触发一次的事件处理程序
4, 事件委托
jQuery 通过 delegate 方法实现事件委托. 该方法使用上和原生 JS 有一些区别, 原生 JS 实现事件委托也请移步《DOM 之事件(一)》.
- $("ul").delegate("li", "click", function(){
- $(this).toggleClass("test");
- });
- // 把 li 的点击事件委托给 ul, 被委托元素一般是委托元素的父元素
五 jQuery 动画
1, 显示和隐藏
jQuery 通过 show 方法和 hide 方法实现元素的显示和隐藏. 它的原理是修改元素的 display 和宽高及 opacity 属性.
- $('div').show(1000);
- // 使 div 显示, 1000 表示整个过程持续时间, 单位是 ms
- $('div').hide(1000);
- // 使 div 隐藏
这两个方法还可以接受一个回调函数作为第二个参数, 用于设置动画完成后需要执行的操作.
2, 展开和收起
jQuery 通过 slideDown,slideUp 实现平缓的展开和收起元素. 该方法是通过高度变化 (向下增大或减小) 来动态地显示元素, 在显示完成后可选地触发一个回调函数.
- $("p").slideDown(1000);
- // 展开, 可以设置一个时间, 表示整个过程持续时间, 单位 ms
- $("p").slideUp(1000);
- // 收起
- $("p").slideToggle(1000);
- // 切换
展开后收起动画常用来做下拉菜单.
3, 淡入淡出
jQuery 通过 fadeIn 和 fadeOut 实现淡入淡出效果. 该方法的原理是修改元素的 opacity 属性, 不会改变元素的宽高. 也可接收一个回调函数.
- $("div").fadeIn(1000);
- // 淡入, 可一接收一个数字作为参数, 表示过程持续时间, 单位 ms
- $("div").fadeOut(1000);
- // 淡出
- $("div").fadeTo(1000,0.5);
- // 调整到指定值
- $("div").fadeToggle(1000);
- // 切换
4, 自定义动画
jQuery 通过 animate 方法实现自定义动画效果.
- $('div').animate({
- width:500px,
- opacity:0.8
- },1000);
- // 该方法接收一个对象, 表示动画结束时元素的状态, 第二参数是一个数字, 表示持续时长, 单位 ms, 也可以接收一个回调函数作为第三个参数
注意, jQuery 的动画采用队列形式, 每编写一个动画, 就向动画队列中插入一个, 只能等前面的执行完后才执行后面的.
5, 停止和延迟
jQuery 的 stop 方法可以暂停正在执行的动画.
- $('div').stop();
- // 立即停止当前动画, 直接开始执行队列中后续的动画, 如果有的话
- $('div').stop(true,true);
- //stop 方法可以接收两个 blloean 值作为参数. 第一个规定在停止当前动画的同时对否清除队列中的其他动画, 第二个规定在停止当前动画的同时是否要直接完成队列中其他动画.
介于 jQuery 通过队列形式控制动画执行, 我们建议在调用 jQuery 动画之前都先调用一次 stop 方法, 以免造成动画混乱.
- $('div').stop();
- $('div').animate({
- //some code
- },1000);
jQuery 通过 delay 延迟动画的执行.
- $('div').animate({
- width:200px;
- height:200px;
- },1000).delay(1000).animate({
- background-color:red;
- },1000);
- // 在改变宽高后等待 1000ms 再改变背景颜色
六 jQuery Ajax
jQuery 封装了功能完整的 Ajax 方法, 我们常用的 jQuery 方法有 3 个, 分别是 $.Ajax(),$.get(),$.post().
1,Ajax()方法
Ajax 方法接收一个对象作为参数, 对象的属性名为 Ajax 的设置参数, 属性值为 Ajax 的设置值.
- $.Ajax({
- type: "POST",
- url: "some.php",
- data: "name=ren&age=12",
- cache: false;
- dataType:"text",
- success: function(msg){
- //some code
- },
- error:function(msg){
- //some code
- }
- });
常用的参数有:
type: 请求类型, 可选值有 post 和 get.
url: 发送请求的地址.
data: 发送到服务器的数据. 必须是 "key0=value0&key1=value1" 或键值对的形式(对象).
cache: 规定是否读取缓存数据, true 表示读取, false 表示不读取, 直接从服务器获取.
dataType: 期望服务器返回的数据类型, 可选值有 xml,HTML,script,JSON,text.
success:Ajax 请求成功回调函数.
error:Ajax 请求失败回调函数.
使用 Ajax()方法时, 所有的设置参数都是可选的, 除了上诉参数外, 还有很多其他的参数可选, 这让我们在通过 jQuery 实现 Ajax 时有了更大的灵活性. 如果你想了解更多相关参数的信息, 请到 jQuery 官网查询.
2,get()方法
如果你觉得 Ajax()方法发送简单 get 请求还是太麻烦, 那么你可以直接使用 $.get()方法.
- $.get(
- "url",
- {
- name: "ren", age: "12"
- },
- function(msg){
- //some code
- },
- "text"
- );
该方法只需要 4 个参数, 发送请求的 url, 发送的数据, 请求成功的回调函数, 期望的返回值类型.
3,post()方法
使用 $.post()方法和 $.get()一样, 他们都只需要 4 个参数.
- $.post(
- "url",
- { name: "ren", age: "12" },
- function(msg){
- //some code
- },
- "text"
- );
4,load()方法
load()方法可以直接请求服务器的数据并添加到 DOM 元素中. 默认使用 get 方式, 如果你向服务器发送了数据, 将自动转换为 post 方式.
- $("div").load(
- "test.html",
- {
- name:"ren",age:"12"
- },
- function(){
- //some code
- }
- );
- // 载入一份新的 HTML 文档到 div 中, 并向服务器发送了数据.
load()方法可以有 3 个参数, 请求的 url, 向服务器发送的数据, 请求成功后的回调函数.
来源: http://developer.51cto.com/art/201910/604463.htm