JQuery study notes one of the selectors

Home

Web Front-end

JS Tutorial

JQuery study notes one of the selectors_jquery

May 16, 2016 pm 06:49 PM

jquery study notes Selector

This chapter mainly explains the Jquery selector first. I don’t dare to explain it, ha, because I am also learning. The purpose of this series of articles is only to record my experience in the learning process. , on the one hand, to strengthen my own impressions, and on the other hand, to share my learning experience. Hehe, I just started writing this kind of article. I hope everyone can support me^^. If there are any bad methods, you can give me some guidance^^
Now , let us start flying in the world of JQuery together ^^
First of all, in this chapter, we will learn how to use the most basic selector of JQuery
Let me first declare the most basic rules for using JQuery
$( document).ready(function(){
//do something
})
In this series of articles, the abbreviation
$(
function(){
// do something
}
)
Regarding the external JS file used in the example, jquery-1.3.2.js is the most basic library file for using JQuery. Students who don’t have it can download it here or go to me Go to the CSDN resources
Okay, the following is the content of the HTML file I used for testing, you can refer to it

Copy the code The code is as follows:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http -equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"><!-- 
.test{ 
background:red;} 
--></style><style type="text/css" bogus="1"> .test{ 
background:red;}< /style> 
<script src="js/jquery-1.3.2.js"></script> 
<script type="text/javascript"><!-- 
$( 
function(){ 
var result = $("#sResult"); 
$("#aFirst").click(function(){ 
result.html($ ("#oneP").html()); 
}) 
$("#aSecond").click( 
function(){ 
result.html(""); 
$("form").each(function(){ 
result.html(result.html() $(this).html()); 
}) 
} 
) 
$("#aThird").click( 
function(){ 
result.html(""); 
$(".test").each( 
function(){ 
result.html(result.html() $(this).html()); 
} 
) 
} 
) 
$("#aFourthly").click (function(){ 
result.html($("*").html()); 
}) 
} 
) 
// --></script> ; 
<title>Untitled Document</title> 
</head> 

<body> 
<form> 
<p id=" oneP">one</p> <div><p>two</p></div> 
</form> 
<form> 
<p class= "test">three</p> 
</form> 
<a href="#" id="aFirst">Get the HTML content with ID "oneP"</a> | 
<a href="#" id="aSecond">Get the HTML content of all Form elements</a>| 
<a href="#" id="aThird"&gt ;Get the content of HTML with CSS style test</a>| 
<a href="#" id="aFourthly">Get all the HTML content of the page</a><br /> 
Result: 
<div style=" border-bottom-color:#000; border:1px solid " > 
<span id="sResult"></span> 
</div> 
</body> 
</html> 

This chapter talks about the functions performed by the four connection elements aFirst, aSecond, aThird, and aFourthly.
Let’s first explain the content of the attribute selector in the code
1.element.html (string content)
This method is also a relatively common function.
When this method does not pass parameters, it is used to read the pure HTML content of the current element. If parameters are passed in and used, it is used to modify the element. HTML content, this should be fairly easy to understand ^^
2.each()
This method is mainly used to traverse the element array, such as the aSecond connection in the example. When aSecond is clicked, the page will be traversed The two Form forms in the form, and use the .html() method to display the content of each form
I just briefly talked about this outside the class, now it’s time to get to the point
1.$("#ID")
Description: This method is used to get the element based on its ID. People who have learned JS should easily understand this meaning, which is equivalent to document.getElementById("ID") in JS;
In the example, it is Use this method to get the element with ID oneP and display its HTML content.
Return value: Element
2.$("TagName")
Description: This method is used to get the element of a certain element. Collection, equivalent to document.getElementsTagName("TagName") in JS. For example, get all Form form element collections.
Return value: Array(Element);
3.$(".className")
Description: This method is used to obtain a collection of elements using a certain style. For example, in the example, the collection of elements with style test is obtained.
Return value: Array(Element);
4.$("*" )
Description: Used to get all the HTML on the page. I don’t know how practical this is yet. Ha, save it first.
Return value: Array(Element);
5.$(" #ID,TagName,.className,...N")
Description: This method is actually to use the first four selectors together, separated by ",", and return a collection of elements. There is no example above. I will give a brief explanation here. For example, if you want to get the element with ID oneP, DIV element and style test, you can use $("#oneP,div,.test").
Return value: Array(Element);

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn