博客列表 >Jquery 与 原生 js的对比

Jquery 与 原生 js的对比

小庄
小庄原创
2021年07月20日 21:39:18837浏览

Jquery 与 原生 js的对比

Jquery 是使用js封装的一个库,Jquery 可以在官网下载,也可以在线引用。
作业内容:
1、下载并引用jQuery
官网下载,或在线引用

2、JavaScriptjQuery 对比。
js是一门编程语言,JQuery 是js 语言封装的js库,有点在于使用方便,操作dom更加轻松

3、列出 $() 的参数
$(‘.class’);
$(‘div’);
$(function(){ …});

4、列出选择器,并查看效果。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. <ul id="myUl">
  12. <li>
  13. 1
  14. <ul class="nav">
  15. <li>11</li>
  16. <li>22</li>
  17. <li>33</li>
  18. <li>44</li>
  19. </ul>
  20. </li>
  21. <li>2
  22. <a href="">点我</a>
  23. </li>
  24. <li>3</li>
  25. <li>4</li>
  26. <li>5</li>
  27. <li>6</li>
  28. </ul>
  29. <script>
  30. // document.querySelector('#myUl').style.color = 'red';
  31. let myUl = document.querySelector('#myUl');// id选择器
  32. myUl.style.color = 'red';
  33. // $('#myUl').css('color','red');// id选择器
  34. let navs = document.querySelector('.nav');// 类选择器
  35. navs.style.color = 'blue';
  36. // $('.nav').css('color','blue');// 类选择器
  37. let tags = document.querySelector('a');// 标签选择器
  38. tags.style.color = 'Chartreuse';
  39. // $('a').css('color','Chartreuse');// 标签选择器
  40. </script>
  41. </body>
  42. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议