1, What is jquery
- John Resig released a cross mainstream browser JavaScript Library in January 2006 to simplify JavaScript operation on HTML
2, Advantages of jquery
- Write less code and do more [write less do more]
- Free, open source and lightweight js library with small capacity
Note: in the project, it is recommended to refer to the min version of js library
- Compatible with mainstream browsers on the market, such as IE, Firefox and Chrome
Note: jQuery does not encapsulate all JS, but only selectively
- It can handle HTML/JSP/XML, CSS, DOM, events, achieve animation effects, and provide asynchronous AJAX functions
- The documentation manual is very complete and detailed
- Mature plug-ins to choose from
- It is advocated to provide an id attribute for the main html tags, but it is not necessary
- After an error, there is a certain prompt message
- There is no need to insert a lot of js into html through the < script > tag to call commands
3, jquery development steps
① Reference third-party js library files
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
② Review and use the api manual
$("#divID").html()/val()/text()/css("color","red")/....//var divElement = document.getElementById("divID");
var $div = $("#divID");
//var html = divElement.innerHTML;
var html = $div.html();
alert(html);4, js (Java Script) and jquery objects are converted to each other
(1) What are js objects and code rules
- It uses JS API, that is, the API in the Node interface or the object defined by traditional JS syntax, which is called JS object
- js code rules - divElement
- var divElement = document.getElementById("divID");
- var nameArray = new Array(3);
(2) What are jQuery objects and code rules
- Using the jQuery API, the returned object is called a jQuery object
- jQuery code rule - $div
- var $div = $("#divID")
(3) Convert js object to jQuery object [ key ]
- Syntax: $(js object) -- > jQuery object
- For example: $(divelement) -- > $div
- For example: $(this) -- > $this
- Note: the jQuery object encapsulates the js object without quotation marks
var inputElement = document.getElementById("inputID");//js object
var $input = $(inputElement);//jquery object
var txt = $input.val();
alert(txt);(4) Convert jQuery object to js object
- Syntax 1: jQuery object [subscript, starting from 0]
- Syntax 2: jQuery object. Get (subscript, starting from 0)
- For example: $div [0] - > divelement
- Note: different objects can only call the corresponding api methods, that is, jQuery objects cannot call the api of js objects, and vice versa
- $div.innerHTML (wrong)
- Divelement.html (error)
var $div = $("#divID");//jquery object
var divElement = $div[0];//js object (mode 1)
//var divElement = $div.get(0);//js object (mode 2)
var txt = divElement.innerHTML;
alert(txt);5, Differences between js objects and jQuery objects
(1) Three basic positioning methods of js objects
(A) Through ID attribute: document.getElementById()
(B) Through the NAME attribute: document.getElementsByName()
(C) By tag name: document.getElementsByTagName()
(2) Three basic positioning methods of jQuery objects
(A) By ID attribute: $("#id attribute value")
(B) By tag name: $("tag name")
(C) Through the CLASS attribute: $(". Style name")
(3) js object error display
- No reasonable prompt information
- For example: alert(document.getElementById("usernameIDD").value)
(4) Display of jQuery object errors
- There are reasonable prompt messages, such as undefined
- For example: alert($("#usernameIDD").val())
6, jQuery nine types of selectors [see jQueryAPI.chm manual]
Purpose: through nine kinds of selectors, you can locate any tag in a web page (HTML/JSP/XML)
- Basic selector [see 01_selector.html]
① Label selector (element selector)
② Class selector
③ Multiple selector
④ id selector
⑤ Wildcard selector
⑥ Descendant selector
⑦ Sub selector
⑧ Adjacent sibling selector
⑨ Universal brother selector
⑩ Union selector
⑪ Intersection selector
- Hierarchy selector [see 02_selector.html]
- Enhanced basic selector [see 03_selector.html]
- Content selector [see 04_selector.html]
- Visibility selector [see 05_selector.html]: hidden|visible
- Attribute selector [see 06_selector.html]
- Sub element selector [see 07_selector.html]
- Form selector [see 08_selector.html]
- Form object attribute selector [see 09_selector.html]
<!--01_selector.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<div id="div1ID">div1</div>
<div id="div2ID">div2</div>
<span class="myClass">span</span>
<p>p</p>
<script type="text/javascript">
//1) Find the number of elements with ID "div1ID" -- ID selector
console.log($("#div1ID").length)
//2) Find the number of DIV elements - label selector
console.log($("div").length)
//3) Find the number of all elements whose style is "myClass" -- class name selector
console.log($(".myClass").length)
//4) Find the number of all DIV,SPAN,P elements - multiple selectors
console.log($("div,span,p").length)
//5) Find the number of all P elements whose ID is div1ID,CLASS is MyClass
console.log($("#div1ID,.myClass,p").length)
</script>
</body>
</html> <!--02_selector.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<input type="radio" value="z"/>
<input type="radio" value="e"/>
<input type="radio" value="y"/>
<form>
<input type="text" value="a"/>
<table>
<tr>
<td>
<input type="checkbox" value="b"/>
</td>
</tr>
</table>
</form>
<input type="radio" value="ccccccccc"/>
<input type="radio" value="d"/>
<input type="radio" value="e"/>
<script type="text/javascript">
//1) Find the number of all input elements in the form - descendant selector
console.log($("form input").length)
//2) Find the number of all child input elements in the form - sub selector
console.log($("form>input").length)
//3) Find the value attribute value of the first input element at the same level of the form form -- the adjacent sibling selector
console.log($("form + input").val())
//4) Find the number of input elements that follow the form form's sibling -- the universal sibling selector
console.log($("form~input").length)
</script>
</body>
</html><!--03_selector.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<input type="checkbox" checked/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<table border="1">
<tr><td>line1[0]</td></tr>
<tr><td>line2[1]</td></tr>
<tr><td>line3[2]</td></tr>
<tr><td>line4[3]</td></tr>
<tr><td>line5[4]</td></tr>
<tr><td>line6[5]</td></tr>
</table>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<script type="text/javascript">
//1) Find the content of the first LI element in UL - descendant selector
console.log($("ul li:first").html())
//console.log($("ul li:first").text())
//2) Find the contents of the last li element in UL
console.log($("ul li:last").html())
//4) The index numbers of the lookup table are 1, 3, 5... Odd rows, starting from 0
console.log($("table tr:odd").length)
//5) The index numbers of the lookup table are 2, 4, 6... Even rows, and the index numbers start from 0
console.log($("table tr:even").length)
//6) Find the contents of the second row in the table, starting with the index number 0, which is a variation of ancestors and descendants
console.log($("table tr:eq(1)").text())
//7) Find the number of composite conditions in the table, that is, the index value is greater than 2
console.log($("table tr:gt(2)").length)
//8) The number of compound conditions of the lookup table, that is, the index value is smaller than 2
console.log($("table tr:lt(2)").length)
//9) Add red background color and blue text to all titles < H1 > < H2 > < H3 > in the page
$(":header").css("background-color","red").css("color","blue");
//3) Find the number of all [unchecked] elements whose input is checkbox
console.log($(":checkbox:not([checked])").length)
</script>
</body>
</html><!--04_selector.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
<style type="text/css">
.myClass{
font-size:44px;
color:blue
}
</style>
</head>
<body>
<div><p>John Resig</p></div>
<div><p>George Martin</p></div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<div></div>
<p></p>
<p></p>
<script type="text/javascript">
//1) Find the number of all div elements that contain the text "John"
console.log($("div:contains('John')").length)
//2) Find the number of elements in which all p elements are empty
console.log($("p:empty").length)
//3) Add a myClass style to all div elements that contain a p element
//$("div:has(p)").attr("class","myClass");
//$("div:has(p)").addClass('myClass');
//4) Find the number of all p elements containing child elements or text, that is, p is the parent element
console.log($("p:parent").length)
</script>
</body>
</html><!--05_selector.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<table border="1" align="center">
<tr style="display:none">
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
<tr>
<td>Value 3</td>
</tr>
</table>
<script type="text/javascript">
//1) Find the number of hidden tr elements
console.log($("tr:hidden").length)
//2) Find the number of all visible tr elements
console.log($("tr:visible").length)
</script>
</body>
</html> <!--06_selector.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
<input type="checkbox" name="newsletter" value="Hot Fuzz"/>
<input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="newsaccept" value="Evil Plans" />
<!-- <input type="checkbox" name="letternews" value="Hot Fuzz"/>
<input id="myID" type="checkbox" name="letnewster" value="Cold Fusion" />
<input type="checkbox" name="accNEWSept" value="Evil Plans" /> -->
<script type="text/javascript">
//1) Find the number of div elements with id attribute
console.log($("div[id]").length)
//2) Find and select all input elements whose name attribute is newsletter
//$("input[name='newsletter']").attr("checked","checked")
//3) Find and select all input elements whose name attribute is not a newsletter
//$("input[name!='newsletter']").attr("checked","checked")
//4) Find and select all input elements whose name attribute starts with 'news'
//$("input[name^='news']").attr("checked","checked")
//5) Find and select all input elements whose name attribute ends with 'letter'
//$("input[name$='letter']").attr("checked","checked")
//6) Find and select all input elements whose name attribute contains' news'
//$("input[name*='news']").attr("checked","checked")
//7) Find and select all input elements that contain the id attribute and whose name attribute ends with "letter"
$("input[id][name$='letter']").attr("checked","checked")
</script>
</body>
</html><!--07_selector.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<ul>
<li>Marry</li>
</ul>
<ul>
<li>Jack</li>
</ul>
<script type="text/javascript">
/*1)Iterate [Each] the contents of the first li element in each ul, and the index starts from 1*/
// $("ul li:first-child").each(function (i,e) {
// console.log($(e).html())
// })
/*2)Iterate over the contents of the last li element in each ul, with the index starting from 1*/
// $("ul li:last-child").each(function (i,e) {
// console.log($(e).html())
// })
/*4)Iterate over the contents of the second li element in each ul, with the index starting from 1*/
// $("ul li:nth-child(2)").each(function (i,e) {
// console.log($(e).html())
// })
//3) Find the contents of the li element in the ul that is the only child element
$("ul li:only-child").each(function (i,e) {
console.log($(e).html())
})
</script>
</body>
</html><!--08_selector.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" name="id" value="123"/><br/>
<input type="image" src="../images/lb.jpg" width="25px" height="25px"/><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit" /><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
</form>
<script type="text/javascript">
//1) Find the number of all input elements
console.log($(":input"))
//2) Find the number of all text boxes
console.log($(":text"))
//3) Find the number of all password boxes
console.log($(":password"))
//4) Find the number of all radio buttons
console.log($(":radio"))
//5) Find the number of all check boxes
console.log($(":checkbox"))
//6) Find the number of all submit buttons
console.log($(":submit"))
//7) Number of matching all image fields
console.log($(":image"))
//8) Find the number of all Reset buttons
console.log($(":reset"))
//9) Find the number of all normal buttons
console.log($(":button"))
//10) Find the number of all file fields
console.log($(":file"))
//11) Find the number of hidden fields for all input elements
console.log($(":hidden"))
</script>
</body>
</html> <!--09_selector.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<form>
<input type="text" name="email" disabled="disabled" />
<input type="text" name="password" disabled="disabled" />
<input type="text" name="id" />
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<select id="provinceID">
<option value="1">Guangdong</option>
<option value="2" selected="selected">Hunan</option>
<option value="3">Hubei</option>
</select>
</form>
<script type="text/javascript">
//1) Find the number of all available input elements
console.log($("input:enabled"))
//2) Find the number of all unavailable input elements
console.log($("input:disabled"))
//3) Find the number of all selected check box elements
console.log($(":checkbox:checked"))
//4) Find the number of all unselected check box elements
console.log($(":checkbox:not(:checked)"))
//5) Find the number of all selected option elements
console.log($("select option:selected"))
</script>
</body>
</html>