介绍

上一篇bootstrap布局基础中，在引入bootstrap源文件前，先引入了一个jquery.js的JavaScript库，因此这一篇就展开说一下jQuery。

jQuery是一个使用js代码编写，封装好特定函数（方法），可以极大简化js编程，使用极为广泛的js第三方库。

jQuery封装了JavaScript常用的功能代码，简化了DOM操作、事件处理、动画设计和Ajax交互。

许多前端框架都会用到jquery，因此jquery要在这些框架前先引入，这些框架才能正常工作，并且不同的框架可能对jquery的版本有一定要求，使用时需要注意。

PS：在移动端比较常用的js库有zepto。

 

安装

安装的话直接去官网下载或者CDN在线引用即可，以下为常用CDN。

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

使用CDN的优点是在访问此站点时，浏览器可能已经在其它网站缓存了对应CDN的jquery库，这样就可以直接读取缓存。即使没有缓存，CDN也会选取离用户最近的服务器提供服务，因此能提高页面加载速度。

在浏览器的 Console 窗口中执行 $.fn.jquery 命令可以查看当前 jQuery 使用的版本。

 

基础使用

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

其中$是jQuery的别称，在代码中可以使用jQuery代替$，但是$更方便使用。

selector是用于选取HTML元素的选择器，action则是对HTML元素进行的操作。

但是当同时引入多个库的时候，$可能也被别的库使用导致多库冲突，为避免这一情况，既可以通过用jQuery代替$，也可以用以下方法自定义别称。

var jq = $.noConflict();

 

入口函数

jquery入口函数，即在DOM结构渲染完毕后（不必等到所有外部资源加载完成）自动执行的函数。

相当于原生js中的DOMContentLoaded，而原生load事件是等页面文档、外部js、css、图片等媒体文件加载完毕再执行。

用法如下

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

//或者简写为
$(function () {
    ...
});

 

DOM对象与jQuery对象

利用原生js获取到的网页元素是DOM对象。

利用jQuery获取到的是jQuery对象（通过$()对对象进行了包装）。

两者的方法不可以混用。

//DOM对象
var myDiv = document.querySelector("div");
//jquery对象
$("div");

DOM与jQuery对象转换

//DOM对象转为jquery对象
$(domElement);

//jquery对象转为DOM对象
jqueryElement[index]
//或者
jqueryElement.get(index)

 

jquery选择器

$(“CSS选择器”)

