jQuery(一)、核心
我认为,学习一门语言,主要是掌握它的思想与用途,就好比谈恋爱一样,你只要猜测到了对方的想法,就能够知情达意。废话不多说,我们开始今天学习的进度,加油ヾ(◍°∇°◍)ノ゙
1. jquery([selector[, context]])
该函数还可以表示为 $([selector[, context]])。这个函数接收一个包含css选择器的字符串,然后用这个字符串去匹配一组元素。比如,常用的 id 选择器(后面会对各种选择器进行详细说明),$("#div1")。
jquery的核心功能都是通过这个函数实现的。就好比一座大楼的地基,jquery中的一切都是基于这个函数,或者说都是以某种方式使用这个函数。
默认情况下,如果没有指定context参数, $() 将在当前页面上下文查找dom元素;如果指定了context参数,就会在这个context中进行查找。在jquery1.3.2 以后,其返回的元素顺序等同于 context中出现的先后顺序。
参数:
(1) selector[, context]:selector 表示用来查找的字符串,通常由css选择器组成;context 作为待查找的dom元素集、文档或jquery对象。如:
// 查找div1中的所有checkbox $("#div1 input:checkbox"); // 查找文档第一个表单中所有单选按钮 $("input:radio", document.forms[0]);
(2) element:一个用于封装成 jquery对象的dom元素,也就是将dom对象转换为jquery对象。如:
// 为div1 添加class属性 var div1 = document.getelmentbyid("div1"); $(div1).attr('class', 'class1 class2 class3');
(3) object:一个用于封装成 jquery的对象,和上面的element差不多。
(4) elementarray:一个用于封装成 jquery对象的dom元素数组。
(5) jquery():返回一个空的jquery对象。
2. jquery(html[, ownerdocument])
该函数还可以表示为 $(html[, ownerdocument])。根据提供的原始 html标记字符串,动态创建由jquery对象包装的dom元素。同时设置一系列属性、事件等。如:
// 添加div到body中
$("<div><p>hello</p></div>").appendto("body"); $("<div>", { "class": "test", text: "click me!", click: function(){ $(this).toggleclass("test"); } }).appendto("body");
3. jquery(callback)
该函数可以表示为 $(callback)。是$(document).ready() 的简写。允许你绑定一个在 dom元素加载完成后执行的函数。
4. each(callback)
对每一个所匹配的元素来执行一个函数。
意味着,每次执行传递进来的函数时。this关键字都指向不同的dom元素。并且,每次执行函数时,都会给函数传递一个表示该元素在匹配集合中索引位置的值(从 0 开始)。函数方法 false 将终止each。返回 true 将执行下一个元素。
// 对前3个img进行src设置 $("img").each(function(i){ if( i == 3){ // 跳出循环 return false; } this.src = "test" + i + ".jpg"; });
5. size()
返回 jquery对象中元素的个数
6. length
返回 jquery对象中元素的个数。
7. selector
返回传递给 jquery() 的原始选择器。这些方法都可以使用console.log(jquery对象)输出来查看jquery对象有哪些属性值。
8. context
返回传递给 jquery() 原始的dom节点上下文,即$([selector[, context]])中的第二个参数。如果在获取jquery对象时没有指定context,则表示当前页面上下文。
9. get([index])
取得其中一个匹配的元素。inde表示取得的第几个匹配元素(从 0 开始)。
参数:
(1) index:取得在索引为 index 的元素。
(2) get():取得所有匹配的dom元素集合。
10. index([selector | element])
搜索匹配的元素,并返回相应元素的索引值,从 0 开始。
如果不给 .index() 方法传递参数,返回值就是这个jquery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一个选择器selector,返回值就是原先集合中的元素相对于选择器匹配中的位置。如果找不到,返回 -1。
如果参数是一组dom 元素或者 jquery对象,返回值就是传递的元素相对于集合的位置。
11. data([key], [value])
在一个元素上存取数据,返回 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 $("div").data("test", { first: 16, last: "pizza!" }); $("div").data("test").first //16; $("div").data("test").last //pizza!;
12. remove([name | list])
在元素上移除存放的数据。
参数:
(1) name:存储的数据名
(2) list:移除数组,或以空额分开的字符串
13. jquery.data(element, [key], [value])
在元素上存放数据,返回 jquery对象。
注意:这是一个底层方法。你应当使用 .data() 来代替。
14. jquery.noconfict([extreme])
运行这个函数将变量 $ 的控制权让给第一个实现它的库。这有助于确保 jquery不会与其他库的 $ 对象冲突。