玩转Jquery，告别前端知道思路忘记知识点的痛苦

本节内容：

本章主要讲解一下jquery，主要是工作中用的前端框架是datetables框架，然后datetables框架又是基于jqeury研发的，所以要想学一个东西，就必须要了解其底层，不然走路都是瘸瘸拐拐

本章借鉴与http://javascript.ruanyifeng.com/

• jquery简介
• 查找元素
• 事件绑定

Jquery简介

jQuery是目前使用最广泛的JavaScript函数库。据统计，全世界57.5%的网站使用jQuery，在使用JavaScript函数库的网站中，93.0%使用jQuery。它已经成了开发者必须学会的技能。

jQuery的最大优势有两个。首先，它基本是一个DOM操作工具，可以使操作DOM对象变得异常容易。其次，它统一了不同浏览器的API接口，使得代码在所有现代浏览器均能运行，开发者不用担心浏览器之间的差异。

jQuery最重要的概念，就是jQuery对象。它是一个全局对象，可以简写为美元符号$。也就是说，jQuery和$两者是等价的。

在网页中加载jQuery函数库以后，就可以使用jQuery对象了。jQuery的全部方法，都定义在这个对象上面。

var listItems = jQuery('li');
// or
var listItems = $('li');

上面两行代码是等价的，表示选中网页中所有的li元素。

Jqeury查找元素

选择器选出一组符合条件的网页元素以后，jQuery提供了许多方法，可以过滤结果集，返回更准确的目标。

1、结果集的过滤方法

（1）first方法，last方法

first方法返回结果集的第一个成员，last方法返回结果集的最后一个成员

$("li").first()

$("li").last()

（2）next方法，prev方法

next方法返回紧邻的下一个同级元素，prev方法返回紧邻的上一个同级元素。

$("li").first().next()
$("li").last().prev()

$("li").first().next('.item')
$("li").last().prev('.item')

如果next方法和prev方法带有参数，表示选择符合该参数的同级元素。

（3）parent方法，parents方法，children方法

parent方法返回当前元素的父元素，parents方法返回当前元素的所有上级元素（直到html元素）。

$("p").parent()
$("p").parent(".selected")

$("p").parents()
$("p").parents("div")

children方法返回选中元素的所有子元素。

$("div").children()
$("div").children(".selected")

// 下面的写法结果相同，但是效率较低

$('div > *')
$('div > .selected')

（4）siblings方法，nextAll方法，prevAll方法

siblings方法返回当前元素的所有同级元素。

$('li').first().siblings()
$('li').first().siblings('.item')

nextAll方法返回当前元素其后的所有同级元素，prevAll方法返回当前元素前面的所有同级元素。

$('li').first().nextAll()
$('li').last().prevAll()

（5）closest方法，find方法

closest方法返回当前元素，以及当前元素的所有上级元素之中，第一个符合条件的元素。find方法返回当前元素的所有符合条件的下级元素。

$('li').closest('div')
$('div').find('li')

上面代码中的find方法，选中所有div元素下面的li元素，等同于$(‘li’, ‘div’)。由于这样写缩小了搜索范围，所以要优于$(‘div li’)的写法。

（6）find方法，add方法，addBack方法，end方法

add方法用于为结果集添加元素。

$('li').add('p')

addBack方法将当前元素加回原始的结果集。

$('li').parent().addBack()

（7）filter方法，not方法，has方法

filter方法用于过滤结果集，它可以接受多种类型的参数，只返回与参数一致的结果。

// 返回符合CSS选择器的结果
$('li').filter('.item')

// 返回函数返回值为true的结果
$("li").filter(function(index) {
    return index % 2 === 1;
})

// 返回符合特定DOM对象的结果
$("li").filter(document.getElementById("unique"))

// 返回符合特定jQuery实例的结果
$("li").filter($("#unique"))

not方法的用法与filter方法完全一致，但是返回相反的结果，即过滤掉匹配项。

$('li').not('.item')

has方法与filter方法作用相同，但是只过滤出子元素符合条件的元素。

$("li").has("ul")

（8）表单选择器

$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域
 
$("input:checked")    //所有选中的元素
$("select option:selected")    //select中所有选中的option元素

2、DOM相关方法

许多方法可以对DOM元素进行处理。

（1）html方法和text方法

html方法返回该元素包含的HTML代码，text方法返回该元素包含的文本。

假定网页只含有一个p元素。

<p><em>Hello World!</em></p>

html方法和text方法的返回结果分别如下。

$('p').html()
// <em>Hello World!</em> 

$('p').text()
// Hello World! 

jQuery的许多方法都是取值器（getter）与赋值器（setter）的合一，即取值和赋值都是同一个方法，不使用参数的时候为取值器，使用参数的时候为赋值器。

上面代码的html方法和text方法都没有参数，就会当作取值器使用，取回结果集的第一个元素所包含的内容。如果对这两个方法提供参数，就是当作赋值器使用，修改结果集所有成员的内容，并返回原来的结果集，以便进行链式操作。

$('p').html('<strong>你好</strong>')
// 网页代码变为<p><strong>你好</strong></p> 

$('p').text('你好')
// 网页代码变为<p>你好</p> 

下面要讲到的jQuery其他许多方法，都采用这种同一个方法既是取值器又是赋值器的模式。

html方法和text方法还可以接受一个函数作为参数，函数的返回值就是网页元素所要包含的新的代码和文本。这个函数接受两个参数，第一个是网页元素在集合中的位置，第二个参数是网页元素原来的代码或文本。

$('li').html(function (i, v){
    return (i + ': ' + v);        
})

// <li>Hello</li>
// <li>World</li>
// 变为
// <li>0: Hello</li>
// <li>1: World</li>

（2）addClass方法，removeClass方法，toggleClass方法

