jQuery操作dom元素

jQuery操作dom元素

1.操作元素的屬性
attr(),prop() 　　　獲取或者設置元素的屬性值
attr():

	$("input[type='button']").attr("value","按鈕1");//設置button的value值爲按鈕1
	console.log( $("input[type='button']").attr("value"));//獲取button的value值

prop():

	$("input[type='button']").prop("value","按鈕1");//設置button的value值爲按鈕1
    console.log( $("input[type='button']").prop("value"));//獲取button的value值

區別：在對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
而對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。
官方建議使用:

刪除元素的屬性

 	 $("input[type='button']").removeAttr("data-src");
 	 $("input[type='button']").removeProp("data-src");//只能刪除自定義屬性
     console.log(btn.attr("data-src"));

元素內容的操作

	$("#block").html("熱");//設置文本內容
    $("#block").text("熱");//設置其中所有內容，相當於設置了innerHTML
    
	console.log($("#block").html());//獲取它的html
    console.log($("#block").text());//獲取它的文本值

操作表單元素的值val()

	$("#txt").val("12345");//設置值
    console.log($("#txt").val());//獲取值

操作dom元素的css css()

	$("#txt").css("borderColor", "#090a0a");//設置css樣式
    var color = $("#txt").css("borderColor");//獲取樣式，輸出的顏色值，一般爲16進制

	顏色名稱和16進制的轉換
	var col = (function (c) {
        var a = c.split(",");
        var r = parseInt(a[0].split("(")[1]);
        var g = parseInt(a[1]);
        var b = parseInt(a[2].split(")")[0]);
        //#690a0a   16位置   rgb  r:69 g:0a b:0a
        return "#" + ((r << 16) + (g << 8) + b).toString(16);
    })(color);
    console.log(col);
	
	同時設置多個css樣式
	$("#txt").css({
        width: "",
        height: ""
    });

類名稱的添加，追加名稱

 	$("#btn").addClass("btninfo");
    $("#btn").addClass("btninfo btnlist");  /*添加多個類*/
    $("#btn").removeClass("btndata btnlist");  /*移除類名稱*/
  	$("#btn").removeClass();   /*全部移除*/
    $("#btn").toggleClass("btndata"); /*類的切換 toggleClass() 從有到無，從無到有*/

jquery操作子父節點的問題

 	console.log($("ul").children()[0]);//後面加方括號，可轉換爲dom方法
    console.log($("ul>li").first());//第一個
    console.log($("ul>li").last());//最後一個
    console.log($("ul>li").eq(0));
  	console.log($("ul>li").first().siblings(".lilist")); /*找同胞元素*/

  	console.log($("ul>li").eq(1).prev());//找當前元素的前一個元素
    console.log($("ul>li").eq(2).prevAll("li"));//前面的所有
   	console.log($("ul>li").eq(1).next()); //找當前元素的下一個元素
    console.log($("ul>li").eq(1).nextAll("span"));

   console.log($("ul>li").filter(".lidata")) /*filter() 過濾元素*/
   console.log($("ul>li").eq(0).is(".lilist")); /*is() 判斷當前對象是不是*/

尺寸問題

	console.log($("body").width());//可視區域
    console.log($("body").innerWidth());//可視區域和內邊距 padding
    console.log($("body").outerWidth());//內邊框和邊框