jQuery—頁面內容,樣式,控制屬性

twilight0402發表於2017-05-06

版權宣告:本文為博主原創文章,轉載請註明出處。 https://blog.csdn.net/twilight_karl/article/details/71249335

設定元素及內容

  • html() 獲取元素中的HTML內容(相當於innerHTML)
  • text() 獲取文字內容(自動清理HTML標籤)
  • html(value) 設定innerHTML的內容
  • text(value) 替換文字內容(覆蓋innerHTML中所有的文字和標籤)
  • val() 獲取value屬性,加屬性表示設定value的值
  • val([value,value]) 控制選中的元件

text() 會過濾掉標籤中的HTML標籤,text對於以下段落的處理結果是:

    <div id="a">
        <p>這是一個段落</p>
        <p>這是第二個段落</p>
        <p>這是第三個段落</p>
    </div>

這是一個段落 這是第二個段落 這是第三個段落

當val([“value”,”value2”,…]) 引數為陣列時,與value對應的表單元件會被選中

表單:
    <input type="checkbox" name="name" value="man">
    <input type="checkbox" name="name" value="women">
操作:
        $("input").val(["man","women"]);       // 兩個核取方塊都會被選中

PS: 當html() 和 text() 的引數帶有HTML標籤時,HTML會原封不動的輸出HTML標籤,而text()會將HTML標籤轉義後再輸出,所以text()輸出的是純文字,即使文字中有HTML標籤也會按照純文字輸出。

元素的屬性操作

  • attr(“屬性名”)
  • attr(“屬性名”,”屬性值”) 設定屬性值
  • attr({key:value,key:value}) 設定多個屬性
  • attr(“屬性值”,function(index,value){})value表示原來的value(如果沒有value則為undefined)
  • removeAttr(“屬性名”) 刪除屬性

同時設定多個屬性

        $("#input").attr({
            class:`a`,
            size:10
        });

通過匿名函式設定屬性值

        $("#input").attr(`value`,function(index,value){
                return index + value;
        });

以上方法都可使用匿名函式

CSS

  • css(“”) 獲取css樣式
  • css(“屬性名”,”屬性值”) 設定css樣式
  • css([“屬性名”,”屬性名”,…]) 返回包含所有屬性的物件(原生js物件)
  • css(“屬性名”,function(index,value){})
        var data = $("#a").css([`width`,`height`,`background-color`]);
        for(var i in data ){
            alert(data[i]);
        }

設定多個樣式:

    css({
    "屬性名":"屬性值""屬性名":"屬性值",
    })
        $("#a").css({
            "width":"200px",
            "height":"200px",
            "background-color":"green"
        });

each() 遍歷物件成員屬性

對於原生的js物件:
$.each(物件,function(樣式屬性名,屬性值){})

        $.each(data,function(a,b){
            alert(a+":"+b);
        });

對於jQuery物件:
$(“div”).each(function(index,element){}) element是DOM物件

        $("div").each(function(index,element){
            alert(index+element.innerHTML)
        });

toggleClass()

  • toggleClass(className) 預設樣式和指定樣式之間的切換
  • toggleClass(className,switch) 移除和新增指定的樣式
  • toggleClass([switch]) 移除和新增已有的所有樣式
  • toggleClass(function(){}) 匿名函式
  • toggleClass(function(index,className,switchBool){}) 匿名函式(形參名不能是關鍵字,否則會報錯)
  • addClass(“class1 class2 class3”);增加class
  • removeClass(“class1 class2”);

  • true: 切換為指定樣式

  • false: 切換為預設樣式

在指定樣式與預設樣式之間切換

        document.getElementById("a").onclick = function(){
                $("#a").toggleClass("red");
        };

下面的程式碼與上面的程式碼作用相同,用count計數切換的

        var count=0;
        $("#a").click(function(){
                $("#a").toggleClass("red",count++%2==0);
        });

實現在兩個樣式之間切換

        var count = 0 ;
        $("#a").click(function(){
            $(this).toggleClass("red" , count++ %2 == 0 );
            if($(this).hasClass(`red`)){
                $(this).removeClass(`green`);
            }else{
                $(this).toggleClass(`green`);
            }
        });

使用不帶引數的匿名函式

            $("div").click(function(){
                $(this).toggleClass(function(){
                    if($(this).index() % 2 == 0 ){
                        return "green";
                    } else {
                        return "red";
                    }
                })
            });

使用帶引數的匿名函式

            $(document).click(function(){
                $("div").toggleClass(function(index,className,switchBool){
                    if(index % 2 == 0 ){
                        return "green";
                    } else {
                        return "red";
                    }
                })
            });

PS:removeClass()中沒有帶任何引數,表示的是把指定元素中的所有類名移除


相關文章