编程 Javascript

jquery常用方法及使用示例汇总

Posted in Javascript onNovember 08, 2014

mouseover()/mouserout()

当鼠标进入/离开某个元素或它的后代元素时触发mouseover/mouseout事件。
mouseover事件大多数时候会与 mouseout 事件一起使用。

mouseover/mouserout事件由于冒泡机制，经常在不需要的时候不小心触发，从而导致一些脚本问题。

mouseenter()/mouseleave()

mouseenter/mouseleave当且仅当鼠标进入被选元素时才触发，当鼠标穿过任何子元素时不会触发。它不关心目标元素是否有子元素。

focusin()和focusout()

.focusin()：一个元素或它的子元素得到焦点时触发此事件
.focusout()：一个元素或它的子元素失去焦点时触发此事件

与 focus() 方法不同的是，focusin() 方法在任意子元素获得焦点时也会触发。

<body>

    <p><input type="text"> <span>focusin fire</span></p>

    <p><input type="password"> <span>focusin fire</span></p>

    <script>

    $( "p" ).focusin(function() {

    $( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );

    });

    </script>

</body>

eq()和get()

.get()：通过jQuery对象获取一个对应的DOM元素。
.eq()：从集合的一个元素中构造新的jQuery对象

eq返回的是一个jQuery对象，get返回的是一个DOM对象。举个例子：

$( "li" ).get( 0 ).css("color", "red"); //错误
$( "li" ).eq( 0 ).css("color", "red"); //正确
那么，什么是DOM对象，什么又是jQuery对象呢？

DOM对象就是用js获得的对象，而juqery对象是用jQuery类库的选择器获得的对象。

如：var $obj = $("div");//jQuery对象

get方法本质上是把jQuery对象转换成DOM对象，但是css属于jQuery构造器的，DOM是不存在这个方法的，如果需要用jQuery的方法，我们必须这样写：

var li = $("li").get(0);

$(li).css("color","black");//用$包装

filter()

filter()方法:筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

filter(expression)：（字符串|函数）如果参数是字符串，则制定jQuery选择器，用于从包装集里删除所有与选择器不匹配的元素，最后留下与选择器匹配的元素；如果参数是函数，则用于确定筛选条件。为包装集里的每一个元素各调用一次该函数，函数调用返回值为false的任何元素都会从包装集里删除。

以下代码意为：保留第一个以及带有select类的元素

HTML 代码:

  <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

jQuery 代码:

  $("p").filter(".selected, :first")

结果:

 <p>Hello</p>, <p class="selected">And Again</p>

再看一个function的例子，一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。

HTML 代码:

 <p><ol><li>Hello</li></ol></p><p>How are you?</p>

jQuery 代码:

$("p").filter(function(index) {

  return $("ol", this).length == 0;

});

结果:

<p>How are you?</p>

.bind()、.live()和.delegate()方法

.bind()：绑定事件处理函数的最基本方式是使用.bind()方法。它和live()方法一样，接受两个参数：

.bind(event type, event handler)
两种绑定事件处理函数的方法：

$(document).ready(function(){

    $('.mydiv').bind('click',test);
    function test(){

        alert("Hello World!");

    }

});

事件处理函数也可以使用匿名函数，如下所示：

$(document).ready(function(){

        $("#mydiv").bind("click",function(){

            alert("Hello World!");

        })

    });

.live()：live方法和bind方法的唯一区别在于.live()不仅作用于DOM中当前存在的元素，还作用于将来可能存在（动态生成）的元素

$(document).ready(function(){

        $('.box').live('click',function(){

            $(this).clone().appendTo('.container');

        });

    });
    <div class="container">

        <div class="box"></div>

    </div>

使用live方法绑定事件的缺点在于它无法使用链式调用，那有没有既可以像live方法那样绑定事件，又可以支持链式调用的方法呢？答案就是下面的delegate方法。

delegate()方法：为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，
并规定当这些事件发生时运行的函数。从jQuery 1.7开始，.delegate()已经被.on()方法取代。
语法：

$(selector).delegate(childSelector,event type,function)
参数说明：

childSelector 必需。规定要附加事件处理程序的一个或多个子元素。

event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

function 必需。规定当事件发生时运行的函数。

$(document).ready(function(){

        $('.container').delegate('.box','click',function(){

            $(this).clone().appendTo('.container');

        });

    });

delegate()会在以下两个情况下使用到：

1、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：

$("ul").delegate("li", "click", function(){
$(this).hide();
});

2、当元素在当前页面中不可用时，可以使用delegate()

end()方法

