Catalog
Introduction of jQuery
Guide reading JQuery jq is the js tool library, a collection of functions The internal syntax of jq is native js How to build a jq environment: Introduce JQuery.js file into html that needs to use jq Local import (import of good files) <script src="js/jquery-3.4.1.min.js"></script> cdn import (linking external resources - online files: jquery CDN) jq selector Using $('\ id') will go getelementbyid Use $('. class') // / to go queryselectorall Transforming jq object into js object // The jq object is an array that takes values by index Transforming js object into jq object // throw js objects directly into $() and convert them into jq objects jq incident Click on the object, get the object, and then bind the event 1.$('.box').click(fn) 2.$('box').on('click', fn) fn: function () {} Do not use $("box"). on ('click', () => {}); // Get window * As long as it is a value, it can be returned with a function. jq operation content let $inp = $('.inp') let $div = $('.div') 1. $inp. val (do not write | new value | FN (index, old value)) 2.$div.text() 3.$.html() Change title Uppercase () string capitalization jq style operation let $div = $('.div') 1.$div.css('attribute value') 2.$div.css("attribute name", "attribute value") 3.$div.css({}) 4.$div.addClass() 5.$div.removeClass() 6.$div.hasClass() let $box = $('.box'); $box.click(function () { let e })
1.jq API
http://jquery.cuishifeng.cn/
2.jq initial knowledge
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq initial</title> </head> <body> <h1>jQuery Namely js Tool library - A collection of functions</h1> <h2>jq Internal grammar is native. js</h2> <h2>jq How to Build Environment - In need of use jq Of html Introduce in jquery.js that will do</h2> <h2>jq Is to optimize the original js Logic of Fish Page Interaction</h2> </body> <!-- CDN Connecting external resources --> <!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>--> <!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>--> <script src="js/jquery-3.4.1.js"></script> <script> // jQuery object console.log(jQuery); console.log($); console.log(Owen); console.log($('h1')); $('h1').click(function () { $('h1').css('color', 'red') }) </script> </html>
2. jq selector
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <div id="d" class="box"></div> <input type="text" id="d2" class="box" /> <h3 class="h3"></h3> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> // jq selector: $('css selector syntax') let $div = $('#d'); console.log($div); let $boxs = $('.box'); console.log($boxs); // How jq objects are converted to js objects - jq objects can be understood as arrays containing js objects // That's to say, it takes values by index. let div = $div[0]; console.log(div); console.log(document.getElementsByClassName('box')[0]); console.log(document.querySelectorAll('.box')[0]); console.log($div[0]); console.log($boxs[0]); console.log($boxs[1]); // How to convert js into jq objects let $newDiv = $(div); console.log($newDiv); </script> </html>
III. jq Events
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq Event</title> <style> .box { width: 200px; height: 200px; background-color: orange; margin-bottom: 10px; } </style> </head> <body> <div class="box">1</div> <div class="box">2</div> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> let $box = $('.box'); // $box.click(function () { // // this is the tag clicked - js object // console.log(this); // console.log($(this)); // }); // jq objects can complete batch binding of events $box.on('click', function () { console.log(this); console.log(this.innerText); console.log($(this)); }); // js must be manually cyclically bound // let boxs = document.querySelectorAll('.box'); // for (box of boxs) { // box.onclick = function () { // console.log(this); // console.log($(this)); // } // } </script> </html>
4. jq content operation
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq Content manipulation</title> </head> <body> <h1 class="title">Title</h1> <input type="text" class="title"> <button class="btn">Change title</button> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> // js - jsObj.value | jsObj.innerText | jsObj.innerHTML // jq - jqObj.val() | jqObj.text() | jqObj.html() // Value: jqObj.text() | jqObj.text('new value') | jqObj.text(fn) let $btn = $('.btn'); let $inp = $('input.title'); let $h1 = $('h1.title'); $btn.click(function () { let val = $inp.val(); if (val) { // $h1.text(val); $h1.html(val); $inp.val(function (index, oldValue) { // return oldValue.toUpperCase() return '' }) } }) </script> </html>
5. jq style operation
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq Style operation</title> <style> .box { /*width: 200px;*/ height: 200px; background-color: pink; } .sup-box { /*width: 400px;*/ height: 100px; background-color: orange; border-radius: 50%; line-height: 100px; text-align: center; color: red; } </style> </head> <body> <div class="box" style="width: 600px">text</div> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> let $box = $('.box'); $box.click(function () { // Obtain let width = $box.css('width'); console.log(width); // Single setup $box.css('background-color', function (index, oldvalue) { console.log(oldvalue); return 'red' }); // Multiple settings $box.css({ width: '100px', height: '100px', backgroundColor: 'blue', }); if ($box.hasClass('sup-box')) { $box.removeClass('sup-box') } else { $box.addClass(function (index, oldvalue) { console.log(index, oldvalue); return 'sup-box' }) } }) </script> <script> // localStorage['name'] = 'owen'; // sessionStorage['age'] = 18; </script> </html>