1、JQuery選擇器之層級選擇器

選擇所有div元素里面的子元素P

?

$('div > p')

?選擇所有div元素里面的p元素

?

?

$('div p')

選取prev后面的第一個的div兄弟節點

?

?

$(".prev + div")

選取prev后面的所有的div兄弟節點

?

?

$(".prev ~ div")

2、JQuery選擇器之基本篩選選擇器

?

找到第一個div

?

$(".div:first")

找到最后一個div

?

?

$(".div:last")

選擇所引值為偶數的元素，從 0 開始計數

?

?

$(".div:even")

選擇所引值為奇數的元素，從 0 開始計數

?

?

$(".div:odd")

選擇單個

?

?

$(".aaron:eq(2)")

選擇匹配集合中所有索引值大于給定index參數的元素

?

?

$(".aaron:gt(3)")

選擇匹配集合中所有索引值小于給定index參數的元素

?

?

$(".aaron:lt(2)")

選中所有緊接著沒有checked屬性的input元素后的p元素，賦予顏色

?

$("input:not(checked)+p").css("background-color", "#CD00CD");

?

3、JQuery選擇器之內容篩選選擇器

?

查找所有class='div'中DOM元素中包含"contains"的元素節點

?

$(".div:contains(':contains')")

查找所有class='div'中DOM元素中包含"span"的元素節點

?

?

$(".div:has(span)")

選擇所有包含子元素或者文本的a元素

?

?

$("a:parent")

找到a元素下面的所有空節點(沒有子元素)

?

?

$("a:empty")

4、JQuery選擇器之可見性篩選選擇器

?

查找id = div1的DOM元素,是否可見

?

show($('#div1:visible'));

查找id = div1的DOM元素,是否隱藏

show( $('#div1:hidden'));

5、JQuery選擇器之屬性篩選選擇器

?

查找所有div中，屬性name=p1的div元素

?

$('div[name=p1]')

查找所有div中，有屬性p2的div元素

?

?

$('div[p2]')

查找所有div中，有屬性name中的值只包含一個連字符“-”的div元素

?

?

$('div[name|="-"]')

查找所有div中，有屬性name中的值包含一個連字符“空”和“a”的div元素

?

?

$('div[name~="a"]')

查找所有div中，屬性name的值是用i開頭的

?

?

$('div[name^=i]')

查找所有div中，屬性name的值是用i結尾的

?

?

$('div[name$=i]')

查找所有div中，有屬性name中的值包含一個test字符串的div元素

?

?

$('div[name*="test"]')

查找所有div中，有屬性testattr中的值沒有包含"true"的div

?

?

$('div[testattr!="true"]')

6、JQuery選擇器之子元素篩選選擇器

?

查找class="first-div"下的第一個a元素

$('.first-div a:first-child')

查找class="first-div"下的最后一個a元素

?

?

$('.first-div a:last-child')

查找class="first-div"下的只有一個子元素的a元素

?

?

$('.first-div a:only-child')

查找class="last-div"下的第二個a元素

?

?

$('.last-div a:nth-child(2)')

查找class="last-div"下的倒數第二個a元素

?

?

$('.last-div a:nth-last-child(2)')

7、JQuery選擇器之表單元素選擇器

?

查找所有 input, textarea, select 和 button 元素
?

$(':input')

匹配所有input元素中類型為text的input元素

?

?

$('input:text')

匹配所有input元素中類型為password的input元素

?

?

$('input:password')

匹配所有input元素中的單選按鈕,并選中
?

$('input:radio')

匹配所有input元素中的復選按鈕,并選中

?

?

$('input:checkbox')

匹配所有input元素中的提交的按鈕,修改背景顏色
?

$('input:submit')

匹配所有input元素中的圖像類型的元素
?

$('input:image')

匹配所有input元素中類型為file的元素

?

?

$('input:file')

匹配所有input元素中類型為按鈕的元素
?

?

$('input:button')

8、JQuery選擇器之表單對象屬性篩選選擇器

查找所有input所有可用的（未被禁用的元素）input元素。

$('input:enabled')

查找所有input所有不可用的（被禁用的元素）input元素。

?

$('input:disabled')

?

查找所有input所有勾選的元素(單選框,復選框)

$('input:checked')

查找所有option元素中,有selected屬性被選中的選項

$('option:selected')

9、JQuery屬性attr()

attr()有4個表達式
attr(傳入屬性名)：獲取屬性的值
attr(屬性名, 屬性值)：設置屬性的值
attr(屬性名,函數值)：設置屬性的函數值
attr(attributes)：給指定元素設置多個屬性值，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }

$("input:first").attr('value','aaa') $("input:eq(1)").attr('value') $("input:eq(2)").attr('value',function(i, val){return '通過function設置' + val}) $("input:eq(3)").removeAttr('value')

?

10、JQuery屬性之.html()和.text()

?

.html()方法?

獲取集合中第一個匹配元素的HTML內容 或 設置每一個匹配元素的html內容，具體有3種用法：

.html() 不傳入值，就是獲取集合中第一個匹配元素的HTML內容
.html( htmlString ) ?設置每一個匹配元素的html內容
.html( function(index, oldhtml) ) 用來返回設置HTML內容的一個函數

.text()方法

得到匹配元素集合中每個元素的文本內容結合，包括他們的后代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容。，具體有3種用法：

.text() 得到匹配元素集合中每個元素的合并文本，包括他們的后代
.text( textString ) 用于設置匹配元素內容的文本
.text( function(index, text) ) 用來返回設置文本內容的一個函數

?

?

?

顯示出獲取到的內容

$('p:first').html( $(".first-div").html() ) $('p:last').text( $(".first-div").text() )

