JQuery中的DOM操作(1)

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

如果您想訂閱本博客內容-|_优彩娱乐平台是真的吗,每天自動發到您的郵箱中-|国世平本人新浪博客, 請點這裏

DOM樹

                                 

    在訪問頁麵時|-妙巢正品,需要與頁麵中的元素進行交互式的操作-_买多网加盟。在操作中-|-爱肺金雪茄,元素的訪問是最頻繁_-羽西积分查询、最常用的_1010彩票安卓,主要包括對元素屬性|-易旺彩票网是真的吗、內容_汤唯在韩国视频、值CSS的操作||虞城教育网。

一|青银高速地图、操作元素的屬性

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

兩者區別_星岛田阳子:簡單來說-勇士vs步行者,對於HTML元素本身就帶有的固有屬性--重庆新闻联播主持人,在處理時_-_金宝贝取名网,使用prop方法_云顶国际网页不见了。對於HTML元素我們自己自定義的DOM屬性|众发彩票分快三,在處理時--众发国际娱乐网,使用attr方法|-_仙剑五破解补丁。

針對屬性對象不同

prop( )是針對Dom元素屬性__曼联正品球衣,attr( )針對HTML元素屬性_清东陵门票,和attribute與property區別一樣||众赢彩票的骗局。

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

attr()函數操作的是文檔節點的屬性_-_lightroom3 6序列号,因此設置的屬性值隻能是字符串類型-_利玛窦是哪国人,如果不是字符串類型_钱王美庐,也會調用其toString()方法_|什么的枝条,將其轉為字符串類型_||开店程序。

prop()函數操作的是JS對象的屬性--叶彤倩,因此設置的屬性值可以為包括數組和對象在內的任意類型|-44444。

應用版本不同

attr()是jQuery 1.0版本就有的函數-|-466耳鼻喉科,prop()是jQuery 1.6版本新增的函數|_疯狂猜成语两个女人。毫無疑問-|_国际航班实时查询,在1.6之前mellow高敏爱,你隻能使用attr()函數|2019年买马生肖对照表;1.6及以後版本--河北职称信息管理系统,你可以根據實際需要選擇對應的函數_赢彩彩票软件是假的吗。

其他不同

對於表單元素的checked||_实名注册和防沉迷系统、selected|_秦皇岛高中排名、disabled等屬性|_联欢会策划,Attr()方法拿不到值|-娱乐彩票注册送彩金,請使用prop()函數來設置或獲取checked|亿发彩票下载、selected_|038彩票app是正规的吗、disabled等屬性-_|北京466耳鼻咽喉医院。對於其它能夠用prop()實現的操作|小爸爸姗姗结局,也盡量使用prop()函數_-138彩票网站是正规的吗。如下圖代碼众博棋牌下载安装官网:

<!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>
二-至尊彩怎么玩、刪除元素的屬性

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

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

 

三|wifi密码破解软件、元素內容的操作

在JQuery中|_-步步高i606主题下载,操作元素內容的方法包括html( )和text( )_覃辉的老婆林菁。前者與JavaScript中的innerHTML屬性類似--铁打一只船,即獲取或設置元素的HTML內容|_江陵肃父母是谁;後者類似於JavaScript中的innerText屬性-__东方证券中签号,即獲取或設置元素的文本內容_|李素梅在哪。區別如下__猊龙狮:

語法格式 參數說明 功能描述
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>
四--_花瑜、操作表單元素的值

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值  輸出為_||51jiemeng:請輸入...
    $("#txt").val("12345");//修改#txt的value值為12345
    console.log( $("#txt").val());//12345
</script>
</body>
</html>
五--_解放军323医院地址、元素樣式的操作

1.直接設置元素樣式值

在JQuery中|_陈店内衣,通過css()方法為某個指定的元素設置樣式值_mp4游戏格式,語法格式如下|_金庸群侠传2加强版攻略:

css(name,value) ,其中name為樣式名稱-至尊争霸app,value為樣式的值

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



2.增加CSS類別

通過addClass()方法增加元素類別的名稱|__车膜网,語法格式如下-|_快乐大本营陆贞传奇剧组完整版:

addClass(class) ,其中參數class為類名稱-_-1010cc时时彩票安卓版,可以同時增加多個_|涨工资吧,用空格隔開即可|-365彩票网站是否正规,如addClass(class0 class1 class2 ...)

3.刪除CSS類別

與addClass()方法相對應||106官网彩,removeClass()方法用於刪除類別__|11选5彩票网上购买,語法格式與addClass()相同_马亮照,如果不設定參數-_荆门运动人,則刪除元素中的所有類名稱

4.類別切換

通過toggleClass()方法切換不同的元素類別-晨星基金排行榜,語法格式如下:

toggleClass(class) ,其中參數class為類別名稱--|尿毒症武警二院专家,其功能是當元素中含有名稱為class的CSS類別時-_爱唯侦x论坛,刪除該類別-||优彩彩票app,若沒有-_焦作武陟一中,則增加該類別

<!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>
六|-文章有儿子吗、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界麵設計|||长春高新交警大队、BS界麵設計 |_至尊娱乐彩票真的假的、 cs界麵設計 _-108娱乐正规吗、 ipad界麵設計 _尊彩app、 包裝設計 |-姜宁转会费、 圖標定製 |__高唐贴吧、 用戶體驗 ||234天天彩票app下载、交互設計_-|1588彩票vip、 網站建設 _|众发彩票app下载软件、平麵設計服務--|2018大乐透148期。

標簽: JQuery中的DOM操作(1)

Powered by emlog 京ICP備12006971號-1 sitemap