jQuery使用总结 - Core jQuery Selectors 选择器一2/4

时间：2010-10-13 来源：2012

CSS基础

需要对CSS有初步的了解，如下是一些常见的举例，更深入的可以参考相关的资料

body,th,td body.fancy body.fancy h1	设置多个元素的风格
#pageContent	元素名pageContent的风格 <div id=” pageContent” …
img[src="example.jpg"]	使用css选择器设置特定的img元素风格
.rightCap	定义一个类别的风格 <div class=” rightCap” …

jQuery’s $() function

$作为一个命名空间的作用，可以算是jQuery的别名

var trimmed = $.trim(someString) 等同于var trimmed = jQuery.trim(someString);

基本选择器

CSS选择器属性选择器举例和说明

$(“a”)	Matches all anchor (<a>) elements
#specialID	Matches the element with the id value of specialID
.specialClass	Matches all elements with the class specialClass
a#specialID.specialClass	Matches the element with the id value specialID if it’s an anchor tag and has class specialClass
p a.specialClass	Matches all anchor elements with the class specialClass that are descendants of <p> elements
$('div,span')	select all <div> and all <span> elements

*	Matches any element.
E	Matches all elements with tag name E.
E F	Matches all elements with tag name F that are descendants of E.
E>F	Matches all elements with tag name F that are direct children of E.
E+F	Matches all elements with tag name F that are immediately preceded by sibling E.
E~F	Matches all elements with tag name F preceded by any sibling E.
E.C	Matches all elements with tag name E with class name C. Omitting E is the same as *.C.
E#I	Matches all elements with tag name E with the id of I. Omitting E is the same as *#I.
E[A]	Matches all elements with tag name E that have attribute A of any value.
E[A=V]	Matches all elements with tag name E that have attribute A whose value is exactly V.
E[A^=V]	Matches all elements with tag name E that have attribute A whose value starts with V.
E[A$=V]	Matches all elements with tag name E that have attribute A whose value ends with V.
E[A!=V]	Matches all elements with tag name E that have attribute A whose value doesn’t match the value V, or that lack attribute A completely.
E[A*=V]	Matches all elements with tag name E that have attribute A whose value contains V.

过滤器

There are a whole slew of these selectors, some defined by CSS, others specific to jQuery, and they can provide surprisingly elegant solutions to sometimes tough problems. The CSS specification refers to these types of selectors as pseudo-classes, but jQuery has adopted the crisper term filters, because each of these selectors filter a base selector. These filter selectors are easy to spot, as they all begin with the colon (:) character. And remember, if you omit any base selector, it defaults to *.

table#languages td:first-child

table#languages td:nth-child(1)

if we want to select only enabled and checked checkboxes, we could use

$(“:checkbox:checked:enabled”)

find which table row contains a particular image element that can be uniquely identified using its src attribute

$('tr:has(img[src$="puppy.png"]

选择的元素集合操作

var imgElement = $('img[alt]')[0]

$('p').add('<div>Hi there!</div>')

$('img').addClass('seeThrough').filter('[title*=dog]').addClass('thickBorder')

$('div').has('img[alt]')

$('img').each(function(n){

this.alt='This is image['+n+'] with an id of '+this.id;

});

$(this).closest('div')

函数有：

size get eq first last toArray index

add not filter slice has map each find is

jQuery chains

$('img').filter('[title]').hide();

The filter() method returns the set of titled images, but by calling end() we back up to the previous wrapped set (the original set of all images), which gets operated on by the addClass() method. Without the intervening end() method, addClass() would have operated on the set of clones.

$('img').filter('[title]').hide().end().addClass('anImage');

This statement selects all <div> elements, adds class a to them, creates a new wrapped set consisting of all <img> elements that are descendants of those <div> elements, applies class b to them, creates a third wrapped set that’s a merger of the <div> elements and their descendant <img> elements, and applies class c to them.

Whew! At the end of it all, the <div> elements end up with classes a and c, whereas

the images that are descendants of those elements are given classes b and c.