jquery 手册核心函数整理.doc

jQuery 核心函数

//前者为查找对象,后者为前者查找的范围

$(argunment)

jQuery([selector,[context]])

参数

$(selector,[context])

selector 被查找的字符串

context  待查找的元素集、文档或 jQuery 对象

Eg ----  $(‘p‘,‘[class=two]‘).css(‘color‘,‘red‘)

$(‘p‘,‘[class=one],[class=two]‘).css(‘color‘,‘red‘)

element  一个用于封装成 jQuery 对象的DOM元素

Eg ----  $(‘#id‘)

object  一个用于封装成 jQuery 对象

elementArray  一个用于封装成 jQuery 对象的 DOM 数组

jQuery object  一个用于克隆的 jQuery 对象

jQuery()  返回一个空的 jQuery 对象

---------------------------------

jQueryjQuery(html,[ownerDocument])

(1.8*)

参数

$(html,[ownerDocument])

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

ownerDocument  创建 DOM 元素所在的文档 对象

$(html,props)

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

ownerDocument  用于附加到新创建元素上的属性、事件和方法  

// 在 IE 中无效:

$("<input>").attr("type", "checkbox");

// 在 IE 中有效:

$("<input type=‘checkbox‘>");

-----------------------------

$("<div>", {

  "class": "test",

  text: "Click me!",

  click: function(){

    $(this).toggleClass("test");

  }

}).appendTo("body");

-----------------------------

$("<input>", {

  type: "text",

  val: "Test",

  focusin: function() {

    $(this).addClass("active");

  },

  focusout: function() {

    $(this).removeClass("active");

  }

}).appendTo("form");

-----------------------------

// callback is function

jQuery(callback)

$(document).ready(){

    // 代码块

}

等价 ↓简写

$(function(){

    // 代码块

})

-----------------------------

jQuery.holdReady(hold)

(1.6+)

$.holdReady(true);

$.getScript("myplugin.js", function() {

     $.holdReady(false);

});

jQuery 对象访问

// each 遍历对象

// index 是索引值

// value 是对象本身

function(index)

function(index,value)

each(callback)

<button>Change colors</button>

<span></span>

<div></div>

<div></div>

<div></div>

<div></div>

<div id="stop">Stop here</div>

<div></div>

<div></div>

<div></div>

$("button").click(function(){

   // index 是索引下标 value 是当前传入的对象值

   $("div").each(function (index, value) {

     // value == this

     $( value ).css("backgroundColor", "yellow");

     // 如果这个是 #stop

     if ($(this).is("#stop")) {

     $("span").text("Stopped at div index #" + index);

     // 并退出 each 遍历

     return false;

     }

   });

});

----------------------------------

size()

// size() 是获取元素数量

$(‘div‘).size()

----------------------------------

length

// length 是获取长度

var arr = [1,2,3,‘a‘,‘b‘,..‘n‘]

arr.length;

$(‘div‘).length

----------------------------------

selector

// .selector 为选择器的字符串

// 结果都为 <ul> <li> div </li> </ul>

$(‘ul‘).append(‘<li>‘ + $(‘div‘).selector + ‘</li>‘)
$(‘ul‘).append(‘<li>‘ + ‘div‘ + ‘</li>‘)
----------------------------------

context

// 返回对象 htmlDocument
$(‘ul‘,‘div‘).context

// 返回字符串 #document
$(‘ul‘,‘div‘).context.nodeName

----------------------------------

get([index])

// index 为索引值, 实际的DOM 元素并且对他直接操作, 而不是通过 jQuery 函数, $(this).get(0)与$(this)[0]等价

$(‘div‘).get(0)

$(‘div‘)[0]

----------------------------------

返回值:Numberindex([selector|element])

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

<ul>

  <li id="foo">foo</li>

  <li id="bar">bar</li>

  <li id="baz">baz</li>

</ul>

参数

index()

// 返回在 sibling 中的索引位置

$(‘#bar‘).index();

seletor

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

element

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

// 以下都是返回 li 的索引位置

$(‘#bar‘).index(‘li‘);

$(‘li‘).index($(‘#bar‘));

$(‘li‘).index($(‘li:gt(0)‘));

$(‘li‘).index(document.getElementById(‘bar‘));

数据缓存

data([key],[value])

在元素上存放数据,返回jQuery对象

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

参数

key

存储的数据名.

$(‘div‘).date(‘name‘);

key,value

key:存储的数据名

value:将要存储的任意数据

$(‘div‘).date(‘name‘,‘kk‘);

obj

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

$(‘div‘).date(‘obj‘,{‘name‘:‘kk‘,‘sex‘:‘man‘});

data()

----------------------------------------------

removeData([name|list])

参数

name

存储的数据名.

list

移除数组或以空格分开的字符串

队列控制

queue(element,[queueName])

// 显示或操作在匹配元素上执行的函数队列

参数

element,[queueName]

element 检查附加列队的 DOM 元素

queueName 字符串值,包含序列的名称,默认是 fx,标准的效果序列

element,queueName,newQueue

element 检查附加列队的 DOM 元素

queueName 字符串值,包含序列的名称,默认是 fx,标准的效果序列

newQueue 替换当前函数列队内容的数组

element,queueName,callback()

element 检查附加列队的 DOM 元素

queueName 字符串值,包含序列的名称,默认是 fx,标准的效果序列

callback() 要添加进队列的函数

<script>

$(document.body).click(function(){

   // 参数为缓慢显示出来

   $("div").show("slow");

   // 对不在动画的元素执行 left 属性值 +=200,并且延迟 2000 毫秒

   $("div").animate({left:‘+=200‘},2000);

   // 操作加入队列的函数

   $("div").queue(function(){

      $(this).addClass("newcolor");

      // 剔除上一个加入队列的函数并执行它

      $(this).dequeue();

   });

   // 同上

   $("div").animate({left:‘-=200‘},5000);

   // 同上

   $("div").queue(function(){

      $(this).removeClass("newcolor");

   // 同上

      $(this).dequeue();

   });

   $("div").slideUp();

});

</script>

dequeue([queueName])

同上 队列名默认为 fx

// 移除 .queue()创建的队列并执行( kk )

// 从队列最前端移除一个队列函数,并执行他

clearQueue([queueName])

清空对象上尚未执行的队列

如果不带参数,则默认清空的是动画队列,这跟stop(true)类似,但stop()只能清空动画队列,而这个可以清空所有通过 .queue() 创建的队列

插件机制

$.fn.extend(object)

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

参数

object

用来扩充 jQuery 对象

// $.fn.extend 创建 jq 的对象

jQuery.fn.extend({

   // 属性为 check 例 $.check

   check: function() {

      return this.each(function() { this.checked = true; });

   },

   // 属性为 check 例 $.uncheck

   uncheck: function() {

      return this.each(function() { this.checked = false; }); 

   }

});

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

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

---------------------------------

jQuery.extend

// 增加函数

jQuery.extend({

  min: function(a, b) { return a < b ? a : b; },

  max: function(a, b) { return a > b ? a : b; }

});

$.min(a,b)

多库共存jQuery.noConflict([extreme])

运行这个函数将变量$的控制权让渡给第一个实现它的那个库

参数

剔除 jquery 中的 $ 将$引用的对象映射回原始的对象

jQuery.noConflict();

jquery 库只能用 jQuery 或者

var jq = jQuery