jQueryIntroduction
Official website: https://jquery.com
jQuery
is a
JavaScript
Library
. greatly simplified
JavaScript
Programming, for example
JS
Dozens of lines of native code to achieve the function
able,
jQuery
It may be implemented in one or two lines, so it is widely used by front-end programmers. (Now in a relatively marginal state)
Since its development, there are mainly three major versions.
:
1.x:
Common version 2.x,
3.x:
Unless there are special requirements, generally use less
Basic usage
cdn import method
<head>
<script type="text/javascript"
src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
// jquery code
</script>
</body>
The basic syntax is
:$(selector).action()
- $: represents jQuery itself
- (selector): selector, find HTML elements
- action(): operation on elements
js first needs to get the dom element, then click, and then give it an anonymous function. jquery is simple, just fill in the $ sign and click to finish.
Code Example: Button Implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button type="button" id="btn1">Click me 1</button>
<button type="button" id="btn2">Click me 2</button>
<script type="text/javascript">
// js implementation
var x = document.getElementById("btn1")
x.onclick = function () {
alert('Dear, how can I help you?')
}
// jquery implementation
$("#btn2").click(function () {
alert('Dear, how can I help you?')
})
</script>
</body>
</html>
Selector
code example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<h2>How to use jquery in HTML</h2>
<button class="btn">Click</button>
<button id="btn">Click 1</button>
<script type="text/javascript">
// tag selector
$("h2").click(function() {
alert("Hello, label")
})
//class selector
$(".btn").click(function() {
alert("Hello, class")
})
//id selector
$("#btn").click(function() {
alert("Hello, id")
})
</script>
</body>
</html>
ActionsHTML
Hide and show elements:
- hide(): Hide an element
- show(): Display an element
- toggle(): switch between hide() and show() methods
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Homepage</title>
<script type="text/javascript" src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script >
</head>
<body>
<p>xxxxxxxxxxxx</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
<button id="toggle">Toggle</button>
<script type="text/javascript">
$("#hide").click(function(){
$("p").hide()
})
$("#show").click(function(){
$("p").show()
})
$("#toggle").click(function(){
$("p").toggle()
})
</script>
</body>
</html>
Getting and setting content
:
- text() sets or returns the text content of the selected element. The text tag will not obtain the html element.
- html() sets or returns the HTML content of the selected element
- val() sets or returns the value of a form field
The following is actually to get the content of the text first, and then put the content into the demo selector.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p id="txt">This is a <b>paragraph</b>.</p>
<button type="button" id="btn1">Show text</button>
<button type="button" id="btn2">Show HTML</button>
<p id="demo"></p>
<script type="text/javascript">
$("#btn1").click(function () {
x = $("#txt").text();
console.log(x)
$("#demo").text(x).css("color","red") //The b tag will not be parsed
})
$("#btn2").click(function () {
x = $("#txt").html(); //Get
console.log(x)
$("#demo").html(x).css("color","red") //The b tag will be parsed, .html() settings
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<h1>Welcome to the operation and maintenance management system</h1>
Username:<input type="text" id="uname" name="username"><br>
Password:<input type="text" id="pwd" name="password"><br>
<button type="button" id="btn">Show input content</button>
<p id="demo"></p>
<script type="text/javascript">
$("#btn").click(function () {
x = $("#uname").val();
y = $("#pwd").val();
$("#demo").text(x + ', ' + y).css("color","red")
})
</script>
</body>
</html>
Settings
CSS
Style
:
css()
Set or return style properties
(
key value
)
addClass()
Adds one or more class styles to the selected elements
removeClass()
Removes one or more class styles from selected elements
toggleClass()
Add to selected elements
/
Remove the toggle operation of class style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="demo">
<p>this is a paragraph</p>
</div>
<button id="btn">Add style</button>
<script type="text/javascript">
$("#btn").click(function () {
$("#demo p").css("color", "red")
// $("#demo p").css({"color":"red","font-size": "30px"})
// $("#demo").addClass("cls")
// $("#demo").removeClass("cls")
})
</script>
</body>
</html>