jQuery 操作元素
生活随笔
收集整理的這篇文章主要介紹了
jQuery 操作元素
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
01、操作元素的屬性
$(function(){$("#but").click(function(){//獲得元素的對(duì)象var inp=$("#zh");//JQ獲得屬性 inp.attr("value"):獲得的默認(rèn)的值console.log(inp.attr("type")+"----"+inp.attr("name")+"----"+inp.attr("value"));/* console.log(inp[0].type);//js方式獲得對(duì)象var inp2=document.getElementById("but");//獲得對(duì)象實(shí)時(shí)輸入的值console.log(inp.val());//操作元素對(duì)象屬性inp.attr("type","button");inp.attr("value","點(diǎn)擊");//綜合的方式 {key1:value1,key2:value2 }--json數(shù)據(jù)格式inp.attr({"type":"button","value":"點(diǎn)擊"});//checkedalert($("#man").attr("checked"));//true 一般作用到checked、disabled、selectedalert($("#man").prop("checked")); })})02、操作元素的css樣式
//獲得div元素對(duì)象var div =$("#div1");//獲得元素對(duì)象的樣式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、操作元素的內(nèi)容
//獲得div對(duì)象var div =$("#div1");//js== innerHTML --可以包含html內(nèi)容var ht = div.html();//js== innerText ---只是包含純文本var te= div.text();console.log(ht);console.log(te);//可以實(shí)現(xiàn)累加div.html(div.html()+"<b>是一家很好的公司</b>"); //不會(huì)識(shí)別html內(nèi)容div.text("<b>是一家很好的公司</b>");04、操作元素的節(jié)點(diǎn)
//創(chuàng)建節(jié)點(diǎn):var p =$("<p>List Item5</p>");// 內(nèi)部--現(xiàn)有元素之后// $("#div1").html($("#div1").html()+"<p>List Item5</p>")$("#div1").append(p);-----√ // 內(nèi)部---現(xiàn)有元素之前$("#div1").prepend(p);//外部 ---現(xiàn)有元素之前$("#div1").before(p); //外部---現(xiàn)有元素之后$("#div1").after(p);var div2=$("#div2"); var div1=$("#div1");$("#div1").append(div2);// 把指定的元素追加到對(duì)應(yīng)元素內(nèi)容中----現(xiàn)有元素之后$("#div2").appendTo(div1);$("#div1").prepend(div2);//把指定的元素追加到對(duì)應(yīng)元素內(nèi)容中----現(xiàn)有元素之前$("#div2").prependTo(div1);//移除整個(gè)div對(duì)象 $("#div1").remove(); //內(nèi)容清空$("#div1").empty();總結(jié)
以上是生活随笔為你收集整理的jQuery 操作元素的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JQuery $作用
- 下一篇: JQuery 表单校验