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

搜索
博主信息
博文 145
粉絲 7
評(píng)論 7
訪問(wèn)量 198684
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JQuery基礎(chǔ)操作：工廠函數(shù)$()和屬性以及方法
李東亞1??3????12?
原創(chuàng)
1493人瀏覽過(guò)

一、代碼練習(xí)

1、代碼練習(xí)demo1

  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="../JQuery3.5.1.js"></script>
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <ol id="first">
  11.       <li>1item1</li>
  12.       <li>1item2</li>
  13.       <li>1item3</li>
  14.       <li>1item4</li>
  15.       <li>1item5</li>
  16.     </ol>
  17.     <ol id="second">
  18.       <li>2item1</li>
  19.       <li>2item2</li>
  20.       <li>2item3</li>
  21.       <li>2item4</li>
  22.       <li>2item5</li>
  23.     </ol>
  24.   </body>
  25.   <script defer>
  26.     //   $()通過(guò)CSS來(lái)選擇DOM節(jié)點(diǎn)
  27.     var cl = console.log.bind(console);
  28.     $("li").last().css("color", "red");
  29.     cl($("li", "#second"));
  30.     //$()也可以操作原生JS對(duì)象
  31.     var ol = document.querySelectorAll("ol");
  32.     cl(ol);
  33.     $(ol).css("background", "lightgreen");
  34.     //$()操作html
  35.     $("<h3>JQuery<h3>").prependTo("body"); //頭部插入
  36.     $("<hr>").appendTo("body"); //尾部插入
  37.     // $(callback)當(dāng)HTML加載完畢后執(zhí)行回調(diào)函數(shù)
  38.     var content = "加載完畢";
  39.     // $(function () {
  40.     //   alert(content);
  41.     // });
  42.     // $()屬性和方法的使用
  43.     cl("……………………………………");
  44.     cl($("li"));
  45.     cl($("li").toArray());
  46.     cl($("li").length);
  47.     cl($("li")[4]);
  48.     cl($("li").get(0));
  49.     // 靜態(tài)方法直接作用于$上的方法
  50.     $.each($("li"), function (index, value) {
  51.       cl(index, value);
  52.     });
  53.     $("li").each(function (index, value) {
  54.       if (index % 2) cl(value);
  55.     });
  56.     //toArray()轉(zhuǎn)換數(shù)組方法
  57.     var arr = $("#second li").toArray();
  58.     cl(arr);
  59.     $("#second li").each(function (index, value) {
  60.       cl("第" + (index + 1) + "元素：", value);
  61.     });
  62.     cl("^^^^^^^^^");
  63.     //數(shù)組遍歷forEach()與each()遍歷函數(shù)
  64.     arr.forEach(function (value, index) {
  65.       cl("第" + (index + 1) + "個(gè)：", value);
  66.     });
  67.     cl($("li"));
  68.     cl($("li").length);
  69.     cl($("li").last().index());
  70.     //$.map()靜態(tài)方式（必須有返回值）
  71.     cl("^^^^^^^^^^^^^^^^^");
  72.     var jquerystr = $.map($("li"), function (value, index) {
  73.       return value;
  74.     });
  75.     cl(jquerystr);
  76.   </script>
  77. </html>

演練結(jié)果：

2、demo2代碼

  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.     <title>Document</title>
  7.     <script src="../JQuery3.5.1.js"></script>
  8.   </head>
  9.   <body>
  10.     <form action="" method="POST">
  11.       <label for="">處理方式:</label><br />
  12.       <label for="edit">編輯</label>
  13.       <input type="radio" name="type" id="edit" value="1" checked /><br />
  14.       <label for="amend">修改</label>
  15.       <input type="radio" name="type" id="amend" value="0" /><br />
  16.       <button onclick="return false">提交</button>
  17.     </form>
  18.   </body>
  19.   <script>
  20.     var cl = console.log.bind(console);
  21.     $("button").click(function () {
  22.       // $("input[id='edit']").prop("checked");//動(dòng)態(tài)判斷radio是否認(rèn)為選中，選中為true,沒(méi)有選中為false;
  23.       if ($("input[id='edit']").prop("checked")) {
  24.         $("form").attr("action", "handle.php?type=edit");
  25.       } else {
  26.         $("form").attr("action", "handle.php?type=amend");
  27.       }
  28.     });
  29.   </script>
  30. </html>

運(yùn)行效果圖

課堂知識(shí)總結(jié)：

1、jQuery 是一個(gè)非常流行的 JavaScript 函數(shù)庫(kù)，主要用于DOM查詢操作和Ajax以及動(dòng)畫常用操作；
2、JQuery所有操作主要依賴于$（）工廠函數(shù)的屬性和方法；
3、靜態(tài)方法是指可以直接作用于$上的方法
4、$(CSS選擇器):用來(lái)選擇DOM節(jié)點(diǎn)
5、$()也可把html和js對(duì)象轉(zhuǎn)換成jquery對(duì)象使用$中的方法和屬性;
6、$().appendTo():把某添加到某中：尾部添加;$().prependTo():把某添加到某中：頭部添加;
7、$()的屬性：lenght 內(nèi)容數(shù)量（長(zhǎng)度）
8、$()上的方法：get()獲取子元素；toArray()轉(zhuǎn)換成數(shù)組；prop("checked")動(dòng)態(tài)判斷radio是否認(rèn)為選中，選中為true,沒(méi)有選中為false;css()來(lái)選擇或者設(shè)置CSS樣式，可以通過(guò)子JS對(duì)象的方式設(shè)置多個(gè)樣式；attr():來(lái)選擇或設(shè)置元素的相關(guān)屬性；
9、靜態(tài)方法：$.each(JQuery,callback)遍歷Jquery對(duì)象（參數(shù)：index,value）；$.map(jquery,callback)遍歷Jquery對(duì)象必須有返回值（參數(shù)：value,index）；
10、數(shù)組遍歷：forEach(function(value,index){……})數(shù)組遍歷

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

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

老師批語(yǔ)：數(shù)組遍歷, 或者類數(shù)據(jù)遍歷是編程中非常常用, 特別是jquery, 就是完全基于它實(shí)現(xiàn)的
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(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é)