Web Front-end Basics (07)

### Property selector

$(” div[id] “) matches the div containing the ID attribute
$(” div[attribute name = ‘XXX’] “matches the div with the specified attribute name = XXX
$(” div[attribute name!= ‘XXX’] “) matches the specified attribute name! = XXX div ### child element selector
$(” div:first-child “) matches div and is the first and requires the element to be a child
$(” div: last-Child “) matches div and is the last and requires the element to be a child
$(” div:nth-child(n) “) matches div and NTH and requires the element to be child n starting at 1

### form selector

$(“:input”) matches all controls in the form
$(“:password”) matches all the password boxes
$(“:radio”) matches all radio selections
$(“:checkbox”) matches all multiple selections
$(“:checked”) matches all checked single/multiple/pull-down selections
$(” Input :checked “) matches all checked single and multiple selections
$(“:selected”) matches all of the selected dropdowns ### modify page elements associated with them

Create and add elements

Create:var d = $("<div id='xxx'>abc</div>");
Append (d);
Prepend (d);
Before (d);
Insert after element: sibling element. After (d);
Remove element: element object. Remove ();

Gets and modifies the text content of an element equivalent to innerText

Get the element text element object. Text ();
Modify element text element object. Text (” XXX “);

Gets and modifies the HTML content of an element equivalent to innerHTML

Gets the element HTML element object.html();
Modify the element HTML element object.html("<h1>xxxx</h1>");

Gets and modifies the CSS style of the element

Get element style element object.css (” background-color “);
Modify element style Element object.css (” Style name “, “value”);
CSS ({” Style name 1 “:” value “, “Style Name 2” : “value”});

Gets and modifies the attributes of the element

Attr (” Attribute name “);
Attr (” Attribute name “, “attribute value”);

Practice:

1. Modify the element correlation

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>		
		<script src=".. / js/jquery - 1.4.2. Js. "" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// Create an element object
			var myh1 = $("< H1 > I'm new ");
			// Add the element to the end of the body
			//$("body").append(myh1);
			// Add elements to the front of an element
			//$("body").prepend(myh1);
			// Insert elements in front of an element
			//$("div:eq(1)").before(myh1);
			// Insert after an element
			$("div:eq(1)").after(myh1);
			// Delete element Deletes the last div
			$("div:last").remove();			
		</script>
	</body>
</html>
Copy the code

2. Insert exercises

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" />
		<input type="button" value="Add before" />
		<input type="button" value="Add later" />
		<input type="button" value="Insert in front of Shanghai." />
		<input type="button" value="Insert behind Shanghai." />
		<input type="button" value="Delete Guangzhou" />
		<input type="button" value="Delete"Beijing / > < ul > < li > < / li > < li > Shanghai < / li > < li > guangzhou < / li > < / ul > < script SRC =".. / js/jquery - 1.4.2. Js. "" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// Add a click event to the first button
			$("input:eq(1)").click(function(){
				/ / create the li
				var li = $("<li></li>");
				// Get the text inside the text box
				var str = $("input:first").val();
				// Set li's display text method to be equivalent to innerText in JS
				li.text(str);
				// add the created li to ul
				$("ul").prepend(li); $(})"input:eq(2)").click(function(){
				var li = $("<li></li>");
				li.text($("input:first").val());
				$("ul").append(li); $(})"input:eq(3)").click(function(){
				var li = $("<li></li>");
				li.text($("input:first").val());
				$("Li: the contains (' Shanghai ')").before(li); $(})"input:eq(4)").click(function(){
				var li = $("<li></li>");
				li.text($("input:first").val());
				$("Li: the contains (' Shanghai ')").after(li); $(})"input:eq(5)").click(function(){
				$("Li: the contains (' guangzhou)").remove(); $(})"input:eq(6)").click(function(){
				$("li:contains('"+ $("input:first").val()+"')").remove();
				
				// Modify the body HTML
				$("body").html("");
			})
			// Modify the element style
			$("ul").css("color"."red");
			// Get the element style
			//alert($("ul").css("color"));
			// Batch assignment
			$("ul").css({"font-size":"20px"."background-color":"blue"});
			// Create an image
			var img = $("<img>");
			// Set the id to ABC
			img.attr("id"."abc");
			// Set the SRC attribute
			img.attr("src".".. /imgs/2.jpg");
			$("body").append(img);
			// Get the value of an attribute
			console.log(img.attr("src"));
			
		</script>
	</body>
</html>
Copy the code

3. Practice in groups with friends

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> < title > < / title > < / head > < body > < ul > < li > relatives < ul > < li > pei escape tiger < / li > < li > Su Lie < / li > < li > mulan < / li > < / ul > < / li > < li > < ul > friends < li > zhaoyun < / li > < li > guan yu < / li > < li > thyme xuan policy < / li > < / ul > < / li > < li > girlfriends < ul > < li > xi shi < / li > < li > the sable cicada < / li > < li > sun from < / li > < / ul > < / li > < / ul > <script src=".. / js/jquery - 1.4.2. Js. "" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// Hide all layer 2 ul's first
			$("li>ul").hide();
			// Add click events to all li's in the first layer
			$("body>ul>li").click(function(){
				// In the event method this represents the element object that triggered the event
				// This is the js object that needs to be used if the methods in JQ are used
				$(this); $(this);
				// Get the ul element inside li
				$(this).children().toggle();
				// Get the ul in the other two Li's and set it to hide
				$(this).siblings().children().hide();
			})
		</script>
	</body>
</html>
Copy the code

4. Linkage between provinces and cities

<! DOCTYPE html> <html> <head> <meta charset="utf-8">< title></title> </head> <body> <select> <option> Please select </option> <option value="0"</option> <option value="1"</option> <option value="2"> Beijing </option> <option value="3"</option> </select> <select> <option> Please select </option> </select> <script SRC =".. / js/jquery - 1.4.2. Js. "" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var arr =[[qinhuangdao."Tangshan"."Shijiazhuang"],
			["Qingdao"."Heze"."Yantai"],
			["Sun"."Haidian"."Building"],
			[Hefei ""."Luan"."Wuhu"."Huainan"."Anqing"]].// Add a value change event to the first drop-down
			$("select:first").change(function(){
				// Delete the contents of the second dropdown
				//$("select:last").children().remove();
				// Delete the contents of the file
				$("select:last").html("");

				// Get an array of cities corresponding to the clicked province
				var cities = arr[$("select:first").val()];
				// alert(cities);
				// 90% of the time you get an array is a convenience array
				for(var i = 0; i < cities.length; i++){var city = cities[i]
					// Create an Option object based on each city name
					var o= $("<option></option>");
					// Put the city name in option
					o.text(city);
					// Add the created option to the second drop-down
					$("select:last").append(o); }}); </script> </body> </html>Copy the code

