Article catalog
learning from python web development from introduction to mastery
- jQuery is a lightweight JavaScript function library
- Including element selection, operation, event function, special effect animation and other functions
1. Introduce jQuery
- download https://jquery.com/download/ Just use script external reference in head
- Using CDN link references Such as < script SRC=“ https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js "></script> <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script>
2. Basic grammar
- (selector).action() defines jQuery, and the selector indicates the HTML element and the operation performed by action
example:
- $(this).hide() hides the current element
- $("p").hide() hides all < p > elements
- $("p.test").hide() hides all < p > elements of class = "test"
- $("#test").hide() hides the element with id = "test"
In most cases, the jQuery function is located in the document ready function to prevent non-existent elements from being operated on without loading
$(document).ready(function(){
// jQuery code
});The document ready function can also be abbreviated
$(function(){
// jQuery code
});3. jQuery selector
- Search and select HTML elements based on element id, class, type, attribute, attribute value, etc
- All selectors begin with $()
3.1 element selector
- Select based on the element name, such as $("P") to select all < p > elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>element selector </title>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<p>michael study web development</p>
<p>Keep going</p>
<button>Click the button to hide all p element</button>
<script>
$(document).ready(function () {
$('button').click(function () {
$('p').hide();
});
});
</script>
</body>
</html>
3.2 #id selector
- It selects a specified element through the id attribute (id is unique), such as $("#test")
<p>michael study web development</p>
<p>Keep going</p>
<p id="myweb">My blog address https://michael.blog.csdn.net/</p>
<button id="b1">Click the button to hide id=myweb Element of</button>
<script>
$(document).ready(function () {
$('button').click(function () {
$("#myweb").hide();
});
});
</script>
3.3 .class selector
- It finds elements through the specified class, such as $(". test")
Click the button, and all elements with class = "test" attribute will be hidden
<script>
$(document).ready(function () {
$('button').click(function () {
$(".test").hide();
[Add link description](https://www.runoob.com/jsref/dom-obj-event.html) });
});
</script>More selector References: https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
4. jQuery event
The response of a page to a visitor is called an event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery event</title>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<p id="p1">michael study web development</p>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
$(this).css("color","red");
alert("Hover over me");
},function(){
$(this).css("color","black");
alert("Mouse away from element");
})
})
</script>
</body>
</html>
5. Get content and attributes
5.1 obtaining content
Manipulating DOM documents
- text() sets or returns the text of the element
- html() sets or returns the content of the element (including HTML tags)
- val() sets or returns the value of the form field
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get content</title>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<p id = "test">This is in the text <b>Bold</b> Text</p>
<button id="bt1">Display text text</button>
<button id="bt2">display HTML</button>
<script>
$("#bt1").click(function () {
alert("text:"+$("#test").text());
});
$("#bt2").click(function () {
alert("html:"+$("#test").html());
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>obtain val, Verify string length</title>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<h4>Please fill in user information:</h4>
<form method="post" action="">
<div>
<label for="username">user name:</label>
<input type="text" id="username" name="username" value="">
</div>
<div>
<label for="password">dense Code:</label>
<input type="password" id="password" name="password" value="">
</div>
<div>
<button id="bt1" type="submit" name="submit">Submit</button>
</div>
</form>
<script>
$("#bt1").click(function () {
var username = $("#username").val();
var password = $("#password").val();
if (username.length < 3) {
alert("The length of user name cannot be less than 3 digits");
return False;
}
if (password.length < 6) {
alert("Password length cannot be less than 6 digits");
return False;
}
return True;
});
</script>
</body>
</html>
5.2 get attributes
- The attr() method of jQuery can get and set attribute values If attr("attribute name") gets the attribute value, attr("attribute name", "attribute value") sets the attribute value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Property value reading, setting</title>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div>
<a id="url1" href="https://michael. blog. csdn. Net / "> Michael Amin's blog address</a>
</div>
<button id="button1">read url address</button>
<button id="button2">modify url address</button>
<script>
$("#button1").click(function () {
var url = $("#url1").attr("href");
alert(url);
});
$("#button2").click(function () {
$("#url1").attr("href", "https://www.baidu.com/");
$("#url1").html(" Baidu homepage address ");
});
</script>
</body>
</html>
