day 30 jQuery

shasha 2021-02-23 02:35:24
day jquery


1. brief introduction

jQuery Is a multi browser compatible javascript library ( function library ), The core idea is write less, do more( Write less , Do more ).

JQuery, seeing the name of a thing one thinks of its function , Namely JavaScript And query (Query), Auxiliary JavaScript Developed library .

characteristic :

Query It's a quick, simple javascript frame , Simplify queries DOM object 、 Handling events 、 animation 、 Handle Ajax The interaction process .

  • Provides powerful functions
  • Solve browser compatibility issues
  • Script knowledge to correct errors
  • Small volume , Smart use ( Just introduce one js file )
  • Easy to expand 、 Rich plug-ins

effect :

From the programmer's point of view : simplify JavaScript and Ajax Programming , Be able to make programmers from designing and writing complex JS Free from the application , Focus on functional requirements rather than implementation details , So as to improve the development speed of the project .

From the perspective of user experience : Improved the visual effect of the page , Enhanced interaction with the page , Experience more gorgeous web materials .

  • Easy selection of page elements ( imitation CSS Selectors are more accurate 、 flexible )
  • Change page styles dynamically / The page content ( operation DOM, Dynamic addition 、 Remove the style )
  • Control response events ( Dynamically add response events )
  • Provides basic web effects ( Provides encapsulated web effects methods )
  • Fast communication (ajax)

    How to introduce jQuery package :

jQuery Library files don't need to be installed , Just use < script > Tag introduction to HTML In file , Get jQuery After the library file , Just like what I wrote JS Files are imported in the same way , that will do , Here are several ways to introduce :

1) Imported local Jquery

2) introduce cdn Library files available online ( Stable, reliable, high speed )

2. usage

$(function(){})

  • $ yes jQuery Core function , yes jQuery Abbreviation jQuery == $
  • jQuery Have your own grammar , It and native are two sets of grammar
  • $ Method : It's a function of the factory pattern
  • $() Equivalent to page initialization function , When the page is loaded , Will execute $(), namely jQuery()
  • $(function(){ }) yes $(document).ready(function(){}); Abbreviation
  • $(document).ready(function(){}) and window.onload The difference between :

    • ready Indicates that the document has been loaded ( Do not include non text media files such as pictures )
    • onload It means that all elements of the page, including pictures, are loaded
    • $(document).ready(function(){}) than window.onload Execute first
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">123123</div>
</body>
</html>
<script src="js/jQuery.js"></script>
<script type="text/javascript">
// Similar to delayed loading
$(function() {
console.log("xixi");
});
// Full body
$(document).ready(function() {
// Native dom
let oBox = document.getElementById("box");
console.log(oBox.innerHTML);
//jQueryDom
console.log($("#box").html());
});
</script>

Package set

jQuery All that you get dom Whether it's a single element or a group of elements , All packaged into one jQuery Package set , I.e. set .

  • jQuery Packaging set and DOM Mutual transformation of objects :

    • Native Dom -> jQueryDom

      • Put native objects in $( Native Dom) Such as :document ---> $(document)
      let oBox = document.getElementById("box");
      console.log($(oBox).html());
    • jQueryDom -> Native Dom

      // Method 1:
      let oBox = $("div").get(0);
      // Method 2:
      let oBox = $("div")[0];
      console.log(oBox.innerHTML);

1) Foundation selector

id Selectors
// Method 1:
// $("#box1").css("backgroundColor", "red");
// Method 2: similar css Code
$("#box1").css({
backgroundColor: "red"
});
Class selectors
$(".box").css({backgroundColor: "red"});
tag chooser
$("p").css({color: "red"});
Group selector
$("p,span,strong").css({color: "red"});
Universal selector

( This is choosing all the elements )

$("*").css({backgroundColor: "green"});

1612511084450

2) Hierarchy selector

Descendant selector

Space

Progeny : It's not just the offspring

$("body div").css({backgroundColor: "red"});
Descendant selector

More than no.

$("body>div").css({backgroundColor: "red"});
Adjacent selector

plus

$("#box1+div").css({backgroundColor: "red"});
Brother selector

The waves, ~

$("#box2~div").css({backgroundColor: "red"});

3) Attribute selector

[ Property name / Property name = Property value ...]

<script type="text/javascript">
// div with class Property selector
$("div[class]").css({backgroundColor:"red"});
// div Selectors with multiple attributes at the same time
$("div[class][id]").css({backgroundColor:"red"});
// Get the element through the specified attribute value
$("div[id='box1']").css({backgroundColor:"red"});
</script>

