jQuery 快速入门 - Kiku 的个人博客

jQuery 概述

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

在这个库中有很多预先定义好的函数，对 JavaScript 中的 DOM 操作、事件处理、动画设计和 Ajax 交互做了优化封装，调用这些函数可以加快开发速度，提高开发效率。

jQuery 入口函数

当 DOM 结构渲染完毕（不必等到所有外部资源加载完成）即可执行入口函数里面的内部代码，相当于原生 JavaScript 中的 DOMContentLoaded 事件（原生 JavaScript 中的 load 事件是等页面文档、外部的 JS 文件、CSS 文件、图片加载完毕才执行内部代码）。利用入口函数，在任意位置书写的 JavaScript 代码都可以获取到完整的 DOM 对象。

$(function () {
... // 此处是页面 DOM 加载完成的入口
}) ;
$(document).ready(function(){
... // 此处是页面 DOM 加载完成的入口
});

jQuery 的顶级对象 $

$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $ ，但一般为了方便，通常都直接使用 $ ， $ 是 jQuery 的顶级对象，地位相当于原生 JavaScript 中的 window 。

利用原生 JavaScript （ getElementById() 、 querySelector() 等）获取到的对象就是 DOM 对象。

利用 $('selector') 获取的元素就是 jQuery 对象（集合），本质是一个伪数组集合，其中存储了选择符匹配到的所有 DOM 对象。

DOM 对象与 jQuery 对象之间是可以相互转换的。

将 DOM 对象转换为 jQuery 对象： $(DOMElement) 。只有 jQuery 对象才能使用 jQuery 对象特有的属性和方法，利用 $ 把 DOM 对象包装成 jQuery 对象，这样就可以调用 jQuery 对象特有的属性和方法。

1 2	`var ele = document.querySelector("div"); $(ele).hide();`

但是普通 DOM 对象的一些属性和方法 jQuery 没有给我们封装到 jQuery 对象中，如果要想使用这些属性和方法需要把 jQuery 对象转换为普通 DOM 对象才能使用。jQuery 对象转换为 DOM 对象有下面两种方式：

1 2	`$("div")[index]; // index 是索引号, jQuery 对象实际上是一个存储着 DOM 对象的伪数组集合 $("div").get(index) // index 是索引号`

jQuery 选择器

原生 JavaScript 获取元素方式可能存在兼容性问题，jQuery 顶级对象使用类似 CSS 选择器的方式快速获取元素，并且解决了兼容性问题。

jQuery 基础选择器：

jQuery 层级选择器：

jQuery 筛选选择器：

注意：和 CSS 伪类选择器有些许区别。

jQuery 筛选方法：

:checked 选择器：匹配所有被选中的表单元素（复选框、单选框等）。

jQuery 排他思想和链式编程

$(this).css("color", "red");  			// 给当前元素设置样式
$(this).siblings().css("color", "");	// 清楚其余兄弟元素的样式

$(this).css("color", "red").siblings().css("color", ""); 	// 链式编程

jQuery 操作元素样式

jQuery 对象没有 style 属性，因此不能直接通过 style 属性来设置样式，而是通过 jQuery 对象的 css() 方法来设置样式。 jQuery 对象具有隐式迭代特性：会自动遍历 jQuery 对象中的伪数组集合，一次调用即可同时修改其伪数组中所有 DOM 元素的样式。

css() 方法参数只写样式的属性名，则返回的是该样式的属性值：

1	`$("div").css("color");`

css() 方法参数是样式的属性名和属性值，用逗号分隔，设置一组样式。属性名必须加引号，属性值如果是数字可以不用跟单位和引号。

1	`$("div").css("width", 300);`

css() 方法参数还可以是键值对形式的 JavaScript 对象，用来一次设置多组样式。属性名和属性值用冒号隔开，键值对中的 CSS 属性名使用驼峰命名法，比如用 marginLeft 代替 margin-left 。属性名可以不用加引号，属性值如果是数字可以不用跟单位和引号。

$("div").css({ 
    width: 400,
    height: 400,
    backgroundColor: "red"
});

除了 css() 方法还可以通过修改元素的类名从而匹配不同的选择器。类似于 DOM 对象中的 classList 属性，jQuery 对象也有三个方法来修改类名：

