search

博客列表 >初探jQuery（$(),attr(),css(),val(),html(),text(),each()）

初探jQuery（$(),attr(),css(),val(),html(),text(),each()）

培(信仰)
培(信仰)原创
2021年02月01日 14:54:57579浏览

初探jQuery

jQuery是什么

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

使用jQuery 需要先进入jQuery文件。
有两种方式：

  1. 从官网下载后，通过script src属性加载

  2. 通过CDN加载

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

$()：工厂函数

$()：工厂函数，是全局函数，同时也是jQuery的别名，如果 $ 被占用可以用jQuery来操作。
$:也是构造函数，用来创建jQuery实例
jQuery对象：$()函数的返回值

  1. $("body").css("background","blue");
  2. jQuery("body").css("background","blue");

$():接收4种类型的参数

  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>$()函数</title>
  7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  8.     <style>
  9.         /* #first li:last-of-type {
  11.         } */
  12.     </style>
  13.     <script>
  14.       // $(function(){
  15.       //   $("<li>这是回调函数生成的</li>").appendTo($("#first"));
  17.       // })
  18.       $(()=>$("<li>这是回调函数生成的</li>").appendTo($("#first")))
  19.     </script>
  20.   </head>
  21.   <body>
  22.     <ul id="first">
  23.       <li>item1</li>
  24.       <li>item2</li>
  25.       <li>item3</li>
  26.     </ul>
  27.     <ul id="second">
  28.       <li>item1</li>
  29.       <li>item2</li>
  30.       <li>item3</li>
  31.     </ul>
  32.     <script>
  33.       //接收4种类型的参数
  35.       //   1. $(selector,context):获取元素
  36.       //原生
  37.       //document.querySelectorAll("li").forEach(li => (li.style.color="red"));
  38.       //jQuery
  39.       // $("li").css("background","blue");
  40.       $("li").css("color", "red");
  41.       $("li", "#first").css("color", "blue");
  42.       $("#first li").css("background", "green");
  43.       //$("li","#first") === $("#first li") //并列写时，#first必须写在前面
  45.       // 2. $(js对象):jQuery包装器，js对象是原生的js对象，将原生的js对象转为jQuery对象
  46.       // 因为想使用jQuery对象上的非常丰富的方法或属性
  47.       document.body.style.backgroundColor = "yellow";
  48.       // 想用jQuery中的css方法来设置style属性（内联样式）
  49.       $(document.body).css("background", "lightgreen");
  51.       // 将jQuery对象还原成原生的js对象
  52.       // console.log($(document.querySelectorAll("li")));
  53.       // ...spread 扩展，...rest归并
  54.       console.log([...$(document.querySelectorAll("li"))]);
  56.       //   [...$(document.querySelectorAll("li"))].forEach(
  57.       //     (li) => (li.style.backgroundColor = skyblue)
  58.       //   );
  59.       //   [...$(document.querySelectorAll("li"))].forEach(
  60.       //     (li) => (li.style.color = "skyblue")
  61.       //   );
  63.       console.log($(document.querySelectorAll("li")).get(2));
  64.       //get(n),[n] 可以获取jQuery集合中的第n个元素,返回原生对象
  65.       $(document.querySelectorAll("li")).get(2).style.color = "yellow";
  66.       $(document.querySelectorAll("li"))[1].style.color = "skyblue";
  68.       // 3. $(html文本)：生成dom元素
  69.       // document.body.insertAdjacentHTML("afterend","<li>这是一个增加项</li>")
  70.       document
  71.         .querySelector("#first")
  72.         .insertAdjacentHTML("beforeend", "<li>这是js生成的一个增加项</li>");
  73.       // $("<li>这是jQuery生成的一个增加项</li>").appendTo(document.querySelector("#first"));
  74.       $("<li>这也是jQuery生成的一个增加项</li>").appendTo($("#first"));
  76.       // 4. $(callback回调函数):传一个回调函数当参数，当页面加载完成后会自动调用它
  77.       //$() :参数的四种类型
  78.       // 1. CSS选择器
  79.       // 2. 原生js对象（包装器的功能）
  80.       // 3. html字符串，创建dom元素
  81.       // 4. 回调函数，在页面加载完成后，dom树创建成功后自动调用
  82.     </script>
  83.   </body>
  84. </html>

演示效果如图。
效果图

