1、css選擇器
e
#id
e.classname
e1,e2,e3
e f
*
2、jquery選擇器1、基本選擇器
通過元素id、class和標籤名等來查詢dom元素。
下面舉個例子簡單說明。
先簡單設計乙個頁面,包含一些和
元素,html**如下:
id="one">id為one的div塊div>
class="two">class為two的div塊div>
class="three">class為three的spandiv>
span元素
再新增一些簡單的css樣式,css**如下:
div, span
頁面效果如下:
再使用選擇器來匹配元素並調整它們的樣式,**如下:
//改變id為one的所有元素的背景色
$("#one").css("background","green");
//改變class為two的所有元素的背景色
$(".two").css("background","blue");
//改變元素名為的所有元素的背景色
$("span").css("background","yellow");
//改變所有元素的字型
$("*").css("font-size","20px");
//改變所有元素和id為three的元素的高度
2、層次選擇器
通過dom元素之間的層次關係來獲取特定元素,比如後代元素、子元素、相鄰元素和同輩元素等。
再舉乙個例子。
先給出html**,如下:
id="one"
class="one">
id為one,class為one的div
class="mini">class為mini的div
div>
p元素div>
id="two"
class="two">
id為two,class為two的div
class="mini" title="1">class為mini,title為1的div
div>
class="mini" title="2">class為mini,title為2的div
div>
p元素div>
id="three"
class="three">
id為three,class為three的div
class="mini">class為mini的div
div>
div>
span元素
p元素id="four"
class="four">
id為four,class為four的div
p元素div>
id="mover">正在執行動畫的span元素
再給出css樣式,如下:
div, span, .mini, p
div, span
.mini
p
為
元素新增動畫效果:
再使用選擇器,**如下:
//改變內所有的背景色
$("div p").css('background', '#bbffaa');
//改變內子元素的背景色
$("body span").css('background', '#aabbcc');
//改變class為one的下乙個同輩元素的背景色
$(".one + div").css('background', '#777777');
//改變id為two的元素後面的所有同輩元素的背景色
一 JQuery選擇器
1 基本選擇器 id 根據給定的id匹配乙個元素 class 根據給定的類名匹配元素 element 根據給定的元素名匹配元素 匹配所有元素 selector1,selector2,selectorn 將每乙個選擇器匹配到的元素合併後一起返回 2 層次選擇器 ancestor descendant ...
jQuery選擇器 一
選擇器是 jquery 的根基,在 jquery 中,對事件處理,遍歷 dom 和 ajax 操作都依賴於選擇器 jquery選擇器的優點 1 簡潔的寫法 id 2 完善的事件處理機制 若在網頁中,沒有id為 id 的元素,瀏覽器會報錯 需要先判斷document.getelementbyid id...
jQuery選擇器(一)
id siblings 當前元素所有的兄弟節點 id prev 當前元素前乙個兄弟節點 id next 當前元素之後第乙個兄弟節點 id nextall 當前元素之後所有的兄弟節點 id prevall 當前元素之前所有的兄弟節點 id nextall 當前元素之後所有的兄弟節點 返回值 匹配元素 ...