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

 

posted @ 2016-12-28 09:35  张岩林  阅读(2878)  评论(5编辑  收藏  举报