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.

轉載于:https://www.cnblogs.com/2018/archive/2010/10/13/1849981.html

總結

以上是生活随笔為你收集整理的jQuery使用总结 - Core jQuery Selectors 选择器一2/4的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。