4) Pseudo class selector

  • :even Get all elements of even rows

    // Be careful : From 0 OK, let's start
    $("div:even").css({backgroundColor:"red"});
  • :odd Get the elements of all odd rows

    $("div:odd").css({backgroundColor:"red"});
  • :first For the first 0 Elements

    $("div:first").css({backgroundColor: "red"});
  • :last Get last element

    $("div:last").css({backgroundColor:"red"});
  • :eq( Subscript ) Get a specific element by subscript

    // How to write it 1:
    $("div:eq(2)").css({backgroundColor: "red"});
    // How to write it 2:
    let n = 3;
    $("div").eq(n).css({backgroundColor: "red"});
  • :not( Target element ) Except for some element

    // How to write it 1:
    $("div:not('#box3')").css({backgroundColor: "red"});
    // How to write it 2:
    $("div").not("#box3").css({backgroundColor: "red"});
  • :gt(n) Get greater than n The elements of

    $("div:gt(2)").css({backgroundColor:"skyblue"}); 
  • :lt(n) Get less than n The elements of

    $("div:lt(2)").css({backgroundColor:"red"});

5) Content selector

  • :contains( Content ) According to the content of the element , Get elements

    $("div:contains('hello world')").css({backgroundColor: "red"});
  • :empty Select the element whose content is empty , There can't be any blank line breaks

    $("div:empty").css({backgroundColor:"red"});
  • :has( Selectors ) Select according to the elements contained

    $("div:has('span')").css({backgroundColor:"red"});

6) Visibility selector

  • :hidden Check the hidden elements
  • :visible Change the style of the visible elements

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>
    <table>
    <tr style="display:none">
    <td>Value 1</td>
    </tr>
    <tr>
    <td>Value 2</td>
    </tr>
    </table>
    </body>
    </html>
    <script class="lazy" data-src="js/jQuery.js"></script>
    <script type="text/javascript">
    // :hidden Check the hidden elements
    $("tr:hidden").css({backgroundColor:"red"});
    // :visible Change the style of the visible elements
    $("tr:visible").css({backgroundColor:"green"});
    </script>

7) jQuery The traversal

jQuery Traverse , Meaning for “ Move ”, It is used to describe the relationship between elements “ lookup ”( Or select )HTML Elements . Start with a choice , And move along this selection , Until you reach the element you want .

The picture below shows a family tree . adopt jQuery Traverse , You can be selected from ( Current ) The element begins , Easy to move up the family tree ( The ancestors ), Move down the ( descendants ), Move horizontally ( Compatriot ). This kind of movement is called right DOM Traversal .

The illustration explains :

1612518658819

Traversal between sibling nodes
  • next() Next brother
  • nextAll() All the brothers down there
  • prev() Last brother
  • prevAll() All of them
