打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Jquery核心

1.jQuery([selector,[context]])

这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。

selector,[context]String,Element,/jQueryV1.0

selector:用来查找的字符串

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.0

html:用于动态创建DOM元素的HTML标记字符串

ownerDocument:创建DOM元素所在的文档

html,propsString,MapV1.4

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");

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(0);
$("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.3

key:存储的数据名

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.3

element:要关联数据的DOM对象

key:存储的数据名

value:将要存储的任意数据

element,keyString,StringV1.2.3

element:要查询数据的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); // => 2jQuery.max(4,5); // => 5

15.jQuery.noConflict([extreme])

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

extremeBooleanV1.0

传入 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();






































本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
jQuery入门
JQuery_01
学习04-jq(jq的使用,jq的入口函数,jq与DOM的转换,基本选择器,层级选择器,设置样式,筛选选择器,筛选方法)
转载 jQuery的三种$()
jquery index() 方法
jQuery从入门到放弃
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服