简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > JQuery初学习之`$()`的参数类型
Blogger Information
Blog 40
fans 0
comment 1
visits 34264
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
1395 people have browsed it

$()的四种参数类型

1.选择器
2.原生js对象（包装功能）
3.html字符串（创建dom元素）
4.回调函数（在页面加载完成，dom树创建成功后自动调用）

  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.     <title>Document</title>
  8.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  9.     <script>
  10.         // 5.$(callback回调函数):传一个回调当函数，当页面加载完成后会自动执行
  11.         // 例如4中生成dom元素时，放在顶部将不会生效，因为页面还未加载完成，获取不到#two，此时需要用回调函数进行操作
  12.         $("<li>hello2~</li>").appendTo(document.querySelector("#two"))
  13.         $(function(){
  14.             $("<li>hello3~</li>").appendTo(document.querySelector("#two"))
  15.         })
  16.     </script>
  17. </head>
  18. <body>
  19.     <ul id="one">
  20.         <li>item1</li>
  21.         <li>item2</li>
  22.         <li>item3</li>
  23.     </ul>
  24.     <ul id="two">
  25.         <li>item-two1</li>
  26.         <li>item-two2</li>
  27.         <li>item-two3</li>
  28.     </ul>
  29.     <script>
  30.         // 1.$(选择器，上下文)：获取元素；
  31.         // 1.1原生方法 
  32.         document.querySelectorAll("li").forEach(li=>(li.style.color="red"));
  33.         // jquery写法
  34.         // $("li","#one").css("color","blue");//不建议这么写
  35.         // 推荐jquery写法
  36.         $("#one li").css("color","green");
  37.         // 2.$(js对象)：jQuery包装器，js对象是原生的js对象，将原生的js对象转为jQuery对象；目的是使用jQuery对象上丰富的方法或属性
  38.         document.body.style.backgroundColor="green";
  39.         // 转为JQuery对象
  40.         $(document.body).css("backgroundColor","lightgreen");
  41.         // 3.get(n)、[n]:将jQuery集合中的第n个对象还原成原生的js对象
  42.         $(document.querySelectorAll("li")).get(2).style.backgroundColor="yellow";//添加样式为了方便查看
  43.         $(document.querySelectorAll("li"))[5].style.backgroundColor="yellow";
  44.         // 4.$(html文本)：生成dom元素
  45.         $("<li>hello~</li>").appendTo(document.querySelector("#two"))
  46.         //原生写法
  47.         document.querySelector("#one").insertAdjacentHTML("beforeend","<li>hi~</li>");
  49.         function User(name,email){
  50.             this.name2=name;
  51.             this.email2=email;
  52.             //实例方法
  53.             this.get=function(){
  54.                 return "name:"+this.name2+";"+"email:"+this.email2;
  55.             }
  56.         }
  57.         //原型方法
  58.         User.prototype.hello=function(name3){
  59.             return "name:"+name3;
  60.         }
  61.         //静态方法
  62.         User.say=function(){
  63.             return "static function";
  64.         }
  65.         const obj=new User("Jy","jy@php.cn");
  66.         console.log(obj.get());//访问实例方法
  67.         console.log(obj.hello("Jy2"));//访问原型方法
  68.         console.log(User.say());//访问静态方法
  69.         //1.页面中所以元素只要经过`$()`包装，一定返回 JQuery对象；
  70.         // 2.只有JQuery对象才可以调用定义在JQuery上的方法；
  71.         // 3.静态方法直接使用JQuery调用，将JQuery想象成构造函数
  72.     </script>
  73. </body>
  74. </html>
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！