Jquery複習2

一、元素的相關操作

1、元素的創建

法一

//點擊一個按鈕,創建一個按鈕
  $("#btn").click(function () {
   $("<input type='button' value='按鈕'>").appendTo($("#dv"));
  });

法二

  //元素創建的另一個方式
      $("#btn").click(function () {
        //通過innerHTML的方式創建元素---以字符串的方式   
        $("#dv").html("<input type='button' value='按鈕'>");
      });

2、元素的添加

$("#btn").click(function () {
        //把創建的span標籤這個子元素直接插入到div中第一個子元素的前面
        $("#dv").prepend($("<span>this is span</span>"));
        //主動的方式
        $("<span>this is span</span>").prependTo($("#dv"));
        //把元素添加到div的後面的位置,是div的下一個兄弟元素了
        $("#dv").after($("<span>this is span</span>"));
        //把元素添加到div的前面的位置,是div的上一個兄弟元素了
        $("#dv").before($("<span>this is span</span>"));
      });

3、元素的刪除

$("#btn").click(function () {
        //從父級元素中移除子級元素---移除所有的子元素
        $("#dv").html("");
        //清空父元素中的子元素
        $("#dv").empty();//清空
        //想要幹掉誰,直接找到這個元素,調用這個方法就可以了
        $("#dv").remove();//自殺---，不是清空
      });

4、案例：點擊按鈕創建，刪除表格，增加行

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 600px;
      height: 450px;
      border: 1px solid red;
    }
  </style>
  <script src="./jquery.min.js"></script>
  <script>
    //案例:點擊按鈕在div中創建一個表格
    //表格數據的數組
    var arr = [
      { "name": "傳智播客", "href": "http://www.itcast.cn" },
      { "name": "快播", "href": "http://www.kuaibo.cn" },
      { "name": "優酷", "href": "http://www.youku.cn" },
      { "name": "愛奇藝", "href": "http://www.iqiyi.cn" },
      { "name": "B站", "href": "http://www.bili.cn" },
      { "name": "土豆", "href": "http://www.tudou.cn" }
    ];

    //頁面加載
    $(function () {
      //點擊按鈕創建表格
      $("#btn").click(function () {
        //創建表格
        var table = $("<table style='cursor: pointer' border='1' cellspacing='0' cellpadding='0'></table>");
        //把表格加入到div中
        $("#dv").append(table);
        //循環遍歷數組,創建行
        for (var i = 0; i < arr.length; i++) {
          var dt = arr[i];//每個數組元素,都是對象
          //創建行,並加入到table中
          var tr = $("<tr></tr>");
          table.append(tr);
          //在列中顯示內容,列在行中
          //創建td,並加入到tr中
          var td1 = $("<td>" + dt.name + "</td>");
          //第一個列加入到tr中
          tr.append(td1);
          var td2 = $("<td><a href='" + dt.href + "'>" + dt.name + "</a></td>");
          //第二個列加入到tr中
          tr.append(td2);

          //鼠標進入到每一行的時候,該行有高亮顯示的效果
          tr.mouseenter(function () {//鼠標進入
            $(this).css("backgroundColor", "green");
          }).mouseleave(function () {//鼠標離開
            $(this).css("backgroundColor", "");
          });
        }
      });

      //點擊按鈕移除表格
      $("#btn2").click(function () {
        //當前這個按鈕的下一個兄弟元素,清空裏面的子元素
        $(this).next().empty();
        console.log($(this).next());
        //$("#dv").empty();

        //所有的div中的第一個div
        //$("#dv").children("table").remove();
      });

      //點擊按鈕,在table中添加一行
      $("#btn3").click(function () {
        //創建一行
        var tr = $("<tr><td>騰訊</td><td><a href='http://.qq.com'>騰訊</a></td></tr>");
        //把這一行加入到table中
        $("#dv").children("table").append(tr);
      });
    });

  </script>
</head>

<body>
  <input type="button" value="創建一個表格" id="btn" />
  <input type="button" value="移除表格" id="btn2" />
  <input type="button" value="添加一行" id="btn3" />
  <div id="dv"></div>

</body>

</html>

二、元素的選中問題

1、attr

* .attr(參數1,參數2);-----設置某個屬性的值
    * .attr(參數1);-----獲取某個屬性的值
    *
    * 參數1:屬性的名字
    * 參數2:屬性的值
    *
    * .attr方法主要是操作元素的自定義屬性的,但是也可以操作元素的自帶的屬性(html中本身就有的屬性),但是,但可是:操作元素的選中的ckeched的時候,不是很合適!
    * 操作元素的選中的checked的時候,推薦使用prop方法

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //點擊按鈕選中性別
      $("#btn").click(function () {
        //DOM中操作
        //document.getElementById("r3").checked=true;
        //jQuery操作
        //$("#r3").get(0).checked=true;//DOM的寫法
        //需要使用自定義屬性的方式
        //$("#r3").attr("checked",true);//設置
        //獲取是否被選中了
        //console.log($("#r3").attr("checked"));//undefined
 
        //如果標籤默認選中了---attr("checked")--->結果:checked
        //如果標籤沒有選中----attr("checked")---->結果:undefined
 
 
        //點擊按鈕,選中就設置不選中,如果沒有選中,就設置選中的結果
 
        //attr方法針對單選框或者是複選框的是否選中問題,操作起來很麻煩,幾乎不用,後面說
        if($("#r3").attr("checked")==undefined){
          //undefined
          $("#r3").attr("checked",true);
          console.log("哈哈");
        }else{
          //checked--->選中了
          $("#r3").attr("checked",false);
          console.log("嘎嘎");
        }
      });
    });
  </script>
