jquery学习手记（7）Data_utility_index方法

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