JQuery framework (simplified js Development)

JQuery Basics

(1) Basic concepts:

  • Simplify js development
    • Optimize HTML document operation, event processing, animation design and Ajax interaction
  • JavaScript framework: the essence is some js files, which encapsulate the methods

(2) Quick start:

  • Steps:
    • Download JQuery file
    • Import JQuery file
    • Use file
  • jquery-xxx.js and jQuery XXX Difference between min.js
    • jquery-xxx.js development version: it is for programmers to see that it has good readability, good indentation and comments
    • jquery-xxx.min.js production version: it is used in the program without indentation, and the volume is smaller,

(3) Basic grammar learning

  • 1. Event binding

    • <script>
      $("#b1").click(function (){  
  • 2. Entry function (page loading completion event)

    • <!--
      window.onload : You can also perform loading actions
       But only one can be defined with this , If defined multiple times , The back will cover the front
      	This method can be defined multiple times at the same time
  • 3. Style control

    • <script>

(4) Difference and transformation between jQuery object and JS object

  • difference:

  • <!--
     1.JQuery Objects are more convenient to operate
     2.JQuery Object and js Object methods are not generic
     3.The two are converted to each other
       * JQuery- - -> js:    jq object[Indexes] or jq object.get(Indexes)
       * js- - ->  JQuery:   $(js object)  that will do
    //1. Get all element objects named div through js
      var divs = document.getElementsByTagName("div");
      alert(divs);   //[object HTMLCollection]
      //You can use it as an array
      //For all divs in divs, change their label content to aaa
      for (const div of divs) {
        div.innerHTML = "aaa";
      //2. Obtain all element objects with the name div through jq
      var $divs = $("div");
      alert($divs);   //[object Object]
      //It can also be used as an array
      //For all divs in $divs, change the label content into bbb, so there is no need to traverse

(5) Selector

  • Filter elements (labels) with similar characteristics

1. Basic selector:

① Label selector: (element selector)

  • $("html tag name"), get all elements matching the tag name

② id selector:

  • $("#id attribute value"), gets the element matching the specified ID attribute value

③ Class selector:

  • $("attribute value of. Class"), get the element matching the specified class attribute value

④ Union selector:

  • $("selector 1, selector 2,..."): get all elements selected by multiple selectors

2. Level selector:

① Descendant selector:

  • $("A B"): select all B elements inside the A element

② Sub selector:

  • $("A > b"): select all B child elements inside the A element

3. Attribute selector:

① Attribute name selector:

  • $("tag name [attribute name]"): the selector containing the specified attribute

② Attribute selector:

  • $("tag name [attribute name = 'value']): contains a selector where the specified attribute is equal to the specified value

③ Composite attribute selector:

  • $("tag name [attribute name = 'value'] [attribute name = 'value']..."): selector containing multiple attribute conditions

The attribute value starts with xx: (a ^ before the equal sign indicates the value starting with xx)

$("div[title ^= 'te']")

The attribute value ends with xx: (a $before the equal sign indicates the value ending with xx)

$("div[title $= 'est']")

Attributes with xx in the attribute value: (a * before the equal sign indicates attributes with xx)

$("div[title *= 'es']")

4. Filter selector:

① First element selector:

  • Tag name: first gets the first element in the selected element

② Tail element selector:

  • Tag name: last gets the last element in the selected element

③ Even selector:

  • Tag name: even count from 0

④ Odd selector:

  • Tag name: odd count from 0

⑤ Equal to index selector:

  • Tag name: eq (index) specifies the index element

⑥ Greater than index selector:

  • Tag name: gt (index) is greater than the specified index element

⑦ Less than index selector:

  • Tag name: lt (index) is smaller than the specified index element

Note that the index here starts from 0,

⑧ Title selector:

  • : header gets the title (h1~h6) element (fixed writing method)

⑨ Non element selector:

  • Tag name: not() does not include the element of the specified content

5. Form filter selector:

① Available element selectors:

  • Get available element: enabled

② Unavailable element selector:

  • : disabled get unavailable elements

③ Select selector: (radio and multiple selection box)

  • : checked gets the * * (selected) * * element in the radio check box

④ Select selector: (drop-down box)

  • : selected get the * * (selected) * * element in the drop-down box

Note: the attribute that can be checked by setting the drop-down box is: the value of multiple attribute is multiple, so that multiple check boxes can be selected

(6)DOM operation

1. Content operation:

① html(): (tag body content)

  • Gets or sets the label body content of the element
  • obtain:
  • Setting: also sets all contents under this element, including label contents

② text(): (plain text content)

  • Gets or sets the plain text content of the label body of the element
  • obtain:
  • Setting: set all contents under this element, including label contents

③ Val(): (value attribute value)

  • Gets or sets the value attribute value of the element

2. Attribute operation:

(1) General attribute operation

① attr(): get / set the attribute of the element

<script type="text/javascript">
		$(function () {
            //Gets the name attribute value of the Beijing node
			var name = $("#bj").attr("name");
            //Set the value of the name attribute of the Beijing node to dabeijing
            //The description attribute value of the new Beijing node is didu
            //Delete the name attribute of Beijing node and check whether the name attribute exists
            //Get the selected status of hobby
			var checked = $("#hobby").prop("checked");
            //var checked = $("#hobby").attr("checked"); // Unable to get, pop up undefined

② removeAttr(): deletes the attribute of an element

③ prop(): get / set the attribute of the element

④ removeProp(): deletes the attribute of an element

  • The difference between attr and prop
    • If you operate on the inherent attributes of an element, prop is recommended
    • If the operation is a custom attribute, attr is recommended

(2) Operation on class attribute

① addClass(): adds the class attribute value

② removeClass(): deletes the class attribute value

③ toggleClass(): toggles the class attribute value

  • Add the attribute if it does not exist on the element object, and delete it if it exists

④ css(): you can also set the class attribute value

3. Operations of adding, deleting, modifying and querying: (CRUD)

① append(): the parent element appends the child element to the end

  • Object 1 Append (object 2): add object 2 inside the element of object 1 and at the end

② prepend(): the parent element adds the child element to the beginning

  • Object 1 Prepend (object 2): add object 2 to the inside of the object 1 element and start at the beginning

③ appendTo(): add object 1 to the internal end of object 2

  • Object 1 Appendto (object 2)

④ prependTo(): add object 1 to the beginning of object 2

  • Object 1 Prependto (object 2)

⑤ after(): add element to the back of element

  • Object 1 After: add object 2 to the back of object 1. Object 1 and object 2 are brothers

⑥ before() :

  • Object 1 After: add object 2 to the front of object 1. Object 1 and object 2 are brothers

⑦ insertAfter() :

  • Object 1 Insertafter: adds object 1 to the back of object 2

⑧ insertBefore() ;

  • Object 1 InsertBefore (object 2): adds object 1 to the front of object 2

⑨ Remove(): remove element

  • Object remove(): delete the object

⑩ empty(): clears all descendant elements of the element

  • Object empty(): empty all the descendant elements of the object However, the current object and its attribute nodes are preserved

⑩ ① clone (): clone the matching DOM elements and select the copies of these clones

(7) Case

Select all or deselect all:

function selectAll(obj){
//Get the check box at the bottom and add an attribute to them. The value is the value of the all selection box at the top

qq expression:

 //Demand: click qq expression to add it to the speech box
$(function () {
    //1. Add onclick event to img image
    $("ul img").click(function(){
        //2. Add it to the p tag.

Multi selection drop-down list moves left and right

$(function () {
    $("#toRight").click(function () {
	//Get the drop-down list object on the right, append (option selected in the drop-down list on the left)
	$("#rightName").append($("#leftName > option:selected"));

	$("#toLeft").click(function () {
	//appendTo gets the option selected on the right and moves it to the drop-down list on the left
	$("#rightName > option:selected").appendTo($("#leftName"));

JQuery advanced features:

(1) Animation

1. Show and hide elements in three ways


  • Speed: the speed of the animation, three predefined values,
    • ("slow", "normal", "fast") or millisecond value indicating the duration of animation (e.g. 1000);
  • easing: used to specify the switching effect of animation. The default is "swing". The parameter "linear" can be used. (this value can not be passed)
    • swing: when the animation is executed, slow first, fast in the middle, and slow last
    • linear: execute animation at a constant speed
  • This value can't be passed to FN}

① Default display and hide mode:

  • Show ([speed, [easing], [FN]])
  • Hide ([speed, [easing], [FN]) (hidden)
  • Toggle ([speed, [easing], [FN]])

② Sliding display and hiding mode: (sliding up and down)

  • Slidedown ([speed, [eating], [FN]) (display)
  • Slideup ([speed, [easing], [FN]) (hidden)
  • Slidetoggle ([speed, [easing], [FN]) (SWITCHING)

③ Fade in and fade out display and hide methods:

  • Fadein ([speed, [easing], [FN]) (display)
  • Fadeout ([speed, [easing], [FN]) (hidden)
  • Fadetoggle ([speed, [easing], [FN]) (SWITCHING)

(2) Traversal mode

  • Traversal mode of js

    • for (initial value; cycle end condition; step size)
  • Traversal mode of jq:

    ① jq object each(callback)

    • var citys = $("#city li").
      citys.each(function (index , element){
          //The first method is to get the li object and use this
          //The second method is to get the li object and define parameters in the callback function, such as index and element 
      	alert(index + ":" + element.innerHTML);

Case: if you want to add some judgment conditions to the cycle:

if("Shanghai" == $(element).html){
	//If the current function returns false, the loop (break) is ended
	//If the current return is true, this cycle will be ended and the next cycle will continue
	return false;

② JQuery.each( object , [ callback ] ) // $.each ( object , [ callback ])

  • $.each(citys , function(){

③ for . . of

  • //Methods provided by jQuery versions after 3.0: 
    for ( li of citys ){

(3) Event binding

JQuery can use chain programming to simplify the writing of binding:

jq object.Event function(Callback function(){}).Event function(Callback function(){}).Event function(Callback function(){})....

Let the text box get the focus event:

jq object.focus ( ) ;  
//Get the object (text box) in focus  
//If the callback function is not passed inside, the browser will trigger the default event mode

Form submission:

jq object.submit() ; 
//Form submission 

1.JQuery standard binding method:

  • jq object Event function (callback function)

2.on bind event / off unbind

  • jq object on("event name", callback function)
  • jq object off("event name")
    • If the event name is not written, all events on the object will be unbound

3. Event switching: toggle

  • jq object toggle ( fn1 , fn2 . . .)
    • When you click Fnq to execute all the new components for the second time, it will execute from fn1 to Fnq

(4) Case

Advertisement pop-up window:

//Define entry function 
	//Set the timer and call the adShow method
    setTimeout(adShow , 3000);
    //Set the timer and call the ad close method adHide
    setTimeout(adHide , 8000);
//Display advertisement
function adShow(){
    //Get the advertisement div and call the display method
//Hidden advertising
function adHide(){
  //Get the advertisement div and call the hidden method 
//Note that you should first set a style for the div of the advertisement: display: none, 

Lucky draw cases:

  • analysis:

    • ① Bind click event to start button

    • 1.1 define the cycle timer,

    • 1.2 switch src attribute of small photo frame,

      • Define an array to store image resources
      • Generate random number, array index
    • ② Bind click event to end button

    • 1.1 stop timer

    • 1.2 set src attribute for large photo frame

var imgs = ["../img_01.png" , "../img_02.png" , "../img_03.png" , "../img_04.png"...]
 var startId ;
var index ;
	//Bind a click event to the start button
        //Define the cycle timer: execute every 20 milliseconds
        startId = setInterval(function(){
            //Generate random footmark: 0-3
            index = Math.floor(Math.random()); // Number between 0.000 -- 0.999 -- > * 3 = = > 0.000 -- 2.999 (math. Floor(): round down)
            //Set the src attribute of the small photo frame, 
            $("#img1ID").prop("src" , imgs[index]);
        } , 20);
    //Bind a click event to the end button
        //Stop timer: 
        //Set src attribute for large photo frame 
        $("img2ID").prop("src" , imgs[index])

(5) Plug in:

Enhance the function of JQuery

  • JQuery . fn . Extend (object): enhance the function of objects obtained through jQuery

    • <!DOCTYPE html>
      <html lang="en">
          <meta charset="UTF-8">
          <title>JQuery Object for method extension</title>
          <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script>
              //Use the JQuery plug-in to add two methods to jq objects. check() selects all check boxes and uncheck() deselects all check boxes
              //1. Define the plug-in of JQuery object
                  //The check() method is defined, and all jq objects can call this method
                  check: function () {
                      //Leave the check box selected
                      //this: the jq object that calls the method
                      this.prop("checked", true);
                  }, //Separated by
                  uncheck: function () {
                      //Leave the check box unchecked
                      this.prop("checked", false);
              $(function () {
                  $("#btn-check").click(function () {
                      //attribute selectors 
                  $("#btn-uncheck").click(function () {
                      $("input[type = 'checkbox']").uncheck();
      <input id="btn-check" type="button" value="Click to select the check box" onclick="checkFn()">
      <input id="btn-uncheck" type="button" value="Click to select the check box" onclick="uncheckFn()">
      <input type="checkbox" value="football">Football
      <input type="checkbox" value="basketball">blue ball
      <input type="checkbox" value="volleyball">Volleyball
  • JQuery . Extend (object): enhance the function of jQuery object itself

  • <script>
    	    return a>b ? a : b ;
        	return a<b ? a : b ;
    var max = $.max(10 , 5);

Keywords: Javascript Front-end JQuery

Added by Kwakhed on Tue, 08 Mar 2022 15:01:27 +0200