玩转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() //用户离开页面时