1
2
3

$("div").addClass("current");		// 添加类
$("div").removeClass("current");	// 移除类
$("div").toggleClass("current");	// 切换类

jQuery 动画效果

基本显示隐藏效果：

show([speed,[easing],[fn]]) ：显示指定的元素。

hide([speed,[easing],[fn]]) ：隐藏指定的元素。

toggle([speed,[easing],[fn]]) ：在显示和隐藏之间切换，如果元素是可见的，则切换为隐藏的；如果元素是隐藏的，则切换为可见的。

滑动显示隐藏效果：


     slideDown([speed,[easing],[fn]])

：下滑显示指定的元素。


     slideUp([speed,[easing],[fn]])

：上滑隐藏指定的元素。


     slideToggle([speed,[easing],[fn]])

：滑动切换指定的元素。

淡入淡出效果：


     fadeIn([speed,[easing],[fn]])

：淡入显示指定的元素。


     fadeOut([speed,[easing],[fn]])

：淡出隐藏指定的元素。


     fadeToggle([speed,[easing],[fn]])

：淡入淡出切换指定的元素。


     fadeTo(speed,opacity,[easing],[fn]])

：渐进地调整元素到指定不透明度。


     speed

和


     opacity

参数值必须写，不透明度取值 0~1 之间，值越小越透明，值为 0 代表完全透明显示底层元素的颜色，值为 1 则是完全不透明即正常显示。

自定义动画：


     animate(params,[speed],[easing],[fn])

：创建自定义动画，以 JavaScript 对象键值对的形式指定想要更改的样式属性，通过


     params

参数传递，样式属性就会从当前的值渐变到指定的值。属性名可以不用带引号，如果对应的 CSS 属性带有连字符则需要采取驼峰命名法，比如用


     marginLeft

代替


     margin-left

。

上面动画函数中的出现的三个参数描述如下：


     speed

：三种预定速度之一的字符串（


     "slow"

，


     "normal"

或者


     "fast"

）或表示动画时长的毫秒数值（不需要带单位，如：1000）。


     easing

：来指定切换效果，默认是


     "swing"

，可用参数


     "linear"

。

fn

：回调函数，在动画完成时执行该函数，每个元素执行一次。

停止动画：


     stop()

：动画效果一旦触发就会执行，如果同时触发多个动画效果，就造成动画效果排队执行。


     stop()

方法用于手动停止该元素正在运行的动画效果，并且使队列中的其他动画直接完成。


     stop()

通常写到动画效果的前面：


     $(this).stop().fadeIn();

，即先结束其他动画，再开始新的动画效果。

jQuery 操作元素属性


      prop()

：设置或获取元素固有的属性值（元素本身自带的属性）。


        prop("属性")

：获取固有属性值。


        prop("属性", "属性值")

：设置固有属性值。


        attr()

：设置或获取元素自定义的属性值。


          attr("属性")

：获取元素自定义属性值，类似原生 DOM API 中的


          getAttribute()

，该方法也可以获取 HTML 5 规范中的自定义属性 data-[key] 中的值。


          attr("属性", "属性值")

：设置元素自定义属性值，类似 DOM 中的


          setAttribute()

。


          data()

：该方法可以在指定的元素上附加数据，但不会修改 DOM 元素结构，即元素标签中并不会显示该属性，一旦页面刷新，之前存放的数据都将被移除。


            date("key")

：获取该元素中存储的与 key 对应的值，该方法也可以获取 HTML 5 规范中的自定义属性 data-[key] 中的值。


            data("key", value)

：在该元素上存储 key-value 键值对的数据，


            value

可以是任何格式的数据，而不仅仅是字符串。

jQuery 操作元素内容

html() ：获取元素中的 HTML 内容，包括子元素的 HTML 标签，相当于原生 DOM API 中的 innerHTML 属性。

html("val") ：设定元素中的 HTML 内容，会解析字符串其中的 HTML 标签。

text() ：仅获取元素中的文本内容，不包括子元素的 HTML 标签，相当于原生 DOM API 中的 innerText 属性。

text("val") ：设定元素中的文本内容，不会解析其中的 HTML 标签。

