【html、CSS、javascript-10】jquery-操做元素（屬性CSS和文檔處理）

時間  2019-12-08
標籤 html css javascript jquery 元素 屬性 文檔 處理 欄目 HTML 简体版
原文   原文鏈接

1、得到內容及屬性php

三個簡單實用的用於 DOM 操做的 jQuery 方法：css

  • text() - 設置或返回所選元素的文本內容
  • html() - 設置或返回所選元素的內容（包括 HTML 標記）
  • val() - 設置或返回表單字段的值

下面的例子演示如何經過 jQuery text() 和 html() 方法來得到內容：html

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

下面的例子演示如何經過 jQuery val() 方法得到輸入字段的值：jquery

$("#btn1").click(function(){
  alert("值爲: " + $("#test").val());
});

獲取屬性的值數組

jQuery attr() 方法用於獲取屬性值。瀏覽器

下面的例子演示如何得到連接中 href 屬性的值：app

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

2、設置內容和屬性ide

咱們將使用前一章中的三個相同的方法來設置內容：函數

  • text() - 設置或返回所選元素的文本內容
  • html() - 設置或返回所選元素的內容（包括 HTML 標記）
  • val() - 設置或返回表單字段的值

下面的例子演示如何經過 text()、html() 以及 val() 方法來設置內容：學習

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

text()、html() 以及 val() 的回調函數

上面的三個 jQuery 方法：text()、html() 以及 val()，一樣擁有回調函數。回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。而後以函數新值返回您但願使用的字符串。

下面的例子演示帶有回調函數的 text() 和 html()：

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "舊 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

設置屬性 - attr()

jQuery attr() 方法也用於設置/改變屬性值。

下面的例子演示如何改變（設置）連接中 href 屬性的值：

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

attr() 方法也容許您同時設置多個屬性。

下面的例子演示如何同時設置 href 和 title 屬性：

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

移除attr：removeAttr, prop

下面的例子刪除屬性：

        $("#runoob").removeAttr("href")
        $("#runoob").prop("title")

例子：禁用頁面全部的複選框：

$("input[type='checkbox']").prop({
  disabled: true
});

禁用和選中全部頁面上的複選框，disabled:true表示禁用，checked:true表示選中。

