Jquery traverses several ways of filtering arrays and traversing parsing json objects
- 2020-03-30 00:51:53
- OfStack
Jquery grep() filters traversal groups
Jquery each() filters through groups
Jquery inArray() filters traversal groups
Jquery map() filters traversal groups
Js traverses parsing json object 1
Js traverses parsing json object 2
There is the following json object:
Feng Juan var obj = {" name ":" ", "password" : "123456", "department" : "technology", "sex", "female", "old" : 30};
Traversal method:
The following examples to illustrate the specific implementation method
The way JQuery takes objects
$(' #id') : by the id of the element
$(' tagName') : passes the tagName of the element
$(' tagName tagName') : by the tagName of the element,eg: $(' ul li')
$(' tagName#id): by the id of the element and the tag name
$(' :checkbox'): takes all elements with type of input as checkbox' :
Eg: < Input type = "checkbox" name = "appetizers."
Value = "imperial" / >
$('span[price] input[type=text]') : takes the following input element
< Span price = "3" >
< Input type = "text" name = "imperial. Quantity"
Disabled = "disabled" value = "1" / >
< / span>
$('div',$(this). Parents ('div:first') : take the first div node on the div (at least the parent node)
$(' ~ span: first, this) : locates the first (of this that 's a < Span> Element.
Lazy loading js file:
$. GetScript
Example:
Html file:
Js file:
Jquery array processing:
$().ready(
function(){
var array = [1,2,3,4,5,6,7,8,9];
var filterarray = $.grep(array,function(value){
return value > 5;//Screen out those greater than 5
});
for(var i=0;i<filterarray.length;i++){
alert(filterarray[i]);
}
for (key in filterarray){
alert(filterarray[key]);
}
}
);
Jquery each() filters through groups
$().ready(
function(){
var anObject = {one:1,two:2,three:3};//Json array each
$.each(anObject,function(name,value) {
alert(name);
alert(value);
});
var anArray = ['one','two','three'];
$.each(anArray,function(n,value){
alert(n);
alert(value);
}
);
}
);
Jquery inArray() filters traversal groups
$().ready(
function(){
var anArray = ['one','two','three'];
var index = $.inArray( ' two',anArray);
alert(index);//Returns the key value of the value in the array, returning 1
alert(anArray[index]);//value is two
}
);
Jquery map() filters traversal groups
$().ready(
function(){
var strings = ['0','1','2','3','4','S','6'];
var values = $.map(strings,function(value){
var result = new Number(value);
return isNaN(result) ? null:result;//IsNaN: short for is Not a Number
}
);
for (key in values) {
alert(values[key]);
}
}
);
Js traverses parsing json object 1
var json = [{dd:'SB',AA:' East east ',re1:123},{cccc:'dd',lk:'1qw'}];
for(var i=0,l=json.length;i<l;i++){
for(var key in json[i]){
alert(key+':'+json[i][key]);
}
}
Js traverses parsing json object 2
There is the following json object:
Feng Juan var obj = {" name ":" ", "password" : "123456", "department" : "technology", "sex", "female", "old" : 30};
Traversal method:
for(var p in obj){
str = str+obj[p]+',';
return str;
}
The following examples to illustrate the specific implementation method
The way JQuery takes objects
$(' #id') : by the id of the element
$(' tagName') : passes the tagName of the element
$(' tagName tagName') : by the tagName of the element,eg: $(' ul li')
$(' tagName#id): by the id of the element and the tag name
$(' :checkbox'): takes all elements with type of input as checkbox' :
Eg: < Input type = "checkbox" name = "appetizers."
Value = "imperial" / >
$('span[price] input[type=text]') : takes the following input element
< Span price = "3" >
< Input type = "text" name = "imperial. Quantity"
Disabled = "disabled" value = "1" / >
< / span>
$('div',$(this). Parents ('div:first') : take the first div node on the div (at least the parent node)
$(' ~ span: first, this) : locates the first (of this that 's a < Span> Element.
Lazy loading js file:
$. GetScript
Example:
Html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>$.getScript Example</title>
<link rel="stylesheet" type="text/css" href="../common.css">
<script type="text/javascript"
src="../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript">
$(function(){
$('#loadButton').click(function(){
$.getScript(//An error occurs in Firefox/3.0.1 (syntax error, defined variables do not work,ff2 is fine)
'new.stuff.js'//,function(){$('#inspectButton').click()}
);
});
$('#inspectButton').click(function(){
someFunction(someVariable);
test()
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>
<button type="button" id="inspectButton">Inspect</button>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>$.getScript Example</title>
<link rel="stylesheet" type="text/css" href="../common.css">
<script type="text/javascript"
src="../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript">
$(function(){
$('#loadButton').click(function(){
$.getScript(//An error occurs in Firefox/3.0.1 (syntax error, defined variables do not work,ff2 is fine)
'new.stuff.js'//,function(){$('#inspectButton').click()}
);
});
$('#inspectButton').click(function(){
someFunction(someVariable);
test()
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>
<button type="button" id="inspectButton">Inspect</button>
</body>
</html>
Js file:
alert("I'm inline!");
var someVariable = 'Value of someVariable';
function someFunction(value) {
alert(value);
}
function test() {
alert('test');
}
alert("I'm inline!");
var someVariable = 'Value of someVariable';
function someFunction(value) {
alert(value);
}
function test() {
alert('test');
}
Jquery array processing:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hi!</title>
<script type="text/javascript" src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
var $ = 'Hi!';
jQuery(function(){
alert('$ = '+ $);//The $here is Hi! Jquery (function($){... }/ that will do
//alert(jQuery)
});
jQuery(function($){
//-- go through the use of group. Each --
var anArray = ['one','two','three'];
$.each(anArray,function(n,value) {
//do something here
//alert(n+' '+value);
});
var anObject = {one:1, two:2, three:3};
$.each(anObject,function(name,value) {
//do something here
//alert(name+' '+value);
});
//-- use of filter array. Grep --
var originalArray =[99,101,103];
var bigNumbers = $.grep(originalArray,'a>100');//The second way to write this, you can also use regular expressions to filter
$.each(bigNumbers,function(n,value) {
//do something here
//alert(n+' '+value);
});
//-- the use of transform array. Map --
var strings = ['1','2','3','4','S','K','6'];
var values = $.map(strings,function(value){
var result = new Number(value);
return isNaN(result) ? null : result;//If the result is not a number, null is returned (returning null in this case is equivalent to not returning)
});
$.each(values,function(n,value) {
//do something here
//alert(value);
});
var characters = $.map(
['this','that','other thing'],
function(value){return value.split('');}//The split string is returned to characters
);
//alert(characters.length);
//-- -- -- -- -- -- -- -- -- -- -- --. InArray (use the value, the array) -- -- -- -- -- -- -- -- -- -- -- -- to return the value in the location of the array subscript, return 1 if the value is not in an array
var index = $.inArray(2,[1,2,3,4,5]);
//alert(index);
//-- -- -- -- -- -- -- -- -- -- -- -- makeArray (obj) the use of -- -- -- -- -- -- -- -- -- -- -- -- the class array object is converted to an array object.
var arr = jQuery.makeArray(document.getElementsByTagName_r("div"));
//arr.reverse(); // Use the array rollover function
$.each(arr,function(n,value) {
//do something here
//alert(n+' '+value);
//alert(value.html());
});
var arr2 =$.unique(document.getElementsByTagName_r("div")); //Get a unique object, look at the API, very modular
The paste ,http://docs.jquery.com/Utilities/jQuery.unique
alert();
$.each(arr2,function(n,value) {
//do something here
alert(n+' '+value);
});
});
</script>
</head>
<body>
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hi!</title>
<script type="text/javascript" src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
var $ = 'Hi!';
jQuery(function(){
alert('$ = '+ $);//The $here is Hi! Jquery (function($){... }/ that will do
//alert(jQuery)
});
jQuery(function($){
//-- go through the use of group. Each --
var anArray = ['one','two','three'];
$.each(anArray,function(n,value) {
//do something here
//alert(n+' '+value);
});
var anObject = {one:1, two:2, three:3};
$.each(anObject,function(name,value) {
//do something here
//alert(name+' '+value);
});
//-- use of filter array. Grep --
var originalArray =[99,101,103];
var bigNumbers = $.grep(originalArray,'a>100');//The second way to write this, you can also use regular expressions to filter
$.each(bigNumbers,function(n,value) {
//do something here
//alert(n+' '+value);
});
//-- the use of transform array. Map --
var strings = ['1','2','3','4','S','K','6'];
var values = $.map(strings,function(value){
var result = new Number(value);
return isNaN(result) ? null : result;//If the result is not a number, null is returned (returning null in this case is equivalent to not returning)
});
$.each(values,function(n,value) {
//do something here
//alert(value);
});
var characters = $.map(
['this','that','other thing'],
function(value){return value.split('');}//The split string is returned to characters
);
//alert(characters.length);
//-- -- -- -- -- -- -- -- -- -- -- --. InArray (use the value, the array) -- -- -- -- -- -- -- -- -- -- -- -- to return the value in the location of the array subscript, if the value is not in an array is returned
-1
var index = $.inArray(2,[1,2,3,4,5]);
//alert(index);
//-- -- -- -- -- -- -- -- -- -- -- -- makeArray (obj) the use of -- -- -- -- -- -- -- -- -- -- -- -- the class array object is converted to an array object.
var arr = jQuery.makeArray(document.getElementsByTagName_r("div"));
//arr.reverse(); // Use the array rollover function
$.each(arr,function(n,value) {
//do something here
//alert(n+' '+value);
//alert(value.html());
});
var arr2 =$.unique(document.getElementsByTagName_r("div")); //Get a unique object, look at the API, very modular
The paste ,http://docs.jquery.com/Utilities/jQuery.unique
alert();
$.each(arr2,function(n,value) {
//do something here
alert(n+' '+value);
});
});
</script>
</head>
<body>
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div>
</body>
</html>