val() ：获取表单元素中 value 属性的值。

val("val") ：设定表单元素中 value 属性的值。

jQuery 操作元素

each() ：jQuery 的隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作，就需要用到 each() 方法遍历。


               $("div").each(function (index, domEle) { xxx; }）

：对匹配的 JQuery 对象中的伪数组集合中的每一个 DOM 元素都传入回调函数进行处理，回调函数有 2 个参数：


               index

是 DOM 元素在伪数组中的索引号，


               domEle

则是待处理的 DOM 元素对象。注意 domEle 不是一个 jQuery 对象，如果要调用 jQuery 方法要先利用 $ 把 domEle 对象包装成 jQuery 对象。


               $.each(object，function (index, element) { xxx; }）

：遍历任何对象。主要用于数据处理，比如数组，对象，回调函数有 2 个参数：


               index

是每个元素的索引号，


               element

是待处理的元素。

$("<div><p>Hello</p></div>"). ：动态创建一个 div 元素（以及其中的所有内容）。

append("内容") ：在该元素的内部尾部追加内容，类似 DOM 中的 appendChild() ，追加的元素和该元素是父子节点关系。

prepend("内容") ：在该元素的内部头部插入内容，追加的元素和该元素是父子节点关系。

appendTo("selector") ：把选择器所匹配的元素追加到该元素内部尾部中。颠倒了常规的 $(A).append(B) 的操作，即不是把 B 追加到 A 中，而是把 A 追加到 B 中。

prependTo("selector") ：把选择器所匹配的元素插入到该元素内部头部中。颠倒了常规的 $(A).prependTo(B) 的操作，即不是把 B 追加到 A 中，而是把 A 追加到 B 中。

after("内容") ：在该元素的外部尾部追加内容，追加的元素和该元素是兄弟节点关系。

before("内容") ：在该元素的外部头部追加内容，追加的元素和该元素是兄弟节点关系。

remove() ：删除元素本身，包括其中的子节点。

empty() ：删除元素的所有子节点，和 html("") 作用等价，都可以删除元素里面的内容，只不过 html() 方法在清空元素原来内容的同时还可以设置内容。

jQuery 操作元素尺寸

以上方法的参数为空，则是获取相应值，返回的是数字型。可以传入参数设置相应值，参数为省略 px 单位的数字或者带单位的字符串。

jQuery 操作元素位置


                 offset()

：获取元素相对于文档（HTML 根元素）的偏移坐标对象，该对象有 2 个属性


                 left

、

top

。


                 offset().top

用于获取距离文档顶部的距离，


                 offset().left

用于获取距离文档左侧的距离。这两个属性是只读的，只能通过


                 offset()

方法传入一个带有

top

和


                 left

属性的对象来修改偏移距离，例如


                 offset({ top: 10, left: 30 });

。


                 postion()

：获取元素相对于带有定位的父级的偏移坐标对象，如果父级都没有定位，则是相对于文档（HTML 根元素）的偏移坐标。返回的对象有 2 个属性


                 left

、

top

。


                 position().top

用于获取距离带定位父级顶部的距离，


                 position().left

用于获取距离带定位父级左侧的距离。该方法只能获取偏移不能修改偏移距离。


                 scrollTop()

：获取元素被卷去的头部距离，可以传入参数设置被卷去的头部距离，参数为省略 px 单位的数字或者带单位的字符串。


                 $(document).scrollTop()

获取文档滚动的距离，多配合


                 $(window).scroll()

浏览器滚动事件使用。


                 scrollLeft()

：获取元素被卷去的左侧距离，可以传入参数设置被卷去的左侧距离，参数为省略 px 单位的数字或者带单位的字符串。

jQuery 添加事件

jQuery 对象能够使用一系列方法比如 click() ， mouseover() 来添加事件，类似原生 DOM API 中给元素对象的事件属性如 onclick 、 onmouseover 赋值一个函数对象。

注意：原生使用的是属性赋值， jQuery 是通过调用方法传入函数参数，并且 jQuery 的事件类型前面没有 on 前缀。

// 原生 DOM API
element.onclick = funnction() {Xxx;};

// jQuery 添加事件
$("div").click(function () {Xxx;});

但现在更推荐使用 on() 方法来为 jQuery 对象绑定事件。


                 on(events-map,[selector])

为对象同时绑定多个不同事件：


                 events-map

中的键表示事件类型，值表示事件绑定的处理函数。

$("div").on({
    mouseover: function(){
            // 事件处理函数
    },
    mouseout: function(){
            // 事件处理函数
    },
    click: function(){
            // 事件处理函数
    }
});


                 on(events,[selector],fn)

为对象同时绑定多个相同事件，


                 events

是一个或多个用空格分隔的事件类型，

fn

为事件处理函数。

1
2
3

$("div").on("mouseover mouseout click", function() {
    // 事件处理函数
});

上面两个方法的 selector 参数用来指定触发事件的后代元素，通过把原本应该绑定在子元素身上的事件注册在父元素身上，配合事件冒泡机制可以实现事件委派。

// 事件绑定在 ul 上，但是触发的对象是 ul 里面的小 li，也就是说点击 ul 中的非小 li 范围不会触发事件 
$("ul").on("click", "li", function () {
    // 事件处理函数
});

通过事件委派，之后动态生成的子元素也能触发事件：

$("ul").on("click", "li", function () {
    alert("click");
});
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);		 // 点击该 li 可以 触发事件，前提是 ul 在已经提前存在

如果是直接给子元素添加事件则只对之前已经存在的子元素才有效：

$("ul li").on("click", function () {
    alert("click");
});
var li = $("<li>我是后来创建的</li>");
$("ul").append(li); 	// 点击该 li 无法触发事件，之前的已经存在的 li 可以触发事件

jQuery 解绑事件

使用 off() 方法可以移除通过 on() 方法添加的事件处理程序。

1
2
3

$("p").off(); 				// 解绑p元素所有事件处理程序
$("p").off("click"); 		// 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托

如果事件只想被触发一次，可以使用 one() 方法来代替 on() 来为元素绑定一个一次性的事件处理函数，这个事件处理函数只会被执行一次，不用再手动解绑事件。

1
2
3

$("div").one("click", function(){
  // 事件处理函数
});

jQuery 手动触发事件

有时候需要手动触发某些时事件，比如中需要根据定时器自动触发右侧按钮点击事件来滚动图片。jQuery 中有三种手动触发事件的方式：

// 第一种，类似原生触发方式
$("a").click();

// 第二种，会导致浏览器同名的默认行为的执行，比如链接元素点击会跳转，表单元素触发 submit 事件后会提交
$("form").trigger("submit");

// 第三种，只会触发你绑定的事件处理函数，将不会执行浏览器默认动作，也不会产生事件冒泡
$("form").triggerHandler("submit");

jQuery 事件对象

jQuery 中的事件对象和原生 DOM API 中的事件对象拥有的属性大致相同，并在此基础上做了一些兼容性处理。

和原生 DOM API 中一样，可以使用 event 对象阻止浏览器默认行为和事件冒泡：

// 阻止超链接进行跳转
$("a").click(function (event) {  
　　event.preventDefault();
});

// 阻止超链接进行跳转
$("a").click(function (event) {  
　　return false;
});

// 阻止事件冒泡
$("div").click(function (event) {  
　　 event.stopPropagation();
});

jQuery 对象拷贝


                  $.extend([deep], target, object1, [objectN])

：用一个或多个其他对象来扩展一个对象，返回被扩展的对象。该方法可以用来拷贝复制一个对象或者合并多个对象。


                  deep

如果设为


                  true

，则是递归合并即深拷贝，如果省略则默认为


                  false

即浅拷贝，浅拷贝只是拷贝一层，对象中更深层次的复杂属性只拷贝了引用。即浅拷贝目标中的引用类型变量和原对象中的引用类型变量指向同一个对象实例，修改目标对象会影响被拷贝对象中的对象实例。


                  target

为待修改对象，


                  object1

和


                  objectN

为待合并（拷贝）的一个对象或多个对象。

var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options); // settings 和 empty 最后都为 { validate: true, limit: 5, name: "bar" }

B 站：黑马程序员前端基础必备教程|jQuery网页开发案例精讲