jQuery 简明教程快速上手

zoukankan html css js c++ java

jQuery 简明教程快速上手
1. jQuery概述

1.1 JavaScript 库

即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show、获取元素等。
简单理解： 就是一个JS 文件，里面对原生JS代码进行了封装，存放到里面。这样可以快速高效使用这些封装好的功能了。
jQuery，就是为了快速方便操作DOM，里面基本都是函数（方法）。

1.2 jQuery 的概念

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
j就是 JavaScript；Query 查询；意思就是查询js，把js中的DOM操作做了封装，可以快速查询使用里面的功能。

jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质：学习调用这些函数（方法）。

2. jQuery的基本使用

2.1 jQuery 的入口函数
```
$(function () {
	...  // 此处是页面DOM加载完成的入口
});
```
```
$(document).ready(function(){    
	...  //  此处是页面DOM加载完成的入口
});
```
1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
2. 相当于原生 js 中的DOMContentLoaded。
3. 文档加载完毕，图片不加载的时候就可以执行这个函数。
4. 更推荐使用第一种方式。
2.2 jQuery 的顶级对象 $
1. $是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使用$。
2. $是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法。
2.3 jQuery 对象和 DOM 对象

相互转化：
1. DOM 对象转换为 jQuery 对象： $(DOM对象)
```
$('div')
```
1. jQuery 对象转换为 DOM 对象（两种方式）
```
$('div')[index]        // index 是索引号
```
```
$('div').get(index)    // index 是索引号
```
3. jQuery 选择器

3.1 基础选择器
```
$(“选择器”)   //  里面选择器直接写 CSS 选择器即可，但是要加引号
```
3.2 层级选择器

jQuery 设置样式：
```
$('div').css('属性', '值')
```
3.3 隐式迭代（重要）

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

3.4 筛选选择器

3.5 jQuery 筛选方法（重点）

3.6 jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

当前元素设置样式，其余的兄弟元素清除样式。
```
$(this).css('color','red');
$(this).siblings(). css('color',");
```
3.7 链式编程
```
$(this).css('color', 'red').siblings().css('color', ");
```
4. jQuery 样式操作

4.1 操作 css 方法

（1）参数只写属性名，则是返回属性值
```
$(this).css('color');
```
（2）参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
```
$(this).css('color', 'red');
```
（3）参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
```
$(this).css({"color"："white","font-size"："20px"});
```
4.2 设置类样式方法

原生 JS 中 className 会覆盖元素原先里面的类名。
jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

（1）添加类
```
$("div").addClass("current");
```
（2）移除类
```
$("div").removeClass("current");
```
（3）切换类
```
$("div").toggleClass("current");
```
5. jQuery 效果

5.1 显示隐藏效果

（1）显示
```
show([speed,[easing],[fn]]);
```
1. 参数都可以省略，无动画直接显示。
2. speed：三种预定速度之一的字符串(slow,normal, or fast)或表示动画时长的毫秒数值(如：1000)。
3. easing：(Optional) 用来指定切换效果，默认是swing，可用参数linear。
4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
（2）隐藏
```
hide([speed,[easing],[fn]]);
```
（3）切换
```
toggle([speed,[easing],[fn]]);
```
5.2 滑动效果

（1）下滑
```
slideDown([speed,[easing],[fn]]);
```
（2）上滑
```
slideUp([speed,[easing],[fn]]);
```
（3）滑动切换
```
slideToggle([speed,[easing],[fn]]);
```
5.3 事件切换
```
hover([over,]out);
```
1. over：鼠标移到元素上要触发的函数（相当于mouseenter）
2. out：鼠标移出元素要触发的函数（相当于mouseleave）
3. 如果只写一个函数，则鼠标经过和离开都会触发它
5.4 动画队列及其停止排队方法

（1）动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

（2）停止排队
```
stop();        // 写到动画或者效果的前面，相当于停止结束上一次的动画
```
例如：
```
$(".nav>li").hover(function() {
    // stop 方法必须写到动画的前面
    $(this).children("ul").stop().slideToggle();
});
```
5.5 淡入淡出效果

（1）淡入
```
fadeIn([speed,[easing],[fn]]);
```
（2）淡出
```
fadeOut([speed,[easing],[fn]]);
```
（3）淡入淡出切换
```
fadeToggle([speed,[easing],[fn]]);
```
（4）渐进方式调整到指定的不透明度
```
fadeTo([[speed],opacity,[easing],[fn]]);          // opacity 透明度必须写，取值 0~1 之间
```
5.6 自定义动画 animate
```
animate(params,[speed],[easing],[fn]);
```
params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。

