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. Gallop workflow engine design series 01 process element design
  2. VUE移动端音乐APP学习【十六】:播放器歌词显示开发
  3. Vue Mobile Music App learning [16]: player lyrics display development
  4. jquery cookie
  5. jquery cookie
  6. 体面编码之JavaScript
  7. JavaScript for decent coding
  8. React17 系统精讲 结合TS打造旅游电商平台
  9. React17 system combined with TS to build tourism e-commerce platform
  10. 2021-05-04 hot news
  11. HttpSession对象与Cooike的关系 以及 Cookie对象构造函数问题
  12. gRPC-Web:替代REST的gRPC的Javascript库包
  13. The relationship between httpsession object and cooike and the construction of cookie object
  14. Grpc Web: a JavaScript library package to replace rest grpc
  15. Building reactive rest API with Java - kalpa Senanayake
  16. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  17. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  18. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  19. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  20. Vue.js比jQuery更容易学习
  21. Node.js的Reactor模式 与异步编程
  22. Vue. JS is easier to learn than jQuery
  23. Reactor mode of node.js and asynchronous programming
  24. 详解JavaScript中的正则表达式
  25. Explain regular expressions in JavaScript
  26. 详解JavaScript中的正则表达式
  27. Explain regular expressions in JavaScript
  28. JS: closure
  29. Write your own promise in promises / A + specification
  30. Analysis of the core mechanism of webpack from loader, plugin to egg
  31. On the import and export of webpack
  32. Interpretation of lodash source code (2)
  33. Hexo series (5) writing articles
  34. 有人用过JMeter或用HttpUnit写过测试吗????
  35. Has anyone ever used JMeter or written tests in httpUnit????
  36. JavaScript异步编程4——Promise错误处理
  37. Leetcode 1846. Reduce and rearrange the largest element of an array
  38. JavaScript asynchronous programming 4 -- promise error handling
  39. SQLite是一种经典的无服务器Serverless
  40. 通过Spring Boot Webflux实现Reactor Kafka
  41. SQLite is a classic server less
  42. Realization of reactor Kafka through spring boot Webflux
  43. Focus on the basic knowledge of JS
  44. Node.js与Spring Boot比较? - Ryan Gleason
  45. Compare node.js with spring boot- Ryan Gleason
  46. 「HTML+CSS」自定义加载动画【049】
  47. 「HTML+CSS」自定义加载动画【048】
  48. 「HTML+CSS」--自定义加载动画【047】
  49. "HTML + CSS" custom loading animation [049]
  50. "HTML + CSS" custom loading animation [048]
  51. "HTML + CSS" -- custom loading animation [047]
  52. 使用Akka实现Reactive DDD
  53. Prototype与JQuery对比
  54. Using akka to realize reactive DDD
  55. Comparison between prototype and jquery
  56. Please elaborate the diff algorithm of Vue
  57. On the combination of ecarts and Baidu map, in the Intranet environment to develop offline map, to achieve point, line, range value.
  58. 使用Slonik框架基于Node.js和PostgreSQL处理大量数据
  59. Using slonik framework to process large amount of data based on node.js and PostgreSQL
  60. Netflix使用React制作高性能电视用户界面