Notes and summary of jQuery

1. Use of jquery

The jQuery library is a JavaScript file. We can directly reference it in HTML pages through script tags, with the same syntax as referencing our own external JavaScript script files.

<head>
    <script src="jquery-1.11.1.js"></script>
</head>

2. Document ready event

The document ready event is actually a file loading event. This is to prevent the document from running jQuery code before it is fully loaded (ready), that is, the DOM can be operated on only after the DOM is loaded. If you run the function before the document is fully loaded, the operation may fail. Therefore, we try our best to implement all operations after the document is loaded.

Writing 1:

$(document).ready(function(){
// Start writing jQuery code
});

Writing 2: concise writing - Recommended

$(function(){
    // Start writing jQuery code
});

3.1 element / label selector

The jQuery element selector selects elements based on element / tag names.

Syntax: $("tag name")

<div>div1</div>
<div>div2</div>
<div>div3</div>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<script>
			//Document ready event:
			$(document).ready(function() {
				//Write jQuery
			});
			$(function() {
				//1. Label selector:
				//Get all div elements (collections)
				var divList = $("div");
				console.log(divList); //jQuery object
				console.log(divList.length);
				for(var i = 0; i < divList.length; i++) {
					console.log(divList[i]); //js object
					//Convert js object to jQuery object
					console.log($(divList[i]));
				}
			});
		</script>

3.2 #id selector

The jQuery #id selector selects the specified element through the ID attribute of the HTML element. The ID of the element in the page should be unique, so you need to select the unique element in the page through #id selector. The syntax of selecting elements by ID is as follows:

