Community Learn Tools Library Leisure
search
English
Home > List of blog posts > jQuery：基础与操作结果处理
Blogger Information
Blog 39
fans 0
comment 0
visits 30619
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：基础与操作结果处理
楷
Original
982 people have browsed it

配置jQuery本地编程环境、验证

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>$()jquery工厂函数</title>
  5.     <script src="lib/jquery-3.5.1.js"></script>
  6.     <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> -->
  7. </head>

验证效果：

1.$()工厂函数的四种使用场景

1.1 $(选择器，上下文)，返回jquery对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$()jquery工厂函数</title>
<script src="lib/jquery-3.5.1.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> -->
</head>
<body>
<ul id="first">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul id="second">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
//1.$(选择器，上下文)，返回jquery对象
$(“li”).css(“color”,”green”);
</script>
</body>
</html>
实例效果：

1.2 $(js对象)，返回jquery对象，把js对象包装成JQ对象

  1. <script>
  2.         var lis = document.querySelectorAll("#first li");
  3.         $(lis).css("background","cyan");
  4. </script>

实例效果：

1.3 $(html),将html包装成JQ对象并返回

  1. <script>
  2.         $("<h3>Laravel开发</h3>").insertBefore("#first");
  3.         $("<h3>PHP开发</h3>").insertBefore("#second");
  4.         $("<h3>JQUERY开发</h3>").insertAfter("#second");
  5. </script>

实例演示：

1.4 $(callback),当html文本加载完立即执行这个函数

  1. <script>
  2.         $("<h3>Laravel开发</h3>").insertBefore("#first");
  3.         $("<h3>PHP开发</h3>").insertBefore("#second");
  4.         $("<h3>JQUERY开发</h3>").insertAfter("#second");
  6.         $(function(){
  7.             $(document.body).css({
  8.                 "background-color" : "cyan",
  9.                 "font-size" : "10px",
  10.             });
  11.         });
  12. </script>

实例效果：

2.对jQuery查询结果的处理方式

2.1 toArray把结果转换成数组

  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>JQUERY查询结果的处理</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.     // 1.转成数组
  22.     var lis = $("ul>li");
  23.     cl (lis);
  24.     lis.toArray().forEach(function (item,index) {
  25.         if(index >= 2) cl ("元素"+index+":"+item);
  26.     }) ;
  27. </script>

实例效果：

2.2 $.each(),回调的参数与foreach顺序不一样

  1. <script>
  2.     var cl = console.log.bind(console);
  4.     lis.each(function (index,item) {
  5.         $(this).css("color","wheat");
  6.     });
  7. </script>

实例效果：

2.3 $.map(),有返回值，回调参数与$each()的顺序相反

  1. <script>
  2.     var cl = console.log.bind(console);
  3.     var lis = $("ul>li");
  5.     cl (lis);
  6.     var arr = $.map(lis , function (item,index) {
  7.         if(index % 2) return item;
  8.     });
  9.     cl (arr);
  10.     cl ($(arr));
  11.     $(arr).css("color","red");
  12. </script>

实例效果：

2.4 index（），返回JQ查询结果中的索引

  1. <script>
  2.     var cl = console.log.bind(console);
  3.     var lis = $("ul>li");
  5.     lis.click(function(){
  6.         cl ("你点击了第"+($(this).index()+1)+"个<li>");
  7.         })
  8. </script>

实例效果：

总结：

  1. 学习配置jQuery本地编程环境、验证
  2. $()工厂函数的四种使用场景，把JS对象包装成JQ对象，就可以使用JQ对象的方法。
  3. 对jQuery查询结果的处理方式：toArray、$.each、$.map、index()。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：其实, 现在许多jQuery中的功能, 原生都可以很简例的实现,代码量也非常小, 有空了解一下es6
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