追求卓越一諾千金

藍藍設計_-移动3g网络覆盖查询,2011年成立_--联众好友在线下载,主創清華團隊__|青白江攀成钢,專注軟件和互聯網ui設計開發|_诗恩芙。擅長企業信息化管理||至尊app官方下载、監控_|-360彩票双色球杀号定胆、大數據軟件UIUE谘詢和設計開發服務-|-闪聚。立足UI|_|惠普5200打印机驱动,好好學習|_|金傲根,天天進步_-极品公子混在校园!


JQuery中的DOM操作(1)

2019-5-24 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容||-铜仁市人民政府网,每天自動發到您的郵箱中_-东方热线测网速, 請點這裏

DOM樹

                                 

    在訪問頁麵時国世平本人新浪博客,需要與頁麵中的元素進行交互式的操作-歌手半决赛排名。在操作中_|-13彩下载,元素的訪問是最頻繁芦苞祖庙、最常用的_|易旺彩票彩种百度,主要包括對元素屬性-南宁私家车930、內容_--链家司歌、值CSS的操作--江苏阜宁龙卷风。

一|--35彩票官方、操作元素的屬性

attr()   prop() 獲取或設置元素的屬性值

兩者區別|093彩票软件100:簡單來說_-_云顶娱乐彩票注册,對於HTML元素本身就帶有的固有屬性_|十堰物流云帆在哪,在處理時__深圳山寨手机批发,使用prop方法___里程碑3怎么样。對於HTML元素我們自己自定義的DOM屬性___青海卫视直播,在處理時_--铁粉吧,使用attr方法---致富彩票主页。

針對屬性對象不同

prop( )是針對Dom元素屬性---11086移动彩票APP,attr( )針對HTML元素屬性--_移动彩票官11086,和attribute與property區別一樣|_易彩集团能提现吗。

用於設置的屬性值類型不同

attr()函數操作的是文檔節點的屬性__078彩票,因此設置的屬性值隻能是字符串類型|_四丁基硫酸氢铵,如果不是字符串類型|_-水族之家zadull,也會調用其toString()方法||两朝太岁,將其轉為字符串類型_晋城五个人图片。

prop()函數操作的是JS對象的屬性|_静安外国语小学,因此設置的屬性值可以為包括數組和對象在內的任意類型|-青苹果论坛。

應用版本不同

attr()是jQuery 1.0版本就有的函數||电影频道6,prop()是jQuery 1.6版本新增的函數-|195倍彩票。毫無疑問|__众信彩票官网提不了款,在1.6之前--320彩票,你隻能使用attr()函數_|106苹果版本;1.6及以後版本--康熙与太子妃高h,你可以根據實際需要選擇對應的函數-_有约鞋批发网。

其他不同

對於表單元素的checked_||挠脚心漫画、selected__金宝贝取名网、disabled等屬性|||好听的行会名,Attr()方法拿不到值_-|欢乐白领,請使用prop()函數來設置或獲取checked|_|抓住偷水贼、selected-_|1227次列车时刻表、disabled等屬性|2019最新捕鱼游戏排行。對於其它能夠用prop()實現的操作_-2M全年彩图,也盡量使用prop()函數_-|英特尔e5300。如下圖代碼_|-苏州联建:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="button" id="btn1" value="按鈕">
<input type="button" id="btn2" value="按鈕">
<script>
    //操作元素的屬性
    //attr() prop()獲取或設置元素的屬性值
    $("#btn1").attr("value","按鈕1");//將#btn1的value值改為按鈕1
    $("#btn1").prop("value","按鈕2");//將#btn1的value值改為按鈕2
    console.log( $("input[type='button']").prop("value"));//獲取#btn1的value值,輸出為按鈕2
    console.log($("#btn2").attr("value"));//獲取#btn1的value值,輸出為按鈕
    //設置多個屬性值
    $("input[type='button']").prop({
        width:"200px",
        value:"hello"
    });//同時設置寬度為100px,value值為hello
    //根據輸出結果-|-礼物地带,width值設置失敗||道光二十五酒价格,value值設置成功
    console.log($("input[type='button']").prop("width"));//0
    console.log($("input[type='button']").attr("width"));//0
    $("input[type='button']").attr({
        width:"200px",
        value:"HELLO"
    })//同時設置寬度為200px,value值為HELLO
    //根據輸出結果可以看到--_史酷比古墓逃生,width和value均設置成功
    console.log($("input[type='button']").prop("width"));//0
    console.log($("input[type='button']").attr("width"));//200px
 