end()方法：在jquery命令链内调用，以便退回到前一个包装集。
每次过滤方法都会被压入栈中。当我们需要返回到前一个状态时，我们可以使用end() 进行出栈操作，来返回栈中的前一个状态。

end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title></title>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

</head>

<body>

    <ul class="one">

    <li class="two">item 1</li>

    <li>item 2</li>

    <li class="three">item 3</li>

</ul>
<script type="text/javascript">

    $('ul.one').find(".two").css("color","red").find('.three').css("background","blue");

</script>

在上面的代码例子中，我们只会看到item 1的字体颜色改变了，而背景颜色没有改变。这是因为
第二个find()方法之前的状态返回的是红色字体的class值为two的对象，因此，第二次find()只会查找<ul class="one"> 中的.two，使用end()方法修改该链式操作的代码如下：

<script type="text/javascript">

    $('ul.one').find(".two").css("color","red").end().find('.three').css("background","blue");

</script>

end()方法在这里是返回调用 find() 之前的状态，也就是$('ul.one')

toggleClass()

`toggleClass()方法：`如果在元素中指定类名称不存在，则添加指定类名称；如果元素已经拥有指定
类名称，则从元素中删除指定类名称。
css(name,value)方法：设定指定的值到每个已匹配元素的指定的css样式属性

wrap()和wrapInner()

`wrap()和wrapInner()：`前者把所有匹配的元素用其他元素的结构化标记包裹起来；
后者将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。
看下面一个wrap()的例子：
用原先div的内容作为新div的class，并将每一个元素包裹起来

HTML 代码:

<div class="container">

  <div class="inner">Hello</div>

  <div class="inner">Goodbye</div>

</div>

jQuery 代码:

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

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

});

结果:

<div class="container">

  <div class="Hello">

    <div class="inner">Hello</div>

  </div>

  <div class="Goodbye">

    <div class="inner">Goodbye</div>

  </div>

</div>

接着再看下面一个wrapInner()的例子:

用原先div的内容作为新div的class，并将每一个元素包裹起来

HTML 代码:

<div class="container">

  <div class="inner">Hello</div>

  <div class="inner">Goodbye</div>

</div>

jQuery 代码:

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

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

});

结果:

<div class="container">

  <div class="inner">

    <div class="Hello">Hello</div>

  </div>

  <div class="inner">

    <div class="Goodbye">Goodbye</div>

  </div>

</div>

detach、empty和remove方法

.detach( [selector ] )：从DOM中去掉所有匹配的元素。当需要移走一个元素，不久又将该元素插入DOM时，就需要用到detach方法。

.empty()：这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。

.remove( [selector ] )：将元素从DOM中移除，同时移除元素上的事件及 jQuery 数据

empty()的例子：

 <ul class="one">

    <li class="two">item 1</li>

    <li>item 2</li>

    <li class="three">item 3</li>

</ul>
<script type="text/javascript">

    $(".two").empty();//item 1 文本节点被移除，li的小圆点还在，证明li没有被移除

</script>

看下面一个remove()例子：

描述：从DOM中把所有段落删除

HTML 代码:

<p>Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").remove();

结果:

how are
val()方法

val()：获得匹配元素的当前值。
描述:获取文本框中的值

jQuery 代码:

$("input").val();

jQuery 代码:

$("input").val("hello world!");

each()和map()

each()和map()方法：each返回的是原来的数组，并不会新创建一个数组。而map方法会返回一个
新的数组。如果在没有必要的情况下使用map，则有可能造成内存浪费。
each方法：

定义一个空数组，通过each方法，往数组添加ID值；最后将数组转换成字符串后，alert这个值；

$(function(){

    var arr = [];

    $(":checkbox").each(function(index){

        arr.push(this.id);

    });

    var str = arr.join(",");

    alert(str);

})

map方法:

将每个:checkbox执行return this.id；并将这些返回值，自动的保存为jQuery对象，然后用get方法将其转换成原生Javascript数组，再使用join方法转换成字符串，最后alert这个值；

$(function(){

    var str = $(":checkbox").map(function() {

        return this.id;

    }).get().join();    

    alert(str);

})

当有需一个数组的值的时候，用map方法，很方便。

更加详细的讨论，请点击我的另一篇文章：详解jQuery内置函数map()和each()的使用

$.each()

jQuery的$(selector).each()函数可以遍历循环选中的子元素，而jQuery的$.each()函数则可以遍历任何集合，包括对象和数组，它接收要遍历的集合以及一个回调函数，回调函数每次传递一个数组的下标和这个下标所对应的数组的值。

$.each(array,callback);

$.each(object,callback);
数组实例

$.each( [ "one", "two", "three" ], function( i, l ){

alert( "index #" + i + ": " + l );

});