addClass方法用于添加一个类，removeClass方法用于移除一个类，toggleClass方法用于折叠一个类（如果无就添加，如果有就移除）。

$('li').addClass('special')
$('li').removeClass('special')
$('li').toggleClass('special')

（3）css方法

css方法用于改变CSS设置。

该方法可以作为取值器使用。

$('h1').css('fontSize');

css方法的参数是css属性名。这里需要注意，CSS属性名的CSS写法和DOM写法，两者都可以接受，比如font-size和fontSize都行。

css方法也可以作为赋值器使用。

$('li').css('padding-left', '20px')
// 或者
$('li').css({
  'padding-left': '20px'
});

上面两种形式都可以用于赋值，jQuery赋值器基本上都是如此。

（4）val方法

val方法返回结果集第一个元素的值，或者设置当前结果集所有元素的值。

$('input[type="text"]').val()
$('input[type="text"]').val('new value')

（5）prop方法，attr方法

首先，这里要区分两种属性。

一种是网页元素的属性，比如a元素的href属性、img元素的src属性。这要使用attr方法读写。

// 读取属性值
$('textarea').attr(name)

//写入属性值
$('textarea').attr(name, val)

下面是通过设置a元素的target属性，使得网页上的外部链接在新窗口打开的例子。

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

对于checked属性，attr方法读到的是checked，prop方法读到的是true。

$(input[type=checkbox]).attr("checked") // "checked"

$(input[type=checkbox]).prop("checked") // true

（6）removeProp方法，removeAttr方法

removeProp方法移除某个DOM属性，removeAttr方法移除某个HTML属性。

$("a").prop("oldValue",1234).removeProp('oldValue')
$('a').removeAttr("title")

（7）data方法

data方法用于在一个DOM对象上储存数据。

// 储存数据
$("body").data("foo", 52);

// 读取数据
$("body").data("foo");

 

3、添加、复制和移动网页元素的方法

jQuery方法提供一系列方法，可以改变元素在文档中的位置。

（1）append方法，appendTo方法

append方法将参数中的元素插入当前元素的尾部。

$("div").append("<p>World</p>")

// <div>Hello </div>
// 变为
// <div>Hello <p>World</p></div>

appendTo方法将当前元素插入参数中的元素尾部。

$("<p>World</p>").appendTo("div")

上面代码返回与前一个例子一样的结果。

（2）prepend方法，prependTo方法

prepend方法将参数中的元素，变为当前元素的第一个子元素。

$("p").prepend("Hello ")

// <p>World</p>
// 变为
// <p>Hello World</p>

prependTo方法将当前元素变为参数中的元素的第一个子元素。

$("<p></p>").prependTo("div")

// <div></div>
// 变为
// <div><p></p></div>

（3）after方法，insertAfter方法

after方法将参数中的元素插在当前元素后面。

$("div").after("<p></p>")

// <div></div>
// 变为
// <div></div><p></p>

（4）before方法，insertBefore方法

before方法将参数中的元素插在当前元素的前面。

$("div").before("<p></p>")

// <div></div>
// 变为
// <p></p><div></div>

（5）wrap方法，wrapAll方法，unwrap方法，wrapInner方法

wrap方法将参数中的元素变成当前元素的父元素。

$("p").wrap("<div></div>")

// <p></p>
// 变为
// <div><p></p></div>

wrap方法的参数还可以是一个函数。

$("p").wrap(function() {
  return "<div></div>";
})

（6）clone方法

clone方法克隆当前元素。

var clones = $('li').clone();

对于那些有id属性的节点，clone方法会连id属性一起克隆。所以，要把克隆的节点插入文档的时候，务必要修改或移除id属性。

（7）remove方法，detach方法，replaceWith方法

remove方法移除并返回一个元素，取消该元素上所有事件的绑定。detach方法也是移除并返回一个元素，但是不取消该元素上所有事件的绑定。

$('p').remove()
$('p').detach()

replaceWith方法用参数中的元素，替换并返回当前元素，取消当前元素的所有事件的绑定。

$('p').replaceWith('<div></div>')

事件绑定

1、页面载入

当页面载入成功后再运行的函数事件

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

//简写
$(function($) {
  do something...
});

2、页面处理

//bind 为每个匹配元素绑定事件处理函数，绑定多个用{}。
$("p").bind("click", function(){
  alert( $(this).text() );
});
$(menuF).bind({
    "mouseover":function () {
     $(menuS).parent().removeClass("hide");
     },"mouseout":function () {
     $(menuS).parent().addClass("hide");
}
});         


$("p").one( "click", fun...)    //one 绑定一个一次性的事件处理函数
$("p").unbind( "click" )        //解绑一个事件

3、页面委派

// 与bind 不同的是当时间发生时才去临时绑定。
$("p").delegate("click",function(){
  do something...
});

$("p").undelegate();    　　　//p元素删除由 delegate() 方法添加的所有事件
$("p").undelegate("click")   //从p元素删除由 delegate() 方法添加的所有click事件

4、事件

$("p").click();    　　//单击事件
$("p").dblclick();    //双击事件
$("input[type=text]").focus()  //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur()   //元素失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup()  //元素上放松鼠标按钮时触发事件
$("p").mousemove()     //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover()     //当鼠标指针位于元素上方时触发事件
$("p").mouseout()    　//当鼠标指针从元素上移开时触发事件
$(window).keydown()    //当键盘或按钮被按下时触发事件
$(window).keypress()   //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup()     //当按钮被松开时触发事件
$(window).scroll()     //当用户滚动时触发事件
$(window).resize()     //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change()    //当元素的值发生改变时触发事件
$("input").select()    //当input 元素中的文本被选择时触发事件
$("form").submit()     //当提交表单时触发事件
$(window).unload()     //用户离开页面时