简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 12月19号_ jQuery原理、基础选择器 - 九期线上班
Blogger Information
Blog 34
fans 0
comment 0
visits 21633
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
12月19号_ jQuery原理、基础选择器 - 九期线上班
只猫
Original
700 people have browsed it

jQuery原理：封装js

写一个模拟jq选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery的应用</title>
  6.     <!-- 引入 -->
  7.     <script src="jquery.js"></script>
  8. </head>
  9. <body>
  10.     <input type="text" id="username" value="aaaa">
  11.     <script type="text/javascript">
  12.     //jQuery
  13.     var jq = $('#username').val();
  14.     console.log(jq);
  15.     //jQuery是使用js封装的方法库
  16.     //写一个id选择器
  17.     function $$(selector){
  18.         var obj = {
  19.             val:function(){
  20.                 var flag = selector.substr(0,1);
  21.                 if(flag=='#'){
  22.                     var str = selector.substr(1,selector.length-1);
  23.                     var value = document.getElementById(str).value;
  24.                     return value;
  25.                 }
  26.                 if(flag=='.'){
  27.                     var str = selector.substr(1,selector.length-1);
  28.                     //类选择器只能拿到该类的第一个标签
  29.                     var value = document.getElementsByClassName(str)[0].value;
  30.                     return value;
  31.                 }
  32.             }
  33.         };
  34.         return obj;
  35.     }
  37.     var myjq = $$('#username').val();
  38.     console.log(myjq);
  39.     //调用和jQuery一样
  40.     </script>
  41. </body>
  42. </html>

jQuery基本选择器

基本：
1.id选择器 jQuery( “#id” )
2.元素选择器 jQuery( “element” )
3.类选择器 jQuery( “.class” )

层级：
后代 jQuery( “ancestor descendant” )
父子 jQuery( “parent > child” )
选择所有紧接在 “prev” 元素后的 “next” 元素 jQuery( “prev + next” )
匹配 “prev” 元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器。 jQuery( “prev ~ siblings” ) 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery基本选择器</title>
  6.     <script src="jquery.js"></script>
  7.     <style>
  8.     .my{
  9.         padding: 10px;
  10.         margin: 20px;
  11.     }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div style="background: lightblue" id="blue" class="my">div1</div>
  16.     <div style="background: lightgreen" id="green" class="my">div2</div>
  17.     <div style="background: lightpink" id="pink" class="my">div3</div>
  19.     <div style="background: lightyellow" id="yellow" class="my">
  20.         <p>
  21.             <i>javascript</i>
  22.             <i>javascript</i>
  23.             <i>javascript</i>
  24.         </p>
  25.         <p>
  26.             <b>jquery</b>
  27.             <b>jquery</b>
  28.             <b>jquery</b>
  29.         </p>
  30.         <i>div的直接子元素1</i>
  31.         <b>div的直接子元素2</b>
  32.     </div>
  34.     <script>
  35.     //id选择器 返回的是一个jquery对象
  36.     var selector1 = $('#blue');
  37.     console.log(selector1);    //拿到div1
  38.     //类选择器 class
  39.     var selector2 = $('.my');
  40.     console.log(selector2);    //获取到三个对象 div1 div2 div3
  41.     //标签选择器 element
  42.     var selector3 = $('div');
  43.     console.log(selector3);    //获取到三个对象 div1 div2 div3
  44.     //后代选择器 ancestor
  45.     var selector4 = $('#yellow p i');
  46.     console.log(selector4);    //选中3个i标签
  47.     //父子选择器 child
  48.     var selector5 = $('#yellow>i');
  49.     console.log(selector5);
  50.     //紧接在后面的元素 同级
  51.     var selector6 = $('#yellow p + i');
  52.     console.log(selector6);
  53.     //在后面出现的同级元素
  54.     var selector7 = $('#yellow > p ~ b');
  55.     console.log(selector7);    //选中div的直接子元素2
  56.     </script>
  57. </body>
  58. </html>


总结：了解到jQuery是如何运作的，知道它是怎样去封装的，也就不难理解jQuery的用法。一些基本选择器和css的选择器基本一致，略有不同，可以触类旁通。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：jquery与原生js对象之间的切换, 有空了解一下
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！