$("#p1)
//2. id selector
			function idSelector(){
				//The element obtained according to the id is unique. Even if there is a duplicate id on the page, the first one is obtained
				var p=$("#p1");
				console.log(p.html())	;
			}

3.3. Class selector

The jQuery class selector can find elements through the specified class.

$(".mydiv")
//3. Class selector
			function classSelector(){
				var list=$(".mydiv");
				console.log(list.length);
				for (var i=0;i<list.length;i++) {
					console.log($(list[i].innerHTML))
					console.log((list[i].innerHTML))
					
				}
			}

3.4 global selector

Match all elements

$("*")
//4. Global selector
			function allSelector(){
				var list=$("*");
				console.log(list.length);
				for (var i=0;i<list.length;i++) {
					console.log(list[i]);
					console.log(list[i].innerHTML);
				} 
			}

3.5 union selector

The elements matched by each selector are merged and returned together

$("div,ul,li,.mydiv")
//5. Union selector
			function andSelector(){
				var list=$("div,p,li");
				printList(list);
			}

3.6 offspring selector

Matches all descendant elements under a given ancestor element

$("form input")
//6. Offspring selector: includes all descendants
			function subSelector(){
				var list=$("form input ")
				printList(list);
			}

three point seven    Child selectors

Matches all child elements under a given parent element

//7. Child selector: only child elements
			function sunSelector(){
				var list=$("form>input ")
				printList(list); 
			}

3.8 adjacent selectors

Matches all the next elements immediately after the prev element

//8. Adjacent selector,
			function nextSelector(){
				var list=$("label + input ")//The next < input > element adjacent to the < label > element
				printList(list); 
			}

3.9 peer selector

//9. Peer selector
			function sublingsSelector(){
				var list=$("form ~ input ")
				printList(list); 
			}

4.10 attribute selector

//10. Attribute selector
			function attrSelector(){ 
				var list=$("div[id]");//Gets the collection of all div elements with id attribute
				list=$('input[name="userName"]');//Gets that the name attribute in all input tags is a collection of userName elements
				list=$('input[name^="user"]');//Gets a collection of elements whose name attribute starts with user in all input tags
				list=$('input[name$="pass"]');//Gets the collection of elements whose name attribute ends with pass in all input tags
				list=$('input[name*="user"]');//Get that the name attribute in all input tags is a collection with user elements
				list=$("input[id][name^='user']");
				printList(list);
			}

4.12 visibility selector

Matches all visible or invisible elements

//11. Visibility selector
			function seeSelector(){
				//Match all visible div elements
				var list=$("div:visible");
				//Match all invisible div elements
				list=$("div:hidden")
				//Match all invisible input elements with display:none elements and type=hidden elements
				list=$("input:hidden") 
				printList(list);
			}

  5. JQuery function

five point one   Functions related to label content

function textFun(){
				var str1=$("div").html();//What is obtained is the content in the containment tag of the first matching element, including the content of the nested tag
				console.log(str1);
				var str2=$("div").text();//Gets the text information in all matching elements, excluding nested tags
				console.log(str2);
				var str3=$("div").val();//val() can only get the value of the form item element. div is not a form element, so it cannot be obtained
				console.log(str3);
				var str4=$("input").val();//The obtained value is the value of the first matching form element, and the input is the form element, which can obtain the form value
				console.log(str4);
			}

five point two   Functions related to label properties

function attrFun(){
				var img=$("img");
				//set a property
				img.attr("src","img/cat.jpg");
				img.attr("title","Disobey");
				//Remove Attribute 
				img.removeAttr("title");//Remove Attribute 
				var src=img.attr("src");//get attribute
				var title=img.attr("title");
				console.log(src+"===="+title);

five point three   Get the checked or selected attribute. The value obtained by using the prop function is of boolean type  

var list=$("input[type='radio']");
				for (var i=0;i<list.length;i++) {
					var flag=$(list[i]).prop("checked");
					console.log("checked="+flag)
				}
								
			}

five point four   css related functions

function cssFun(){
				$("div").addClass("redBg fontColor");
				$("div").removeClass("fontColor");
				$("div").removeClass();//Remove all styles without parameters
				//$("div").toggleClass("fontColor");// If the matching element has the current style, it will be deleted; if not, it will be added
				$("input").css("border-color","blue");
				$("input").css({"color":"red","border-color":"green"})
			}
function changeCss(){
				$("div").toggleClass("fontColor");//If the matching element has the current style, it will be deleted; if not, it will be added
			}

6. Events

6.1 list of common DOM events

Mouse eventKeyboard eventsForm Events Document / window events
Click click

keydown

submitload
dbclick double clickkeyupchange
mouseover mouse upfocus
mouseout mouse outblur
Hover mouse hover

6.2 common jQuery event methods

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			//Page load event
			$(function(){
				//Bind click events to all button s
				$("button").click(function(){
					//alert(this);//this is the current object, which button triggers the click event, this is which button, and this is the js object at this time
					$(this).css("color","red");//Add a css to the current trigger object
				});
				
				//Bind mouse up events to all hyperlinks
				$("a").mouseover(function(){
					var str=$(this).html();
					$(this).html("Mouse up-"+str);
				});
				//Bind mouse out events to all hyperlinks
				$("a").mouseout(function(){
					var str=$(this).html();
					$(this).html(str.substr(5));
				});
				$("a").hover(function(){
					$(this).css("color","red")
				});
			}); 
		</script>
	</head>
	<body>
		<a href="#"> Home Page < / a > & nbsp;
		<a href="#"> snacks < / a > & nbsp;
		<a href="#"> flowers < / a > & nbsp;
		<button type="button">Normal button 1</button>
		<button type="button">Normal button 2</button>
		<button type="button">Normal button 3</button>
	</body>
</html>

6.3 cloning elements

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Document processing</title>
		<style>
			div {
				background: lavenderblush;
				padding: 20px;
			}
			
			p {
				border: solid 1px red;
				background: lemonchiffon;
				padding: 20px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<script>
			$(function() {
				$("#btn3").click(function() {
					alert("Just try!");
				});
				// clone(true)
				$("#btn1").click(function() {
					$("p").clone(true).appendTo("div");
				});
				//clone(false)
				$("#btn2").click(function() {
					$("p").clone(false).appendTo("div");
				});
			});
		</script>
	</head>

	<body>
		<button id="btn1">Clone element-true</button>
		<button id="btn2">Clone element-false</button>
		<p>
			Paragraph to be cloned
			<button id="btn3">Click me to try</button>
		</p>
		<div>
			div1
		</div>
	</body>

</html>

Tags: Javascript JQuery html

Posted on Fri, 24 Sep 2021 06:43:00 -0400 by Lars Berg