重要术语

  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>重要术语</title>
  7. </head>
  8. <body>
  9.     <!-- <script>
  10.         function User(name,email) {
  11.             this.name = name;
  12.             this.email = email;
  13.             this.get= function (){
  14.                 return this.name + ':'+this.email;
  15.             };
  16.         }
  17.         User.prototype.hello = function (name) {
  18.             return 'Hello ' + name;
  19.         }
  21.         User.say = function () {
  22.             return ' static function ';
  23.         }
  25.         const obj = new User("admin","a@php.cn");
  26.         //实例方法
  27.         console.log(obj.get()); 
  28.         //原型方法
  29.         console.log(obj.hello('percy'));
  30.         //类方法
  31.         console.log(User.say());
  32.     </script> -->
  34.     <ul>
  35.         <li>item1</li>
  36.         <li>item2</li>
  37.         <li>item3</li>
  38.         <li>item4</li>
  39.         <li>item5</li>
  40.     </ul>
  41.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  42.     <script>
  43.         //页面中所有元素，只要经过$()包装，一定返回的是jQuery对象
  44.         console.log($("*") instanceof jQuery);
  45.         //只有jQuery对象才可以调用定义在jQuery上的方法。
  46.         //静态方法，直接使用jQuery调用，jQuery想象成构造函数
  47.         //function jQuery(){}
  48.         // $.each($('li'),(key, item)=> console.log(key, item.textContent));
  50.         // document.querySelectorAll('li').forEach((item,key)=>console.log(key,item.textContent));
  52.         // $.each($('li'),(key, item)=>item.style.color = 'yellow');
  53.         $.each($('li'),(key, item)=> $(item).css('color' , 'blue'));
  54.         $.each($('li'),(key, item)=> $(item).css('border' , '1px solid red'));
  55.     </script>
  56. </body>
  57. </html>

注意：一定要分别 原生的forEach(需要遍历的对象，callback(item,key))，和jQuery的each(需要遍历的对象，callback(key,item))参数的顺序不同。

