catalogue
2. Species difference (connotation)
Concise description of document ready function:
Species difference (connotation):
Code debugging and jQuery conflicts with other libraries:
Chrome browser debugging tool - Elements interface:
Chrome browser debugging tool Console interface:
Chrome browser debugging tool - Sources interface:
Chrome browser debugging tool Network interface:
Breakpoint debugging of the Sources resource page:
Why does jQuery library conflict with other libraries?
How to resolve the conflict between jQuery and other libraries?
As if there are multiple versions of jQuery in a project: (equivalent to renaming $)
How to resolve the conflict between jQuery and other libraries?
1, jQuery Basics
1. Definitions
jQuery is a fast, concise and open source JavaScript class library
2. Species difference (connotation)
(1) Encapsulate common function code of JavaScript
(2) Provides a simple javaScript Design Pattern
(3) Optimized HTML document manipulation, event handling, animation design and Ajax interaction
3. Download
jQuery official website www.jquery.com
4. Reference
(1) Reference jQuery library with < script > tag
Reference download jQuery: (download well and put it locally, which is more efficient)
<head>
<script src="jquery-3.3.3.min.js"></script>
</head>
(2) Quote Baidu CDN: (downloading now will slow down the web page loading speed)
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
5.jQuery syntax
$(selector).action()
Dollar sign definition jQuery
"Query" and "find" HTML elements in the selector ()
jQuery's action() performs operations on elements
example:
$("p").hide() - hide all < p > elements
$("#test").hide() - hide all elements with id="test"
6. Document ready function
jQuery statements are generally located in the document ready function
$(document).ready(
function(){
Start writing jQuery code
}
);
Only after the entire page is loaded can jQuery be executed to obtain the page elements, so this line of code means to execute after the page is loaded
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chun Chun practice</title>
<!-- Import jQuery library -->
<script src="js/jquery-2.1.1.js"></script>
<!-- Document ready (after all web page elements have been loaded successfully) -->
<script>
//Document ready
$(document).ready(
function(){
//Div found: $("div")
//. text() get the contents
//$("div").text(); equivalent to document.getElementsByTagName("div").text;
var str=$("div").text();
//var can omit declaring a variable store
//text() is used to get or set the text content of the page
//Print results to console
console.log(str);
//Change text content
$("div").text("Chun Chun is the best")
}
);
</script>
</head>
<body>
<!-- Get one of the pages div And print the value to the console -->
<div>hello Chun Chun di jQuery</div>
</body>
</html>
Concise description of document ready function:
$(function(){
//Start writing jQuery code
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chun Chun practice</title>
<!-- Import jQuery library -->
<script src="js/jquery-2.1.1.js"></script>
<!-- Document ready (after all web page elements have been loaded successfully) -->
<script>
//Document ready
$(function(){
//Div found: $("div")
//. text() get the contents
//$("div").text(); equivalent to document.getElementsByTagName("div").text;
var str=$("div").text();
//var can omit declaring a variable store
//text() is used to get or set the text content of the page
//Print results to console
console.log(str);
//Change text content
$("div").text("Chun Chun is the best")
}
);
</script>
</head>
<body>
<!-- Get one of the pages div And print the value to the console -->
<div>hello Chun Chun di jQuery</div>
</body>
</html>
2, jQuery selector:
effect:
Quick find
definition:
Is a pattern that uses jQuery syntax to find elements in a page.
Species difference (connotation):
1. jQuery provides
2. The jQuery selector inherits some of the syntax of CSS and Path languages
3. Allows fast and accurate selection of DOM elements by tag name, attribute name or content.
Classification:
Basic selector
Hierarchy selector
Filter selector
attribute selectors
(1) Basic selector
The basic selector is the most commonly used and simplest selector in JQuery. It finds DOM elements by element id, class and tag name
one point one ID Selector
JQuery's #id selector (ID selector) is used to obtain the corresponding element (at most one element) according to the ID attribute value, encapsulate it as a jQuery object and return it.
Syntax:
//The id here refers to the value of the specific id attribute
$( "#id" )
Return value:
Returns the jQuery object that encapsulates the DOM element of the specified id.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chun Chun practice</title>
<!-- Import jQuery library -->
<script src="js/jquery-2.1.1.js"></script>
<!-- Document ready (after all web page elements have been loaded successfully) -->
<script>
//Document ready
$(function(){
//Use of ID selectors
//$("#cc") is equivalent to document.getElementById()
$("#cc").text(" Chunchun should work hard ");
}
);
</script>
</head>
<body>
<!-- Get one of the pages div And print the value to the console -->
<div>hello Chun Chun di jQuery</div>
<span id="cc"></span>
</body>
</html>
one point two class selector
The. className selector (class selector) of jQuery is used to obtain all matching elements according to the css class name className, encapsulate them as jQuery objects and return them.
Syntax:
//The className here refers to the specific CSS class name
$( ".className" )
Return value:
Returns a jQuery object that encapsulates all DOM elements with the specified css class name.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chun Chun practice</title>
<script src="js/jquery-3.6.0.js"></script>
<script>
//Document ready
$(function(){
//Class selector
$(".bb").text("Hello, Chun Chun");
//Change style
$(".bb").css("background","red");
});
</script>
</head>
<body>
<div class="bb">
hello jquery
</div>
</body>
</html>
Case:
Use the jquery basic selector to complete the effects of different button background colors:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chun Chun practice</title>
<style type="text/css">
/* initialization */
*{
padding: 0;
margin: 0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
img{
display: block;
}
.clearfix::after{
display: block;
content: '';
clear: both;
}
.fl{
float: left;
}
.fr{
float: right;
}
</style>
<script src="js/jquery-3.6.0.js"></script>
<script>
//Document ready
$(function(){
//Any attribute can be changed
$("input").attr("style","margin-left: 5px;float:left;");
$(".an6").attr("value","Chun Chun");
//Only the style attribute can be changed
$(".an1").css("background","red");
$(".an2").css("background","yellow");
$(".an3").css("background","blue");
$(".an4").css("background","green");
$(".an5").css("background","red");
$(".an6").css("background","orange");
$("#nan").css("float","none");
$("#nv").css("float","none");
//It is recommended to modify non Boolean types. It can be used, but it is not recommended
//$("#nan").attr("checked","true");
//Launched after jQuery 1.6, it is generally used to modify element attributes with values of true or false, such as the selection boxes of radio buttons, check boxes and drop-down buttons
$("#nan").prop("checked","true");
});
</script>
</head>
<body>
<input type="button" value="default" class="an1"/>
<input type="button" value="confirm" class="an2"/>
<input type="button" value="Custom copywriting" class="an3"/>
<input type="button" value="custom icon" class="an4"/>
<input type="button" value="Right display" class="an5"/>
<input type="button" value="Do not display" class="an6"/>
Male:<input type="radio" name="sex" id="nan" value="" />
Female:<input type="radio" name="sex" id="nv" value="" />
</body>
</html>
Code debugging and jQuery conflicts with other libraries:
Why code debugging?
Usually, when javaScrit has an error, there is no prompt message, and the error location cannot be found.
The code may contain syntax errors and logic errors, which are difficult to find.
How to debug JavaScript code?
Browsers have built-in debugging tools, which can be started or closed, and serious error messages will be sent to users.
When the browser enables the debugging tool, generally press F12 (or right click - > check, or Fn+F12)
elements: This is the html code of the current page
Console: This is the console. It mainly depends on whether there are error messages on the page
sources: files containing the current page, such as html, css, JS, img files, etc
network: view the request information sent by the browser interacting with the background
Chrome browser debugging tool - Elements interface:
Select the element to modify the style, which is convenient for debugging the page style
Chrome browser debugging tool Console interface:
Chrome browser debugging tool - Sources interface:
Sources js resource page: in this page, we can find the js source file in the current browser page to facilitate our viewing and debugging
On the left side of the Sources Panel are Sources, Content scripts and Snippets, respectively
Chrome browser debugging tool Network interface:
Network request tab: you can see all resource requests, including network requests, image resources, html,css, js files, etc
Breakpoint debugging of the Sources resource page:
Find the file to debug, and then click at the code mark line on the left side of the content source code to mark a breakpoint
The top row on the right is pause / continue, step into (F10 shortcut), step into this execution block (F11 shortcut), step out of this execution block, and disable / enable all breakpoints.
Why does jQuery library conflict with other libraries?
Both use $() as the core function,
If jQuery and prototype libraries are introduced into the same page, the script may stop running.
<script src="jquery.js"></script>
<script src="prototype.js"></script>
How to resolve the conflict between jQuery and other libraries?
As if there are multiple versions of jQuery in a project: (equivalent to renaming $)
Syntax: jQuery.noConflict(rem)
| parameter | describe |
| removeAll | Boolean value. Whether to completely transfer control over the variable jQuery. The default is false. |
explain:
The return value of the jQuery.noConflict() function is the jQuery type and returns a reference to the jQuery variable.
This method releases jQuery's control over the $variable.
This method can also be used to specify a new custom name for the jQuery variable.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chun Chun practice</title>
<script src="js/jquery-3.6.0.js"></script>
<script>
//$rename
var jq360=jQuery.noConflict();
//Document ready
jq360(function(){
//Class selector
jq360(".bb").text("Hello, Chun Chun");
//Change style
jq360(".bb").css("background","red");
});
</script>
</head>
<body>
<div class="bb">
hello jquery
</div>
</body>
</html>
How to resolve the conflict between jQuery and other libraries?
Use the jQuery.noConflict() method to give jQuery control over the $character:
① Conflict resolution for importing multiple versions of jQuery on the same page