Table of contents
2.DOM object --> JQuery object:
3.JQuery object --> DOM object:
4.2 Content filtering selector
4.3 Visibility filter selector
4.5 Child element filter selector
4.6 Form attribute filter selector
1. Quick Start with JQuery
1.Basic introduction:
(1) JQuery is a fast and concise JS library that allows users to process HTML, CSS, and DOM more conveniently.
(2) JQuery provides encapsulated methods, events, selectors, etc. It also solves browser compatibility issues and provides AJAX interaction for websites .
(3) The design purpose of JQuery is - WRITE LESS, DO MORE.
2. Getting Started Case:
Download JQuery as shown in the picture below, right-click and "Save As" to save it locally.
The demo.html code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery intro</title>
<!--引入JQuery库-->
<script type="text/javascript" src="../../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
/**
* (1) $(function () {})等价于原生JS的window.onload = function() {}。
* (2) 得到的JQuery对象其实就是对DOM对象的包装。（一个伪数组）
* (3) JQuery中，获取对象的方法是 $("#id")，注意：id前必须加 #
* (4) 编程中，约定俗成JQuery对象的命名以$开头。
*/
$(function () {
var $btn_01 = $("#btn_01");
$btn_01.click(function () {
alert("This is JQuery!")
});
});
</script>
</head>
<body>
<button id="btn_01">点我点我快点我！</button>
</body>
</html>Running effect: (GIF below)
2. JQuery object
1.Basic introduction:
(1) The JQuery object is an object generated by packaging the DOM object . eg: $("#id").html() - means: Get the HTML code of the element with ID = id; equivalent to document.getElementById("id").innerHTML in DOM;
(2) The JQuery object is unique to JQuery and you can use methods in JQuery . eg: $("#id").html();
2.DOM object --> JQuery object:
The dom_jquery.html code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM --> JQuery</title>
<script type="text/javascript" src="../../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
/* $(DOM对象) 可以将DOM对象转换为JQuery对象 */
window.onload = function () {
var username = document.getElementById("input_01");
console.log("username's value = " + username.value)
var $username = $(username);
console.log("$username's value = " + $username.val());
}
</script>
</head>
<body>
Username : <input type="text" id="input_01" name="username" value="在这儿输入您的大名捏~"/>
</body>
</html>running result:
3.JQuery object --> DOM object:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery --> DOM</title>
<script type="text/javascript" src="../../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
/*
* JQuery对象 --> DOM对象————
* (1) 方法一 : 通过数组对象[index]下标的方式取出相应的DOM对象; (一般是0)
* (2) 方法二 : 通过JQuery本身提供的get(index)方法得到相应的DOM对象。
* */
window.onload = function () {
var $input_01 = $("#input_01");
console.log("$input_01's value = " + $input_01.val());
var input_01 = $input_01[0];
console.log("input_01's value = " + input_01.value)
var input_01_EX = $input_01.get(0);
console.log("input_01_EX's value = " +input_01_EX.value)
}
</script>
</head>
<body>
Color : <input type="text" name="color" value = "你喜欢什么颜色捏~" id="input_01"/>
</body>
</html>running result:
3. JQuery selector
1 Introduction:
In JQuery, event processing, DOM and AJax operations all rely on selectors.
The format is as follows——
$("#id") is equivalent to document.getElementById("id);
$("tagName") is equivalent to document.getElementsByTagName("tagName");
2.Basic selector:
The basic selector is the simplest selector in JQuery and the most commonly used selector. It searches for DOM elements by element id, class value, and tag name .
The usage format is as follows——
(1) #id——$("#id");, returns a collection of single elements (used to select elements with id = "id").
(2) Element——$("element");, returns collection elements (used to select tag elements that have been defined in HTML).
(3) .class——$(".class");, returns the collection elements (used to select elements with class="class").
(4) * ——$("*"); , returns collection elements (used to select all elements, mostly used to search based on context).
(5) selector1, selector2, selectorN——$("#id, .class, span, p.myClass");, return the collection elements (the elements matched by each selector will be combined and returned together, you can specify as many as you like) Selector. Among them, p.myClass represents the matching element [p class="myClass"]).
PS :
① Regarding the css() method, css("propertyname", "value"); can set the specified attribute value to the specified attribute . eg: $("p").css("background-color","yellow");
3.Level selector:
Hierarchical selectors can obtain specific elements through the hierarchical relationship between DOM elements , such as descendant elements, child elements, adjacent elements, sibling elements, etc.
The usage format is as follows——
(1) ancestor descendant——$("form input");, returns collection elements (used to select all specified descendant elements under a given ancestor element, different from parent > child).
(2) parent > child——$("form > div");, returns a collection element (used to select all specified child elements under a given parent element, emphasizing that it must be a child element, that is, the first-level descendant element . It can also be used nested, eg: $("form > div > div");, pay attention to the parent-child relationship).
(3) prev + next——$("label + input");, returns the collection elements (used to select all next elements immediately following the prev element).
(4) prev ~ siblings——$("form ~ input");, returns the set element (used to select all siblings elements after the prev element . Note that this element is not included, and siblings are selected to be the same as prev. Elements).
PS:
① The method siblings() in JQuery has nothing to do with the front and back positions. As long as it is a sibling node, it can be selected .
4. Filter selector:
4.1 Basic filter selector
The usage format is as follows - (colon: represents filtering)
(1) :first——$("div:first");, returns a collection of single elements (used to select the first element).
(2) :last——$("tr:last");, returns the collection element (used to select the last element, corresponding to :first: note that the last element refers to the "lower right" element of the page) .
(3) :not(selector)——$("input:not(:checked)"); , returns the collection elements (used to remove all elements matching the given selector, somewhat similar to non, here is removal type = input element with checked attribute in checkbox; note that there is no need to add double quotes in not() brackets ).
(4) :even——$("tr:even");, returns the set elements (used to select all elements with even index values, counting from 0, for example, the index value of the first tr in the table is an even number 0 ).
(5) :odd——$("tr:odd");, returns collection elements (used to select all elements with odd index values, corresponding to :even, the first element of the page starts counting from 0 ).
(6) :eq(index)——$("tr:eq(0)");, returns the collection elements (used to select an element with a given index value, the index value is in the brackets).
(7) :gt(index)——$("tr:gt(0)");, returns the collection elements (used to select all elements greater than the given index value).
(8) :lt(index)——$("tr:lt(2)"); , returns the collection elements (used to select all elements less than the given index value).
(9) header (fixed writing method) - $(":header").css("background", "#EEE");, returns collection elements (used to select header elements such as h1, h2, h3).
(10) animated (fixed writing); , returns the collection elements (used to select all elements that are performing animation effects).
4.2 Content filtering selector
The usage format is as follows——
(1) :contains(text)——$("div:contains('Cyan')"); , returns collection elements (used to selectelements containing the given text ).
(2) :empty——$("td:empty");, returns collection elements (used to select all empty elements that do not contain child elements or text).
(3) :parent——$("td:parent");, returns collection elements (used to select all elements containing child elements or text; corresponding to :empty).
(4) :has('selector')——$("div:has(p)").addClass("test"); , returns the collection elements (used to select elements containingelements matched by the given selector) ;Here, add the class = "test" attribute to all div tag elements containing p elements).
4.3 Visibility filter selector
The usage format is as follows——
(1) :hidden——$("input:hidden");, returns collection elements (used to select all invisible elements ; invisible elements include display:none in CSS and <input type = "hidden in HTML "/> ).
(2) :visible——$("div:visible");, returns collection elements (used to select all visible elements).
PS:
① The method show() in JQuery can display hidden elements .② The method each() in JQuery can be used to traverse the jquery array . eg:
$inputs.each(function () {
console.log($(this).val()); //this object is the DOM object taken out each time it is traversed
})
4.4 Attribute filter selector
The usage format is as follows——
(1) [attribute]——$("div[id]");, returns JQuery collection elements (used to select elements containing the given attribute ).
(2) [attribute=value]——$("input[name='cyan']");, returns collection elements (used to select elements that contain a given attribute and the attribute is a specific value ). [ Add 'single quotes' to value ]
(3) [attribute!=value]——$("input[name!='cyan']");, returns collection elements (used to select all elements that do not contain the specified attribute or contain the specified attribute but the attribute value is not a specific Value element; equivalent to:not([attr=value]) in the basic filter selector; if you only want to select elements that contain the specified attribute but the attribute value is not a specific value, you can use [attr]:not([ attr=value]) .
(4) [attribute^=value]——$("input[name^='cyan']");, returns collection elements (used to selectelements containing specific attributes starting with a specific value ).
(5) [attribute$=value]——$("input[name$='cyan']");, returns collection elements (used to selectelements containing specific attributes ending with a specific value ).
(6) [attribute*=value]——$("input[name*='cyan']");, returns collection elements (used to selectelements with specific attributes that "contain specific values" ).
(7) [attributeFilter1][attributeFilter2][attributeFilterN]——$("input[id][name^='cyan']"); , returns collection elements (composite attribute selector, which needs to satisfy multiple filtering conditions at the same time; Here is an element with an id attribute and an attribute starting with cyan).
4.5 Child element filter selector
The usage format is as follows——
(1) :nth-child(index/even/odd/equation)——$("ul li:nth-child(2)");, returns the collection element (used to select the Nth child element under its parent element Either odd or even elements; similar to eq() in the basic filter selector , but the index here starts from 1. )
:nth-child(even/odd), selects elements whose index value under each parent element is even/odd.
:nth-child(3), selects the element with index value 3 under each parent element.
:nth-child(3n), selects elements whose index value under each parent element is a multiple of 3.
:nth-child(3n + 1), selects the element whose index value is 3n + 1 under each parent element.
(2) :first-child——$("ul li:first-child");, returns the collection element (used to select the first child element; note that the basic filter selector ':first' only matches one element, This selector will match one child element for each parent element.)
(3) :last-child——$("ul li:last-child");, returns the collection element (used to select the last child element; note that the basic filter selector ':last' only matches one element, and This selector will match one child element for each parent element.)
(4) :only-child——$("ul li:only-child");, returns the collection element (used to select the only child element in the parent element).
4.6 Form attribute filter selector
The usage format is as follows——
(1) :enabled——$("input:enabled");, returns collection elements (used to select all available elements of the form, that is, tags without disabled="disabled" in the <input/> tag.)
(2) :disabled——$("input:disabled");, returns collection elements (used to select all unavailable elements of the form, corresponding to :enabled.)
(3) :checked——$("input:checked");, returns collection elements (used to select selected elements (such as checkbox and radio, etc., but does not include the option element in the select drop-down box.)
(4) :selected——$("input:selected");, returns collection elements (used to select all selected option elements.)
5. Form selector:
1. :input——$(":input"); Returns collection elements (matches all input, textarea, select and button elements).2. :text——$(":text"); Returns collection elements (matches all single-line text boxes ).3. :password——$(":password"); Returns the collection elements (matches all password boxes).4. :radio——$(":radio"); Returns the collection elements (matches all radio buttons).5. :checkbox——$(":checkbox"); Returns the collection elements (matches all checkboxes).6. :submit——$(":submit"); Returns collection elements (matches all submit buttons).7. :image——$(":image"); returns collection elements (matching all image fields).8. :reset——$(":reset"); Returns collection elements (matches all reset buttons).9. :button——$(":button"); Returns collection elements ( matches all buttons, including directly defined <button></button> buttons and buttons in the form of <input type="button"/> tags ).10. :file——$(":file"); Returns collection elements (matches all file fields)11. :hidden——$("input:hidden"); Returns collection elements (matches all invisible elements, including elements with type = hidden, and is not limited to form elements. Elements with style hidden will also be matched)
System.out.println("END----------------------------------------------------------------------------------------------------------------------");