//    var btn=$("input[type='button']");
//    btn.attr("data-src","pink");
//    console.log(btn.attr("data-src"));//pink
//    console.log(btn.prop("data-src"));//undefined
    
    
    var btn=$("input[type='button']");
    btn.prop("data-src","pink");
    console.log(btn.attr("data-src"));//undefined
    console.log(btn.prop("data-src"));//pink
 
</script>
二-111彩票应用、刪除元素的屬性

removeAttr( name ) ,其中name為元素屬性的名稱

removeProp( name ) ,其中name為元素屬性的名稱

 

三_-注册彩票网站怎么注册、元素內容的操作

在JQuery中|舜辉,操作元素內容的方法包括html( )和text( )-__云鼎国际娱乐。前者與JavaScript中的innerHTML屬性類似|_荷甲积分榜,即獲取或設置元素的HTML內容-308k玄机料玄机图;後者類似於JavaScript中的innerText屬性|__000712,即獲取或設置元素的文本內容_-铁哥们助手。區別如下_-国培总结:

語法格式 參數說明 功能描述
html() 無參數 用於獲取元素的HTML內容
html(val) val參數為元素的HTML內容 用於設置元素的HTML內容
text() 無參數 用於獲取元素 的文本內容
text(val) val參數為元素的文本內容 用於設置元素的文本內容
<script>
    //js中的寫法 innerHTML  innerText
    var sd=document.getElementById("block");
    sd.innerText="小貓吃魚";
    console.log(sd.innerHTML);//小貓吃魚
    console.log(sd.innerText);//小貓吃魚
//    //jquery  html()  text() 和js一致  獲取或設置元素的html值或文本值
    console.log($("#block").html());//小貓吃魚
    console.log($("#block").text());//小貓吃魚
    $("#block").text("小貓抓老鼠");//修改innerText內容
    console.log($("#block").html());//小貓抓老鼠
    console.log($("#block").text());//小貓抓老鼠
    $("#block").html("小貓吃肉肉");//修改innerHTML內容
    console.log($("#block").html());//小貓吃肉肉
    console.log($("#block").text());//小貓吃肉肉
</script>
四_|2k彩票、操作表單元素的值

val()   獲取或設置表單元素的value值

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="text" id="txt" value="請輸入...">
<script>
    console.log( $("#txt").val());// 獲取#txt的value值  輸出為__|臧老爷子:請輸入...
    $("#txt").val("12345");//修改#txt的value值為12345
    console.log( $("#txt").val());//12345
</script>
</body>
</html>
五___永城彩票网、元素樣式的操作

1.直接設置元素樣式值

在JQuery中|_玫琳凯订单网,通過css()方法為某個指定的元素設置樣式值||_云顶彩票送45,語法格式如下||乐都信息港:

css(name,value) ,其中name為樣式名稱|辉县天气2345,value為樣式的值

css()可以設置樣式也可以獲取樣式



2.增加CSS類別

通過addClass()方法增加元素類別的名稱--掌上彩票pro网络异常,語法格式如下--qq2009下载:

addClass(class) ,其中參數class為類名稱_-|金山区财政局,可以同時增加多個-元寸灸,用空格隔開即可-|-赢彩网是正规网站吗,如addClass(class0 class1 class2 ...)

3.刪除CSS類別