</head>
<body>
<input type="button" value="選中" id="btn"/><br/>
請選擇小蘇的性別:
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex"/>女
<input type="radio" value="3" name="sex" id="r3"/>人妖
 
</body>
</html>

2、prop()：複選框選中

*設置或者是獲取元素的選中的問題
       * 推薦使用prop()方法
       * .prop("屬性",值); 值一般是布爾類型----->目前這麼寫代碼是設置選中
       * .prop("屬性");-----獲取這個元素是否選中

三、元素的操作

1、操作元素

* 可以設置,也可以獲取
    * .width()是元素的寬
    * .height()是元素的高
    *
    * .offset()--->獲取的是對象,可以設置,也可以獲取
    * .offset({"left":值,"top":值});設置
    *

2、元素的捲曲距離

獲取元素向上捲曲出去的距離,  scrollTop()--->方法,數字類型
獲取元素向左捲曲出去的距離,  scrollLeft()--->方法,數字類型
div滾動上下滾動條的時候,一直獲取他的向上捲曲出去的值

四、事件

1、爲元素綁定事件

爲元素綁定事件三種方式
    * 對象.事件名字(事件處理函數);---$("#btn").click(function(){});
    * 對象.bind("事件名字",事件處理函數);---$("#btn").bind("click",function(){});
* 父級對象.delegate("子級元素","事件名字",事件處理函數);---->$("#dv").delegate("p","click",function(){});

2、爲元素解綁事件

bind---unbind
* bind括號中寫什麼事件的名字就會把這個事件解綁,會把這個元素的這個點擊的多個事件都會解綁
* 對象.click()這種方式添加的事件也可以使用unbind解綁
$("#dv").unbind("click");
括號中沒有任何參數,此時該元素的所有的事件全部解綁
$("#dv").unbind();
同時解綁多個事件---每個事件的名字中間用空格即可
$("#dv").unbind("mouseenter mouseleave")
delegate---undelegate
* p的點擊事件沒有了,移除了p的所有的事件
$("#dv").undelegate();
* 移除的是p的點擊事件
$("#dv").undelegate("p","click");
* 可以移除多個事件,但是每個事件之間用空格隔開
$("#dv").undelegate("p","click mouseenter");
on---off
* 父級元素和子級元素的所有的事件全部解綁
$("#dv").off();
* 把父級元素和子級元素的點擊事件解綁
$("#dv").off("click");
* 父級元素和子級的元素的多個事件,中間用空格
$("#dv").off("click mouseenter");
* 解綁p標籤的點擊事件
$("#dv").off("click","p");
* p的兩個事件都沒了
$("#dv").off("click mouseenter","p");
        p的所有的事件全部解綁
        $("#dv").off("","p");
        幹掉div中所有的子元素的點擊事件
        $("#dv").off("click","**");

3、阻止事件冒泡 : reture false

$(function () {
      $("#dv1").click(function () {
        //爲什麼是undefined
        //對象.id----->DOM中的
        console.log($(this).attr("id"));
      });
      $("#dv2").click(function () {
        console.log($(this).attr("id"));
      });
      $("#dv3").click(function () {
        console.log($(this).attr("id"));
        return false;
      });
    });

4、事件的觸發

調用文本框的獲取焦點的事件---第一種方式讓別的元素的事件觸發
        1、對象.事件名字();
         $("#txt").focus();
        2、第二種觸發事件的方式
         $("#txt").trigger("focus");//觸發的意思
        3、 這種方式可以觸發該事件,但是,不能觸發瀏覽器的默認的行爲
         $("#txt").triggerHandler("focus");

5、事件對象參數

在事件對象中傳入參數，返回值爲對象

五、each方法

隱式迭代—內部幫助我們循環遍歷做操作
每個元素做不同的操作的時候
each方法,幫助我們遍歷jQuery的對象

$(function () {
      //獲取所有的li,針對每個li的透明進行設置
      $("#uu>li").each(function (index,ele) {
        //參數1:索引,參數2:對象
        //console.log(arguments[0]+"===="+arguments[1]);
        //每個li的透明度不一樣
        var opacity=(index+1)/10;
        $(ele).css("opacity",opacity);
      });
    });
```qq
each方法就是用來遍歷jQuery對象的,但是,裏面的每個對象最開始都是DOM對象,如果想要使用jQuery的方法,需要把DOM對象轉jQuery對象
### 六、幾個屬性

innerWidth()/innerHeight() 方法返回元素的寬度/高度（包括內邊距）。
outerWidth()/outerHeight() 方法返回元素的寬度/高度（包括內邊距和邊框）。
outerWidth(true)/outerHeight(true) 方法返回元素的寬度/高度（包括內邊距、邊框和外邊距）。

一、元素的相關操作

1、元素的創建

2、元素的添加

3、元素的刪除

4、案例：點擊按鈕創建，刪除表格，增加行

二、元素的選中問題

1、attr

2、prop()：複選框選中

三、元素的操作

1、操作元素

2、元素的捲曲距離

四、事件

1、爲元素綁定事件

2、爲元素解綁事件

3、阻止事件冒泡 : reture false

4、事件的觸發

5、事件對象參數

五、each方法

《Python進階》學習筆記

Leetcode 3161. 物塊放置查詢

一個docker容器暴露多個端口

leetcode 60 排列序列

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

wpf附加屬性理解 WPF附加屬性

Vue 中 watch 屬性，computed 計算屬性以及 method 屬性的區別

劍指offer(javaScript版) 03 --從尾到頭打印鏈表

webpack vue中export default和export

github 知識點+命令總結（最全，適合初學者）

使用webpack使用vue

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結