码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 核心

时间:2016-07-17 16:19:46      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:

1、each(callback)

  以每一个匹配的元素作为上下文来执行一个函数。意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)。 返回 ‘false‘ 将停止循环 (就像在普通的循环中使用 ‘break‘)。返回 ‘true‘ 跳至下一个循环(就像在普通的循环中使用‘continue‘)。

  参数:callback对于每个匹配的元素所要执行的函数

示例:迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery核心</title>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("img").each(function(i){
this.src="img/test"+i+".png";
});
});
</script>
</head>
<body>
<img/><img/>
</body>
</html>
技术分享

2、size()

  jQuery 对象中元素的个数。当前匹配的元素个数。与 length 将返回相同的值。

示例:计算文档中所有图片数量

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery核心</title>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("img").size();
});
</script>
</head>
<body>
<img src="img/test0.png"/> <img src="img/test1.png"/>
</body>
</html>


结果:2

3、get([index])

  取得其中一个匹配的元素。 num表示取得第几个匹配的元素。从0开始,返回的是DOM对象,类似的有eq(index),不过eq(index)返回的是jQuery对象。

这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。

参数:

  [index]Number取得第 index 个位置上的元素

  get()取得所有匹配的 DOM 元素集合。

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery核心</title>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var img=$("img").get(0);
$("body").append(img);
});
</script>
</head>
<body>
<img src="img/test0.png"/> <img src="img/test1.png"/>
</body>
</html>


结果:

 技术分享       技术分享

4、index([selector|element])

  搜索匹配的元素,并返回相应元素的索引值,从0开始计数。

  如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

  如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。

  如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。 具体请参考示例。

参数:

   selector:一个选择器,代表一个jQuery对象,将会从这个对象中查找元素。

   element:获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。

示例:

查找元素的索引值

HTML 代码:

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

jQuery 代码:

$('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1,传递一个jQuery对象
$('li').index($('li:gt(0)')); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1,传递一个选择器,返回#bar在所有li中的索引位置
$('#bar').index(); //1,不传递参数,返回这个元素在同辈中的索引位置。

5、data([key],[value])

  在元素上存放或读取数据,返回jQuery对象。

  当参数只有一个key的时候,为读取该jQuery对象对应DOM中存储的key对应的值,值得注意的是,如果浏览器支持HTML5,同样可以读取该DOM中使用 data-[key] = [value] 所存储的值。参见最后一个示例。

  当参数为两个时,为像该jQuery对象对应的DOM中存储key-value键值对的数据。

  如果jQuery集合指向多个元素,那将在所有元素上设置对应数据。 这个函数不用建立一个新的expando,就能在一个元素上存放任何格式的数据,而不仅仅是字符串。

参数:

  key:存储的数据名.

  key,value:key:存储的数据名、value:将要存储的任意数据

  obj:一个用于设置数据的键/值对

示例1:在一个div上存取数据

HTML 代码:

<div></div>

jQuery 代码:

$("div").data("blah");  // undefined
$("div").data("blah", "hello");  // blah设置为hello
$("div").data("blah");  // hello
$("div").data("blah", 86);  // 设置为86
$("div").data("blah");  //  86
$("div").removeData("blah");  //移除blah
$("div").data("blah");  // undefined

示例2:在一个div上存取名/值对数据

HTML 代码:

<div></div>

jQuery 代码:

$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first  //16;
$("div").data("test").last  //pizza!;

示例3:HTML5规范中div中读取预存的data-[key]

HTML 代码:

<div data-test="this is test" ></div>

jQuery 代码:

$("div").data("test"); //this is test!;

6、removeData([name|list])

  在元素上移除存放的数据,与 data([key], [value]) 函数作用相反

参数:

  [name]:存储的数据名

  [list]Array:移除数组或以空格分开的字符串

示例:从元素中删除之前添加的数据:

$("#btn2").click(function(){
  $("div").removeData("blah");
  alert("Greeting is: " + $("div").data("blah"));
});

7、jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。

参数:object用来扩充 jQuery 对象。

示例:增加两个插件方法。

jQuery 代码:

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});


结果:

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();

 

8、jQuery.extend(object)

扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。

参数:object用以扩展 jQuery 对象

示例:jQuery命名空间上增加两个函数。

jQuery 代码:

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});


结果:

jQuery.min(2,3); // => 2

jQuery.max(4,5); // => 5

 

9、jQuery.noConflict([extreme])

  运行这个函数将变量$的控制权让渡给第一个实现它的那个库。这有助于确保jQuery不会与其他库的$对象发生冲突。 在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。 ‘‘‘注意:‘‘‘这个函数必须在你导入jQuery文件之后,并且在导入另一个导致冲突的库‘‘‘之前‘‘‘使用。当然也应当在其他冲突的库被使用之前,除非jQuery是最后一个导入的。

  参数:extreme传入 true 来允许彻底将jQuery变量还原

示例1:将$引用的对象映射回原始的对象。

jQuery 代码:

jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';

示例2:恢复使用别名$,然后创建并执行一个函数,在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中,原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。

jQuery 代码:

jQuery.noConflict();
(function($) {
  $(function() {
    // 使用 $ 作为 jQuery 别名的代码
  });
})(jQuery);
// 其他用 $ 作为别名的库的代码

示例3:创建一个新的别名用以在接下来的库中使用jQuery对象。

jQuery 代码:

var j = jQuery.noConflict();
// 基于 jQuery 的代码
j("div p").hide();
// 基于其他库的 $() 代码
$("content").style.display = 'none';

示例4:完全将 jQuery 移到一个新的命名空间。

jQuery 代码:

var dom = {};
dom.query = jQuery.noConflict(true);

结果:

// 新 jQuery 的代码
dom.query("div p").hide();
// 另一个库 $() 的代码
$("content").style.display = 'none';
// 另一个版本 jQuery 的代码
jQuery("div > p").hide();


jQuery 核心

标签:

原文地址:http://blog.csdn.net/qq_27626333/article/details/51931423

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!