directory

JQuery selector content filter

Visibility filter

Note that the selector contains Spaces

Element content

Manipulation of text content

Manipulate HTML content

Insert the node

Remove nodes

Wrap the node

JQuery selector content filter

Content filters are filtered by the text content that a DOM element contains and whether it contains a matching element.

:contains(text) Description: Matches the element that contains the given text
Example: $(“li:contains(word) // Matches the li element containing the text content of “word”
:empty Description: Matches all empty elements that do not contain child elements or text
Example: $(” TD :empty”) // Matches cells that do not contain child elements or text
:has(selector) Description: Matches the element that contains the element matched by the selector
Example: $(“td:has(p)”

Marked cells
:parent Description: Matches elements that contain child elements or text
Example: $(” TD :parent”) // matches a cell that is not empty, i.e. contains child elements or text

Example: Find elements with BBB in the cut content of class B, and set the background color to yellow

<style type="text/css">
		.background{
			background-color: yellow;
		}
	</style>
<body>
	<div class="a">
		cccccccccc
	</div>
	<div class="b">
		cccccbbbcc
	</div>
	<div class="a">
		cccccccccc
	</div>
	<div class="b">
		cccaabbbcc
	</div>
	<div class="a">
		cccccccccc
	</div>
	<div class="b">
		cccccccccc
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			// Add a background class to the element where class b exists
			var $jqdiv1 = $(".b:contains('bbb')").addClass('background')})</script>
</body>
Copy the code

Running results:

 

Visibility filter

There are two visible states of an element, one is visible and the other is hidden. Visibility filters use the visible state of elements to match

:visible Description: Matches all visible elements
:hidden Description: Matches all invisible elements Note: When the :hidden filter is applied, elements whose display attribute is None and input element whose type attribute is hidden are matched

Example:

<body>
	<div class="a">
		cccccccccc
	</div>
	<div class="b" style="display: none;">
		cccccbbbcc
	</div>
	<div class="a">
		cccccccccc
	</div>
	<div class="b" style="display: none;">
		cccaabbbcc
	</div>
	<div class="a">
		cccccccccc
	</div>
	<div class="b">
		cccccccccc
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			// Add a background class to the element where class b exists
			var $jqdiv1 = $(":hidden").addClass('background')})</script>
</body>
Copy the code

Running results:

 

Note that the selector contains Spaces

In practical applications, it is important to have whitespace in the selector. One more space and one less space will get different results

Example:

<body>
	<div class="name">
		<div class="name" style="display: none;">1</div>
		<div class="name" style="display: none;">2</div>
		<div class="name" style="display: none;">3</div>
		<div class="name" style="display: none;">4</div>
		<div class="name" style="display: none;">5</div>
	</div>
	<div class="name" style="display: none;"></div>
	<div class="name" style="display: none;"></div>
	<script type="text/javascript">
		$(document).ready(function(){
			var $jqdiv1 = $(".name :hidden")
			var $jqdiv2 = $(".name:hidden")
			var len1 = $jqdiv1.length
			var len2 = $jqdiv2.length
			console.log("len1(.name ):"+len1)
			console.log("len2(.name):"+len2)
		})		
	</script>
</body>
Copy the code

Running results:

After one extra space, only descendant selectors are selected

 

Element content

The content of the element refers to the content between the start tag and the end tag that defines the meta, which can be divided into text content and HTML content

Text content: The text content of the div element is “sfafaafj!” The text content does not also contain the child elements of the element, only the text content of the element

HTML content: The HTML content of the div element is “

ahfiafi!

“, the HTML content contains not only the text content of the element but also the child elements of the element

Manipulation of text content

Text (): The content of the text used to get all matched elements

Note: It is also possible to parse the text content of an XML document element. Text (val): The text content used to set all comparison elements Note: The original content of the meta will be replaced with the content of the new setting, including the HTML content note: When setting the text content, even if the content contains HTML code, it will be treated as plain text, It cannot be parsed as HTML code by the browser

