jquery

jquery对象是一个包含所有匹配的dom元素的伪数组对象。

js 加载时间线

1、创建document对象，开始解析web页面。创建HTMLHtmlElement对象，添加到document中。这个阶段document.readyState = ‘loading’；

2、遇到link外部css，创建线程加载，并继续解析文档。并发；

3、遇到script外部js，并且没有设置async、defer，浏览器创建线程加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。js拥有修改dom的能力–>domcument.write；

4、遇到script外部js，并且设置有async、defter，浏览器创建线程加载，并继续解析文档；

　　defer属性设置后，表示加载script外部js和解析html页面是异步，并且等到html解析完成再执行js解析后的代码；

　　async属性设置后，表示加载script外部js和解析html页面是异步，但是当js解析完成，立刻执行它，此时html解析是被阻塞的；

document.createElement(‘script’)的方式动态插入script元素来模拟async属性，实现脚本异步加载和执行；

5、遇到img等，浏览器创建线程加载，并继续解析文档。并发；

6、当文档解析完成，document.readyState = ‘interactive’；

7、文档解析完成后，所有设置有defer的脚本会按照顺序执行（注意与async的不同）；

8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段；

9、当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = ‘complete’，window对象触发load事件；

10、从此，以异步响应方式处理用户输入、网络事件等。

jQeury

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在网络上的内容分发网络，依靠部署在各边缘服务器，通过中心平台的负载均衡，内容分发，调度等功能模块，使用户就近获取所需的内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术在于内容存储和分发技术。

使用Google的CDN

src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"

使用Microsoft的CDN

src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.mim.js"

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。

百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

使用百度，又拍云，新浪，谷歌或微软的jQuery的一大优势：

当用户在访问其他站点时，已经从百度，又拍云，新浪，谷歌或1微软加载过jQuery，所以当他们访问你的站点时，会从缓存中加载jQuery,这样就减少了加载时间。同时，大多数CDN都可以确保当用户向其请求文件时，会从离用户最近的服务器上访问响应，这样也可以提高加载速度

$(document).ready(function(){//jQuery代码})；

这是为了防止文档未完全加载之前就执行jQuery代码，可能会失败

元素 元素
语法 描述
$(“*”) 选取所有元素
$(this) 选取当前 HTML 元素
$(“p.intro”) 选取 class 为 intro 的

元素
$(“p:first”) 选取第一个

元素
$(“ul li:first”) 选取第一个
    元素的第一个
  • 元素
$(“ul li:first-child”) 选取每个
    元素的第一个
  • 元素
$(“[href]”) 选取带有 href 属性的元素
$(“a[target=’_blank’]”) 选取所有 target 属性值等于 “_blank” 的 元素
$(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 “_blank” 的 元素
$(“:button”) 选取所有 type=”button” 的 元素 和
$(“tr:even”) 选取偶数位置的
$(“tr:odd”) 选取奇数位置的

常见 DOM 事件：

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

基本行为

  • length：包含dom元素个数
  • [index]/get(index)：得到对应位置的DOM元素
  • each()：遍历包含所有的DOM元素
  • index():得到所在兄弟元素中的下标
过滤器

  • 多个过滤器不是同时执行的，而是依次执行的。

    $(‘li:gt(0):lt(3)’).css(‘background’,’red’) 下标是 1 2 3变底色

    $(‘li:lt(3):gt(0)’).css(‘background’,’red’) 下标是1 2 变底色

mouseover与mouseenter区别
  • mouseover：在移入子元素时才会触发，对应mouseout
  • mouseenter：只在移入当前元素才触发，对应mouseleave
  • hover（）使用的是mouseenter与mouseleave

事件委托（委派/代理）

  • 将多个元素（li）的事件监听委托给父辈元素上（ul）处理。
  • 监听回调是加在父辈元素上
  • 当操作任何一个子元素时（li），事件会冒泡到父辈元素上（ul）
  • 父辈元素不会直接处理事件，而是通过event.target得到发生事件的子元素（li），通过这个子元素调用事件回调函数。
  • $(‘ul’).delegate(‘li’,’click’,function(){})
  • 委托2方
    • 委托方：业主 li
    • 被委托方 中介 ul
  • 好处
    • 新添加的子元素自动有事件响应处理。
    • 减少事件监听的数量 ： n==>1
  • API
    • 设置事件委托：$(parentSelector).delegate(childrenSelector,eventName,callback)
    • 移出事件委托：$(parentSlector).undelegate(eventName)

比较keypress、keydown与keyup

  • keydown：在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码;
  • keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效，换句话说，只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
  • keyup：用户松开某一个按键时触发，与keydown相对，返回键盘代码.

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

$(selector).toggle(speed,callback); //切换hide（）和show（）方法

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

可选的 callback 参数，具有以下三点说明：

  1. $(selector)选中的元素的个数为n个，则callback函数会执行n次
  2. callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行
  3. callback既可以是函数名，也可以是匿名函数

在在jQuery中可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()

$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeIn();
$(“#div2”).fadeIn(“slow”);
$(“#div3”).fadeIn(3000);
});
});

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);

