# jQuery Analysis
## A jQuery overview
jQuery is a js library, which encapsulates many js methods, which is equivalent to an external js file.
### 1. Quick start
1) Guide library
2) You can use jquery directly in scrpit.
```html
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(
function(){
$("#span1") .html("hello jquery!");
}
);
</script>
```
### 2.jquery's page loading function (the function executed after the page is loaded)
window.onload can only appear one, and the following will override the previous one, but jquery's multiple page loading functions will not override the
jquery page loading function
```javascript
//Method one
jQuery(document).ready(function(){//....});
/ / Mode 2:
$().
//Method 3: Commonly used
$(function(){
//content
});
```
### 3. Conversion between jquery object and dom object
- After the dom object is converted into a jquery object, you can use the jquery object in the Properties and methods
```javascript
$(function(){
var sp1 = document.getElementById("sp1");
// sp1.innerHTML = "hello!";
$(sp1).html("hello jquery!");
});
```
- jquery object is converted into dom object, you can use the properties and methods in dom object
```javascript
$(function(){
$("#sp1").get(0).innerHTML = " hello!";
});
````
## Second, the selector of jquery
By looking at the jquery document, we can see that there are many kinds of selectors in jquery. The commonly used selectors are as follows:
## 1. Basic selector
- id selector:
```javascript
$("#btn1");
```
- element selector
```javascript
$("div");
```
- class selector
```javascript
$(".mini");
```
- all elements
```javascript
$("*")
```
- Combining multiple selectors
```javas
$("div,.mini");
```
## 2. Hierarchical selectors
- $("Grandpa descendants"): descendants include sons and grandchildren
- $("Grandpa > Sons "): only son, no grandson
- $("brother + younger brother"): younger brother must be next to older brother, other distant younger brothers are not counted
- $("older brother ~ younger brother"): younger brother may not be next to him , only peers.
## 3. Basic filter selector
- first(): selects the first
- last(): selects the last
- even: selects the element whose index is even
- odd: selects the element whose index is odd
## 4. Attribute selector
-[property]
-[property='value'
] ## 3. Second-level linkage of provinces and cities in the case
In order to complete the second-level linkage, it is necessary to understand the usage of each function in jquery.
The syntax of the each function is:
$.each(dataset, callback function(i,n)), where i refers to the loop variable of each loop, and n refers to the element in the data set corresponding to each loop.
The code for the provincial and municipal secondary linkage is as follows:
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src ="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
var cities = new Array();
cities[0] = new Array("Wuhan City", "Huanggang City","Xiangyang City","Jingzhou City");
cities[1] = new Array("Changsha City","Chenzhou City","Zhuzhou City","Yueyang City");
cities[2] = new Array("Shijiazhuang City", "Handan City",
$("#city").empty();
//1. Get the value selected by the current selection
var val = this.value;
//2. Traverse the array to find the array of all cities corresponding to the province
$.each( cities,function(i,n){
if(val==i){
//Find the corresponding province
$.each(cities[i],function(j,m){
var tn = document.createTextNode(cities[i] [j]);
var op = document.createElement("option");
$(tn).appendTo($(op));
$(op).appendTo($("#city"));
});
}
})
});
});
</script>
</head>
<body>
<select id="province">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
</body>
</html>
```
JAVA technology sharing: jQuery analysis
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=325609868&siteId=291194637
Recommended
Ranking