The use of jquery

Everything_ is_ none 2021-05-04 17:28:19
use jquery

jquery Introduction to

  • jQuery It's a JavaScript Class library of , It contains a lot of , Properties and methods that contribute to project development ,jQuery Greatly simplified JavaScript Programming .
  • jQuery Version of
    • The first generation version 1.xx.xx, for example 1.11.3, Features compatible with all browsers ( contain IE6~IE8), No, vue/react/angular Wait for the frame ( Data driven ), Projects are all based on DOM It's done . Basically, the projects are jQuery.
    • Second generation version 2.xx.xx, Abandoned the compatibility of lower version browsers , It caters to the development and processing of some mobile terminals ( At the same time, there is a new one than JQ Better understand the class library of mobile terminal Zepto, So the second generation version is a chicken rib )
    • Third generation version 3.xx.xx, There is no compatibility to handle lower version browsers , But now the project is entering the era of framework development , Traditional operation DOM Gradually, the idea of "self-discipline" is abandoned , therefore JQ It's gone .

jQuery The library contains the following features :

  1. HTML Element selection

  2. HTML Element operation

  3. CSS operation

  4. HTML Event function

  5. JavaScript Special effects and animation

  6. HTML DOM Traversal and modification

  7. AJAX

  8. Utilities

frequently-used jQuery Selector

  • Get the DOM Elements , And what you get is (JQ object => Class array collection ), Only JQ Object can be called JQ An operation provided DOM Methods .

operation DOM Methods

Screening 、 Traversal methods children/find/filter/eq(get)/prevAll/next/nextAll/siblings/index...

