高级jquery常用用法总结..docVIP

0、总述 jQuery框架提供了很多方法，但大致上可以分为3大类：获取jQuery对象的方法、在jQuery对象间跳转的方法，以及获取jQuery对象后调用的方法 其中第一步是怎样获取jQuery对象。大致来说，是通过最核心的$()方法，将页面上的元素(或者在页面上不存在的html片段)包装成jQuery对象。 $()方法里面支持的语法又包括3大类，分别是表达式(包括类表达式.，id表达式#，元素表达式等)、符号(包括后代符号space，next符号+等)、过滤器(包括:过滤器和[]过滤器)。 通过以上3种的组合，“查询”得到想要操作的元素或者元素集合，作为$()的参数，得到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为准 1、$(...) $() 一切的核心，可以跟4种参数 $(expression)，比如$(#id)、$(.class)等，返回jQuery对象，或者jQuery对象的集合 $(html)，比如$(spanhello world/span)，返回jQuery对象，或者jQuery对象的集合 $(element)，比如$(document.body)，返回jQuery对象，或者jQuery对象的集合 $(*)，所有元素 2、jQuery Object Accessors jQuery.index(element)，返回该jQuery对象在集合中的索引 jQuery.each(function)，遍历jQuery对象集合，在每个对象上执行function函数，function callback(index, domElement){this}; jQuery.size()，返回jQuery对象集合的大小 jQuery.length，相当于size()方法 jQuery.get()，获取原生DomElement对象的Array jQuery.get(index)，获取原生DomElement对象 jQuery.eq(position)，获取jQuery对象集合中的一个jQuery对象 3、Data相关方法 jQuery.data(name) jQuery.data(name, value) jQuery.removeData(name) 4、选择符 multiple(selector1, selector2)，可以选择多个元素或者表达式，包装成jQuery对象的集合 例子：$(div,span) id(id) 例子：$(#id) class(class) 例子：$(.class) element(element) 例子：$(div) all 例子：$(*) descendant 例子：$(table tr td) child(parent, child) 例子：$(#id span)，和上一个descendant的区别在于，descendant只要是后代就会被选中，而child必须是直接子节点，不包括孙子节点 next(prev, next) 例子：$(label + input)，选中的是label标签的下一个input标签，返回jQuery对象的集合 siblings(prev, siblings) 例子：$(#prev ~ div)，选中的是#prev之后的所有div标签，返回jQuery对象的集合，有点像next，但是范围更大 Basic Filters $(:header)，选中所有header，包括h1h2等 $(tr:odd)，选中所有奇数行 $(tr:even)，选中所有偶数