例如：
```
$("button").click(function() {
    $("div").animate({
        left： 500,
        top： 300,
        opacity： .4,
        width： 500,
    }, 500);
});
```
6. jQuery 属性操作

6.1 固有属性值 prop()

（1）获取属性
```
prop("属性");
```
（2）设置属性
```
prop("属性", "属性值");
```
6.2 自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加index =“1”

（1）获取属性
```
attr("属性");      // 类似原生 getAttribute()
```
（2）设置属性
```
attr("属性", "属性值");   // 类似原生 setAttribute()
```
该方法也可以获取 H5 自定义属性

6.3 数据缓存 data()

data()方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

（1）附加数据
```
data("name","value");   // 向被选元素附加数据
```
（2）获取数据
```
date("name");             //   向被选元素获取数据
```
还可以读取 H5 自定义属性data-index，得到的是数字型

7. jQuery 内容文本值

7.1 普通元素内容 html()

相当于原生innerHTML
```
html();             // 获取元素的内容
```
```
html("内容")      // 设置元素的内容
```
7.2 普通元素文本内容 text()

相当与原生innerText
```
text();                     // 获取元素的文本内容
```
```
text("文本内容");        // 设置元素的文本内容
```
7.3 表单的值 val()

相当于原生value
```
val();              // 获取表单的值
```
```
val("内容")      // 设置表单的值
```
8. jQuery 元素操作

8.1 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
```
$.each(object, function (index, element) { xxx; });
```
1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数：index是每个元素的索引号；element遍历内容
8.2 创建元素
```
$("<li></li>");
```
8.3 添加元素

（1）内部添加
```
element.append("内容");              // 把内容放入匹配元素内部最后面
```
```
element.prepend("内容");             // 把内容放入匹配元素内部最前面
```
（2）外部添加
```
element.after("内容");               // 把内容放入目标元素外部后面 
```
```
element.before("内容");              // 把内容放入目标元素外部前面  
```
8.4 删除元素
```
element.remove();                  //  删除匹配的元素（本身）
```
```
element.empty();                   //  删除匹配的元素集合中所有的子节点
```
```
element.html("");                  //  清空匹配的元素内容 
```
1. remove删除元素本身。
2. empt()和html("")作用等价，都可以删除元素里面的内容，只不过html("")还可以设置内容。
9. jQuery 尺寸、位置操作

7.1 jQuery 尺寸

7.2 jQuery 位置

（1）offset()设置或获取元素偏移
1. offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
2. 该方法有2个属性 left、top 。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。
3. 可以设置元素的偏移：offset({ top： 10, left： 30 });
（2）position()获取元素偏移
1. position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
2. 该方法有2个属性 left、top。position().top用于获取距离定位父级顶部的距离，position().left用于获取距离定位父级左侧的距离。
3. 该方法只能获取。
（3）scrollTop() / scrollLeft()设置或获取元素被卷去的头部和左侧
1. scrollTop()方法设置或返回被选元素被卷去的头部。
2. 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
10. jQuery 事件

10.1 jQuery 事件注册

单个事件注册
```
element.事件(function(){});
```
```
$("div").click(function(){});
```
10.2 jQuery 事件处理

（1）事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数
```
element.on(events,[selector],fn);
```
1. events：一个或多个用空格分隔的事件类型，如click或keydown。
2. selector：元素的子元素选择器。
3. fn：回调函数即绑定在元素身上的侦听函数。
```
// 可以绑定多个事件，多个处理事件处理程序
$("div").on({
    mouseover： function() {},
    mouseout： function() {},
    click： function() {}
});
// 如果事件处理程序相同
$("div").on("mouseover mouseout", function() {
    $(this).toggleClass("current");
});
// 可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
$('ul').on('click', 'li', function() {
    alert('hello world!');
});
```
```
// 动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件
$("ol").on("click", "li", function() {
    alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
```
（2）事件处理off()解绑事件
```
$("p").off();                  // 解绑p元素所有事件处理程序 
 
$("p").off("click");          // 解绑p元素上面的点击事件
 
$("ul").off("click", "li");    // 解绑事件委托
```
如果有的事件只想触发一次，可以使用one()来绑定事件。

