1.jQuery([selector,[context]])这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 selector,[context]String,Element,/jQueryV1.0selector:用来查找的字符串 context:作为待查找的 DOM 元素集、文档或 jQuery 对象。 elementElementV1.0一个用于封装成jQuery对象的DOM元素 objectobjectV1.0一个用于封装成jQuery对象 elementArrayElementV1.0一个用于封装成jQuery对象的DOM元素数组。 jQuery objectobjectV1.0一个用于克隆的jQuery对象。 jQuery()V1.4返回一个空的jQuery对象。 $("div > p"); 找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。
$(document.body).css( "background", "black" ); 设置页面背景色。
$(myForm.elements).hide(); 隐藏一个表单中所有元素。
$("input:radio", document.forms[0]); 在文档的第一个表单中,查找所有的单选按钮。
$("div", xml.responseXML); 在一个由AJAX返回的XML文档中,查找所有的div元素。
2.jQuery(html,[ownerDocument])根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。 html,[ownerDocument]String,DocumentV1.0html:用于动态创建DOM元素的HTML标记字符串 ownerDocument:创建DOM元素所在的文档 html,propsString,MapV1.4html:用于动态创建DOM元素的HTML标记字符串 props:用于附加到新创建元素上的属性、事件和方法 $("<div><p>Hello</p></div>").appendTo("body");
动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body 元素中。 $("<input type='checkbox'>"); 创建一个 <input> 元素必须同时设定 type 属性。
$("<div>", { 动态创建一个 div 元素(以及其中的所有内容),
"class": "test", 并将它追加到 body 元素中。
text: "Click me!",
click: function(){
$(this).toggleClass("test");
}
}).appendTo("body");
$("<input>", { 创建一个 <input> 元素,同时设定 type 属性、属性值,
type: "text", 以及一些事件。
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
3.jQuery(callback)$(document).ready()的简写。 callbackFunctionV1.0当DOM加载完成后要执行的函数 $(function(){ 当DOM加载完成后,执行其中的函数。
// 文档就绪
});
4.each(callback)以每一个匹配的元素作为上下文来执行一个函数。 callbackFunctionV1.0对于每个匹配的元素所要执行的函数 <img/><img/>
$("img").each(function(i){ 迭代两个图像,并设置它们的 src 属性。
this.src = "test" + i + ".jpg";
//注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
});
$("img").each(function(){
$(this).toggleClass("example"); // $(this)为jQuery 对象。
}); $("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this,使用 'return' 来提前跳出 each() 循环。
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
5.size()$("img").size(); jQuery 对象中元素的个数。
6.length$("img").length; jQuery 对象中元素的个数。
7.selector返回传给jQuery()的原始选择器。返回你用什么选择器来找到这个元素的。 $("ul")
.append("<li>" + $("ul").selector + "</li>") ul
.append("<li>" + $("ul li").selector + "</li>") ul li
.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
div#foo ul:not([class]) 8.context返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没有指定,那么context指向当前的文档(document)。 $("ul")
.append("<li>" + $("ul").context + "</li>")
.append("<li>" + $("ul", document.body).context.nodeName + "</li>");
[object HTMLDocument] //如果是IE浏览器,则返回[object]
BODY
9.get([index])取得其中一个匹配的元素。 num表示取得第几个匹配的元素。 [index]Number取得第 index 个位置上的元素 get()取得所有匹配的 DOM 元素集合。 $("img").get().reverse();
选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。 10.index([selector|element])搜索匹配的元素,并返回相应元素的索引值,从0开始计数。 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。 selectorSelectorV14一个选择器,代表一个jQuery对象,将会从这个对象中查找元素。 elementElementV1.0获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。 <ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
$('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,不传递参数,返回这个元素在同辈中的索引位置。
11.data([key],[value])在元素上存放数据,返回jQuery对象。 keyStringV1.23存储的数据名. key,valueString,AnyV1.2.3key:存储的数据名 value:将要存储的任意数据 objobjectV1.4.3一个用于设置数据的键/值对 data()$("div").data("blah"); // undefined 在一个div上存取数据
$("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
12.jQuery.data(element,[key],[value])在元素上存放数据,返回jQuery对象。 element,key,valueString,String,AnyV1.2.3element:要关联数据的DOM对象 key:存储的数据名 value:将要存储的任意数据 element,keyString,StringV1.2.3element:要查询数据的DOM对象 key:存储的数据名 elementStringV1.4要查询数据的DOM对象 jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');
13.jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。 objectObjectV1.0用来扩充 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();
14.jQuery.extend(object)扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。 objectObjectV1.0用以扩展 jQuery 对象 jQuery.extend({ 在jQuery命名空间上增加两个函数。
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
15.jQuery.noConflict([extreme])运行这个函数将变量$的控制权让渡给第一个实现它的那个库。 这有助于确保jQuery不会与其他库的$对象发生冲突。 在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。 '''注意:'''这个函数必须在你导入jQuery文件之后,并且在导入另一个导致冲突的库'''之前'''使用。当然也应当在其他冲突的库被使用之前,除非jQuery是最后一个导入的。 extremeBooleanV1.0传入 true 来允许彻底将jQuery变量还原 jQuery.noConflict(); 将$引用的对象映射回原始的对象。
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';
jQuery.noConflict(); 恢复使用别名$
(function($) {
$(function() {
// 使用 $ 作为 jQuery 别名的代码
});
})(jQuery);
// 其他用 $ 作为别名的库的代码
var j = jQuery.noConflict();创建一个新的别名用以在接下来的库中使用jQuery对象。
// 基于 jQuery 的代码
j("div p").hide();
// 基于其他库的 $() 代码
$("content").style.display = 'none';
var dom = {}; 完全将 jQuery 移到一个新的命名空间。
dom.query = jQuery.noConflict(true);
// 新 jQuery 的代码
dom.query("div p").hide();
// 另一个库 $() 的代码
$("content").style.display = 'none';
// 另一个版本 jQuery 的代码
jQuery("div > p").hide();
|