01、操作元素的屬性

$(function(){$("#but").click(function(){//獲得元素的對象var inp=$("#zh");//JQ獲得屬性 inp.attr("value")：獲得的默認的值console.log(inp.attr("type")+"----"+inp.attr("name")+"----"+inp.attr("value"));/* console.log(inp[0].type);//js方式獲得對象var inp2=document.getElementById("but");//獲得對象實時輸入的值console.log(inp.val());//操作元素對象屬性inp.attr("type","button");inp.attr("value","點擊");//綜合的方式 {key1:value1,key2:value2 }--json數據格式inp.attr({"type":"button","value":"點擊"});//checkedalert($("#man").attr("checked"));//true 一般作用到checked、disabled、selectedalert($("#man").prop("checked")); })})

02、操作元素的css樣式

//獲得div元素對象var div =$("#div1");//獲得元素對象的樣式console.log(div.css("width")+"---"+div.css("height"));//操作元素的樣式//[1]直接加樣式div.css("width","300px");div.css("height","300px");div.css("backgroundColor","red");//綜合的方式div.css({"width":"400px","height":"300px","backgroundColor":"red"});//[2]通過增加class屬性的方式添加css樣式 div.attr("class","div2");//只可以增加class屬性div.addClass("div2");//移除指定的class div.removeClass("div2")

03、操作元素的內容

//獲得div對象var div =$("#div1");//js== innerHTML --可以包含html內容var ht = div.html();//js== innerText ---只是包含純文本var te= div.text();console.log(ht);console.log(te);//可以實現累加div.html(div.html()+"<b>是一家很好的公司</b>"); //不會識別html內容div.text("<b>是一家很好的公司</b>");

04、操作元素的節點

//創建節點：var p =$("<p>List Item5</p>");// 內部--現有元素之后// $("#div1").html($("#div1").html()+"<p>List Item5</p>")$("#div1").append(p);-----√ // 內部---現有元素之前$("#div1").prepend(p);//外部 ---現有元素之前$("#div1").before(p); //外部---現有元素之后$("#div1").after(p);var div2=$("#div2"); var div1=$("#div1");$("#div1").append(div2);// 把指定的元素追加到對應元素內容中----現有元素之后$("#div2").appendTo(div1);$("#div1").prepend(div2);//把指定的元素追加到對應元素內容中----現有元素之前$("#div2").prependTo(div1);//移除整個div對象 $("#div1").remove(); //內容清空$("#div1").empty();

總結

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

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