js dom根據 id name的一些操做

一、獲取和設置樣式

1 2	$("#tow").attr("class")//獲取ID爲tow的class屬性 $("#two").attr("class","divClass")//設置Id爲two的class屬性。

二、追加樣式

複製代碼代碼以下:

$("#two").addClass("divClass2")//爲ID爲two的對象追加樣式divClass2

 

三、移除樣式

1 2	$("#two").removeClass("divClass")//移除 ID爲two的對象的class名爲divClass的樣式。 $(#two).removeClass("divClass divClass2")//移除多個樣式。

四、切換類名

複製代碼代碼以下:

$("#two").toggleClass("anotherClass") //重複切換anotherClass樣式

 

五、判斷是否含有某項樣式

複製代碼代碼以下:

$("#two").hasClass("another")==$("#two").is(".another");

 

六、獲取css樣式中的樣式

複製代碼代碼以下:

$("div").css("color")//設置color屬性值. $(element).css(style)

 

設置單個樣式

複製代碼代碼以下:

$("div").css("color","red")

 

設置多個樣式

1 2 3

$("div").css({fontSize:"30px",color:"red"}) $("div").css("height","30px")==$("div").height("30px") $("div").css("width","30px")==$("div").height("30px")

7.offset()方法

它的做用是獲取元素在當前視窗的相對偏移，其中返回對象包含兩個屬性,即top和left 。

注意：只對可見元素有效。

1 2 3

var offset=$("div").offset(); var left=offset.left; //獲取左偏移 var top=offset.top; //獲取右偏移

八、position()方法

它的做用是獲取元素相對於最近的一個position樣式屬性設置爲relative或者absolute的祖父節點的相對偏移，與offset()同樣，它返回的對象也包括兩個屬性即top和left。

九、scrollTop()方法和scrollLeft()方法

1 2	$("div").scrollTop(); //獲取元素的滾動條距頂端的距離。 $("div").scrollLeft(); //獲取元素的滾動條距左側的距離。

十、jQuery中的 toggle和slideToggle 方法，均可以實現對一個元素的顯示和隱藏。區別是：

toggle：動態效果爲從右至左。橫向動做。
slideToggle：動態效果從下至上。豎向動做。

好比想實現一個樹由下至上收縮的動態效果，就使用slideToggle就ok了。

1 2 3 4

$('input').attr("readonly",true)//將input元素設置爲readonly $('input').attr("readonly",false)//去除input元素的readonly屬性 $('input').attr("disabled",true)//將input元素設置爲disabled $('input').attr("disabled",false)//去除input元素的disabled屬性

 

 

一、jquery獲取的例子

如何經過jquery查出ID以jq_開頭，以二、4結束的元素？
<div id="jq_1">
<div id="jq_2">
<div id="sdf">
<div id="jq_3">
<div id="jq_4">

 

如何經過jquery查出ID以jq_開頭，以二、4結束的元素

二、使用bootstrap時間控件時  根據name或id找到元素

  <input type="text" name="wcrq" id="wcrqTime" data-date-format="yyyy-mm-dd"  class="form-control">
$("input[name$='Time']")  獲取input中name以Time結尾的
$("input[id*='Time']") 獲取input中id以Time結尾的

三、

^開頭
表示 name 以 ?????開頭的
相似的還有
$ 結尾
* 包含
! 不等於

四、判斷bootstrap tab標籤頁 哪一個顯示

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#TYYW" data-toggle="tab">頁面1</a>
    </li>
    <li>
        <a href="#notTYYW" data-toggle="tab">頁面2</a>
    </li>
</ul>

function 方法名(){
        var tab=$("#myTab li[class='active'] a").text();
    console.info(tab)

    if (tab=='頁面1')
    {
//Tab頁面1時執行                
    }
    if(tab=='頁面2')
        {
//Tab頁面2時執行
        }


}