5. Employee listing exercise

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" placeholder="Name" />
		<input type="text" placeholder="Age" />
		<input type="text" placeholder="Wages" />
		<input type="text" placeholder="Department" />
		<input align="center" type="button" value="Add" />
		<hr>
		<table border="1" cellspacing ="e" cellpadding="0"> < caption > employees list < caption > < tr > < th > name < / th > < th > age < / th > < th > wages < / th > < th > department < / th > < th > action < / th > < / tr > < / table > < script SRC ="../js/jquery-1.42..js" type="text/javascript" charset="utf-8"> text/javascript"> // add click event $("input:lastVar tr = $(").click(function(){// Create a tr and 5 TDS in the click event.<tr></tr>"); var nametd = $("<td></td>"); var agetd = $("<td></td>"); var saltd = $("<td></td>"); var depttd = $("<td></td>"); var deltd = $("<td><input type='button' value='delete'></td>"); Deltd.children ().click(function(){tr.remove(); deltd.children() {tr.remove(); $nametd.text($(" "); $(" ");input:eq(0)").val()); agetd.text($("input:eq(1)").val()); saltd.text($("input:eq(2)").val()); depttd.text($("input:eq(3)").val()); // Add tr to table tr.append(nametd); // Add tr to table tr.append(nametd); tr.append(agetd); tr.append(saltd); tr.append(depttd); tr.append(deltd); // add tr to table $("table").append(tr); // add tr to table   
      Copy the code

6. Check boxes

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" />
		<input type="button" value="Button"/>
		<script src=".. / js/jquery - 1.4.2. Js. "" type="text/javascript" charset="utf-8"></script>
		<script type=" text/javascript">
			// Add click events to the button
			$(" input:last").click(function() {
				//$(" input:first").attr("checked" , "checked" ); 
				//$("input:first").attr("checked", true);
				// Check whether the current multi-check box is selected
				
				/ * if ($(" input: first "). Attr (" checked ")) {/ / when the currently selected need to set selected $(" input: first "). Attr (" checked ", false); }else{// Check $(" input:first").attr("checked",true); } * /
				
				// Implemented with a ternary expression
				/* $("input:first").attr("checked", $("input:first").attr("checked")? false:true); * /
				// The last one
				$("input:first").attr("checked",! $("input:first").attr("checked"));
			})
		</script>
	</body>

</html>
Copy the code

To be continued… Web Front End Foundation (01) Web Front End Foundation (02) Web Front End Foundation (03) Web Front End Foundation (04) Web Front End Foundation (05) Web Front End Foundation (06) Web Front End Foundation (07) Web Front End Foundation (08) Web Front End Foundation (09) \

Practice:

Related Posts

Realizing bullet Screen Gadget Based on Electron + NodeJS + Small Program (Part 1)

JS garbage collection mechanism

[Luffy]_ Algorithm learning