jquery常用方法及使用示例汇总(4)

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>Hello</div>

jQuery 代码:

复制代码 代码如下:


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

结果:

复制代码 代码如下:


<div>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");

结果:

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


.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></div>

jQuery 代码:

复制代码 代码如下:


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

结果:

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

总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgszfd.html