jQuery

Posted by liveipool on February 17, 2017

jQuery

从接触前端至今,使用jQuery的次数也非常多了,但以前学的都是一些零星的片段,下面来详细系统地学习一下。
jQuery是一个JavaScript类库。它封装了很多预定义的对象和实用函数。
原生JavaScript和原生DOM操作较为复杂,需要jQuery这样的库来简化操作。

jQuery的优势

  • 轻量级:压缩后的文件非常小。
  • 强大的选择器:jQuery允许开发者使用从CSS1到3几乎所有的选择器,以及它自己独创的选择器。
  • 出色的DOM操作的封装:jQuery封装了大量常用的DOM操作。
  • 可靠的事件处理机制。
  • 完善的Ajax。
  • 不污染顶级变量:jQuery只建立一个名为jQuery的对象,其所有的函数方法都在这个对象之下。
  • 链式操作方式:对发生在同一个jQuery对象上的一组动作,可以直接连写而无须重复获取对象。
  • 丰富非插件支持、完善的文档、开源。

在jQuery库中,$就是jQuery的一个简写形式,例如

$("#foo")
//等同于
jQuery("#foo")

$(document).ready() 和 window.onload

  • window.onload必须等待网页中所有的内容加载完毕后(包括图片)才能执行。
  • $(document).ready()在网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完(比如一个img绘制到了一个DOM节点上,但这张图片本身还没加载好)
  • window.onload不能同时编写多个,$(document).ready()可以。
  • window.onload方法可用jQuery中的$(window).load(function() {})代替,但不常用。

最常用的还是$(document).ready(),下面三种写法是相同的:

$(document).ready(function() {
	// ...
})

$().ready(function() {
	// ...
})

$(function() {
	// ...
})

jQuery对象和DOM对象

var domObj = document.getElementById("id");  //获取DOM对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的,它可以使用jQuery里的所有方法。jQuery对象无法使用DOM对象的任何方法,DOM对象也同理。

jQuery对象转成DOM对象

有两种方法: [index] 和 get(index)

var $cr = $("#cr");   // jQuery对象
var cr = $cr[0];      // DOM对象
cr = $cr.get(0);      // DOM对象

DOM对象转成jQuery对象

只需要将DOM对象用 $() 包装起来

var cr = document.getElementById("cr");    // DOM对象
var $cr = $(cr);      //jQuery对象

注意,平时用到的jQuery对象都是通过$()函数制造出来的,这个函数就是一个jQuery对象的制造工厂。

解决jQuery和其他库的冲突

在jQuery库中,几乎所有的插件都被限制在它的命名空间里。因此通常不会引起冲突。
实在有冲突时,jQuery可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库。
如果想确保jQuery不会与其他库冲突,但又想自定义一个快捷方式:

var $j = jQuery.noConflict();  // 以后就可以通过快捷方式$j来使用jQuery了。

jQuery选择器

jQuery选择器分为基本选择器层次选择器过滤选择器表单选择器

