亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 52
粉絲 0
評(píng)論 3
訪問量 53067
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
js學(xué)習(xí)：第20章 DOM操作與過濾器
王小飛
原創(chuàng)
1940人瀏覽過

1. attr(): html屬性進(jìn)行操作

  1. attr(name):　 getter 查詢
  2. attr(name, value):　setter 設(shè)置

attr(name):　 getter 查詢的代碼與效果：

attr(name, value):　setter 設(shè)置的代碼與效果：

2. css(): 針對(duì) html元素的style屬性進(jìn)行操作

不僅可以獲取到style屬性的值,還可以獲取到該元素所有樣式并修改

動(dòng)態(tài)設(shè)置，每次訪問都會(huì)顯示不同的背景

3. val():表單元素的值

4. html()/text(): 元素內(nèi)容操作

課程代碼：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <script src="lib/jquery-3.5.1.js"></script>
  7.     <title>基本的getter/setter-1</title>
  8.     <style>
  9.       body {
  10.         display: flex;
  11.         flex-direction: column;
  12.         align-items: center;
  13.         color: #666;
  14.       }
  16.       form {
  17.         width: 400px;
  18.         /* height: 150px; */
  19.         padding: 20px 10px;
  20.         border: 1px solid #aaa;
  21.         box-shadow: 0 0 5px #888;
  22.         box-sizing: border-box;
  23.         background-color: #eee;
  24.         display: grid;
  25.         grid-template-columns: 80px 200px;
  26.         gap: 10px;
  27.         place-content: center center;
  28.       }
  30.       button {
  31.         grid-column: 2 / 3;
  32.         height: 26px;
  33.       }
  35.       button:hover {
  36.         color: white;
  37.         background-color: #888;
  38.         border: none;
  39.         cursor: pointer;
  40.       }
  42.       .red {
  43.         color: red;
  44.       }
  45.     </style>
  46.   </head>
  47.   <body>
  48.     <h2 class="red">用戶登錄</h2>
  49.     <form action="handle.php" method="POST">
  50.       <label for="email">Email:</label>
  51.       <input
  52.         type="email"
  53.         name="email"
  54.         id="email"
  55.         autofocus
  56.         value="leture999@php.cn"
  57.       />
  58.       <label for="password">Password:</label>
  59.       <input type="password" name="password" id="password" value="不少于6位" />
  60.       <label for="confirm">記住我:</label>
  61.       <div>
  62.         <input type="radio" name="save" id="confirm" value="1" checked /><label
  63.           for="confirm"
  64.           >保存</label
  65.         >
  66.         <input type="radio" name="save" id="cancel" value="0" /><label
  67.           for="cancel"
  68.           >放棄</label
  69.         >
  70.       </div>
  71.       <button>登錄</button>
  72.     </form>
  74.     <script>
  75.       var cl = console.log.bind(console);
  76.       var form = $("form");
  77.       // 1. attr(): html屬性進(jìn)行操作
  78.       // attr(name):　 getter 查詢
  79.       // cl(form.attr("action"));
  81.       // attr(name, value):　setter 設(shè)置
  82.       // form.attr("action", "beixiugai/wenjian.php");
  83.       // cl(form.attr("action"));
  84.       // form.attr({
  85.       //   action: "selec.php?id=4",
  86.       //   method: "post",
  87.       // });
  89.       // form.attr("action", function () {
  90.       // 動(dòng)態(tài)設(shè)置處理腳本, 如果是get, query.php?id=1,如果非get, register.php
  91.       //   var method = $(this).attr("method").toLowerCase();
  92.       //   return method === "get" ? "query.php?id=1" : "register.php";
  93.       // });
  95.       // 2. css(): 針對(duì) html元素的style屬性進(jìn)行操作
  96.       // 不僅可以獲取到style屬性的值,還可以獲取到該元素所有樣式
  97.       // cl(window.getComputedStyle(document.querySelector("form")).width);
  98.       // cl(form.css("width"));
  99.       // cl(form.css("border"));
  100.       // form.css("border", "3px solid green");
  101.       // form.css({
  102.       //   backgroundColor: "wheat",
  103.       //   border: "5px dashed blue",
  104.       // });
  106.       // form.css("background-color", function () {
  107.       // 這是一有四個(gè)顏色值的數(shù)組, 目標(biāo)是從這個(gè)數(shù)組中隨機(jī)返回一個(gè)值
  108.       // var bgcolor = ["plum", "lightblue", "tan", "lime"];
  109.       // 返回哪個(gè)值, 由一個(gè)隨機(jī)索引決定, 索引必須在0 -3 之間
  110.       //   var randomIndex = Math.floor(Math.random() * bgcolor.length);
  111.       //   return bgcolor[randomIndex];
  112.       // });
  114.       // 3. val():表單元素的值
  115.       // cl($("#email").val());
  116.       // $("#email").val("xinzhi@php.cn");
  117.       // cl($("#email").val());
  118.       // 獲取選中按鈕的值
  119.       // cl($("input:radio[name=save]:checked").val());
  120.       // 回調(diào)
  121.       // $("#email").val(function () {
  122.       //   return this.defaultValue;
  123.       // });
  125.       // 4. html()/text(): 元素內(nèi)容操作
  126.       // innerText ===> text();
  127.       document.querySelector("h2").innerText = "請登錄";
  128.       $("h2").text("趕緊登錄");
  129.       // innerHTML ===>　html()
  130.       // document.querySelector("h2").innerHTML =
  131.       //   '<span style="color:blue">請登錄</span>';
  132.       // $("h2").html('<span style="color:green">請登錄</span>');
  133.       // $("h2").html("請登錄");
  134.     </script>
  135.   </body>
  136. </html>