callback(索引,索引值)
DEMO：

index 0: one
index 1: two;
index 2: three
对象实例

$.each({ name: "John", lang: "JS" }, function( k, v ) {
alert( "Key: " + k + ", Value: " + v );
});
callback(键,值)
Demo:

Key: name, Value: trigkit4
Key: ages, Value: 21
.trigger()

描述: 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。

当相应的事件发生时，任何通过.on()或一个快捷方法绑定的事件处理程序将被触发。但是，它们可以用.trigger()方法手动触发

<script type="text/javascript">

    $(document).ready(function(){

        $("input").select(function(){

            $("input").after("文本被选中！");

        })
        $("button").click(function(){

            $("input").trigger("select");

        })

    })

</script>

.attr()和.prop()

.attr()：获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。

.prop()：同上
jQuery 1.6之前，.attr()方法在取某些 attribute 的值时，会返回 property 的值，这就导致了结果的不一致。从 jQuery 1.6 开始， .prop()方法方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。

他们没有相应的属性（attributes），只有特性(property)。

.after()和.insertAfter()

1.after()

描述:
在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:

<b>Hello</b><p>I would like to say: </p>

jQuery 代码:

$("p").after( $("b") );

结果:

<p>I would like to say: </p><b>Hello</b>

2.insertAfter()

描述:
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

HTML 代码:

<p>I would like to say: </p><div id="foo">Hello</div>

jQuery 代码:

$("p").insertAfter("#foo");

结果:

<div id="foo">Hello</div><p>I would like to say: </p>

.before()和.insertBefore()

3.before()

描述:
在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:

<p>I would like to say: </p><b>Hello</b>

jQuery 代码:

$("p").before( $("b") );

结果:

<b>Hello</b><p>I would like to say: </p>

.append()和.appendTo()

4.append()

描述：向所有段落中追加一些HTML标记。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").append("<b>Hello</b>");

结果:

<p>I would like to say: <b>Hello</b></p>

5.appendTo()

描述：新建段落追加div中并加上一个class

HTML 代码:

<div></div><div></div>

jQuery 代码:

 $("<p/>")

   .appendTo("div")

   .addClass("test")

   .end()

   .addClass("test2");

结果:

.prepend()和.prependTo()

6.prepend()

描述：向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:

<p>I would like to say: </p><b>Hello</b>

jQuery 代码:

$("p").prepend( $("b") );
结果:

<p><b>Hello</b>I would like to say: </p>

7.prependTo()

描述：把所有段落追加到ID值为foo的元素中。

HTML 代码:

<p>I would like to say: </p><div id="foo"></div>

jQuery 代码:

$("p").prependTo("#foo");

结果:

<div id="foo"><p>I would like to say: </p></div>

总结

1. .insertAfter()和.after()：在现存元素的外部，从后面插入元素
2. .insertBefore()和.before()：在现存元素的外部，从前面插入元素
3. .appendTo()和.append()：在现存元素的内部，从后面插入元素
4. .prependTo()和.prepend() ：在现存元素的内部，从前面插入元素

jquery常用方法及使用示例汇总

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Extjs Ext.MessageBox.confirm 确认对话框详解

Apr 02 Javascript

js实现右下角可关闭最小化div(可用于展示推荐内容)

Jun 24 Javascript

jquery内置验证(validate)使用方法示例(表单验证)

Dec 04 Javascript

Jquery中的层次选择器与find()的区别示例介绍

Feb 20 Javascript

使用jQuery异步加载 JavaScript脚本解决方案

Apr 20 Javascript

JS实现固定在右下角可展开收缩DIV层的方法

Feb 13 Javascript

jqGrid 学习笔记整理——进阶篇(一 )

Apr 17 Javascript

BootStrap智能表单实战系列(六)表单编辑页面的数据绑定

Jun 13 Javascript

HTML5+JS+JQuery+ECharts实现异步加载问题

Dec 16 jQuery

微信小程序实现选项卡效果

Nov 06 Javascript

JS实现根据详细地址获取经纬度功能示例

Apr 16 Javascript

Javascript查看大图功能代码实现

May 07 Javascript

JQuery遍历json数组的3种方法

Nov 08 #Javascript

JQuery中使用.each()遍历元素学习笔记

Nov 08 #Javascript

jQuery遍历之next()、nextAll()方法使用实例

Nov 08 #Javascript

jQuery遍历对象、数组、集合实例

Nov 08 #Javascript

JavaScript中具名函数的多种调用方式总结

Nov 08 #Javascript

JavaScript中使用typeof运算符需要注意的几个坑

Nov 08 #Javascript

JavaScript中判断整数的多种方法总结

Nov 08 #Javascript