第一组 getter/setter attr()

  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>getter/setter1</title>
  7.     <style>
  8.         * {
  9.             padding: 0;
  10.             margin: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         body {
  14.             display:flex;
  15.             flex-direction: column;
  16.             align-items: center;
  17.             color:#666;
  18.         }
  19.         form {
  20.             width: 400px;
  21.             padding: 20px 10px;
  22.             border:1px solid #aaa;
  23.             box-shadow:0 0 5px #888;
  24.             background-color: #eee;
  25.             display:grid;
  26.             grid-template-columns:80px 200px;
  27.             gap:10px;
  28.             place-content: center center;
  29.         }
  31.         button {
  32.             grid-column: 2 / 3;
  33.             height: 26px;
  34.         }
  35.         button:hover {
  36.             color: white;
  37.             background-color: #888;
  38.             border:none;
  39.             cursor:pointer;
  40.         }
  41.         .red {
  42.             color:red;
  43.         }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <h2 class="red">用户登录</h2>
  48.     <form action="handle.php" method="get">
  49.       <label for="email">Email</label>
  50.       <input
  51.         type="email"
  52.         name="email"
  53.         id="emial"
  54.         autofocus
  55.         value="leture@php.cn"
  56.       />
  57.       <label for="password">Password</label>
  58.       <input type="text" name="password" id="password" value="不少于6位" />
  59.       <label for="confirm">记住我</label>
  60.       <div>
  61.         <input type="radio" name="save" id="confirm" value="1" checked />
  62.         <label for="confirm">记住</label>
  63.         <input type="radio" name="save" id="cancel" value="0" />
  64.         <label for="cancel">放弃</label>
  65.       </div>
  66.       <button>登录</button>
  67.     </form>
  69.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  70.     <script>
  71.         //attr():获取/设置元素属性
  72.         //attr(name):getter
  73.         //attr(name,value):setter
  74.         const form = $("form");
  75.         //action = "handle.php"
  76.         console.log(form.attr("action"));
  77.         form.attr("action","admin/check.php");
  78.         console.log(form.attr("action"));
  80.         //第一个参数通常是获取需要的属性，第二个参数使用回调
  81.         form.attr("action",()=>{
  82.             let method = form.attr('method').toUpperCase();
  83.             return  method === 'GET' ? 'query.php?id=2' : 'register.php';
  84.         });
  86.         console.log(form.attr("action"));
  87.     </script>
  88.   </body>
  89. </html>

第二组 getter/setter css()

  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>getter/setter2</title>
  7.     <style>
  8.       * {
  9.         padding: 0;
  10.         margin: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       body {
  14.         display: flex;
  15.         flex-direction: column;
  16.         align-items: center;
  17.         color: #666;
  18.       }
  19.       form {
  20.         width: 400px;
  21.         padding: 20px 10px;
  22.         border: 1px solid #aaa;
  23.         box-shadow: 0 0 5px #888;
  24.         background-color: #eee;
  25.         display: grid;
  26.         grid-template-columns: 80px 200px;
  27.         gap: 10px;
  28.         place-content: center center;
  29.       }
  31.       button {
  32.         grid-column: 2 / 3;
  33.         height: 26px;
  34.       }
  35.       button:hover {
  36.         color: white;
  37.         background-color: #888;
  38.         border: none;
  39.         cursor: pointer;
  40.       }
  41.       .red {
  42.         color: red;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <h2 class="red">用户登录</h2>
  48.     <form action="handle.php" method="get">
  49.       <label for="email">Email</label>
  50.       <input
  51.         type="email"
  52.         name="email"
  53.         id="emial"
  54.         autofocus
  55.         value="leture@php.cn"
  56.       />
  57.       <label for="password">Password</label>
  58.       <input type="text" name="password" id="password" value="不少于6位" />
  59.       <label for="confirm">记住我</label>
  60.       <div>
  61.         <input type="radio" name="save" id="confirm" value="1" checked />
  62.         <label for="confirm">记住</label>
  63.         <input type="radio" name="save" id="cancel" value="0" />
  64.         <label for="cancel">放弃</label>
  65.       </div>
  66.       <button>登录</button>
  67.     </form>
  69.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  70.     <script>
  71.       //css():设置元素的行内样式
  72.       //css(name):获取getter
  73.       //css(name,value):setter;
  74.       //css(name,callback):支持回调函数
  75.       const form = $("form");
  76.       //使用style只能获取到style属性上的行内/内联样式
  77.       //css样式表的样式是拿不到的，必须使用计算样式才可以
  78.       // console.log(document.querySelector("form").style.width);
  79.       // console.log(window.getComputedStyle(document.querySelector("form"),null).getPropertyValue("width"));
  80.       // jQuery 可以直接就拿到元素的最终的计算样式
  81.       // console.log(form.css("width"));
  82.       form.css("border-top", "6px solid blue");
  83.       //css(obj):接收对象
  84.       form.css({
  85.         "border-bottom": "3px solid skyblue",
  86.         "background-color": "lightcyan",
  87.       });
  89.       //css(属性或者对象,callback): 第二个参数支持回调函数
  91.       form.css("background-color",()=>{
  92.         const colors = ['plum','lightblue','lime','red'];
  93.         const i = Math.floor(Math.random()*colors.length);
  94.         return colors[i];
  95.       })
  96.     </script>
  97.   </body>
  98. </html>

第三组 getter/setter val()

  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>getter/setter3</title>
  7.     <style>
  8.       * {
  9.         padding: 0;
  10.         margin: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       body {
  14.         display: flex;
  15.         flex-direction: column;
  16.         align-items: center;
  17.         color: #666;
  18.       }
  19.       form {
  20.         width: 400px;
  21.         padding: 20px 10px;
  22.         border: 1px solid #aaa;
  23.         box-shadow: 0 0 5px #888;
  24.         background-color: #eee;
  25.         display: grid;
  26.         grid-template-columns: 80px 200px;
  27.         gap: 10px;
  28.         place-content: center center;
  29.       }
  31.       button {
  32.         grid-column: 2 / 3;
  33.         height: 26px;
  34.       }
  35.       button:hover {
  36.         color: white;
  37.         background-color: #888;
  38.         border: none;
  39.         cursor: pointer;
  40.       }
  41.       .red {
  42.         color: red;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <h2 class="red">用户登录</h2>
  48.     <form action="handle.php" method="get" id="login">
  49.       <label for="email">Email</label>
  50.       <input
  51.         type="email"
  52.         name="email"
  53.         id="email"
  54.         autofocus
  55.         value="leture@php.cn"
  56.       />
  57.       <label for="password">Password</label>
  58.       <input type="password" name="password" id="password" value="不少于6位" />
  59.       <label for="confirm">记住我</label>
  60.       <div>
  61.         <input type="radio" name="save" id="confirm" value="1" checked />
  62.         <label for="confirm">记住</label>
  63.         <input type="radio" name="save" id="cancel" value="0" />
  64.         <label for="cancel">放弃</label>
  65.       </div>
  66.       <button>登录</button>
  67.     </form>
  69.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  70.     <script>
  71.       // val():元素的值，表单控件的value属性
  72.       console.log(document.forms["login"].email.value);
  73.       console.log(document.forms.login.email.value);
  75.       //jQuery
  76.       console.log($("#email")[0].value);
  77.       console.log($("#email").get(0).value);
  78.       console.log($("#email").val());
  79.       $("#email").val("admin@php.cn")
  80.       console.log($("#email").val());
  82.       console.log($("input:password").val());
  83.       console.log($('input:radio[name="save"]:checked').val());
  84.       console.log($('input:radio:checked').val());
  86.       //val(callback):也支持回调函数
  87.       $("email").val(()=> "xxx@qq.com");
  88.     </script>
  89.   </body>
  90. </html>

第四组 getter/setter html() ，text()

  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>getter/setter4</title>
  7.     <style>
  8.       * {
  9.         padding: 0;
  10.         margin: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       body {
  14.         display: flex;
  15.         flex-direction: column;
  16.         align-items: center;
  17.         color: #666;
  18.       }
  19.       form {
  20.         width: 400px;
  21.         padding: 20px 10px;
  22.         border: 1px solid #aaa;
  23.         box-shadow: 0 0 5px #888;
  24.         background-color: #eee;
  25.         display: grid;
  26.         grid-template-columns: 80px 200px;
  27.         gap: 10px;
  28.         place-content: center center;
  29.       }
  31.       button {
  32.         grid-column: 2 / 3;
  33.         height: 26px;
  34.       }
  35.       button:hover {
  36.         color: white;
  37.         background-color: #888;
  38.         border: none;
  39.         cursor: pointer;
  40.       }
  41.       .red {
  42.         color: red;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <h2 class="red">用户<em style="color:green">登录</em> </h2>
  48.     <form action="handle.php" method="get" id="login">
  49.       <label for="email">Email</label>
  50.       <input
  51.         type="email"
  52.         name="email"
  53.         id="email"
  54.         autofocus
  55.         value="leture@php.cn"
  56.       />
  57.       <label for="password">Password</label>
  58.       <input type="password" name="password" id="password" value="不少于6位" />
  59.       <label for="confirm">记住我</label>
  60.       <div>
  61.         <input type="radio" name="save" id="confirm" value="1" checked />
  62.         <label for="confirm">记住</label>
  63.         <input type="radio" name="save" id="cancel" value="0" />
  64.         <label for="cancel">放弃</label>
  65.       </div>
  66.       <button>登录</button>
  67.     </form>
  69.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  70.     <script>
  71.       //html() :对应原生innerHTML
  72.       //text() :对应原生innerText / textContent
  75.       // const h2= document.querySelector("h2").innerHTML;
  76.       // const h2= document.querySelector("h2").textContent;
  77.       // console.log(h2);
  79.       // console.log(document.querySelector("h2").innerHTML);
  81.       //jQuery
  82.       // 只获取纯文本
  83.       // console.log($("h2").text());
  84.       // 带有html的文本
  85.       // console.log($("h2").html());
  87.       $($("<h2><em>这是新增加的H2</em></h2>")).appendTo($("body"));
  88.     </script>
  89.   </body>
  90. </html>

总结：attr(),css(),val()
三个方法，一个参数时是获取，两个参数时是设置，第二个参数支持回调。这样就很强大。

html() :对应原生innerHTML
text() :对应原生innerText / textContent

原生forEach() 与 jQuery 的 each() 的区别

需要特别注意的是：要想使用jQuery的属性和方法，必须转为jQuery对象，哪怕只是原生js加$()包装器。另外当$被占用是可以使用 jQuery() 代替 $()

上一条：PHP基础知识：数组相关函数和操作下一条：第25章 0119-组件的知识，学习心得，笔记（Vue，组件传参）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多