替換文本內容

$(".left a:first").text('替換第一個a元素的內容') $(".left div:first").html('整個div的子節點都被替換了')

通過.text()的回調，獲取原本的內容，修改，在重新賦值

$(".left a:first").text(function(i,text){return '增加新的文本內容' + text})

?

11、JQuery屬性之val()

.val()方法

.val()無參數，獲取匹配的元素集合中第一個元素的當前值
.val( value )，設置匹配的元素集合中每個元素的值
.val( function ) ，一個用來返回設置值的函數

?

?

?

12、JQuery屬性之addClass()

?

?

.addClass( className )方法

.addClass( className ) : 為每個匹配元素所要增加的一個或多個樣式名

.addClass( function(index, currentClass) ) : 這個函數返回一個或更多用空格隔開的要增加的樣式名

?

.newClass{background: #bbffaa;} //class=left下div元素增加一個新的樣式，增加背景顏色$('.left div').addClass('newClass')

13、JQuery屬性之removeClass()

?

.removeClass( )方法

.removeClass( [className ] )：每個匹配元素移除的一個或多個用空格隔開的樣式名
.removeClass( function(index, class) ) ： 一個函數，返回一個或多個將要被移除的樣式名

//class=left下div元素刪除newClass樣式$('.left div').removeClass('newClass')

14、JQuery屬性之切換樣式toggleClass()

?

.toggleClass( )方法：在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類,取決于這個樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個類

.toggleClass( className )：在匹配的元素集合中的每個元素上用來切換的一個或多個（用空格隔開）樣式類名
.toggleClass( className, switch )：一個布爾值，用于判斷樣式是否應該被添加或移除;true，那么這個樣式類將被添加;false，那么這個樣式類將被移除
.toggleClass( [switch ] )：一個用來判斷樣式類添加還是移除的 布爾值

.toggleClass( function(index, class, switch) [, switch ] )：用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數。接收元素的索引位置和元素舊的樣式類作為參數

15、JQuery屬性之css()

.css() 方法：獲取元素樣式屬性的計算值或者設置元素的CSS屬性

獲取：

.css( propertyName ) ：獲取匹配元素集合中的第一個元素的樣式屬性的計算值
.css( propertyNames )：傳遞一組數組，返回一個對象結果
設置：

?.css(propertyName, value )：設置CSS
.css( propertyName, function )：可以傳入一個回調函數，返回取到對應的值進行處理
.css( properties )：可以傳一個對象，同時設置多個樣式

?

?

//background-color:blue; => rgb(0, 0, 255) //顏色都會轉化成統一的rgb標示 $('p:eq(0)').text( $('.first').css("background-color") ) //字體大小都會轉化成統px大小 em=>px $('p:eq(1)').text( $('.first').css("font-size") ) //獲取尺寸，傳入CSS屬性組成的一個數組 //{width: "60px", height: "60px"} var value = $('.first').css(['width','height']); //因為獲取的是一個對象，取到對應的值 $('p:eq(2)').text( 'widht:' + value.width + ' height:' +value.height )

?

//多種寫法設置顏色 $('.fourth').css("background-color","red") $('.fifth').css("backgroundColor","yellow") //多種寫法設置字體大小 $('.fourth').css("font-size","15px") $('.fifth').css("fontSize","0.9em")

?

//獲取到指定元素的寬度，在回調返回寬度值 //通過處理這個value，重新設置新的寬度 $('.sixth').css("width",function(index,value){ //value帶單位，先分解 value = value.split('px'); //返回一個新的值，在原有的值上，增加50px return (Number(value[0]) + 50) + value[1]; }) //合并設置,通過對象傳設置多個樣式 $('.seventh').css({'font-size' :"15px","background-color" :"#40E0D0","border" :"1px solid red"})

樣式的優先級：

css的樣式是有優先級的，當外部樣式、內部樣式和內聯樣式同一樣式規則同時應用于同一個元素的時候，優先級如下
外部樣式 < 內部樣式 < 內聯樣式
.addClass()方法是通過增加class名的方式，那么這個樣式是在外部文件或者內部樣式中先定義好的，等到需要的時候在附加到元素上
通過.css()方法處理的是內聯樣式，直接通過元素的style屬性附加到元素上的
通過.css方法設置的樣式屬性優先級要高于.addClass方法

?

?

?

16、JQuery元素數據存儲

jQuery提供的存儲接口

jQuery.data( element, key, value ) ? //靜態接口,存數據
jQuery.data( element, key ) ?//靜態接口,取數據 ??
.data( key, value ) //實例接口,存數據
.data( key ) //實例接口,存數據
2個方法在使用上存取都是通一個接口，傳遞元素，鍵值數據。在jQuery的官方文檔中，建議用.data()方法來代替。

?

<script type="text/javascript">$('.left').click(function() {var ele = $(this);//通過$.data方式設置數據$.data(ele, "a", "data test")$.data(ele, "b", {name : "胡"})//通過$.data方式取出數據var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").nameele.find('span').append(reset)})</script><script type="text/javascript">$('.right').click(function() {var ele = $(this);//通過.data方式設置數據ele.data("a", "data test")ele.data("b", {name: "說"})//通過.data方式取出數據var reset = ele.data("a") + "</br>" + ele.data("b").nameele.find('span').append(reset)})</script>

?

?

最近在整理一些資源工具，放在網站分享?http://tools.maqway.com
歡迎關注公眾號：麻雀唯伊 ， 不定時更新資源文章，生活優惠，或許有你想看的

?

?

?

總結

以上是生活随笔為你收集整理的JQuery样式的全部內容，希望文章能夠幫你解決所遇到的問題。

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