jQuery选择器的优势

  • 简洁的写法,这个无须赘述,$(“#id”)就可以代替document.getElementById(“id”)。
  • 支持CSS 1到3的选择器。
  • 完善的处理机制,原生DOM操作在找不到元素时会报错,使用jQuery即使查找网页中不存在的元素也不会报错。

需要注意的是,$(‘#tt’)获取的永远是对象,即使网页上没有此元素。因此要判断是否查找到元素:

if ($('#tt').length > 0) {
	// ...
}

//或转化为DOM来判断
if ($('#tt')[0]) {
	// ...
}

基本选择器

  • $(“#id”):匹配id
  • $(“.test”):匹配类名为test的
  • $(“p”):匹配所有的p元素
  • $(“*”):匹配所有元素
  • $(“#id,.test,p”):将每个选择器匹配到的元素合并后一起返回

层次选择器

  • $(“A B”):匹配后代元素
  • $(“A > B”):匹配子元素
  • $(“A + B”):匹配紧接在A后的B元素, 可用next() 方法代替
  • $(“A ~ B”):匹配A之后所有的B,可用 nextAll() 方法代替

过滤选择器

  • :first 和 :last
  • :not(selector)
  • :even 和 :odd
  • :eq(index) 索引等于index的元素
  • :gt(index) 索引大于index的元素
  • :lt(index) 小于index
  • :header 选取所有标题
  • :animated 正在执行动画的所有
  • :focus 当前获取焦点的
  • :contains(text)
  • :empty 不包含子元素或文本的空元素
  • :has(selector)
  • :parent 含有子元素或文本的元素
  • :hidden 和 :visible
  • [attribute]
  • [attribute=value]
  • [attribute!=value]
  • [attribute^=value] 选区属性的值以value开始的元素
  • [attribute$=value] 以value结束
  • [attribute*=value] 含有value的
  • :nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素
  • :first-child
  • :last-child
  • :only-child
  • :enable 和 :disabled
  • :checked
  • :selected

表单选择器

  • :input
  • :text
  • :password
  • :radio
  • :checkbox
  • :submit
  • :image
  • :reset
  • :button
  • :file
  • :hidden

jQuery中的DOM操作

先复习下DOM。
根据W3C DOM规范:DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件,即可以轻松获取和操作网页中的数据、脚本和表现层对象。

一般来说,DOM分为3个方面,DOM Core、HTML-DOM、CSS-DOM。
DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它,JavaScript中的getElementById()、getAttribute()等方法,都是DOM Core的组成部分。
HTML-DOM提供了一些更简明的记号来描述各种HTML元素的属性,如document.forms、element.src等。
CSS-DOM技术的主要作用是获取和设置style对象的各种属性。

创建节点

var $li = $("<li></li>"); //创建一个li节点
var $li = $("<li><em>无论多么复杂都可以</em></li>");
var $li = $("<li title="world">hello</li>");

插入节点

  • append()
  • appendTo(): 和append()的添加方向相反
  • prepend()
  • prependTo()
  • after(): 在每个匹配的元素之后插入内容
  • insertAfter()
  • before()
  • insertBefore()

删除节点

  • remove():包含的后代节点也会被删除。但返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。
  • detach():会从DOM中删去,但不会被jQuery删掉,所有绑定的事件、附加的数据等都会保留。
  • empty():清空节点

其他方法

  • clone():复制节点,若传递一个参数true,则会复制元素中所绑定的事件。
  • replaceWith()和replaceAll():替换节点
  • wrap():包裹节点
  • wrapAll()、wrapInner()
  • attr():获取和设置元素属性
  • removeAttr():删除元素属性
  • addClass()、removeClass()
  • toggle():切换样式
  • toggleClass():控制类名的切换,如果存在则删除它,不存在则添加它
  • hasClass():判断是否有
  • html():用来读取或设置某个元素中的HTML内容,类似于innerHTML
  • text():读取文本内容,类似于innerText
  • val():用来获取和设置元素的value值
  • children():用于取得匹配元素的子元素集合
  • next(): 用于取得匹配元素后面紧邻的同辈元素
  • prev():前面紧邻的同辈元素
  • siblings():匹配元素前后所有的同辈元素
  • parent():获得集合中每个匹配元素的父级元素
  • parents():获得集合中每个匹配元素的祖先元素
  • closest():从元素本身开始,逐级向上级元素匹配,并返回最先匹配元素的祖先元素
// 下面两个函数会交替执行
$("#toggleButton").toggle(function() {
	// ..
}, function() {
	// ..
})

CSS-DOM 操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性,style属性很有用,但最大不足就是无法通过它来提取到通过外部CSS设置的样式信息。
在jQuery中,可以直接利用 css() 方法来获取元素的样式属性:

$("p").css("color");
$("p").css("color", "red");  //进行设置
$("p").css({"color":"red","backgroundColor": "blue"});  //同时设置多个属性

如果值是数字,会被自动转换为像素值,属性值要加上引号。

另外还有 height(), width(), offset(), position(), scrollTop(), scrollLeft()等方法。

jQuery中的事件

事件绑定

bind() 方法,以及unbind()

bind(type [, data], fn);
$("p").bind("mouseover", function() {
	// ...
}).bind("mouseout", function() {
	// ...
});

或使用下面的简易写法:

$("p").mouserover(function() {
	// ...
}).mouseout(function() {
	// ...
})

合成事件

hover() 方法

hover(enterFn, leaveFn);

即当鼠标移动到元素上时,会触发指定的第一个函数,鼠标移出时,触发第二个函数。(它相当于代替的mouseenter和mouseleave)

toggle()方法也是合成事件。

事件冒泡

jQuery不支持事件捕获。
可通过 stopPropagation() 方法来阻止冒泡。
preventDefault() 来阻止元素的默认行为。
可用trigger()方法来模拟操作。

trigger(type [, data]);

jQuery中的动画

  • show() 和 hide()
  • fadeIn() 和 fadeOut()
  • slideUp() 和 slideDown()
  • animate(params,speed,callback):自定义动画方法
  • stop():停止动画
  • delay():延迟动画

jQuery中的Ajax

已在这篇博客中详细总结过:jQuery中的Ajax

jQuery 的性能优化

其实jQuery对DOM操作的部分就是对DOM操作的封装,所以jQuery的优化和DOM的优化原理相同,就是要减少DOM操作。

ID选择器最快,接着是标签,接着是类名,最后是元素选择器和伪选择器。

赞赏码.jpeg