jq总结
总述
jQuery 框架提供了很多方法,但大致上可以分为3 大类:
- 获取jQuery 对象的方法
- 在jQuery 对象间跳转的方法
- 获取jQuery 对象后调用的方法
获取 jQuery 对象
是怎样获取jQuery 对象。大致来说,是通过最核心的$()
方法,将页面上的元素(或者在页面上不存在的 html 片段)包装成 jQuery 对象。$()方法
里面支持的语法又包括:
- 分别是表达式(包括类表达式.,id 表达式#,元素表达式等)
- 符号(包括后代符号space,next 符号+等)
- 过滤器(包括:过滤器和[]过滤器)
- 现在显然还有更多
通过以上组合,通过选择器 $()
可”查询“得到 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 ] }