Preface

I'm building my blog recently , We need to use some page styles and so on , I asked my girlfriend a question , About Web The front-end development ,jQuery It's out of date now ? She decided to tell me , That's our current chain of disdain . Yes , Undeniable? , Now frames are in vogue ,jQuery Has long been GitHub Abandoned by . I vaguely remember , Two years ago. , I'm a preschooler , I think this framework is really good , There will be time in the future , We must learn it well . Just a little bit of time , It has long been out of the sight of front-end developers . But what? , I'm a back-end Developer , That is to say, a new person at the front end , So I still like jQuery Thought , Because let me directly understand Vue/React Words , It will take a lot of time , So I think jQuery It's a good transition choice , You can also learn the idea of front-end programming , I like its humanization and readability , It's also very simple for us , So this article brings you back to those jQuery Every bit of , Also for our front-end knowledge to lay a solid technical foundation .

 

1、 understand jQuery

「 background :」

  • Query Query means ,jQuery Just use javascript More convenient query and control page components

「 Purpose :」

  • Design purpose :Write Less,Do More, That is to advocate writing less code , Do more

「 brief introduction :」

  • jQuery encapsulation JavaScript Common function codes , Provides a simple JavaScript Design patterns , Optimize HTML The document operation 、 Event handling 、 Animation design and Ajax Interaction

  • Support chain writing , Yes css Style support is near perfect

  • Set JavaScript、CSS、DOM、Ajax A powerful framework system in one

2、jQuery Basic functions of

「 function :」

1. Access and operation DOM Elements
2. Control page styles
3. Handling of page Events
4. And Ajax The perfect combination of Technology
5. A large number of plug-ins in the use of the page 

3、 build jQuery development environment

「 technological process :」

  • Prepare two documents as follows :

jQuery It's really just a JavaScript file , therefore , build jQuery The development environment is very simple
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
jar package \jQuery

4、jQuery Selectors

「 classification :」

  • Basic selector 、 Hierarchy selector 、 Filter selector ( Form selector )

「 Basic selector :」

 The basic selector is jQuery The most frequently used selector in , It's made up of elements ID、Class、 Element name 、 Multiple selectors make up , Most page elements can be found through the basic selector 

  • Case study : Through different selectors to control the display of page elements

「 Hierarchy selector :」

 The hierarchy selector passes through DOM The hierarchical relationship between elements gets the elements , Its main hierarchy includes offspring 、 Father and son 、 adjacent 、 Brotherhood , Through one of these relationships, you can easily and quickly locate elements
Selectors    Function description
ancestor descendant   Match all descendant elements based on ancestor elements
parent>child   Match all child elements according to parent element
prev+next   matching prev The adjacent elements after
prev~siblings   matching prev All the sibling elements in the back 

  • Case study : Through different selectors to control the display of page elements

「 Filter selector :」

 The filter selector matches elements according to certain filtering rules , They write with colons (:) start 

  • Simple filters are one of the most widely used ,ps: Interlacing discoloration

  • Visibility filter selector , Get the element according to whether the element is visible or not ,ps: Look for hidden elements on the page

  • Property filter selector , Get the element according to an attribute of the element , Such as ID Number or match the content of the property value , And “[” The start , With “]” end ,ps: The last one is the composite property selector

  • Child element filter selector , Be careful :nth-child Index from 1 Start

  • Form selector , Tailored for forms , It can quickly locate a form object in the page

  • Form object property filter selector , Get this kind of element through the attribute feature of an object in the form , Such as :enabled、disabled、checked、selected attribute

「 I'll take a comprehensive case :」

  • The whole is as follows :

  • The code is as follows

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title> choice </title>
  <style type="text/css">
   body{font-size:13px}
          #all{border:solid 1px #666;width:320px;overflow:hidden}
          #all #head{background-color:#eee;padding:8px;height:18px;cursor:hand}
          #all #head h3{padding:0px;margin:0px;float:left}
          #all #head span{float:right;margin-top:3px}
          #all #content{padding:8px}
          #all #content ul {list-style-type:none;margin:0px;padding:0px}
          #all #content ul li{ float:left;width:95px;height:23px;line-height:23px}
          #all #btn{float:right;padding-top:5px;padding-bottom:5px}
  </style>
  <script type="text/javascript" src="../js/jquery-1.8.2.js">
  </script>
  <script type="text/javascript">
   $(function(){
    
   })
  </script>
 </head>
 <body>
  <div id="all">
   <div id="head">
    <h3> Subject classification </h3>
    <span><img src="../img/close.gif"/></span>
   </div>
   <div id="content">
    <ul>
     <li>
      <a href="#">JavaEE</a><i> (1110) </i></li>
     <li>
      <a href="#">PHP</a><i> (230) </i></li>
     <li>
      <a href="#">BIG</a><i> (1430) </i></li>
     <li>
      <a href="#">Android</a><i> (1560) </i></li>
     <li>
      <a href="#">IOS</a><i> (870) </i></li>
     <li>
      <a href="#">H5</a><i> (1460) </i></li>
     <li>
      <a href="#">VR</a><i> (1450) </i></li>
     <li>
      <a href="#"> Applet </a><i> (1780) </i></li>
     <li>
      <a href="#"> speech </a><i> (930) </i></li>
     <li>
      <a href="#">PPT</a><i> (3450) </i></li>
     <li>
      <a href="#">Word</a><i> (980) </i></li>
     <li>
      <a href="#"> other </a><i> (3230) </i></li>
    </ul>
    <div id="btn">
     <a href="#"> simplify </a>
    </div>
   </div>
  </div>
 </body>
</html>

5、jQuery Objects and DOM object

「 Relationship :」

  • jQuery The object is passing through jQuery packing DOM Object generated after the object

  • Be careful :jQuery The object is packaging DOM After the object , however jQuery Can't use DOM Any method of object , Empathy DOM Objects can't use jQuery The method in

「 Concrete transformation :」

  • jQuery and DOM Object rotation

DOM convert to jQuery
var username = document.getElementById("username");
var $username = jQuery(username);
jQuery convert to DOM
var $username = jQuery("#username");
var username = $username[0];  //jQuery Object is an array object 

Conclusion

This article is about jQuery That's the end of my introduction , There will be jQuery Animation 、Ajax、jQuery operation DOM as well as jQuery Articles on events , Coming soon , Thank you for your support !