obtain DOM Elements

  • eq(index) Returns the specified index of the selected element , The return value is one JQ object (init(1)), You can still call JQ Method

    let $div = $('div')
    $div.eq(0).css('color','red') // Give the first one. div Set the font color to red 
     Copy code 
  • get(index) Returns the element of the specified index of the selected object , The return value is a native DOM object , You can use the properties and methods provided by native browsers .

    $("div").click(function() {
    x = $("div").get(0);
    $("div").text(x.nodeName + ": " + x.innerHTML);
     Copy code 
  • children(select) Method returns all direct child elements of the selected element ,selcet It's usually a string value , Selector expressions that contain matching elements .

    $("ul").children()// return ul All the sub elements below , The return value is JQ object 
     Copy code 
  • find(select) // Return all selected select Elements , The return value is also JQ object

    $("p").find("span").css('color','red');// return p All in the label span label , And set the font color to red 
     Copy code 

Traversal methods

  • prevAll('select'), return select All elements of the same level , But it must be under the same parent .
  • prev('select'), Back to Shanghai select The last element of the same level , It must be under the same parent .
    <ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
    <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
    <ul class="level-3">
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
    <li class="item-c">C</li>
    <li class="item-iii">III</li>
    console.log($('.item-3').prevAll());// li.item-1 li.item-2
    console.log($('.item-3').prev());// li.item-2
     Copy code 
  • next('select'), Returns the next element of the same level , It must be under the same parent element .
  • nextAll('select'), Returns all elements under the same level , It must be under the same parent element .
    console.log($('.item-1').next())// The return and type are item-1 The next element of the same level element , It must be the same parent 
    console.log($('.item-1').nextAll())// li.item-2 li.item-3
     Copy code 
  • siblings('select') Get all the same level elements under the same parent of the selected element .
    console.log($('.item-2').siblings())// li.item-1 li.item-3
     Copy code 
  • index('select') Gets the... Of the selected element at the same level index Index position , It must be under the same parent element
    console.log($('.item-3').index()) // 2
     Copy code 

Operation style css/addClass/removeClass/toggleClass/hasClass/innerWidth...

  • css() Use to return the value of the selected style or set single or multiple styles
    $('item-2').css('color') // The return class name is item-2 Elemental color style 
    $('item-2').css(background: 'red')// Set the class name to item-2 Elemental background The color is red 
    // Syntax for setting multiple styles 
     Copy code 
  • addClass('select') Add a class name to the selected element
  • removeClass('select') Remove the class name for the selected element
     Copy code 
  • toggleClass(class,switch), Add a class name to the selected element or delete a class name ,class must ,switch Optional ,switch It can be specified that the value to be added or deleted is true perhaps false, Don't usually write , Because if there is no type, it will be added automatically , If the class name exists, it will be deleted .
    $('item-2').toggleClass('lis') // Add or delete class names See if the selected element exists lis Class name
     Copy code 
  • hasClass('select'), Returns whether the selected element exists select Class name , return true perhaps false
    console.log($('li').hasClass('lis')) // true
     Copy code 
  • innerWidth() Returns the internal width of the selected element , contain padding, It doesn't contain border and margin.
  • outerWidth() Returns the outer width of the selected element , contain padding and border, if necessary margin Then use outerWidth(true)

Operation content html/text/val/append/appendTo/insertAfter/attr...

  • html() Returns or sets the content of the selected element . If the method does not write any parameters, it returns the content , If you write something (html(content)) It's about setting parameters .content contain html label .
  • text() Sets or returns the text content of the selected element .
  • val() Returns or sets the value of the selected element , Commonly used in input Forms .
  • append(content) Insert content inside the last face of the selected element , It can be HTML label .
  • appendTo(), Insert content on the last side inside the selected element , Function and append equally , But it's written differently .
  • insertAfter(), Insert content after the outside of the selected element .
    $('content').appendTo('selector')// content It's something to add ,selector Is the selector for the selected element .
    $('content').insertAfter('selector') // The grammar is as follows 
     Copy code 
  • attr() Set or return the attribute value of the selected element .

Control the animation animate/finish/fadeIn/fadeOut/hidde/show/slideDown/slideUp...

  • animate() Used to create animations , Only numeric values can create animation ( such as "margin:30px"). String value cannot create animation ( such as "background-color:red").
    // params It's necessary , Parameters are animated css attribute ,speed Optional , Parameters specify the duration of the animation , Can take slow、fast Or milliseconds ,callback Optional , Is the function executed after the animation is executed .
     Copy code 
  • finish() Method to stop the currently running animation , Remove all queued animations , And complete all animations for the selected elements .
  • fadeIn() Use the fade in effect to display the selected element , If the element is hidden .
  • fadeOut() Use the fade effect to hide the selected element .
  • $(selector).hide(speed,callback), Hide selected elements ,speed and callback It's all optional .
  • slideDown() On the premise that the selected element is hidden , The animation below shows the selected element .
  • slideUp() Hide the selected element in the form of pull up

Operation event binding on/off/bind/unbind/delgate/one

  • off() Usually used to remove through on() Event handler added by method .
  • one() The event is removed after it is triggered once .
  • bind() The selected element adds one or more event handlers , And specify the function to run when the event occurs .
  • unbind() Remove the event handler for the selected element .
  • delegate() Method is the specified element ( A child element of the selected element ) Add one or more event handlers , And specify the functions to run when these events occur .

Tool class methods each/ajax...

  • $(selector).each(function(index,element)), Cycle each li And execute the function


  • Ajax For browsers to communicate with the server without refreshing the entire page , The server will no longer return the entire page , It returns a small amount of data , adopt JavaScript DOM Update some nodes . During the period, data transmission can adopt xml,json Equiform ,Ajax The first search tips for Google . In fact, there are many ways to communicate with the server without refreshing the whole page , such as Flash,Java applet,iframe etc. , but Ajax It's the most common one at present .

  • The format used to transfer data between the browser and the server , The more common ones are xml,html,text,json,jsonp etc. , at present json Because it takes up less storage , And is JavaScript Native format , So it's very popular .

  • Common grammar $.ajax({name: val, name: val...}), among name The optional fields for are as follows

    • url: Link address string form
    • data: The format of parameters to be sent to the server is in the form of key value pairs
    • type: The form of the request data , Yes get and post
    • timeout: Request timeout , Time is measured in milliseconds
    • cache: Whether to cache request results ,val use boolean Express
    • contentType: Content format , The default is "application/x-www/form-urlencoded"
    • dataType: The data type of the server response ,val It's a string format , Yes jsonjsonp wait
    • success: The server callback function after successful request .
    • error: After the request fails , Server callback function
    • complete: The function that is called after the request is completed , Whether the request succeeds or fails, it will be executed , The function is in sucess and error After performing
    • async: Asynchronous processing or not ,val yes boolean type , The default is true, If it is false,js It will wait for the request function to be executed before executing the following code .
    • username: Access the user name carried in the authentication request ,val String format
    • password: Return the password carried in the authentication request ,val String format
    // The original calling method 
    url: '/greet',
    data: {name: 'hello'},
    type: 'POST',
    dataType: 'json',
    success: function(data){
    data: jQuery.parseJSON(data) //dataType Indicates that the returned data is json type , So there's no need to deserialize 
    // Simplify writing 
    {naeme: 'hello'},
    {naeme: 'hello'},
    $getJSON, This method uses get perform ajax request , Load from server json data , form :$.getJSON(url, data, func).
    $.load(), This method inserts the data loaded by the server directly into the specified DOM in , among data If it exists, use POST Send request by , Use if not GET Send request by .
    <div id="ret"></div>
    {name: 'Brad'}
     Copy code 

frequently-used JQ event

Event function Bind function to
$(document).ready(function===$(function(){}) When the document is loaded, execute the function
$(select).click(function)===$(select).on('click',function(){}) When the selected element is clicked, the starting function
$(select).dbclick(function) Trigger function when the selected element is double-click
$(selectselect).focus(function) Trigger function when the selected element gets focus
$(select).mouseover(function(){}) When the mouse passes the selected element , Trigger function
本文为[Everything_ is_ none]所创,转载请带上原文链接,感谢

  1. Compare node.js with spring boot- Ryan Gleason
  2. Obvious pitfalls of spring Webflux- Ł ukaszKy ć
  3. Spring founder uncle rod's real thoughts on yaml
  4. 码农飞升记-02-OracleJDK是什么?OracleJDK的版本怎么选择?
  5. What is manong feisheng-02-oracle JDK? How to choose the version of Oracle JDK?
  6. Spring tide surging Xinanjiang
  7. Linux内核软中断
  8. Linux kernel soft interrupt
  9. Linux内核软中断
  10. Linux kernel soft interrupt
  11. Java multithreading Foundation
  12. The construction of Maven private library nexus
  13. I / O stream in Java
  14. JDK 16:Java 16的新功能 - InfoWorld
  15. 在Java中本地进行线程间数据传输的三种方式和源码展示
  16. jdon导致cpu 99%最后tomcat死掉---banq给予回复
  17. 用领域事件模拟AOP注入
  18. JDK 16: new function of Java 16 - InfoWorld
  19. Cartoon: from JVM lock to redis distributed lock
  20. Spring 3.1 终于加入了Cache支持
  21. Prototype与JQuery对比
  22. Three ways of data transmission between threads in Java and source code display
  23. Jdon causes 99% of CPU and Tomcat dies -- banq replies
  24. docker 原理之 user namespace(下)
  25. Simulating AOP injection with domain events
  26. Spring 3.1 finally adds cache support
  27. Comparison between prototype and jquery
  28. User namespace of docker principle (2)
  29. The way to learn java IO stream and XML
  30. Why does a seemingly correct code cause the Dubbo thread pool to be full
  31. 0 基础 Java 自学之路(2021年最新版)
  32. 0 basic Java self study road (latest version in 2021)
  33. c#—基础拾遗(1) 面向对象
  34. C - basic information (1) object oriented
  35. 技术分享|SQL和 NoSQL数据库之间的差异:MySQL(VS)MongoDB
  36. Technology sharing differences between SQL and NoSQL databases: MySQL (VS) mongodb
  37. PHP教程/面向对象-3~构造函数和析构函数
  38. Spring Cloud的Feign客户端入门
  39. 优化Spring Boot应用的Docker打包速度
  40. PHP tutorial / object oriented - 3 ~ constructor and destructor
  41. Introduction to feign client of spring cloud
  42. Optimizing docker packaging speed of spring boot application
  43. 尚硅谷宋红康Java基础教程2019版
  44. 尚硅谷宋红康Java基础教程2019版
  45. Song Hongkang Java foundation course 2019
  46. Song Hongkang Java foundation course 2019
  47. Redis 6 的多线程
  48. Multithreading of redis 6
  49. SpringCloud-微服务架构编码构建
  50. SpringCloud-微服务架构编码构建
  51. Linux作业控制
  52. Coding construction of springcloud microservice architecture
  53. Java中几个常用并发队列比较 | Baeldung
  54. 为什么Java后端在创业企业中并不流行? -reddit
  55. Coding construction of springcloud microservice architecture
  56. Linux job control
  57. Comparison of several common concurrent queues in Java
  58. Why is java backend not popular in start-ups- reddit
  59. docker 资源限制之 cgroup
  60. 大数据环境: hadoop和jdk部署