$("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true);

 實例：所有選擇、所有取消、反選

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全選" onclick="SelectAll();">
    <input type="button" value="取消" onclick="Cancel();">
    <input type="button" value="反選" onclick="Reverse();">
    <table>
        <tr>
            <td><input type="checkbox"></td>
            <td>請選擇</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>請選擇</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>請選擇</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>請選擇</td>
        </tr>
    </table>
    <script src="jquery.js"></script>
    <script>
        function SelectAll() {
            $("table input").prop("checked",true)
        }
        function Cancel() {
            $("table input").prop("checked",false)
        }
        function Reverse() {
            $("table input").each(
                function () {
                    if($(this).prop("checked")){
                        $(this).prop("checked",false)
                    }else{
                        $(this).prop("checked",true)
                    }
                }
            )
        }
    </script>
</body>
</html>
全選、取消、反選

實例中涉及兩種循環，jQuery中涉及兩種循環方式：

一、循環每一個元素，在回調函數中能夠用this表示當前循環的元素

1）each函數中的return至關於for循環中的continue,只是結束當前循環

2）each函數中的return false是結束each中的函數，主函數並不結束

3）若是想結束主函數，則在each循環外部加 return

        function Reverse() {
            $("table input").each(
                function () {
                    if($(this).prop("checked")){
                        $(this).prop("checked",false)
                    }else{
                        $(this).prop("checked",true)
                    }
                }
            )
        }

二、循環數組（i,v），i表示循環的索引，v表示循環的值

li = [11,22,33,44,55]
$.each(li,function (i,v) {
    console.log(i,v)
})
//結果輸出
//0 11
//1 22
//2 33
//3 44
//4 55

 

attr() 的回調函數

jQuery 方法 attr()，也提供回調函數。回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。而後以函數新值返回您但願使用的字符串。

下面的例子演示帶有回調函數的 attr() 方法：

$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

 attr的坑

如下代碼，在cosole中執行：

$("#d2").attr("checked","checked")  //會選中複選框

$("#d2").removeAttr("checked")  //會取消複選框

$("#d2").attr("checked","checked") //取消後，再次執行這句代碼，則不會選中，

因此設置和取消建議使用：

$("#d2").prop("checked",true)

$("#d2").prop("checked",false)

<body>
    <input type="checkbox" checked="checked">
    <input id="d2" type="checkbox">
    <script src="jquery.js"></script>
    <script>
    </script>
</body>

 

3、jquery添加元素

經過 jQuery，能夠很容易地添加新元素/內容。

添加新的 HTML 內容

咱們將學習用於添加新內容的四個 jQuery 方法：

  • append() - 在被選元素的結尾插入內容
  • prepend() - 在被選元素的開頭插入內容
  • after() - 在被選元素以後插入內容
  • before() - 在被選元素以前插入內容

jQuery append() 方法：

jQuery append() 方法在被選元素的結尾插入內容（仍然該元素的內部）。

$("p").append("追加文本");

jQuery prepend() 方法

jQuery prepend() 方法在被選元素的開頭插入內容。

$("p").prepend("在開頭追加文本");

經過 append() 和 prepend() 方法添加若干新元素

在上面的例子中，咱們只在被選元素的開頭/結尾插入文本/HTML。

不過，append() 和 prepend() 方法可以經過參數接收無限數量的新元素。能夠經過 jQuery 來生成文本/HTML（就像上面的例子那樣），或者經過 JavaScript 代碼和 DOM 元素。

在下面的例子中，咱們建立若干個新元素。這些元素能夠經過 text/HTML、jQuery 或者 JavaScript/DOM 來建立。而後咱們經過 append() 方法把這些新元素追加到文本中（對 prepend() 一樣有效）：

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 標籤建立文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 建立文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 建立文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

jQuery after() 和 before() 方法

jQuery after() 方法在被選元素以後插入內容。

jQuery before() 方法在被選元素以前插入內容。

$("img").after("在後面添加文本");
 
$("img").before("在前面添加文本");

經過 after() 和 before() 方法添加若干新元素

after() 和 before() 方法可以經過參數接收無限數量的新元素。能夠經過 text/HTML、jQuery 或者 JavaScript/DOM 來建立新元素。

在下面的例子中，咱們建立若干新元素。這些元素能夠經過 text/HTML、jQuery 或者 JavaScript/DOM 來建立。而後咱們經過 after() 方法把這些新元素插到文本中（對 before() 一樣有效）：

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 建立元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 建立元素
    var txt3=document.createElement("big");  // 使用 DOM 建立元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在圖片後添加文本
}

那有木有考慮過append/prepend和after/before有什麼區別呢？

append

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>

結果是這樣的:

<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span>
</p>

after

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>

結果是這樣的:

<p>
  <span class="s1">s1</span>
</p>
<span class="s2">s2</span>

總結：

append/prepend 是在選擇元素內部嵌入。

after/before 是在元素外面追加。

另外還有

appendTo() 效果與append相同

$('<span class="s2">s2</span>').appendTo("p");

prependTo()效果與prepend相同

$('<span class="s2">s2</span>').preppendTo("p");

insertBefor()效果與befor相同

$('<span class="s2">s2</span>').insertBefor("p");

 

inserAfter()效果與after相同

$('<span class="s2">s2</span>').insertAfter("p");

 

replaceWith()  

用於將匹配元素替換掉的內容。若是這裏傳遞一個函數進來的話，函數返回值必須是HTML字符串。

<p>Hello</p>
<p>cruel</p>
<p>World</p>

結果：$("p").replaceWith("<b>Paragraph. </b>");
<b>Paragraph. </b>
<b>Paragraph. </b>
<b>Paragraph. </b>
 

clone()
 

$("b").clone().prependTo("p");
 

4、jQuery - 刪除元素
 

經過 jQuery，能夠很容易地刪除已有的 HTML 元素。
 

刪除元素/內容
 

如需刪除元素和內容，通常可以使用如下兩個 jQuery 方法：
 

     
 
  • remove() - 刪除被選元素（及其子元素）
    •  
 
  • empty() - 從被選元素中刪除子元素
    •  

 