jQuery slideDown() 方法用于向下滑动元素。

$(selector).slideDown(speed,callback);

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

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

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

三个简单实用的用于 DOM 操作的 jQuery 方法：

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值

jQuery attr() 方法用于获取属性值。

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

  • append() - 在被选元素内部的结尾插入指定内容

  • prepend() - 在被选元素内部的开头插入指定内容

  • after() - 在被选元素之后插入内容

  • before() - 在被选元素之前插入内容

    $(“img”).after(“在后面添加文本”);

$(“img”).before(“在前面添加文本”);

提示：在jQuery中，append/prepend 是在选择元素内部嵌入，而after/before 是在元素外面追加。

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

  • remove() - 删除被选元素（及其子元素）
  • empty() - 从被选元素中删除子元素

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性

设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css({“propertyname“:”value“,”propertyname“:”value“,…});

jQuery 提供多个处理尺寸的重要方法：

jQuery Dimensions

向上遍历 DOM 树

  • parent()
    • parent() 方法返回被选元素的直接父元素。
  • parents()
    • parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
  • parentsUntil()
    • parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
    • 返回介于 与
      元素之间的所有祖先元素： $(“span”).parentsUntil(“div”);

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

在 DOM 树中水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历：

  • siblings()：返回被选元素的所有同胞元素
  • next()：返回被选元素的下一个同胞元素
  • nextAll()：返回被选元素的所有跟随的同胞元素
  • nextUntil()：返回介于两个给定参数之间的所有跟随的同胞元素
  • prev()
  • prevAll()
  • prevUntil()

缩小搜索元素的范围

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first（）：返回被选元素的首个元素

last（）：返回被选元素的最后一个元素

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

jQuery AJAX

  • AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现对部分页面的更新
  • AJAX=异步JavaScript和XML（Asynchronous JavaScript and XML),通过AJAX方法，你可以使用HTTP Get和HTTP Post从远程服务器上请求文本，HTML,XML,JSON,同时你可把这些外部数据直接载入网页的被选元素中

作为一般函数调用$(param)

  1. 参数为函数：当DOM加载完成后，执行此回调函数。
  2. 参数为选择器字符串：查找所有匹配的标签，并把它们封装成jquery对象。
  3. 参数是DOM对象：将dom对象封装成jquery对象。
  4. 参数为html标签字符串（用得最少）：创建标签对象并封装成jquery对象。

作为对象使用

  1. $.each()：隐式遍历数组
  2. $.trim()：去除两端的空格

AJAX

load（）

  • load（）方法从服务器加载数据，并把返回的数据放入被选元素中
    • $(selector).load(URL,data,callback);
    • 必须的URL参数规定你希望加载的URL
    • 可选的data参数规定与请求一同发送的查询字符串键/值对集合
    • 可选的callback（responseTxt，statusTXT，xhr）参数是load（）完成后执行的函数名称，无论AJAX请求是否成功，一旦请求完成后，函数callback立即被触发
    • responseTxt–包含调用成功时的结果内容 statusTXT—包含调用的状态 xhr——包含XMLHttpRequest对象

$.get（URL,callback）和post（）

  • 两者都能通过HTTP或POST请求从服务器请求数据
  • get是从指定的资源请求数据，基本用于从服务器获得数据，可能返回缓存数据
  • post向指定的资源提交要处理的数据，可用于从服务器获取数据。不过，post方法不会缓存数据，并且常用于连同请求一起发送数据

