selector:用来查找的字符串
context:作为待查找的 DOM 元素集、文档或 jQuery 对象。
一个用于封装成jQuery对象的DOM元素
一个用于封装成jQuery对象
一个用于封装成jQuery对象的DOM元素数组。
一个用于克隆的jQuery对象。
返回一个空的jQuery对象。
$("div > p");
找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。
$(document.body).css( "background", "black" );
设置页面背景色。
$(myForm.elements).hide();
隐藏一个表单中所有元素。
$("input:radio", document.forms[0]);
在文档的第一个表单中,查找所有的单选按钮。
$("div", xml.responseXML);
在一个由AJAX返回的XML文档中,查找所有的div元素。
html:用于动态创建DOM元素的HTML标记字符串
ownerDocument:创建DOM元素所在的文档
html:用于动态创建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");
当DOM加载完成后要执行的函数
$(function(){ 当DOM加载完成后,执行其中的函数。 // 文档就绪});
对于每个匹配的元素所要执行的函数
<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; } });});
$("img").size();
jQuery 对象中元素的个数。
$("img").length;
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])
$("ul") .append("<li>" + $("ul").context + "</li>") .append("<li>" + $("ul", document.body).context.nodeName + "</li>");
[object HTMLDocument] //如果是IE浏览器,则返回[object]BODY
取得第 index 个位置上的元素
取得所有匹配的 DOM 元素集合。
$("img").get(0);
$("img").get().reverse();
选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。
一个选择器,代表一个jQuery对象,将会从这个对象中查找元素。
获得 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,不传递参数,返回这个元素在同辈中的索引位置。
存储的数据名.
key:存储的数据名
value:将要存储的任意数据
一个用于设置数据的键/值对
$("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
element:要关联数据的DOM对象
key:存储的数据名
value:将要存储的任意数据
element:要查询数据的DOM对象
key:存储的数据名
要查询数据的DOM对象
jQuery.data(document.body, 'foo', 52);jQuery.data(document.body, 'bar', 'test');
用来扩充 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();
用以扩展 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); // => 2jQuery.max(4,5); // => 5
传入 true 来允许彻底将jQuery变量还原
jQuery.noConflict(); 将$引用的对象映射回原始的对象。// 使用 jQueryjQuery("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();
联系客服