追求卓越一諾千金

藍藍設計_35彩票com,2011年成立-_中诚快递网点查询,主創清華團隊_北京驱逐外来人口,專注軟件和互聯網ui設計開發||-闹鬼电影。擅長企業信息化管理-_|11选5平台、監控-|众发娱乐怎么刷流水、大數據軟件UIUE谘詢和設計開發服務--|2m彩票网址。立足UI_-|360彩票购彩大厅,好好學習--拥抱江美琪,天天進步__团结柱!


JQuery中的DOM操作(1)

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


如果您想訂閱本博客內容___尊龙新版,每天自動發到您的郵箱中|_至尊伏魔录, 請點這裏

DOM樹

                                 

    在訪問頁麵時-奶油话梅糖,需要與頁麵中的元素進行交互式的操作|-雨小薇。在操作中-_|陕西电视台主持人,元素的訪問是最頻繁_||荣耀7plus、最常用的|-|飞天侠女,主要包括對元素屬性-_istoway、內容|_kf qq com在线客服、值CSS的操作_|班主任德育论文题目。

一___注册彩票平台的邀请码是干嘛滴、操作元素的屬性

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

兩者區別-永城彩票正规吗:簡單來說-|采花心,對於HTML元素本身就帶有的固有屬性-亿贝平台登录,在處理時||-紫雨三国,使用prop方法-__14场胜负彩app。對於HTML元素我們自己自定義的DOM屬性_|身体太虚弱,在處理時--_078彩票登录,使用attr方法_-178国际娱乐。

針對屬性對象不同

prop( )是針對Dom元素屬性_我们结婚了泰民停拍,attr( )針對HTML元素屬性_|_魏征进谏图的作者是谁,和attribute與property區別一樣-_拿铁咖啡。

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

attr()函數操作的是文檔節點的屬性盈彩可靠吗,因此設置的屬性值隻能是字符串類型|-_娱乐天地充值多长时间到账,如果不是字符串類型||陪葬品钥匙,也會調用其toString()方法_|_我是歌手第10期排名,將其轉為字符串類型-|殷世航。

prop()函數操作的是JS對象的屬性-_亿彩最新版本,因此設置的屬性值可以為包括數組和對象在內的任意類型-_|抓住偷水贼。

應用版本不同

attr()是jQuery 1.0版本就有的函數|其乐船长,prop()是jQuery 1.6版本新增的函數_|卓易彩票怎么注销。毫無疑問--_注册就送38可微信提现,在1.6之前||_英拉他信雾霾游北京,你隻能使用attr()函數|_熊继柏在哪坐诊;1.6及以後版本_|-历届德甲冠军,你可以根據實際需要選擇對應的函數-|-铅钢。

其他不同

對於表單元素的checked||诺基亚7070拆机教程、selected__干油泵、disabled等屬性_||11086时时彩靠谱吗,Attr()方法拿不到值|注册送彩票金的软件,請使用prop()函數來設置或獲取checked-__世界西装排名、selected__铁路安全保护条例、disabled等屬性_|亿发彩票怎么样。對於其它能夠用prop()實現的操作_15700牛蚌彩票开奖现场,也盡量使用prop()函數|大显mt888。如下圖代碼--_百里挑一于淼:

<!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
    //根據輸出結果_||ap赵信出装顺序,width值設置失敗-|掌上彩票pro进不去,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為元素屬性的名稱

 

三__|盘锦dj、元素內容的操作

在JQuery中-|-沈阳小伙,操作元素內容的方法包括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值  輸出為|_杭州sn:請輸入...
    $("#txt").val("12345");//修改#txt的value值為12345
    console.log( $("#txt").val());//12345
</script>
</body>
</html>
五-_|银色黎明声望、元素樣式的操作

1.直接設置元素樣式值

在JQuery中_-李白的谈爱,通過css()方法為某個指定的元素設置樣式值|-非常了得陈星光,語法格式如下--_众彩娱乐:

css(name,value) ,其中name為樣式名稱至诚证券,value為樣式的值

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



2.增加CSS類別

通過addClass()方法增加元素類別的名稱_-啊不要太快了吴磊,語法格式如下|--众富娱乐登录下载:

addClass(class) ,其中參數class為類名稱|-祝愿猫,可以同時增加多個-__1999年彩票中奖号码,用空格隔開即可|_-时尚王最后结局,如addClass(class0 class1 class2 ...)

3.刪除CSS類別

與addClass()方法相對應|_|叶彤倩,removeClass()方法用於刪除類別|双升单机版,語法格式與addClass()相同||永盛是什么软件,如果不設定參數-|_强心脏20110823,則刪除元素中的所有類名稱

4.類別切換

通過toggleClass()方法切換不同的元素類別__-静音飞翼龙,語法格式如下:

toggleClass(class) ,其中參數class為類別名稱-|-上海哪里可以蹦极,其功能是當元素中含有名稱為class的CSS類別時-|心德维拉,刪除該類別|_-qq刷q币软件免费版,若沒有_-_电信iphone4s套餐,則增加該類別

<!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>
六|-360游戏大厅、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界麵設計-1588彩票合法吗、BS界麵設計 ||-永胜国际APP、 cs界麵設計 ||小学生国旗下讲话、 ipad界麵設計 __易彩票正规吗、 包裝設計 ||csol防沉迷、 圖標定製 -长阳国际城业主论坛、 用戶體驗 -|_武汉体育学院校园网、交互設計_-自行车比汽车污染更严重、 網站建設 ___家长会主持人开场白、平麵設計服務|-男科悍医。

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


訂閱Rss