jQuery remove() 方法
 

jQuery remove() 方法刪除被選元素及其子元素。
 

 
 
$("#div1").remove();
 

 

jQuery empty() 方法
 

jQuery empty() 方法刪除被選元素的子元素。
 

 
 
$("#div1").empty();
 

 

過濾被刪除的元素
 

jQuery remove() 方法也可接受一個參數，容許您對被刪元素進行過濾。
 

該參數能夠是任何 jQuery 選擇器的語法。
 

下面的例子刪除 class="italic" 的全部 <p> 元素：
 

 
 
$("p").remove(".italic");
 

 

 5、jQuery - 獲取並設置CSS類
 

經過 jQuery，能夠很容易地對 CSS 元素進行操做。
 

jQuery操做CSS
 

jQuery 擁有若干進行 CSS 操做的方法。咱們將學習下面這些：
 

     
 
  • addClass() - 向被選元素添加一個或多個類
    •  
 
  • removeClass() - 從被選元素刪除一個或多個類
    •  
 
  • toggleClass() - 對被選元素進行添加/刪除類的切換操做
    •  
 
  • css() - 設置或返回樣式屬性
    •  

 

實例樣式表：
 

 
 
.important
{
        font-weight:bold;
        font-size:xx-large;
}
 
.blue
{
        color:blue;
}
 

 

jQuery addClass() 方法
 

下面的例子展現如何向不一樣的元素添加 class 屬性。固然，在添加類時，您也能夠選取多個元素：
 

 
 
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});
 

 

您也能夠在 addClass() 方法中規定多個類：
 

 
 
$("button").click(function(){
  $("body div:first").addClass("important blue");
});
 

 

jQuery removeClass() 方法
 

下面的例子演示如何在不一樣的元素中刪除指定的 class 屬性：
 

 
 
$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});
 

 

jQuery toggleClass() 方法
 

下面的例子將展現如何使用 jQuery toggleClass() 方法。該方法對被選元素進行添加/刪除類的切換操做：
 

 
 
$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});
 

 

實例：切換加載和刪除類
 

 
  
  
 
 
  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
  });
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1 class="blue">標題 1</h1>
<h2 class="blue">標題 2</h2>
<p class="blue">這是一個段落。</p>
<p>這是另一個段落。</p>
<br>
<button>切換 class</button>
</body>
</html>
 
 
 
 來回切換加載刪除css類樣式 

 

 jQuery css()方法
 

 css() 方法設置或返回被選元素的一個或多個樣式屬性。
 

返回css屬性
 

如需返回指定的 CSS 屬性的值，請使用以下語法：
 

 
 
css("propertyname");
 

 

下面的例子將返回首個匹配元素的 background-color 值：
 

 
 
$("p").css("background-color");
 

 

設置css屬性
 

如需設置指定的 CSS 屬性，請使用以下語法：
 

 
 
css("propertyname","value");
 

 

下面的例子將爲全部匹配元素設置 background-color 值：
 

 
 
$("p").css("background-color","yellow");
 

 

設置多個 CSS 屬性
 

如需設置多個 CSS 屬性，請使用以下語法：
 

 
 
css({"propertyname":"value","propertyname":"value",...});
 

 

下面的例子將爲全部匹配元素設置 background-color 和 font-size：
 

 
 
$("p").css({"background-color":"yellow","font-size":"200%"});
 

 

 jQuery 尺寸
 

經過 jQuery，很容易處理元素和瀏覽器窗口的尺寸。
 

jQuery 提供多個處理尺寸的重要方法：
 

     
 
  • width()
    •  
 
  • height()
    •  
 
  • innerWidth()
    •  
 
  • innerHeight()
    •  
 
  • outerWidth()
    •  
 
  • outerHeight()
    •  

 

 

jQuery width() 和 height() 方法
 

width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
 

height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。
 

下面的例子返回指定的 <div> 元素的寬度和高度：
 

 
 
