JavaScript introductory tutorial (10) Understanding other objects_Basic knowledge

anchors[]; links[]; Link 连接对象
用法：document.anchors[[x]]; document.links[[x]]; ;
　　document.anchors 是一个数组，包含了文档中所有锚标记（包含 name 属性的标记），按照在文档中的次序，从 0 开始给每个锚标记定义了一个下标。
　　document.links 也是一个数组，包含了文档中所有连接标记（包含 href 属性的标记和标记既有 name 属性，又有 href 属性，则它既是一个 Anchor 对象，又是一个 Link 对象。
　　在 IE 中，如果在标记中添加“id="..."”属性，则这个对象被赋予一个标识（ID），调用这个对象的时候只需要使用“”就行了。很多文档部件都可以用这个方法来赋予 ID，但要注意不能有两个 ID 相同。
anchors 和 links 作为数组，有数组的属性和方法。单个 Anchor 对象没有属性；单个 Link 对象的属性见下。

Attributes
protocol; hostname; port; host; pathname; hash; search; href Same as location object.
target Returns/specifies the target window (string) of the connection, which is the same as the target attribute in the tag.
Event
onclick; onmouseover; onmouseout; onmousedown; onmouseup

applets[] Java applet object It is an array that contains all Applet objects (Java applets) in the document ). As an array, there are array properties and methods. Regarding the properties and methods of a single Applet object, I quote: "The Applet object inherits all public properties and methods of the Java applet." (English original sentence: The Applet object inherits all public properties of the Java applet./The Applet object inherits all public methods of the Java applet.) Because I hate Java applets, I am not interested in its "public" and "private" issues, so I have not discussed them.
embeds[] Plug-in object It is an array that contains all the plug-ins ( tags) in the document. Because each plug-in is different, each Embed object also has different properties and methods.
forms[]; Form form object document.forms[] is an array that contains all forms (

) in the document. To reference a single form, you can use document.forms[x], but generally speaking, people will do this: add the "name="..."" attribute to the tag, then use "document. " can be quoted.

Attributes of the Form object
name returns the name of the form, which is the attribute.
action Returns/sets the submission address of the form, which is the attribute.
method Returns/sets the form submission method, which is the attribute.
target Returns/sets the window returned after the form is submitted, that is, the attribute.
encoding Returns/sets the encoding method of form submission content, that is, the attribute.
length Returns the number of elements contained in this form.
Methods
reset() Reset the form. This is the same as pressing the "reset" button.
submit() Submit the form. This is the same as pressing the "Submit" button.
Event
onreset; onsubmit

The following are from "Button" to "Textarea" Is the element object of the form.
Button button object is specified by "". To reference a Button object, you can use "..". refers to the value of the "name="..."" attribute in the tag. You can use this method to reference any form element.

Attributes
name Returns/sets the element name specified with .
value Returns/sets the value of the element specified with .
form returns the form object containing this element.
Methods
blur() Removes focus from an object.
focus() Let the object gain focus.
click() Simulates a mouse click on the object.
Event
onclick; onmousedown; onmouseup

Checkbox checkbox object is specified by "".

Attributes
name Returns/sets the element name specified with .
value Returns/sets the value of the element specified with .
form returns the form object containing this element.
checked Returns/sets whether the check box object is checked. This is a boolean value.
defaultChecked Returns/sets whether the check box object is checked by default. This is a boolean value.
Methods
blur() Removes focus from an object.
focus() Let the object gain focus.
click() Simulates a mouse click on the object.
Event
onclick

elements[]; Element form element object .elements is an array that contains all the objects of the form. Generally we do not use this array, but directly reference each specific object.
Hidden Hidden object is specified by "".

Attributes
name Returns/sets the element name specified with .
value Returns/sets the value of the element specified with .
form returns the form object containing this element.

Password password input area object is specified by "".

Attributes
name Returns/sets the element name specified with .
value Returns/sets the current value of the password input area.
defaultValue Returns the default value specified with .
form returns the form object containing this element.
Methods
blur() Removes focus from an object.
focus() Let the object gain focus.
select() Select all the text in the password input area.
Event
onchange

Radio radio field object by "" is specified. A group of Radio objects have a common name (name attribute), so document.formName.radioName becomes an array. To access a single Radio object use: document.formName.radioName[x].

Attributes of a single Radio object
name Returns/sets the name of the element specified with .
value Returns/sets the value of the element specified with .
form returns the form object containing this element.
checked Returns/sets whether the radio field object is checked. This is a boolean value.
defaultChecked Returns/sets whether the object is checked by default. This is a boolean value.
Methods
blur() Removes focus from an object.
focus() Let the object gain focus.
click() Simulates a mouse click on the object.
Event
onclick

Reset reset button object by "" is specified. Because Reset is also a button, it also has the properties and methods of the Button object . As for the "onclick" event, it is generally replaced by onreset of the Form object.
Select selection area (drop-down menu, list) object is specified by "".

