Data方法

Js對dom元素增加一個屬性時，你必須處理一些瀏覽器內存泄漏的問題。Jquery提供了一個元素保存數據的方法，該方替你管理內存問題。示例：

// Storing and retrieving data related to an element $("#myDiv").data( "keyName", { foo: "bar" } ); // { foo: "bar" } $("#myDiv").data("keyName");

List元素和div建立聯系的示例：

// Storing a relationship between elements using $.fn.data $("#myList li").each(function() {var $li = $( this );var $div = $li.find("div.content");$li.data( "contentDiv", $div ); }); // later, we don't have to find the div again; // we can just read it from the list item's data var $firstLi = $("#myList li:first"); $firstLi.data("contentDiv").html("new content");

Utility

下面對一些常用的方法進行舉例：

$.trim 去除前后的空格

// returns "lots of extra whitespace" $.trim(" lots of extra whitespace ");

$.each 遍歷數組和對象

$.each([ "foo", "bar", "baz" ], function( idx, val ) {console.log( "element " + idx + "is " + val ); }); $.each({ foo: "bar", baz: "bim" }, function( k, v ) {console.log( k + " : " + v ); });

$.inArray返回索引位置

var myArray = [ 1, 2, 3, 5 ]; if ( $.inArray( 4, myArray ) !== -1 ) {console.log("found it!"); }

$.extend 改變對象屬性

var firstObject = { foo: "bar", a: "b" }; var secondObject = { foo: "baz" }; var newObject = $.extend( firstObject, secondObject ); console.log( firstObject.foo ); // "baz" console.log( newObject.foo ); // "baz"

如果不想改變傳遞的參數，第一個 參數為空即可。如下：

var firstObject = { foo: "bar", a: "b" }; var secondObject = { foo: "baz" }; var newObject = $.extend( {}, firstObject, secondObject ); console.log( firstObject.foo ); // "bar" console.log( newObject.foo ); // "baz"

$.proxy

《略》

?

使用jquery的index函數

Index的作用是在jquery對象查找指定的元素。

?

無參的index

<ul> <div></div> <li id="foo1">foo</li> <li id="bar1">bar</li> <li id="baz1">baz</li> <div></div> </ul> var $foo = $("#foo1"); console.log( "Index: " + $foo.index() ); // 1 var $listItem = $("li"); // this implicitly calls .last() console.log( "Index: " + $listItem.index() ); // 3 console.log( "Index: " + $listItem.last().index() ); // 3 var $div = $("div"); // this implicitly calls .last() console.log( "Index: " + $div.index() ); // 4 console.log( "Index: " + $div.last().index() ); // 4

參數為string的index

<ul> <div class="test"></div> <li id="foo1">foo</li> <li id="bar1" class="test">bar</li> <li id="baz1">baz</li> <div class="test"></div> </ul> <div id="last"></div> var $foo = $("li"); // this implicitly calls .first() console.log( "Index: " + $foo.index("li") ); // 0 console.log( "Index: " + $foo.first().index("li") ); // 0 var $baz = $("#baz1"); console.log( "Index: " + $baz.index("li")); // 2 var $listItem = $("#bar1"); console.log( "Index: " + $listItem.index(".test") ); // 1 var $div = $("#last"); console.log( "Index: " + $div.index("div") ); // 2

參數是jquery對象的index

<ul> <div class="test"></div> <li id="foo1">foo</li> <li id="bar1" class="test">bar</li> <li id="baz1">baz</li> <div class="test"></div> </ul> <div id="last"></div> var $foo = $("li"); var $baz = $("#baz1"); console.log( "Index: " + $foo.index( $baz ) ); // 2 var $tests = $(".test"); var $bar = $("#bar1"); // implicitly calls .first() on the argument console.log( "Index: " + $tests.index( $bar ) ); // 1 console.log( "Index: " + $tests.index( $bar.first() ) ); // 1

參數為DOM元素的index

轉載于:https://www.cnblogs.com/davidwang456/archive/2013/04/18/3029709.html

總結

以上是生活随笔為你收集整理的jquery学习手记（7）Data_utility_index方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。