$("button").click(function(){
  var txt="";
  txt+="div 的寬度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});
 

 

jQuery innerWidth() 和 innerHeight() 方法
 

innerWidth() 方法返回元素的寬度（包括內邊距）。
 

innerHeight() 方法返回元素的高度（包括內邊距）。
 

下面的例子返回指定的 <div> 元素的 inner-width/height：
 

 
 
$("button").click(function(){
  var txt="";
  txt+="div 寬度，包含內邊距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含內邊距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});
 

 

jQuery outerWidth() 和 outerHeight() 方法
 

outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
 

outerHeight() 方法返回元素的高度（包括內邊距和邊框）。
 

下面的例子返回指定的 <div> 元素的 outer-width/height：
 

 
 
$("button").click(function(){
  var txt="";
  txt+="div 寬度，包含內邊距和邊框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含內邊距和邊框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});
 

 

 位置方法：
 

jQuery offset() 方法
 

返回 <p> 元素的偏移座標：
 

 
 
$("button").click(function(){
    var x=$("p").offset();
    alert("Top: " + x.top + " Left: " + x.left);
});
 

 

定義和用法
 

offset() 方法設置或返回被選元素相對於文檔的偏移座標。
 

當用於返回偏移時： 
該方法返回第一個匹配元素的偏移座標。它返回一個帶有兩個屬性（以像素爲單位的 top 和 left 位置）的對象。
 

當用於設置偏移時： 
該方法設置全部匹配元素的偏移座標。
 

 
 
//語法
//返回偏移座標：
$(selector).offset()
//設置偏移座標：
$(selector).offset({top:value,left:value})
//使用函數設置偏移座標：
$(selector).offset(function(index,currentoffset))
 

 

 
 

 
  
  
 
   參數 
   描述 
  
 
  
 
   {top:value,left:value} 
   當設置偏移時是必需的。規定以像素爲單位的 top 和 left 座標。

可能的值： 
    
     
     
  • 名/值對，好比 {top:100,left:100}
    •  
     
  • 一個帶有 top 和 left 的對象（實例）
    •  
    
 		 
  
 
  
 
   function(index,currentoffset) 
   可選。規定返回包含 top 和 left 座標的對象的函數。 
    
     
     
  • index - 返回集合中元素的 index 位置。
    •  
     
  • currentoffset - 返回被選元素的當前座標。
    •  
    
 		 
  
 
  

 

 jQuery position() 方法
 

返回 <p> 元素的 top 和 left 位置：
 

 
 
$("button").click(function(){
    x=$("p").position();
    alert("Top: " + x.top + " Left: " + x.left);
});
 

 

定義和用法：
 

position() 方法返回第一個匹配元素的位置（相對於它的父元素）。
 

該方法返回一個帶有兩個屬性（以像素爲單位的 top 和 left 位置）的對象。
 

 
 
//語法
$(selector).position()
 

 

 
 

jQuery scrollTop() 方法
 

返回 <div> 元素的垂直滾動條位置：
 

 
 
$("button").click(function(){
    alert($("div").scrollTop());
});
 

 

定義和用法
 

scrollTop() 方法設置或返回被選元素的垂直滾動條位置。
 

提示：當滾動條位於最頂部時，位置是 0。
 

當用於返回位置時：
該方法返回第一個匹配元素的滾動條的垂直位置。
 

當用於設置位置時：
該方法設置全部匹配元素的滾動條的垂直位置。
 

 
 
//語法
//返回垂直滾動條位置：
$(selector).scrollTop()
//設置垂直滾動條位置：
$(selector).scrollTop(position)
 

 

 
 

jQuery scrollLeft() 方法
 

返回 <div> 元素的水平滾動條位置：
 

 
 
$("button").click(function(){
    alert($("div").scrollLeft());
});
 

 

定義和用法
 

scrollLeft() 方法設置或返回被選元素的水平滾動條位置。
 

提示：當滾動條位於最左側時，位置是 0。
 

當用於返回位置時：
該方法返回第一個匹配元素的滾動條的水平位置。
 

當用於設置位置時：
該方法設置全部匹配元素的滾動條的水平位置。
 

 
 
//語法
//返回水平滾動條位置：
$(selector).scrollLeft()
//設置水平滾動條位置：
$(selector).scrollLeft(position)
 



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程