jq总结

标签：

总述

jQuery 框架提供了很多方法，但大致上可以分为3 大类：

1. 获取jQuery 对象的方法
2. 在jQuery 对象间跳转的方法
3. 获取jQuery 对象后调用的方法

获取 jQuery 对象

是怎样获取jQuery 对象。大致来说，是通过最核心的$()方法，将页面上的元素（或者在页面上不存在的 html 片段）包装成 jQuery 对象。
$()方法里面支持的语法又包括：

1. 分别是表达式（包括类表达式.，id 表达式#，元素表达式等）
2. 符号（包括后代符号space，next 符号+等)
3. 过滤器（包括:过滤器和[]过滤器）
4. 现在显然还有更多

通过以上组合，通过选择器 $() 可”查询“得到 jQuery 对象（或者jQuery 对象的集合）。

对象跳转

是在jQuery 对象间的跳转。也就是说，已经得到了一个jQuery 对象，但并不是想要的，那么可以通过一系列的跳转方法，比如parent()、next()、children()、find()等，或者过滤筛选的方法，比如eq、filter()、not()等，来得到最终想要操作的jQuery 对象。

用跳转和过滤方式得到的jQuery 结果，往往通过比较复杂的表达式组合，可以达到同样的目的。
比如说 $("div").eq(3)，也可以用$("div:eq(3)") 达到同样的目的。
又比如说$("div").find("span")，可以用$("div span")取到同样的元素。
方法是很灵活的，要根据具体的情况来选择。根据经验来说，HTML 页面写得越规范，使用 jQuery 就越简单。

还有一种情况，在得到了jQuery()对象之后，想要判断其是否满足条件，那么可以调用 is()、hasClass()等方法，返回一个boolean 值，进行后续的判断。这类方法也可以归到这类。

方法调用

在获取准确的 jQuery 对象之后，调用其上的各种方法，来进行操作。这一步反而是比较简单的了。
后面就是对 jQuery 框架各种方法的简要介绍。

常用API

$(…);

/**
 *  一切的核心，可以跟4 种参数。
 */
$();

/**
 *  返回jQuery 对象或者jQuery 对象的集合
 *  比如$("#id")、$(".class")
 */
$(expression);

/**
 *  返回jQuery 对象，或者jQuery 对象的集合
 *  比如$("<span>hello world</span>")
 */
$(html)

/**
 *  返回jQuery 对象，或者jQuery 对象的集合
 *  比如$(document.body)
 */
$(element)

/**
 *  所有元素
 */
$(*)

jQuery 对象获取

/**
 *  返回该jQuery 对象在集合中的索引
 */
jQuery.index(element);

/**
 *  遍历jQuery 对象集合，在每个对象上执行 callback 函数，
 *  function callback(index, domElement){
 *    this //DOMElement
 *  };
 */
jQuery.each(function);

/**
 *  返回 jQuery 对象集合的大小
 */
jQuery.size();

/**
 *  相当于size()方法
 */
jQuery.length

/**
 *  获取原生 DomElement 对象的 Array,
 *  即将 jQuery 对象转成 数组对象，
 *  虽然 jQuery 对象也有 length 属性，且可用下标读写
 *  但并非是数组对象。
 */
jQuery.get()

/**
 *  获取原生 DomElement 对象
 */
jQuery.get(index)

/**
 *  获取 jQuery 对象集合中的一个 jQuery 对象
 */
jQuery.eq(position)

Data 相关方法

在匹配的元素身上存值(store data)， .data() 方法允许在我们以一种安全的方式附加数据到 dom 元素，不会产生循环引用和内存泄露。

jQuery.data(name)        // 取值
jQuery.data(name, value) // 赋值
jQuery.removeData(name)  // 清理

$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
$( "body" ).data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

jq总结

标签：

原文地址：http://www.cnblogs.com/jiechen/p/4708670.html