jquery基础

jquery代码风格

1.使用“$”美元符号。

2.事件操作链接方式书写。

 

DOM对象与jquery对象

var tDiv=document.getElementById("divTmp"); DOM对象。

var tDiv=$(“#divTmp”); jquery对象。

 

jquery对象比DOM对象的使用更加方便。

 

jQuery选择器

jQuery选择器分为四类：基本选择器，层次选择器，过滤选择器，表单选择器。

 

过滤选择器可分6类：简单过滤选择器，内容过滤选择器，可见性过滤选择器，属性过滤选择器，子元素过滤选择器，表单对象属性过滤选择器。

 

基本选择器

基本选择器是jQuery中使用最频繁的选择器，由元素Id，Class，元素名，多个选择符组成。

 

#Id   $("#divOne")

element  $("div span")

.class  $(".clsFrame .clsOne")

*  $("*")

selector1,selector2  $("#divOne,span")

 

层次选择器

层次选择器通过DOM元素见的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素。

ancestor descendant     根据祖先元素匹配所有的后代元素。

parent>child    根据父元素匹配匹配所有的子元素。

prev+next    匹配所有紧接在prev元素后的相邻的兄弟元素。

prec~siblings    匹配prev元素之后的所有兄弟元素。

 

说明：

1.ancestor descendant 与parent>child所选择的元素集合是不同的。前者是祖先与后代，后者是父子关系。

2.prev+next 可使用next()代替。

3.prec~siblings可以使用nextAll()代替。

4.siblings选择所有的兄弟元素。

 

简单过滤选择器

过滤选择器根据某类过滤规则进行元素的匹配，一般以冒号（:）开头。简单过滤选择器是过滤选择器中使用最广泛的一种。

first() 或 :first  获取第一个元素。$("li:first")

last() 或 :last  获取最后一个元素。$("li:last")

:not(selector) 获取除给定选择器外的所有元素。$("li:not(.NotClass)")

:even 获取所有索引值为偶数的元素。$("li:even")

:odd 获取所有索引值为奇数的元素。$("li:odd")

:eq(index) 获取指定索引值的元素。$("li:eq(1)")

:gt(index) 获取所有大于指定索引值的元素。$("li:gt(1)")

:lt(index) 获取所有小于知道索引值的元素。$("li:lt(4)")

:header 获取所有标题类型的元素，如h1，h2....$(":header")

:animated 获取正在执行动画效果的元素。$("#spanMove:animatated")

 

说明：jQuery中的索引值均从0开始。与javascript的数组一致。

 

 

内容过滤选择器

内容过滤选择器根据元素中的文字内容或所包含子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。

 

:contains(text)  获取包含给定文本的元素。如果是查找字母，则有大小写的区别。 $(div:contiains('AB'))

:empty  获取所有不包含子元素或文本的空元素。$("div:empty")

:has(selector)  获取含有选择器所匹配的元素。 $("div:has(span)")

:parent  获取含有子元素或含有文本的元素。$("div:parent")

 

 

可见性过滤选择器

:hidden 获取所有不可见元素。（包括css样式为display:none；属性type="hidden"；css样式为visiblity:hidden 的所有元素。）

:visible 获取所有可见元素。

 

属性过滤选择

[attribute] 获取含有给定属性的元素。$("div[id]")

[attribute=value] 获取等于给定属性是某个特定值的元素。  $("div[title='A']")  

[attribute!=value] 获取不等于给定的属性是某个特定值的元素。$("div[title!='A']")

[attribute^=value] 获取给定的属性是以某写值开始的元素。$("div[title^='A']")

[attribute$=value] 获取给定的属性是以某些值结尾的元素。$("div[title$='C']")

[attribute*=value] 获取给定的属性是以包含某些值的元素。$("div[title*='B']")

[selector1][selector2][selector3] 获取满足多个条件的复合属性的元素。$("div[id='divAB'][title*='B']")

 

子元素过滤选择器

:nth-child(eq|even|odd|index)   获取每个父元素下特定位置元素，索引号从1开始。

:first-child 获取每个父元素下的第一个子元素。

:last-chile 获取每个父元素下的最后一个子元素。

:only-child 获取每个父元素下的仅有一个子元素。

 

 

表单对象属性过滤选择器

表单对象属性过滤选择器通过表单中的某对象的属性特征获取该元素。

:enabled 获取表单中所有属性可用的元素。

:disabled 获取表单中所有属性为不可用的元素。

:checked 获取表单中所有被选中的元素。

:selected 获取表单中所有被选中option的元素。

 

表单选择器

 

:input 获取所有input、textarea、select。

:text 获取所有单行文本框。

:password 获取所有密码框。

:radio 获取所有单选按钮。

:checkbox 获取所有复选框。

:submit 获取所有提交按钮。

:image 获取所有图像域。

:reset 获取所有充值按钮。

:button 获取所有按钮。

:file 获取所有文件域。

 

 DOM基础

元素属性操作

attr()方法对元素属性指向获取和设置操作。

removeAttr()方法可以删除元素的某一属性。

 

1.获取元素的属性值。

attr(name) 

例：$("img").attr("title")

 

2.设置元素的属性

attr(key,value)

attr({key1:value1,key2:value2})

 

attr()方法还可以绑定一个function()函数，通过该函数返回的值作为元素的属性值。

attr(key,function(index)) 即通过function的返回值作为元素的属性值，其中参数index为当前元素的索引号，整个函数返回一个字符串作为元素的属性值。

 

3.删除元素属性

removeAttr(name)

例：$("img").removeAttr("src");

 

元素内容操作

html() 获取元素的HTML内容。

html(val) 设置元素的HTML内容。

text() 获取元素的文本内容。

text(val) 设置元素的文本内容。

说明：html()方法不支持XML。text()方法可以正常XML。

 

获取或设置元素值

val() 获取表单元素的值。

val(value)  设置表单元素的值。

val(array)  设置表单元素的值为数组。

 

通过val()方法可以获取select标记中的多个选项值。

例：var strSel = $("select").val().join(",");

 

在val()方法中，如果有参数，其参数可以是数组的形式，即val(array)，其作用是设置元素被选中。

例：$(":radio").val(["radio2',"radio3"]) ID号为radio2和radio3的单选框被选中。

 

元素样式操作

元素样式的操作包含：直接设置样式、增加CSS类别、类别切换、删除类别。

 

直接设置元素的样式值

css(name,value)

$("p").css("font-weight',"bold");

 

增加CSS类别

addClass(class)   追加样式，被选元素仍然保持原有类别。

addClass(class0 class1 ...)    class为类别的名称，也可以增加多个类别的名称，只需要用空格将其隔开即可。

 

类别切换

toggleClass(class)  当元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别。

$("img").click(function(){

    $(this).toggleClass("clsImg");

});

 

删除类别

removeClass([class])  class为类别名称，可选项。

当选该名称时，则删除名称是class的类别，有多个类别时，用空格隔开。如果不选名称，则删除元素中所有类别。

$("p").removeClass("cls0");

$("p").removeClass("cls0 cls1");

$("p").removeClass("");

 

=======================================================================

在网页设计中，我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能，虽然它们和传统方法的思想相通，但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁！”

 

1. addClass() - 添加CSS类

 

$("#target").addClass("newClass");

//#target 指的是需要添加样式的元素的ID

//newClass 指的是CSS类的名称

2. removeClass() - 移除CSS类

 

$("#target").removeClass("oldClass");

//#target 指的是需要移除CSS类的元素的ID

//oldClass 指的是CSS类的名称

3. toggleClass() - 添加或者移除CSS类：如果CSS类已经存在，它将被移除；相反，如果CSS类不存在，它将被加上。

 

$("#target").toggleClass("newClass")

//如果ID为“target”的元素已经定义了CSS样式，它将被移除；

//反之，CSS类”newClass“将被赋给该ID。

 

 

4.hasClass("className") - 判断是否已经存在CSS

 

在实际运用中，我们常常先定义好这些CSS类，然后通过Javascript事件触发（比如点击某个链接）来改变页面元素样式。此外，jQuery还提供一种方法 hasClass("className")，用来判断某个元素是否已经被赋予某个CSS类。

 

=======================================================================

 

 

 

 

 

 

创建节点元素

$(html) 

参数html表示用于动态创建DOM元素的HTML标记字符串。即如果要在页面中动态创建一个div标记，并设置其内容和属性，可以加入如下代码：

var $div=$("<div title='jquery' >Write Less Do More</div>");

$("body").append($div);

 

 

 插入节点

内部插入节点方法

append(content)    向所选元素内部插入内容。content 表示追加到目标中的内容。

append(function(index,html))    向所选元素内部插入function函数返回的内容。

appendTo(content)   把所选的元素内部插入到另一个指定的元素集合中。

prepend(content)  向每个所选元素的内部前置内容。  

prepend(function(index,html))  向所选元素内部前置function函数所返回的内容。

prependTo(content)   将所选元素前置到了一个指定的元素集合中。

 

 

append(function(index,html))

function函数作为append方法的参数，该函数的功能必须返回一个字符串。作为append方法插入的内容，其中index参数为对象在这个集合中的索引值，html参数为该对象原有的html值。

例：

$(function(){

    $("div").append(retHtml);

    function retHtml(){

        var str="<b>Write Less Do More</b>";

        retrurn str;

    }

});

 

 

插入节点

该方法用于将一个元素插入到另一个元素指定的元素内容中，即如果要将span标记插入到div标记中，则执行下列代码：

$("span") .appendTo($("div"));

即把appendTo方法前面部分插入到后部分的内容中。

 

 

 外部插入

after(content|fn)  向所选元素后面插入内容。

before(content|fn) 向所选元素前面插入内容。

insertAfter(content) 将所选元素插入另一个指定的元素后面。

insertBefore(content) 将所选元素插入了一个知道的元素的前面。

 

after与append方法的区别：

after方法是直接在所选元素后面添加。

append方法是在所选元素的所有子元素的最后添加。

 

 

复制节点

clone([Even[,deepEven]]) 复制匹配的DOM元素并且选中复制成功的元素，该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。如果复制时将该元素的全部行为也进行复制，可以使用方法

clone(true) 

 参数设置为true，表示复制元素的所有时间处理。

 

替换节点

 

replaceWith(content|fn)  将所选择元素替换成指定的HTML或DOM元素。

replaceAll(selector) 将所有选择的元素替换成指定selector的元素。

 

 

例：

$("#Span1").replaceWith("<span title='replaceWith'>jquery</span>");

 

$("<span title='replaceWith'>jquery</span>").replaceWith("#Span2");

 

说明：

1. replaceWith() 与 replaceAll() 的区别在于替换字符的顺序。前者是用括号中的字符替换所选择的元素，后者是用字符替换括号中所选择的元素。

2. 一旦替换完成，被替换元素中的全部事件都将消失。

 

包裹节点

wrap(html|ele|fn)  把所选元素用其他元素的结构化标记包裹起来。

unwrap() 移除所选元素的父元素或包裹起来。

wrapall(html|ele) 将所选元素用单个元素包裹起来

wrapInner(html|ele|fn) 将所选元素的子内容包裹起来。

 

说明：

wrap(html)与wrapInner(html)方法较为常用。前者包裹元素。后者包裹元素内部文本字符。

 

例1：

$("p").wrap("<div class='wrap'></div>");

$("p").wrap(document.getElementById('content'));

 

$('.inner').wrap(function() {

  return '<div class="' + $(this).text() + '" />';

});

$("p").wrap("<b></b>"); 所有段落标记字体加粗。

 

例2：

$("p").wrapAll("<div></div>");

$("p").wrapAll(document.createElement("div"));

 

例3：

$("span").wrapInner("<i></i>"); 所有段落中span标记斜体。

 

 

遍历元素

以for循环语句比较复杂；jquery提供each方法遍历所选元素。

each(callback)

callback是一个function(index) 形式的函数，index是元素的序号，从0开始。

例：

$("img").each(function(index){

    this.title="第"+index+“幅图片，alt内容是”+this.alt;

});

 

 

删除元素

remove([expr])

删除所选元素。expr为可选项，如果接受参数，则参数巍峨筛选元素的jquery表达式，通过该表述式获取指定的元素。并进行删除。

 

empty()

清空所选页面元素或所有后代元素。

 

例：

<ul>

    <li>学号</li>

    <li title="t">001</li>

    <li>1002</li>

</ul>

 

$("ul li").remove("li [title=t]") 删除指定属性的元素。

$("ul li:eq(1)").remove(); 删除节点中第2个元素。

 

 

 

 

事件机制

时间在出发后被分为两个阶段：捕获；冒泡。

大多数浏览器并不是都支持捕获阶段，jquery也不支持。因此事件触发后，往往执行冒泡阶段。

 

阻止事件冒泡

stopPropagation()方法可以阻止冒泡过程的发生。

例：

$(“body,div,#btnShow”).click(function(event){

    $(".clsShow")..show.html("使用jquery").append("<div>添加方法</div>");

    event.stopPropagation(); //阻止事件冒泡。

});

 

 

页面载入事件

ready()方法的工作原理

该方法类似onload()方法。onload()方法是页面全部元素加载到浏览器后才触发的，其中包括页面中的图片的加载。jquery的ready()方法加载页面，则只要页面DOM模型加载完毕，就会触发ready()方法。

 

ready()的工作原理：jquery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载进度，当遇到执行ready()方法时，会通过查看isReady值是否被设置，如果未被设置，那么就说明页面并未加载完毕。在此情况下，将未完成的部分用一个数组缓存起来，当全部加载完成后，在将未完成的部分通过缓存一一执行。

 

ready()方法的几种写法

$(document).ready(function(){

//....

});

 

$(function(){

//...

});

 

jQuery(document).ready(function(){

//....

});

 

jQuery(function(

//....

));

 

 

绑定事件

$(function(){

    $("#btnShow").click(function(){

        //执行代码

    });

});

 

除上述绑定事件的写法外，在jQuery中，还可以使用bind()方法进行事件绑定。

bind(type,[data],fn)

type为一个或多个类型的字符串。包括blue,focus,load,resize,scoll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseout,mouseenter,mouseleave,change,select,select,submit,keydown,keyup,error。

data是作为event.data属性值传给时间对象的额外数据对象。

fn是绑定到每个选择元素的事件中的处理函数。

 

例：

$(function(){

    $("#btnBind").bind("click mouseout",function(){

        $(this).attr("disable","disable");  //按钮不可用。

    })

})

 

 

切换事件

hover()方法

可以使元素在鼠标悬停与鼠标移出的事件中进行切换。

代码一：

$("a").hover(

    function(){

        //执行1

    },

    function(){

        //执行2

    }

);

 

代码二

$("a").mouseenter(function(){

    //执行1

});

$("a").mouseleave(function(){

    //执行2

});

 

代码一，代码二等价。

 

hover()方法是当鼠标移动到所选的元素上面时，执行指定的第一个函数：当鼠标移出这个元素，执行制度的第二个函数，其语法测试如下：

hover(over,out)

over,out分别是mouseenter与mouseleave事件的执行函数。

 

toggle()方法

该方法可以一次调研N个指定的函数，直到最后一个函数，然后重复对这些函数轮番调用。

 

toggle()方法的功能是每次单击后一次调用的函数。方法的调用是按照顺序执行的。

 

toggle(fn1,f2,[fn3,fn4,....]);

fn1,fn2,....是单击时，以此被调用的函数。

 

移除事件

unbind()方法是移出元素绑定的事件。

unbind([type],[fn])

参数type为移出的事件类型。

参数fn为需要移出的事件处理函数。如果该方法没有参数，则移出所有绑定的事件；如果带有type，则移除该参数所有指定的事件类型；如果带有参数fn，则只移出绑定时指定的函数fn。

 

 

one()方法

one()方法是为所选元素绑定一个仅触发一次的处理函数。

one(type,[data],fn)

参数type是事件类型；

参数data为可选参数，表示event.data属性值传递给事件对象的额外数据对象；

参数fn为绑定事件时所要触发的函数。

 

trigger()方法

该方法是在所选元素上触发指定类型的事件。其调用语法格式为：

trigger(type,[data])

其中参数type为触发事件的类型，参数data为可选项，表示触发事件时，传递给函数的附加参数。

 

 

 

 jQuery的动画与特效

显示与隐藏

show()和hide()方法

无动画效果的显示和隐藏。

 

show(speed,[callback])

hide(speed,[callback])

参数speed，为执行动画的速度。可以为三个值“slow”,"normal","fast"，其对应的速度为0.6秒，0.4秒，0.2秒；如果不是有默认的字符串，也可以直接写入数字，如“3000”，表示动画执行的速度为3000毫秒。

参数[callback]，可选参数。为动画在完成时执行的回调函数，该函数每个函数执行一次。

 

toggle()方法

该方法用于切换元素的可见状态。调用toggle()方法，则如果元素是可见的状态，即变成隐藏状态。如果是隐藏状态，则变成显示状态。

 

toggle(switch)方法

参数switch为一个布尔值，true或false。当值为true时，显示元素；否则隐藏元素。

 

toggle(speed,[callback])

参数speed与callback与show(speed,[callback])中的参数同义。

 

 

滑动

slideDown()  与 slideUp() 方法

slideDown(speed,[callback])  以动画的效果将所选择元素的高度向下增大，使其呈现一种“滑动”的效果，而元素的其他属性不发生变化。

参数speed为动画显示的速度。

参数callback为动画显示完成后，执行的回调函数。

 

slideUp(speed,[callback]) 以动画的效果将所选择元素的高度向上减小，同样是仅改变高度属性，其包含的参数作用与slideDown()方法一样。

 

说明：slideDown() slideUp() 动画效果仅是减小或增加元素的高度，同时，如果元素有margin或padding值，这些属性也会以动画效果一起发生改变。

 

slideToggle()方法

该方法根据当前元素的显示状态，自动进行切换，其调用的语法格式如下：

slideToggle(speed,[callback])

该方法的功能是以动画的效果切换所选元素的高度，即：如果高，则减小，如果低，则增大。

 

淡入淡出

fadeIn()与fadeOut()方法

show()和hide()方法与fideIn()和fadeOut()方法相似，前者的动画使用元素的width()和height()属性都发生了变化，后者仅改变元素的透明度，并不修改其他属性。

 

fadeIn(speed,[callback])  淡入

fadeOut(speed,[callback]) 淡出

 

fadeTo()方法

fadeIn()和fadeOut()方法通过动画效果，改变元素的透明度切换元素显示状态，其透明度从0.0至1.0淡入，或从1.0至0.0淡出。

 

如果要将透明度指定到某一个值，则需要调用fadeTo()方法。其调用的语法格式为：

fadeTo(speed,opacity,[callback])

该方法的功能是将所选元素的不透明度以动画效果调正到指定的不透明度值，动画完成时，可以执行一个回调函数。

 

自定义动画

animate(params,[duration],[easing],[callback])

 

参数params，表示用于制作动画效果的属性样式和值的集合。

参数duration，表示种默认的速度字符，“slow”，“normal”，“fast”或自定义数字。

参数easing，为动画插件使用，用于控制动画的表现效果，通常有“linear”，“swing”字符值。

参数callback，为动画完成后，执行的回调函数。

 

例：

$("p").animate({left:"20px",top:"70px"},3000)

这段代码执行后，页面中的<p>元素，在3000毫秒内，移动至left为20px，top为70px的位置上。

 

例：

$(function(){

    $("input:eq[0]").click(function(){

       $(".divList").animate({left:"-=52px"},3000);

    });

    $("input:eq[1]").click(function(){

        $(".divList").animate({left:"+=52px"},3000);

    });

});

 

说明：要使页面中的元素按照left，top属性变化的动画效果移动，必须将元素的“position”属性设置为“relative” 或 “absolute”。

说明：在合适的情况下也可以使用margin属性变化。

 

队列中的动画

即元素中执行一个以上的多个动画效果，即有多个animate()方法在元素中执行，因此，根据这些animate()方法执行的先后顺序，形成可动画“队列”，产生“队列”后，动画效果便按照“队列”的顺序进行展示。

例如：

$(function(){

    $("div").click(function(){

        $(this).animate({height:100},"slow")

                  .animate({width:100},"slow")

                  .animate({heigth:50},"slow")

                  .animate({width:50},"slow");

    });

})

 

说明：理解动画队列执行的过程后，可以清楚分析各队列中各动画的效果，并可以在指定的某队列中插入其他方法，如队列延时方法delay()。

 

 

动画停止和延时

stop()方法

stop([clearQueue],[gotoEnd])

该方法的功能是停止所选元素中正在执行的动画。

可选参数[clearQueue]是一个布尔值，表示是否停止正在执行的动画，

可选参数[gotoEnd]也是一个布尔值，表示是否立即完成正在执行的动画。

 

delay()方法

delay(duration,[queueName])

该方法的功能是设置一个延时值来推迟后续队列中动画的执行。

参数duration为延时的时间值，单位是毫秒。

参数queueName表示队列名词，即动画队列。

 

例：

$(function(){

    $("a:eq(0)").click(function(){    //点击“开始”链接事件。

        $("img").slideToggle(3000);  //“拉窗帘”方式切换图片。

    });

 

    $("a:eq(0)").click(function(){    //点击“停止”链接事件。

        $("img").stop();  //“拉窗帘”方式切换图片。

    });

 

    $("a:eq(0)").click(function(){    //点击“延时”连接事件。

        $("img").delay(2000).slideToggle(3000);  //延时切换图片。

    });

});

 

 

使用animate()方法代替其他动画效果

animate()方法不仅可以使元素实现各种各样的动画效果，还可以代替其他的动画方法，详细代码如下：

 

例1：

$("p").animate({height:"hide",width:"hide",opacity:"hide"},600);

等价于

$("p").hide(600);

 

 

例2：

$("p").animate({opacity:"hide"},600);

 

等价于

$("p").fadeOut(600);

 

 

 

例3：

$("p").animate({height:"hide"},600);

等价于

$("p").slideUp(600);

 

 

例4：

$("p").animate({opacity:"0.8"},600);

等价于

$("p").fadeTo(600,"0.8");

 

 

 

 

Ajax在jQuery中的应用

load()方法

load(url,[ data ],[ complete(responseText, textStatus, XMLHttpRequest) ] )

url为被加载的页面地址。

data为发送到服务器的数据，其格式为key/value。例：{name:"愚人码头",age:23}。

complete(responseText, textStatus, XMLHttpRequest)  表示加载成功后，返回至加载页面的回调函数。

 

例：

$("#Button1").click(function(){

    $("#divTip").load("b.html");  //load()方法加载数据。

});

 

在load方法中，参数url还可以用于过滤页面中的某类别的元素。如$("#divTip").load("b.html .divContent"); 表示获取页面b.html()中类别名为"divContend"的全部元素。 

 

说明：

默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

事件处理函数中也有一个方法叫 .load()。哪一个被使用取决于传递的参数设置。

 

 

 

 

 

 

jQuery.ajax( url, [ settings ] )

方法返回: jqXHR。

url：用来包含发送请求的URL字符串。

settings：以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。可以使用$.ajaxSetup()设置任何默认参数。

 

 

 

 

 

 

 

 

 

 

 实用工具函数

浏览器内核名称的检测

jQuery.browser或$.browser有如下属性：

webkit（1.4.2新增）、safar、opera、msie、mozilla

对于这些属性，如果处于特点的浏览器中，则相应的属性的值为true，否则为false。

 

获取浏览器版本号

jQuery.browser.version

 

 

检测浏览器是否支持W3C所定义的盒子模型

说明：W3C盒子模型与IE盒子模型是不同的。

W3C盒子模型元素的height与width不包含padding与border的宽度。

IE盒子模型的height与width包含padding与border的宽度。

jQuery.support.boxModel

该属性返回一个布尔值，若为true表示是W3C盒子模型，否则，不是W3C盒子模型。

 

 

 

 

数组和对象的操作

1.遍历数组或遍历对象

$.each(obj,fn(para1,para2))

obj为要遍历的数组或对象。

fn为每个遍历元素执行的回调函数。para1表示数组的序号，或对象的属性名。para2表示数组的元素，或对象的属性值。

 

2、数据筛选

jQuery.grep(array,callback(elementOfArray,indexInArray),[invert])

返回满足过滤条件的数组元素的数组。

此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。

array：待过滤数组。

callback：过滤条件函数。此函数将处理数组每个元素。第一个参数为当前元素，第二个参数而元素索引值。此函数应返回一个布尔值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（缩写形式？），其中 a 代表数组元素，i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”。

invert：过滤条件函数结果。默认为false。如果 "invert" 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当"invert" 为 true，则返回过滤函数中返回 false 的元素集。

 

 

示例

描述：过滤数组中小于 0 的元素。

jQuery 代码:

$.grep( [0,1,2], function(n,i){

  return n > 0;

});

结果:

[1, 2]

 

描述：排除数组中大于 0 的元素，使用第三个参数进行排除。

jQuery 代码:

$.grep( [0,1,2], function(n,i){

  return n > 0;

}, true);

结果:

[0]

 

 

3、数据变更

jQuery.map(array,callback(elementOfArray,indexInArray))

返回经转换函数计算过的数组。

作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。

示例

描述：将原数组中每个元素加 4 转换为一个新数组。

jQuery 代码:

$.map( [0,1,2], function(n){

  return n + 4;

});

结果:

[4, 5, 6]

 

描述：原数组中大于 0 的元素加 1 ，否则删除。

jQuery 代码:

$.map( [0,1,2], function(n){

  return n > 0 ? n + 1 : null;

});

结果:

[2, 3]

 

描述：原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组。

jQuery 代码:

$.map( [0,1,2], function(n){

  return [ n, n + 1 ];

});

结果:

[0, 1, 1, 2, 2, 3]

 

 

4、数据搜索

jQuery.inArray(value,array,[fromIndex])

确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。非常类似indexOf方法。

 

参数

value:用于在数组中查找是否存在

array:待处理数组。

fromIndex:用来搜索数组队列，默认值为0。

 

示例

描述：查看对应元素的位置

jQuery 代码:

var arr = [ 4, "Pete", 8, "John" ];

jQuery.inArray("John", arr);  //3

jQuery.inArray(4, arr);  //0

jQuery.inArray("David", arr);  //-1

 

 

5、字符串操作

jQuery.trim(str)

返回去掉字符串起始和结尾的空格。

示例

描述：去掉字符串起始和结尾的空格。

jQuery 代码:

$.trim("  hello, how are you?  ");

结果:

"hello, how are you?"

 

 

6、测试函数

jQuery.isArray(obj)  jQuery 1.3 新增。测试对象是否为数组。

jQuery.isFunction(obj)  测试对象是否为函数。

jQuery.isEmptyObject(obj)  jQuery 1.4 新增。测试对象是否是空对象（不包含任何属性）。

jQuery.isPlainObject(obj)  测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）。

jQuery.isWindow(obj)  测试对象是否是窗口（有可能是Frame）。

jQuery.isNumeric(value)  确定它的参数是否是一个数字。

 

说明：

jQuery 1.3以后，jQuery.isFunction(obj)方法，在IE浏览器里，浏览器提供的函数比如'alert'还有 DOM 元素的方法比如 'getAttribute' 将不认为是函数

jQuery 1.4 中，jQuery.isEmptyObject(obj)方法既检测对象本身的属性，也检测从原型继承的属性（因此没有使用hasOwnProperty）。

 

 

 

jQuery.contains(container,contained)

检测一个DOM节点是否包含另一个DOM节点。

参数

container：DOM元素作为容器，可以包含其他元素

contained：DOM节点，可能被其他元素所包含

示例

描述：检测一个元素是否包含另一个元素

jQuery 代码:

jQuery.contains(document.documentElement, document.body); // true

jQuery.contains(document.body, document.documentElement); // false

 

 

 

 

7、URL操作

jQuery.param(obj,[traditional])

将表单元素数组或者对象序列化。是.serialize()的核心方法。

在jQuery 1.3中，如果传递的参数是一个函数，那么用.param()会得到这个函数的返回值，而不是把这个函数作为一个字符串来返回。

在jQuery 1.4中，.param()会深度递归一个对象来满足现在脚本语言和框架，比如PHP， Ruby on Rails等。你可以通过jQuery.ajaxSettings.traditional = true; 来全局得禁用这个功能。

 

注意：因为有些框架在解析序列化数字的时候能力有限，所以当传递一些含有嵌套对象、数组的对象作为参数时，请务必小心！

在jQuery 1.4中，HTML5的input元素也会被序列化。

 

参数

数组或jQuery对象会按照name/value对进行序列化，普通对象按照key/value对进行序列化。

obj：数组或jQuery对象会按照name/value对进行序列化，普通对象按照key/value对进行序列化。

traditional：是否使用传统的方式浅层序列化。

 

示例

描述：按照key/value对序列化普通对象。

jQuery 代码:

    var params = { width:1680, height:1050 };

    var str = jQuery.param(params);

    $("#results").text(str);

结果:

width=1680&height=1050

 

描述：对比两种序列化方式

jQuery 代码:

var myObject = {

  a: {

    one: 1, 

    two: 2, 

    three: 3

  }, 

  b: [1,2,3]

};

var recursiveEncoded = $.param(myObject);

var recursiveDecoded = decodeURIComponent($.param(myObject));

 

alert(recursiveEncoded);

alert(recursiveDecoded);

//a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3

//a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

 

var shallowEncoded = $.param(myObject, true);

var shallowDecoded = decodeURIComponent(shallowEncoded);

 

alert(shallowEncoded);

alert(shallowDecoded);

//a=%5Bobject+Object%5D&b=1&b=2&b=3

//a=[object+Object]&b=1&b=2&b=3

 

 

 

 

 

jquery的扩展

jQuery中立即执行方法的格式：

;(function($){

    //关于jQuery（$）的代码。

})(jQuery);

 

 

jQuery扩展工具函数

$.extend()

例：返回两个数字的最大值。

//定义

;(function($){

    {

        "MaxNum":function(p1,p2){

           return (p1>p2)?p1:p2;

        }

    }

})(jQuery);

 

//调用

$(function(){

    var max = $.MaxNum(11,22);

    alert(max);

});

 

 

$.extends() 扩展已有Object对象。$.extends()方法合并对象，若存在相同参数的名称，则后面的对象覆盖前面的对象的参数值。

例：

var objName = {name : "张三", sex : "男" };

var objInfo = { name : "李四" , age : 30 };

var objLast = $.extends(objName,objInfo);

 

objLast 的值为：{ name : "李四" , sex : "男" ,age : 30 };

 

 

 

$.proxy()函数

1.4.2版本出现该函数。