Community Learn Tools Library Leisure
search
English
Home > List of blog posts > jQuery函数、jQuery重要术语
Blogger Information
Blog 28
fans 0
comment 0
visits 25987
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函数、jQuery重要术语
，多思曩惜，
Original
686 people have browsed it

$()jQuery函数

$()：工厂函数

  • 基本语法：$(选择器).操作();
    • 1.$(选择器，上下文):返回Hquery对象
    • 2.$(js对象),返回一个jqery对象
    • 3.$(html文本),将html文本包装成一个Jquery对象并返回
  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>Document</title>
  8. </head>
  9. <body>
  10.     <ul id="first">
  11.         <li>item1</li>
  12.         <li>item2</li>
  13.         <li>item3</li>
  14.       </ul>
  15.       <ul id="second">
  16.         <li>item1</li>
  17.         <li>item2</li>
  18.         <li>item3</li>
  19.       </ul>
  20. </body>
  21. </html>
  22. <script>
  23.     var cl = console.log.bind(console);
  24.     // $()：工厂函数
  25.     // 基本语法：$(选择器).操作();
  26.     // 1.$(选择器，上下文):返回Hquery对象
  27.     // 原生
  28.     document.querySelectorAll('li').forEach(function(item){
  29.         item.style.color="red";
  30.     }) 
  31.     // jQuery
  32.     $("li").css("color","green");
  34.     // $("li","#first").css("color","blue");
  35.     $("#first li").css("color","blue");
  37.     // 2.$(js对象),返回一个jqery对象
  38.     var lis= document.querySelectorAll("#second li");
  39.     lis.forEach(function (item){
  40.         item.style.backgroundColor="yellow";
  41.     });
  42.     $(lis).css("background-color",'cyan');
  43.     // 3.$(html文本),将html文本包装成一个Jquery对象并返回
  44.     $("<h3>2222</h3>").insertBefore("#first");
  45.     $(function(){
  46.         // $(document.body).css("font-size",'18px').css("background-color","wheat")
  47.         $(document.body).css({
  48.             "font-size":'18px',
  49.             "background-color":"wheat",
  50.         });
  51.     });

jQuery重要术语

    1. jQuery函数
    1. jQuery对象
    1. 匹配元素:　通过 jQuery的方式返回的元素对象
    1. jQuery的静态方法与方法
  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="lib/jquery-3.5.1.js"></script>
  8. </head>
  9. <body>
  11. </body>
  12. </html>
  13. <script>
  14.     var cl = console.log.bind(console);
  15.     // 原生
  16.     // document.body.style.backgroundColor = "yellow";
  17.     //1. Jquery函数
  18.     // $(document.body).css("background-color","wheat");
  19.     // $2.Jquery对象
  20.     // cl($("*").length);
  21.     // cl($("*")[3]); 
  22.     // cl($("*").get(3));
  23.     // cl($($("*").get(6)).css("background-color","wheat"));
  24.     // var bgc = $("*").get(6);
  25.     // cl($(bgc).css("background-color","wheat"));
  26.     // cl($("*").toArray());
  27.     // $("*").toArray().forEach(function(item){
  28.     //     cl(item);
  29.     // });
  30.     // 3. 匹配元素:　通过 jQuery的方式返回的元素对象
  31.     // 4. jQuery的静态方法与方法
  32.     // each():静态方法
  33.     $.each($("*"),function(index,value){
  34.         cl(index);
  35.     });
  36.     // each():非静态方法
  37.     $("*").each(function(index,value){
  38.         cl(index);
  39.     })
  40. </script>

jQury中查询结果的处理

  • 1.toArray():将查询结果转为真正的数组
    1. $.each(): 回调的参数顺序与forEach不一样, $().each(callback)
    1. $.map(), 必须要有返回值, 回调参数的参数与$.each()的回调参数的参数完全相反
    1. index(): 返回jQuery查询集合中的索引
  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="lib/jquery-3.5.1.js"></script>
  8. </head>
  9. <body>
  10.     <ul>
  11.         <li>item1</li>
  12.         <li>item2</li>
  13.         <li>item3</li>
  14.         <li>item4</li>
  15.         <li>item5</li>
  16.       </ul>
  17. </body>
  18. </html>
  19. <script>
  20.     var cl=console.log.bind(console);
  21.     var lis = $("ul>li");
  22.     cl(lis);
  23.     cl(lis.length);
  24.     cl(lis.get(3));
  25.     for(var i = 0;i<lis.length;i++){
  26.         lis.get(i).style.color= "red";
  27.     };
  28.     lis.toArray().forEach(function(item,index){
  29.         if(index >= 2 ) cl("元素"+index + ":"+item)
  30.     })
  31.     lis.each(function(item,value){
  32.         // this.style.color="green";
  33.         $(this).css("color","blue");
  34.     });
  35.     // var arr = $.map(lis,function(value,index){
  36.     //     if(index % 3 ) return value;
  37.     // });
  38.     // cl(arr);
  39.     // $(arr).css("color","red");
  40.     // 4. index(): 返回jQuery查询集合中的索引
  41.     // jQuery对象是一个类数组,具有从0开始递增的正整数索引,并有一个lenth属性
  42.     cl(lis);
  43.     lis.click(function(){
  44.         cl("点击第几个：",$(this).index()+1,"<li>");
  45.     })
  46. </script>

总结

  • 调用$()会返回一个 jQuery 对象,
  • 了解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