（3）自动触发事件trigger()
```
element.click();                  // 第一种简写形式
```
```
element.trigger("type");          // 第二种自动触发模式
```
```
$("p").on("click", function() {
    alert("hi~");
});
$("p").trigger("click");          // 此时自动触发点击事件，不需要鼠标点击
```
```
element.triggerHandler(type);     // 第三种自动触发模式
```
trigger()和triggerHandler()的区别：
1. trigger会导致浏览器同名的默认行为的执行，如：trigger('submit');不但会执行submit()函数的效果，也会执行表单提交的效果；而triggerHandler就不会导致默认行为的执行
2. triggerHandler只会触发JQ对象集合中第一个元素的事件处理函数，也不会产生事件冒泡。而trigger不同
3. 这个方法的返回时事件处理函数的返回值，而不是具有可链性的JQ对象，此外，如果最开始的JQ对象集合为空，则返回undefined
10.3 jQuery 事件对象

事件被触发，就会有事件对象的产生
```
element.on(events, [selector], function(event) {});
```
阻止默认行为：event.preventDefault()或者return false

阻止冒泡：event.stopPropagation()

11. jQuery 拷贝对象
```
$.extend([deep], target, object1, [objectN]);
```
1. deep：如果设为true为深拷贝，默认为false浅拷贝
2. target：要拷贝的目标对象
3. object1：待拷贝到第1个对象的对象。
4. objectN：待拷贝到第N个对象的对象。
5. 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
6. 深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝对象。
12. jQuery 多库共存

问题概述：
jQuery 使用(作为标示符，随着 jQuery 的流行,其他 js 库也会用这)作为标识符，这样一起使用会引起冲突。

客观需求：
需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。

jQuery 解决方案：
1. 把里面的 $ 符号统一改为jQuery。比如jQuery("div")
2. jQuery 变量规定新的名称：$.noConflict()
  
  var xx = $.noConflict();
查看全文

相关阅读:
5.4 省选模拟赛修改线段树优化dp 线段树上二分
 一本通高手训练 1782 分层图状压dp
luogu P3830 [SHOI2012]随机树期望 dp
5.2 省选模拟赛或许线型基
 luogu P4562 [JXOI2018]游戏组合数学
 一本通高手训练 1781 死亡之树状态压缩dp
luogu P4726 【模板】多项式指数函数多项式 exp 牛顿迭代泰勒展开
 4.28 省选模拟赛负环倍增矩阵乘法 dp
HDU 1756 Cupid's Arrow 计算几何判断一个点是否在多边形内
 一本通高手训练 1763 简单树可持久化线段树树链刨分标记永久化

原文地址：https://www.cnblogs.com/jacklzx/p/13843587.html

热门文章
静态属性
 高级语法
 Python类中的私有变量和私有方法
 Python类的继承
 ftp主动模式和被动模式
 re模块
 xml处理模块
 sys模块
 time模块
 os模块

jQuery 简明教程 快速上手

1. jQuery概述

1.1 JavaScript 库

1.2 jQuery 的概念

2. jQuery的基本使用

2.1 jQuery 的入口函数

2.2 jQuery 的顶级对象 $

2.3 jQuery 对象和 DOM 对象

3. jQuery 选择器

3.1 基础选择器

3.2 层级选择器

3.3 隐式迭代（重要）

3.4 筛选选择器

3.5 jQuery 筛选方法（重点）

3.6 jQuery 里面的排他思想

3.7 链式编程

4. jQuery 样式操作

4.1 操作 css 方法

4.2 设置类样式方法

5. jQuery 效果

5.1 显示隐藏效果

5.2 滑动效果

5.3 事件切换

5.4 动画队列及其停止排队方法

5.5 淡入淡出效果

5.6 自定义动画 animate

6. jQuery 属性操作

6.1 固有属性值 prop()

6.2 自定义属性值 attr()

6.3 数据缓存 data()

7. jQuery 内容文本值

7.1 普通元素内容 html()

7.2 普通元素文本内容 text()

7.3 表单的值 val()

8. jQuery 元素操作

8.1 遍历元素

8.2 创建元素

8.3 添加元素

8.4 删除元素

9. jQuery 尺寸、位置操作

7.1 jQuery 尺寸

7.2 jQuery 位置

10. jQuery 事件

10.1 jQuery 事件注册

10.2 jQuery 事件处理

10.3 jQuery 事件对象

11. jQuery 拷贝对象

12. jQuery 多库共存

jQuery 简明教程快速上手