2.dom操作

插入操作

append(callback) 插入一個(gè)列表

選擇目標(biāo)位置插入：

課程代碼：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <script src="lib/jquery-3.5.1.js"></script>
  7.     <title>DOM</title>
  8.     <style>
  9.       .active {
  10.         color: red;
  11.       }
  12.     </style>
  13.   </head>
  14.   <body></body>
  15. </html>
  16. <script>
  17.   var cl = console.log.bind(console);
  18.   // 1. 元素的插入與替換, 父元素.append(子元素)
  19.   $("body").append("<ol>");
  20.   // 子元素.appendTo(父元素)
  21.   $("<li>").text("筆記本電腦").appendTo("ol");
  22.   $("<li>").addClass("active").text("智能手機(jī)").appendTo("ol");
  24.   $("<li>", {
  25.     id: "hello",
  26.     style: "background-color:yellow",
  27.   })
  28.     .html("<a href=''>格子衫</a>")
  29.     .appendTo("ol");
  31.   // append(callback);
  32.   $("ol").append(function () {
  33.     var res = "";
  34.     for (var i = 0; i < 5; i++) {
  35.       res += "<li><a href=''>最新商品" + (i + 1) + "</a></li>";
  36.     }
  37.     return res;
  38.   });
  39.   // 從第3個(gè)元素前面添加<li>, before(), 在某個(gè)元素之前添加
  40.   $("ol > li:nth-of-type(3)").before("<li>我是從第3個(gè)元素前面添加新元素</li>");
  41.   // insertAfter();
  42.   $("<li>我是從第5個(gè)元素后面添加新元素2</li>").insertAfter(
  43.     "ol > li:nth-of-type(4)"
  44.   );
  45.   // prepend(), prependTo(), 將新元素插入到頭部
  46.   $("<li>最新留言</li>").prependTo("ol");
  48.   // 元素的換: replaceWith()
  49.   $("ol > li:last-of-type").replaceWith("<h3>Hello PHP.CN</h3>");
  50.   $("<p>Hello World...</p>").replaceAll("ol > li:first-of-type");
  51. </script>

過濾器

課程代碼：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <script src="lib/jquery-3.5.1.js"></script>
  7.     <title>常用過濾器</title>
  8.   </head>
  9.   <body>
  10.     <ul id="first">
  11.       <li>item1</li>
  12.       <li>item2</li>
  13.       <ul>
  14.         <li>item1</li>
  15.         <li class="red">item2</li>
  16.         <li>item3</li>
  17.       </ul>
  18.       <li>item3</li>
  19.       <li>item4</li>
  20.       <li>item5</li>
  21.     </ul>
  22.     <ul id="second">
  23.       <li>item1</li>
  24.       <li>item2</li>
  25.       <li>item3</li>
  26.       <li>item4</li>
  27.       <li>item5</li>
  28.     </ul>
  29.   </body>
  30.   <script>
  31.     var cl = console.log.bind(console);
  32.     // cl($("ul#first"));
  33.     // cl($("ul").filter("#first"));
  35.     // children
  36.     var ul1 = $("ul").filter("#first");
  37.     cl(ul1.children());
  38.     var children = ul1.children();
  39.     // first():第一個(gè)
  40.     children.first().css("background", "lightblue");
  41.     // last(): 最后一個(gè)
  42.     children.last().css("background", "lightblue");
  43.     // eq(n): 返回任何一個(gè)
  44.     children.eq(2).css("background", "lightgreen");
  46.     // children()只限子元素
  47.     ul1.children(".red").css("color", "red");
  48.     // find(): 所有層級(jí)在查詢
  49.     ul1.find(".red").css("color", "red");
  50.     cl(ul1.find(".red"));
  52.     // 僅獲取第2個(gè)和第3個(gè)子元素
  53.     $("ul").filter("#second").children().slice(1, 3).css("color", "red");
  54.     $("ul#second >li:nth-of-type(-n+3):not(li:first-of-type)").css(
  55.       "color",
  56.       "red"
  57.     );
  58.   </script>
  59. </html>

總結(jié)：學(xué)習(xí)了查詢操作，插入操作，和過濾器

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：很好, 請?jiān)?月10日前全部完成
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)