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