與addClass()方法相對應__高三毕业班主任寄语,removeClass()方法用於刪除類別--铁路狂奔,語法格式與addClass()相同_|_爱唯侦察论坛最新网址,如果不設定參數--万圣节死亡之旅,則刪除元素中的所有類名稱

4.類別切換

通過toggleClass()方法切換不同的元素類別|_花儿乐队演唱会高清,語法格式如下:

toggleClass(class) ,其中參數class為類別名稱_|观澜富士康单身交友,其功能是當元素中含有名稱為class的CSS類別時-||105彩票怎么玩,刪除該類別||-辽宁都市频道直播,若沒有-_天天热播网,則增加該類別

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn" class="btndata">按鈕</button>
<script>
    $("#btn").addClass("btn1");//追加一個類名稱
    $("#btn").addClass("btn2 btn3");//追加多個類名稱
    $("#btn").removeClass("btn2 btn1");//移除類名稱
    $("#btn").removeClass();//移除所有類名稱
    $("#btn").toggleClass("btn1");//類的切換 toggleClass()  如果有類名稱則替換  如果沒有就添加
</script>
</body>
</html>
六-赢彩网下载app、jquery操作子父節點

children()  找父元素裏麵的子節點

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<ul>
    <li class="lilist">1</li>
    <li class="lidata">2</li>
    <span>6</span>
    <li class="lilist">3</li>
    <span>5</span>
    <li class="lilist">4</li>
    <span>7</span>
</ul>
<script>
        console.log($("ul").children());//輸出ul 下的所有子節點
        console.log($("ul").children()[0]);//輸出ul下索引為0的子節點
        console.log($("ul>li").first());//輸出ul裏麵第一個li
        console.log($("ul>li").last());//輸出ul裏麵最後一個li
        console.log($("ul>li").eq(2));//eq()  根據索引找元素
        console.log($("ul>li").first().siblings(".lilist"));//找同胞元素  輸出和first()相同類名稱的元素
        console.log($("ul>li").eq(1).prev());//找當前元素的前一個元素
        console.log($("ul>li").eq(2).prevAll("span"));//當前元素前麵的所有指定元素
        console.log($("ul>li").eq(2).prevAll());//當前元素前麵的所有元素
        console.log($("ul>li").eq(1).next());//找當前元素的下一個元素
        console.log($("ul>li").eq(1).nextAll("li"));//當前元素後麵的所有指定元素
        console.log($("ul>li").eq(1).nextAll());//當前元素後麵的所有元素
        console.log($("ul>li").eq(0).is(".qq"));//is() 判斷當前對象是誰  輸出true  or  false  當前元素與類名稱相符  輸出true
</script>
</body>
</html>
七_|长沙口碑网、JQuery中的尺寸問題

下麵以高度為例進行說明

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <style>
       .ss{
           width: 200px;
           height: 200px;
           margin: 10px 10px;
           padding: 20px 20px;
       }
    </style>
</head>
<body>
<div class="ss"></div>
<script>
        console.log($(".ss").height());//200  可視區域  不包括內外邊距 
        console.log($(".ss").innerHeight());//240  包括內邊距的距離  
        console.log($(".ss").outerHeight());//240  包括內邊距的距離
</script>
</body>
</html>
藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|_现代科技成就的例子,為期望卓越的國內外企業提供卓越的UI界麵設計--|致青春qvod、BS界麵設計 |||舌苔生绒毛、 cs界麵設計 |_童鞋订货会、 ipad界麵設計 _-初中物理实验总结、 包裝設計 ---沈阳调料批发市场、 圖標定製 _-马向东、 用戶體驗 -|永胜国际骗局、交互設計__成都天府新区规划图、 網站建設 -|空间留言代码爱情、平麵設計服務--极地海洋世界门票。

標簽: JQuery中的DOM操作(1) « 根據輸入實時發送請求(防抖函數) | vue-router的兩種模式的區別»


訂閱Rss