Attributes
name Returns/sets the element name specified with

.
length Returns the number of options under the Select object.
selectedIndex Returns the index of the selected option. This subscript is the position of the option in the options[] array. If the Select object allows multiple selections, returns the index of the first selected option.
form returns the form object containing this element.
Methods
blur() Removes focus from an object.
focus() Let the object gain focus.
Event
onchange
options[]; Option selection object options[] is an array containing Option objects under the same Select object. The Option object is specified by "" under "".
The properties of the

options[] array
length; selectedIndex are the same as the properties of the Select object to which they belong.
Attributes of a single Option object
text Returns/specifies the text displayed by the Option object
value Returns/specifies the value of the Option object , consistent with .
index Returns the index of the Option object. There is nothing to say about this, because in order to specify a specific Option object, you must first know the subscript of the object. This attribute seems to have no use.
selected Returns/specifies whether the object is selected. By specifying true or false, the selection can be changed dynamically.
defaultSelected Returns whether the object is selected by default. true/false.

Submit submit button object is specified by ". Because Submit is also a button, there is also a Button object properties and methods. As for the "onclick" event, it is generally replaced by onsubmit of the Form object. >Specified by "". The Password object is also a type of Text object, so the Text object has all the properties, methods and events of the
Password object. Textarea multi-line text input area object is specified by "". All the properties, methods and events of the Textarea object are the same as the </font>Text object<br>, that is. Same as <strong>Password object <font color="#000000">; </font></strong><font color="#0000ff">images[]; Image image object </font> <font color="#0000ff">document.images[] is an array that contains all the images in the document ( <img>). To reference a single image, you can use document.images[x]. If an image contains the "name" attribute, it is defined in the format of "<img name="...">" If you have a picture, you can use the "document.images['...']" method to reference the picture. In IE, if a picture contains an ID attribute, use "<img id=".. .">" This format defines an image, and you can directly use "<imageID>" to reference the image </font>. <br><strong>Attributes of a single Image object<font color="#000000"></font></strong>name; src; lowsrc; width; height; vspace; hspace; border<br> These attributes are the same as the attributes of the same name in the <img> tag It's the same. In Netscape, except for the src attribute, other attributes (almost all) cannot be changed. Even if they are changed, the effect will not be displayed in the document. The most useful of these attributes is src. By assigning a value to the src attribute, the image can be changed in real time. <blockquote> <strong>Event</strong><br><strong></strong>onclick<br><strong></strong><br>Image object that does not appear in the document <strong><font color="#0000ff"> does not appear in the document The Image object in is defined using the var statement: </font> </strong>var myImage = new Image(); or <br>var myImage = new Image(<image address string>);<strong></strong>Then you can treat the myImage variable like a normal Image object. However, since it does not appear in the document, the following properties: lowsrc, width, height, vspace, hspace, border are of little use. Generally, this kind of object has only one purpose: preloading images. Because when the src attribute of the object is assigned a value, the reading of the entire document and the execution of JavaScript are suspended, allowing the browser to concentrate on reading the image. After pre-reading the image, there is a copy of the image in the browser's cache. When it comes time to actually put the image into the document, the image can be displayed immediately. There are often some image connections in today's web pages. When the mouse points to it, the image is changed to another image. They all pre-read the image first.<br><strong>JavaScript example of pre-reading images</strong><br> <blockquote>var imagePreload = new Image();<br>imagePreload.src = '001.gif';<br>imagePreload.src = '002.gif';<br>imagePreload.src = '003.gif'; <br> </blockquote>The above example is suitable for pre-reading a small number of pictures. <br> <blockquote> <div class="blockcode"> <font face="新宋体"><code id="code0">function imagePreload() {<code id="code0">function imagePreload() {<br>  var imgPreload = new Image();<br>  for (i = 0; i < arguments.length; i ) {<br>    imgPreload.src = arguments[i];<br>  }<br>}<br>imagePreload('001.gif', '002.gif', '003.gif', '004.gif', '005.gif');</code> var imgPreload = new Image();<br> for (i = 0; i < arguments.length; i ) {</code></font> imgPreload.src = arguments[i];</div> }</blockquote>}</blockquote>imagePreload('001.gif', '002.gif', '003.gif', '004.gif', '005.gif ');The above example is suitable for pre-reading a large number of pictures. </div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>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</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="JavaScript Learning Journey (3)_Basic Knowledge" href="http://m.php.cn/faq/24538.html">JavaScript Learning Journey (3)_Basic Knowledge</a></span><span>Next article：<a class="dBlack" title="JavaScript Learning Journey (3)_Basic Knowledge" href="http://m.php.cn/faq/24540.html">JavaScript Learning Journey (3)_Basic Knowledge</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="http://m.php.cn/about/us.html">About us</a><a href="http://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="http://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>