$("#box1").next().css({backgroundColor: "red"});// Concatenation mode
$("#box1").nextAll().css({backgroundColor: "red"});
Traversal between parent and child nodes
  • parent() Find the parent node

    $("p").eq(1).parent().css({backgroundColor:"red"});
  • Find child node

    • find ( You have to write parameters )
    • children ( You don't have to write parameters )

      $("body").find("span").css({backgroundColor: "red"});
      $("body").children().css({backgroundColor: "red"});//body The children of ( Father and son )

3. Text

jQuery characteristic : About reading and writing functions , It's usually a , Read without reference , You can write for me .

  • innerHTML == html()
  • value == val()
<script type="text/javascript">
// read
console.log($("div").html());
// Write
$("div").html(567);
// read
console.log($("input").val());
// Write
$("input").val(888);
</script>

4. event

Query Events :

  • Events don't need to take on;
  • Parameters can be transferred ;
  • Don't worry about compatibility ;
  • this turn jQuery Of this this==$(this)
 $("#box").click(function(){
//this To turn into jQueryDom Of this
$(this).css({backgroundColor: "red"});
})

The ginseng :

 $("#box").click({name:" Xiao Ming ",age:18},function(evt){
console.log(evt.data);//{name:" Xiao Ming ",age:18}
})

5. Animation

jQueryDom object .show([speed,[easing],[fn]);

Equivalent to :jQueryDom object .hide([ Time ],[ Switching effect ],[ Callback function ]);

  • Parameters speed

    • That's the animation time ;
    • A string of one of three predetermined speeds ("slow","normal", or "fast") Or represents the length of milliseconds of the animation ( Such as :1000);
  • Parameters easing

    • Used to specify the toggle effect , The default is "swing Swing ", The available parameters "linear linear ";
  • Parameters fn Callback function

    • Functions executed after the animation is complete , Each element is executed once ;

give an example :

 $('button').eq(0).click(function() {
// use 1000 Millisecond will box Hidden elements , When the animation is finished, execute the callback , Print heihei
// Be careful : Animation takes time , Is asynchronous , After asynchronous completion, the callback function is executed
$("#box").hide(1000, function() {
console.log('heihei');
})
});
// Do something weird
$("button").eq(2).click(function() {
// Callback
$("#box").fadeToggle(1000, arguments.callee);
});

Basic animation :show hide toggle

slider :slideDown slideUp slideToggle

Fade in and out :fadeIn fadeOut fadeToggle

Custom animation

  • animate(params,[speed],[easing],[fn]) Equivalent to animate( data , Time ,[ Switching effect ], Callback function )
  • stop([clearQueue],[jumpToEnd])

    • clearQueue: If I set it to true, Then clear the queue . You can end the animation immediately
    • jumpToEnd: If I set it to true, Then complete the queue . Animation can be done immediately
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button type="button"> deformation </button>
<button type="button"> stop it </button>
<div id="box">
</div>
</body>
</html>
<script class="lazy" data-src='jQuery.js'></script>
<script type="text/javascript">
$("button").eq(0).click(function() {
// Concatenation mode
$("#box").animate({
height: 100,
width: "300px",
left: 1000
}, 1000, function() {
console.log(1);
}).animate({
top: 600
}, 2000, function() {
console.log(2);
}).animate({
left: 0
}, 2000, function() {
console.log(3);
}).animate({
top: 50
}, 2000, function() {
console.log(4);
});
});
$("button").eq(1).click(function() {
// End the current animation , Other animations are running normally
// $("#box").stop();// The default value of no parameter is two false
// Stop all animation queues
// $("#box").stop(true,false);
// Finish the current animation immediately , Other animations are running normally
// $("#box").stop(false,true);
// Finish the current animation immediately , And clear the animation queue
$("#box").stop(true, true);
});
</script>

Case study : Accordion

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
width: 500px;
height: 150px;
background-color: #FFC0CB;
margin: auto;
/* position: relative; */
}
li {
list-style: none;
float: left;
width: 40px;
height: 150px;
overflow: hidden;
border: 1px solid black;
}
img {
height: 150px;
width: 240px;
background-size: 240px;
}
</style>
</head>
<body>
<ul>
<li>
![](img/1.jpg)
</li>
<li>
![](img/2.jpg)
</li>
<li>
![](img/3.jpg)
</li>
<li>
![](img/4.jpg)
</li>
<li>
![](img/5.jpg)
</li>
</ul>
</body>
</html>
<script src="jQuery.js"></script>
<script type="text/javascript">
$('li').mouseover(function() {
$(this).stop().animate({
width: 240
}).siblings('li').stop().animate({
width: 40
});
});
</script>
版权声明
本文为[shasha]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210222230756562d.html

  1. An inexperienced front-end engineer, what are the common problems when writing CSS?
  2. HttpServletRequest get URL (parameter, path, port number, protocol, etc.) details
  3. Springboot starts http2
  4. Enabling http2.0 in spring boot
  5. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  6. Using JavaScript in Safari browser history.back () the page will not refresh after returning to the previous page
  7. vue.js Error in win10 NPM install
  8. In less than two months, musk made more than $1 billion, more than Tesla's annual profit
  9. Springboot starts http2
  10. Vue event bus
  11. JQuery easy UI tutorial: custom data grid Pagination
  12. Using okhttp and okhttpgo to obtain onenet cloud platform data
  13. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  14. HTTP 1. X learning notes: an authoritative guide to Web Performance
  15. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  16. HTTP 1. X learning notes: an authoritative guide to Web Performance
  17. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  18. Event bubble and capture in JavaScript
  19. The root element is missing solution
  20. Event bubble and capture in JavaScript
  21. Configure the certificate to enable ngnix to publish the trusted website of HTTPS
  22. Javascript数据类型
  23. HTTP interface debugging tool! 48000 star HTTP command line client!
  24. Parameter encryption of front end URL link band
  25. HTTP interface debugging tool! 48000 star HTTP command line client!
  26. Three front end frameworks: data binding and data flow
  27. Reading Axios source code (1) -- exploring the realization of basic ability
  28. Event bubble and capture in JavaScript
  29. 【微前端】微前端最終章-qiankun指南以及微前端整體探索
  30. R & D solution e-Car front end monitoring system
  31. [JS] 877 - 35 wonderful knowledge of JavaScript, long experience!
  32. R & D solution e-Car front end monitoring system
  33. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  34. 解决ajax跨域问题【5种解决方案】
  35. Top ten classic sorting of JavaScript
  36. HTTP 1. X learning notes: an authoritative guide to Web Performance
  37. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control component
  38. My http / 1.1 is so slow!
  39. Why Vue uses asynchronous rendering
  40. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  41. The tapable instance object hook of webpack4. X core tool library
  42. The tapable instance object hook of webpack4. X core tool library
  43. Using libcurl for HTTP communication in C + +
  44. Using libcurl for HTTP communication in C + +
  45. Using CSS variable in Vue
  46. Deeply understand the update of state and props in react
  47. No matter how fast the Internet is, it's useless! In addition to Baidu disk, there is this website slow to let you eat shriveled
  48. Baidu share does not support the solution of HTTPS
  49. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  50. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  51. Vue cli creates vue3 project
  52. Nginx reverse proxy for windows authentication using NTLM
  53. Rust tutorial: introduction to rust for JavaScript developers
  54. Deploying personal blog to Tencent cloud with serverless framework
  55. R & D solution e-Car front end monitoring system
  56. JavaScript advanced learning
  57. Spend 1 minute to master these 5 ppt tips, courseware making less detours
  58. Vue: vuex persistent state
  59. React native gets the current network state of the device Netinfo
  60. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%