Home >Web Front-end >JS Tutorial >Usage analysis of dollar sign $ in prototype framework_javascript skills

Usage analysis of dollar sign $ in prototype framework_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:18:461177browse

The example in this article describes the usage of the dollar sign $ in the prototype framework. Share it with everyone for your reference, the details are as follows:

Prototype is an important tool for object-oriented implementation and a good framework for JavaScript.
Anyone who uses jquery knows that there is a $ dollar sign in jquery, and there is also $ in prototype. What is the difference between them?

1. Usage of $() in prototype

Prototype is written as $("test") or $$("#test"), which is equivalent to document.getElementById("test");
in js jqueryp writing method $("#test"), which is also equivalent to document.getElementById("test");

in js

2. Usage of $$() in prototype

jquery writing $("div") is equivalent to document.getElementsByTagName('div')
If the prototype also wants to simply obtain all div elements in the page, it cannot be written like this.
The way to write prototype is $("div") which is equivalent to document.getElementById("div")
The way to write prototype is $$("div") which is equivalent to document.getElementsByTagName('div')
The prototype writing method $$("input[value=tank]") gets the label whose input box value is tank on the page. It is actually similar to jquery, except that there is an extra $ symbol

3. Usage of $A() in prototype

$A is mainly used to convert any collection that can be used as an array (such as a NodeList, the HTMLCollection returned by many DOM methods, or the arguments property of a function object) into a real Array object. The following four methods can hide the div tag in the page

$A($$('div')).each(Element.hide); 
$A($$('div')).map(Element.extend).invoke("hide"); 
//从思想上来看,下面二种写法,我在用jquery时,也经常用 
$A($$('div')).each(function(name,index){ 
 name.style.display='none'; 
 alert(name.innerHTML); 
 }) 
 $A($$('div')).each(function(name,index){ 
 $(name).hide(); 
}) 

If TypeError: element.style is undefined { message="element.style is undefined", more...} appears in the example, please upgrade your prototype version

4. Usage of $F() in prototype

Personally, I think the usage of $F is designed to make it easier to retrieve form data, but it is relatively simple because it can only be retrieved by ID

8a21ecc55e46a115916a47e2e30390b2
$F("name") Correct

df613966d3e0cbc3aae824c952059f60
$F("name") Incorrect, TypeError: element is null { message="element is null", more...}

5. Usage of $H() in prototype

When you pass in an object as a parameter of the function, $H will input the object into a prototype's proprietary hash object. $H feels like a converter, triggering a situation-changing effect

$H({name:'tank',sex:1,height:'170cm'}).toArray()
[["name", "tank"], ["sex", 1], ["height", "170cm"]]
$H({name:'tank',sex:1,height:'170cm'}).toQueryString()
"name=tank&sex=1&height=170cm"

6. Usage of $R() in prototype

The $R function has exactly the same parameters as the original constructor: start and end represent the lower limit value and upper limit value respectively (the types of the two parameters must be consistent), and exclusive represents whether to exclude the upper limit value (parameter end) . The upper limit value is not excluded by default.

Instances of $R describe a series of values ​​that change according to certain rules, such as numbers, text, or other types that semantically support the derivation of adjacent values ​​

It is easiest for people to remember if they can explain it through examples

$A($R("a","z",true)).join(',') //加了参数true 
"a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y" 
$A($R("a","z")).join(',') //没有加 
"a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z" 

$R infers a $R object according to the rules, $A converts the object into an array, and uses the sign, to convert the array into a string.

$R(0, 10).each(function(value){ 
 alert(value*value); 
}); 
//结果和上面的一样的,但是each解释的对像是不一样的。 
$A($R(0, 10)).each(function(value){ 
 alert(value*value); 
}); 

If such an error is reported, TypeError: value.succ is not a function { message="value.succ is not a function", more...}, please upgrade

7. Usage of $w() in prototype

$w converts a string with spaces as delimiters into an array. The function of root php's explode(" ",$string); is the same and is more targeted.

$w("aa bb").join(',')

If such an error is reported, ReferenceError: $w is not defined { message="$w is not defined", more...}, please upgrade

I hope this article will be helpful to everyone in JavaScript programming.

Statement:
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