绑定完请刷新页面
取消
刷新

分享好友

×
取消 复制
jquery学习手记(7)Data_utility_index方法
2020-01-07 18:04:44

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

分享好友

分享这个小栈给你的朋友们,一起进步吧。

JAVA玩具小屋
创建时间:2019-08-16 16:54:49
分享程序开发方面的小经验,思考一些比较简单易懂的技术问题
展开
订阅须知

• 所有用户可根据关注领域订阅专区或所有专区

• 付费订阅:虚拟交易,一经交易不退款;若特殊情况,可3日内客服咨询

• 专区发布评论属默认订阅所评论专区(除付费小栈外)

栈主、嘉宾

查看更多
  • Yios5092
    栈主

小栈成员

查看更多
  • 栈栈
  • coyan
  • 25minutes
  • ?
戳我,来吐槽~