ID         $(“#id”)
全选      $(“*”)
类          $(“.class”)
标签      $(“div”)
并集      $(“div,p,li”)
交集      $(“li.current”)
子代      $(“ul>li”)
后代      $(“ul li”)

 

筛选

第一个       $(“.class:first”)
最后一个   $(“.class:last”)
第几个       $(“.class:eq(0)”)
奇数           $(“.class:odd”)
偶数           $(“.class:even”)

 

筛选方法

父级                         $(“.class”).parent()
祖先                         $(“.class”).parents()
子级                         $(“.class”).children(“li”)
后代                         $(“.class”).find(“li”)
兄弟                         $(“.class”).siblings(“li”)
兄                             $(“.class”).prevAll()
弟                             $(“.class”).nextAll()
含有某个特定类      $(“.class”).hasClass(“protected”)
第几个                     $(“.class”).eq(2)

 

状态选择器

如下，可以选择某些状态下的一类元素进行操作

if($(.checkbox:checked).length === 10){
    console.log("all selected!");
}

 

CSS样式操作

通过css函数读取和设置css样式

//读取css样式 
$("div").css("属性") 
//修改css样式 
$("div").css("属性","值")
//修改多个css样式
$("div").css({属性1:"值1",属性2:"值2"})

对于jquery的函数是可以自动遍历选择器选中的所有元素执行修改和读取操作（隐式迭代），避免了再手动写循环操作极为方便，如果对于遍历有需求，后面也有遍历的的方法。

 

jquery排他

在实际使用中经常需要对一部分选中元素进行一个操作，同时对其他选中操作进行其他操作，这时就可以方便的使用排他方法，其实就是巧妙利用兄弟元素。

//只有刚点击的按钮才会变色的函数
$("button").click(function() {
    $(this).css("background","red");
    $(this).siblings("button").css("background","");
});

上面函数内部的代码可以简写成一行，因为jquery支持链式执行。

$(this).css("background","red").siblings("button").css("background","");

 

设置类样式

添加类

$("div").addClass("active")

删除类

$("div").removeClass("active")

切换类

$("div").toggleClass("active")

 

jquery动画效果

jquery封装的动画效果极为强大，不仅有常用的显示隐藏、滑动、淡入淡出，并且能对动画程度、速度自由控制，还支持自定义动画。

控制显示隐藏的动画函数是 show()、hide()、toggle() ，是通过元素放大缩小效果完成显示和隐藏。

以显示为例，show(speed,easing,fn)，其中speed控制动画播放速度(可选参数为slow,normal,fast,或者单位为毫秒的数字) ，easing控制动画速度是否线性(可选参数linear，swing，默认为swing非线性) ，fn则是动画播放完毕后的回调函数。

控制滑动的函数为 slideDown()、slideUp()、slideToggle() ，通过元素下滑上滑效果完成元素显示和隐藏，内部参数同样是speed、easing、fn。

控制淡入淡出的函数为 fadeIn()、fadeOut()、fadeToggle()、fadeTo() ，通过改变元素透明度的方式完成元素显示和隐藏，前三者内部参数同上。

fadeTo(speed,opacity,easing,fn) 多了一个opacity参数，改变到指定的透明度，例如网页中常见的鼠标指示某个元素，其他元素自动变暗（透明）的效果，就可以使用此动画制作。

 

自定义 animate()

自定义动画可以对网页元素的任意属性做动画，例如下面的移动动画

animate({left:500,top:200},speed,easing,fn)

只有元素能做动画，不能文档（document），因此如果做页面滚动动画，则为

$("body,html").animate({
    scrollTop: 0
})

 

动画排队

所有jquery动画都会有排队问题，即同一动画短时间内多次触发会顺序执行，导致触发已经结束，而动画仍在不断播放。
停止动画排队的函数为stop()，只要在所有动画前加上此函数即可避免动画排队现象。

$(this).stop().fadeTo(500,0.5)

 

属性操作

对于固有属性例如href、title等，可以使用prop()获取和更改。

//读取属性
element.prop("属性名") 

//修改属性
element.prop("属性名","属性值")

也可以通过attr(),获取h5自定义属性data-*

//读取h5自定义属性，类似原生js的getAttribute 
element.attr("属性名") 
//修改h5自定义属性，类似原生js的setAttribute
element.attr("属性名","属性值")

数据缓存，可以通过data()将数据存放到元素的内存中,DOM中看不到，页面刷新后丢失。并且可以获取h5的自定义数据，不用写data-前缀。

element.data("变量","值")

 

元素内容操作

普通元素内容通过html()进行操作，相当于原生js的innerHTML

//读取
html()
//修改
html(内容)

普通元素文本内容通过text()进行操作，相当于原生innerText

//读取
text()
//修改
text(内容)

表单值通过val()进行操作，相当于原生value

//读取
val()
//修改
val(值)

 

遍历

如果不用隐式遍历，可用elements.each(function(index,domEle) {...})
或者 $.each($("div"),function(index,domEle) {...})

后者也可以用来遍历数组和字典，替代for，注意domEle必须为DOM元素，不能使用jquery元素。

//给3个元素设置不同颜色
var arr = ["red","blue","green"]
elements.each(function(index,domEle) {
    $(domEle).css("color",arr[index]);
})

 

元素操作

创建元素

var li = $("<li>create</li>");

 

添加元素

分为内部添加和外部添加两种方式，内部添加为父子关系，外部添加为兄弟关系。

内部添加 类似原生appendChild

//放到最后
element.append(li) 
//放到最前
element.prepend(li)

外部添加

//放到后面
element.after(li) 
//放到前面
element.before(li)

 

删除元素

//清除自身
element.remove() 
//清除自身所有子元素
element.empty() 
//清除元素内容
element.html("")

 

事件操作

为html元素绑定事件是日常开发中常用的操作，jquery也进行了简洁的封装，相比于原生js，jquery的事件绑定优势是可以对动态创建的元素绑定事件。

 

普通绑定

element.事件(function(){})

 

多重绑定

可以给元素同时绑定多个触发事件

element.on({
    click:function(){},
    mouseenter:function(){},
    mouseleave:function(){}
})

element.on("mouseenter mouseleave",function() {
    $(this).toggleClass("current")
})

hover(over,out);
//over方法:鼠标移到（相当于mouseenter） 
//out方法:鼠标移走（相当于mouseleave）
//如果hover(toggle) 则鼠标移到、移走都会触发

 

事件委派

事件绑定在父元素上，但触发对象是子元素

parentEle.on("click",childEle,function(){})

优点是可以做到动态绑定，即动态生成的子元素如果想要绑定事件，那么可以使用事件委派绑定在父元素上。

 

单次触发事件

即只触发一次就失效的事件

element.one()

 

解绑事件

//解绑所有事件
element.off()
//解绑点击事件
element.off("click")
//解绑委托事件
element.off("click",childEle)

 

自动触发事件

element.on("click",function() {...})

如上有一个点击事件，下面是几种触发方法

//自带触发
element.click()
//简单触发
element.trigger("click")
//不触发元素的默认行为，例如文本元素获得焦点后的光标闪烁
element.triggerHandler("click")

 

事件对象

事件对象即在触发对象时对触发过程作出修改，具体行为可以将event打印出来查看。

element.on("click",function(event) {
    ...
    //阻止冒泡,例如父子元素都有点击事件，则子触发后父不再触发
    event.stopPropagation(); 
    //阻止默认行为，例如文本元素获得焦点后的光标闪烁
    event.preventDefault(); 
    ...
})

 

对象拷贝

可以使用extend()函数将对象进行拷贝

$.extend(deep,target,object)

deep参数为true时深拷贝，默认false浅拷贝

target为拷贝结果

object为拷贝源

 

尺寸、位置操作

尺寸操作

//元素尺寸 
width()/height() 
//包含padding的尺寸
innerWidth()/innerHeight() 
//包含border的尺寸
outerWidth()/outerHeight() 
//包含margin的尺寸
outerWidth(true)/outerHeight(true)

函数内为空时读取尺寸，提供数字参数则是修改尺寸，可以不写单位px。

 

位置

//距离文档的位置，绝对位置
offset() 
//距离父元素的位置，相对位置
position() 
//当父元素尺寸小于子元素尺寸，出现滚动条时，显示被遮挡的尺寸。
//例如控制返回顶部按钮显示
scrollTop()/scrollLeft()

 

AJAX操作

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示，实现对部分网页的更新。

 

jQuery load()

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

URL 参数为希望加载的 URL，data 参数规定与请求一同发送的查询字符串键值对，callback 参数是 load() 方法完成后所执行的函数名称。

回调函数可以设置不同的参数：

  • responseTxt – 包含调用成功时的结果内容
  • statusTXT – 包含调用的状态
  • xhr – 包含 XMLHttpRequest 对象

 

get() 和 post()

用于通过 HTTP GET 或 POST 请求从服务器请求数据。

  • GET – 从指定的资源请求数据
  • POST – 向指定的资源提交要处理的数据
$.get(URL,callback);
$.post(URL,data,callback);

回调函数中第一个参数存有被请求页面的内容，第二个参数存有请求的状态。

 

获取后台返回值

需要注意同步调用，且在ajax对全局变量设值，ajax函数外将变量return。

function getReturn(name,value) {
    var result = null;
    $.ajax({
        url:"/api",
        type:"post",
        data: JSON.stringify({name:value}),
        dataType:"application/json",
        async:false,
        success:function(data){
            result = data;
        }
    })
    return result;
}

 

jquery插件

jquery有许多功能强大的插件，例如实现图片懒加载、cookie操作、全屏滚动等特效插件等，可自行搜索下载使用。

 

后记

最近在开发网页过程中，使用原生js在一个复杂页面中绑定各种触发事件和与后台进行ajax交互，写得相当复杂。

意识到不能闭门造车的我，去搜索jquery教程进行了学习，顿时感觉豁然开朗，不愧是write less，do more。

在学习过程中从B站黑马程序员pink老师的jquery视频教程处获益良多，讲解清晰，案例生动，致谢。

 

人生没有标准答案，

但要有个你的答案。

——陈铭