Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 初探jQuery（$(),attr(),css(),val(),html(),text(),each()）
Blogger Information
Blog 32
fans 0
comment 0
visits 22278
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
初探jQuery（$(),attr(),css(),val(),html(),text(),each()）
培(信仰)
Original
580 people have browsed it

初探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() 代替 $()

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post