Example:

<body>
	<div class="name">
		<p>What's going on</p>
	</div>
	
	<script type="text/javascript">
		$(document).ready(function(){
			// Manipulate the text content of the element
			//text() text(val)
			var $div = $('.name')
			console.log($div.text())
			// Set the div text
			$div.text("Nothing happened.")
			console.log($div.text())
		})		
	</script>
</body>
Copy the code

Running results:

Replace before:

After the replacement:

 

Manipulate HTML content

HTML (): The HTML content used to get the first matched element

HTML (val) : The HTML content used to set all matched elements

Note: The content contains HTML code that can be parsed by the browser

Note: HTML () and HTML (val) cannot be used for XML documents, but they can be used for XHTML documents

Example:

<body>
	<div class="name">
		<p>What's going on</p>
	</div>
	
	<script type="text/javascript">
		$(document).ready(function(){
			// Manipulate the text content of the element
			//text() text(val)
			var $div = $('.name')
			console.log($div.html())
			// Set the div text
			$div.text("Nothing happened.")
			console.log($div.text())
		})		
	</script>
</body>
Copy the code

Running results:

 

Example:

<body>
	a<input type="radio" value="1" name="a"/>
	b<input type="radio" value="2" name="a"/>
	c<input type="radio" value="3" name="a"/>
	
	<select name="" multiple="multiple">
		<option value=List of "1" selected="selected">Listing 1</option>
		<option value="The list of 2" selected="selected">List 2</option>
		<option value="The list of 3" selected="selected">List 3</option>
	</select>
	
	<script type="text/javascript">
		$(document).ready(function(){$('input').val([2$(])'select').val([List of '1'.List of '3'])})</script>
</body>
Copy the code

Running results:

 

Insert the node

Append (Content) appends internal content to all matched elements

AppendTo (Content) adds all matched elements to another set of elements

prepend (content )

prependTo (content )

Example: Add a node

<body>
	<div class="div1">
	</div>
	<div class="div2">
	</div>
	
	<script type="text/javascript">
		$(document).ready(function(){
			// Element node
			var $jsp = $("<h1>asfaf</h1>")
			console.log($jsp)
			$(".div1").append($jsp)
			var $jsp2 = $(
 
The $()".div2").append($jsp2)
		})		
	</script>
</body>
Copy the code

Running results:

 

Methods to add content before and after an element

  • After (Content): Insert after each matched element
  • insertafter(content)
  • Before (Content) : Insert before each matched element
  • insertbefore(content)

 

Remove nodes

Remove () : Used to remove matching elements from the DOM

detach()

empty()

 

Example: Use remove to delete a node

<body>
	<div class="div1">
		1111
	</div>
	<div class="div2">
		aaaa
	</div>
	
	<script type="text/javascript">
		$(document).ready(function(){$(".div1").remove()
		})		
	</script>
</body>
Copy the code

Running results:

 

Wrap the node

<body>
	<span>11111</span>
	<span>22222</span>
	<span>33333</span>

	<button>The parcel node</button>
	<button>Get rid of the node</button>
	<button>The overall package</button>
	<button>The parcel inside</button>
	<script type="text/javascript">
		$(document).ready(function(){
			//wrap
			$("button:eq(0)").click(function(){
				// Wrap each span tag with a p tag
				$("span").wrap("<p></p>");
			});
			
			//unwarp
			$("button:eq(1)").click(function(){
				// Remove the parent node matching each span tag
				$("span").unwrap();
			});
			//wrapAll
			$("button:eq(2)").click(function(){$("span").wrapAll("<p></p>");
			});
			//wrapInner
			$("button:eq(3)").click(function(){
				//
				$("span").wrapInner("<p></p>");
			});
		})		
	</script>
</body>
Copy the code

Running results:

At the beginning:

Package node:

Overall package:

Inside the package:

 

 

 

 

Learn together and make progress together. If there are any mistakes, please comment