$.noConflict（）方法

  • 解决在页面同时使用jQuery和其他框架（在同一个页面加载多个jQuery实例，尤其是不同版本的jQuery）
  • noConflict（）会释放对$($是jQuery的简写）

$(selector).bind(event,data,function,map)

参数 描述
event 必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

  • bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

  • 自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。

$(selector).delegate(childSelector,event,data,function)

参数 描述
childSelector 必需。规定要添加事件处理程序的一个或多个子元素。
event 必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。

原生js与jQuery的区别

1.原生JS与jQuery入口函数的加载模式不同

  • 原生JS会等到DOM元素和图片都加载完毕再执行
  • jQuery只是等DOM加载完毕之后就执行

2.覆盖问题

  • 原生js如果有多个入口函数，后面编写的会覆盖前面的
  • jQuery有多个入口函数时不会相互覆盖，都会执行

3.多个框架时的冲突问题

  • 解决方法：释放$的使用权

iQuery.noConflict();

注意点：释放操作必须在编写其他jQuery代码之前编写

​ 释放之后就不能再使用$改为jQuery

  • 自定义访问符号

var nj = jQuery.noConflict();

nj(function (){ });

4.遍历数组

  • js中用forEach（）只能遍历数组，不能遍历伪数组，参数位置不同

    arr.forEach(function (value,index){ });

  • 利用jQuery的Each（）静态方法遍历数组/伪数组,参数位置不同

    $.each(arr,function (index,value){ });//遍历数组

    $.each(obj，function (index,value){ });//遍历伪数组

jQuery中的each（）静态方法和map（）静态方法的区别：

  • each（）静态方法默认的返回值就是遍历谁就返回谁，不支持在回调函数中对数组进行处理
  • map（）静态方法默认的返回值是一个空数组，可通过回调函数进行处理，然后生成一个新的数组返回

复习jquery

  • DOM中的顶级对象：document ——页面中的顶级对象
  • BOM中的顶级对象：window
  • jQuery的顶级对象：jQuery——$
$与$()的区别
  • $是一个函数对象，包含很多静态方法，这种方法，一般的js也是可以使用。
  • $（）是调用这个函数对象的一个实例，返回一个对象，一般是由$对象拓展的对象属性。
1
2
3
4
5
$().css();
$().html();

$.trim();
$.proxy();
$常见属性方法
1
2
3
4
5
6
7
8
9
10
11
trim()			去除前后格
makeArray()		类数组转为真数组
inArray()		数组版indexOf
merge()			合并数组
grep()			过滤新数组
map()			映射新数组
guid			唯一标识符
proxy()			改this指向
access()		多功能操作值（内部）
now()			当前时间
swap()			CSS交换（内部）

本文标题:jquery

文章作者:陈楚吟

发布时间:2020-06-17, 15:29:38

最后更新:2020-06-17, 15:30:00

原始链接:http://yoursite.com/2020/06/17/jquery/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. js 加载时间线
  2. 2. jQeury
    1. 2.0.0.1. 基本行为
      1. 2.0.0.1.0.1. 过滤器
      2. 2.0.0.1.0.2. mouseover与mouseenter区别
  3. 2.0.0.2. 事件委托（委派/代理）
  • 2.1. 比较keypress、keydown与keyup
  • 2.2. jQuery slideToggle() 方法
  • 2.3. 添加新的 HTML 内容
  • 2.4. 删除元素/内容
  • 2.5. jQuery 操作 CSS
  • 2.6. 设置 CSS 属性
  • 2.7. 向上遍历 DOM 树
  • 2.8. 向下遍历 DOM 树
  • 2.9. 在 DOM 树中水平遍历
  • 2.10. 缩小搜索元素的范围
    1. 2.10.0.1. 作为一般函数调用$(param)
    2. 2.10.0.2. 作为对象使用
  • 2.11. AJAX
    1. 2.11.0.1. load（）
    2. 2.11.0.2. $.get（URL,callback）和post（）
    3. 2.11.0.3. $.noConflict（）方法
    4. 2.11.0.4. $(selector).bind(event,data,function,map)
    5. 2.11.0.5. $(selector).delegate(childSelector,event,data,function)
  • 3. 原生js与jQuery的区别
    1. 3.1. 复习jquery
      1. 3.1.0.0.0.1. $与$()的区别
      2. 3.1.0.0.0.2. $常见属性方法
    • |