jq总结

时间:2022-02-07 03:20:31

总述

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 ] }