javascript built-in objects (partial content)
text object
The Text object represents a text input field in an HTML form. Each time input type="text appears in an HTML form, a Text object will be created.
disabled Sets or returns whether the text field should be disabled. (There are only two values: true and false)
readOnly Sets or returns Whether the text field should be read-only (can only be read, cannot be modified). (There are only two values: true and false)
value sets or returns the value of the value attribute of the text field.
focus() in Set focus on the text field.
eg:
<form>
<input name="wd" />
<input type="button" onclick="onesubmit()" value= "搜索" />
</form>
<script>
var form = document.getElementsByTagName("form")[0];
form.action = "https://www.baidu.com/s"; var text = document.getElementsByName("wd")[0]; function onesubmit(){
text.value = "中国";//设置或返回文本域的 value 属性的值
console.log(text.value);
text.focus();//在文本域上设置默认焦点
text.readOnly = true;//设置或返回文本域是否应是只读的 即不能更改
text.disabled = true;//设置或返回文本域是否应被禁用,即不能使用
} </script>radio object
Radio object represents the radio button in the HTML form.
checked Sets or returns the radio button The state. (true and false)
disabled Sets or returns whether the radio button is disabled.
value Sets or returns the value of the value attribute of the radio button.
checkbox object
Checkbox object represents a check box in an HTML form.
checked sets or returns the state of a multi-select button.
disabled sets or returns whether a button should be disabled.
value sets or Returns the value of the value attribute of the checkbox.
eg:
<body>
<form onsubmit="return check()">
用户名<input name="user_name" id="user_name" /><br />
密码<input name="password" id="password" type="password" /><br />
确认密码<input name="pw_check" id="pw_check" type="password" /><br />
<input type="reset" value="重置" />
<input type="submit" value="注册" />
<input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 <input type="checkbox" name="hobby" value="篮球" />篮球 <input type="checkbox" name="hobby" value="羽毛球" />羽毛球 <input type="checkbox" name="hobby" value="乒乓球" />乒乓球 <input type="checkbox" name="hobby" value="足球" />足球 <select name="choose" id="choose">
<option value="gaoyi">高一</option>
<option value="gaoer">高二</option>
<option value="gaosan">高三</option>
</select>
</form>
<span id="msg" style="color: red;"></span>
<script>
function $(id){
return document.getElementById(id);
} function check(){
var selects = document.getElementById("choose");
selects.disabled=true;
console.log(selects.length);
console.log(selects.selectedIndex); var options = selects.options; for(var i=0;i<options.length;i++){
console.log(options[i].value)
}
console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$"); var radios = document.getElementsByName("sex"); for(var i=0;i<radios.length;i++){
console.log(radios[i].checked+radios[i].value);
}
radios[0].cheked=true;
radios[0].disabled=true;
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"); var checkboxes = document.getElementsByName("hobby"); for(var i=0;i<checkboxes.length;i++){
console.log(checkboxes[i].checked+checkboxes[i].value)
}
checkboxes[2].checked=true;
checkboxes[2].disabled=true;
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"); var user_name = $("user_name").value; var password = $("password").value; var pw_check = $("pw_check").value; if(user_name.length==0){
$("msg").innerHTML = "用户名不能为空"; return false;
} else if(user_name.length>12){
$("msg").innerHTML = "用户名不能超过12个字符"; return false;
} if(password.length==0){
$("msg").innerHTML = "密码不能为空"
return false;
} else if(password.length>15){
$("msg").innerHTML = "密码不能超过12个字符"; return false;
} if(password!=pw_check){
$("msg").innerHTML = "密码不一致"; return false;
}
console.log("注册成功") return false;
} </script>
</body>Select object
The Select object represents a drop-down list in an HTML form.
options[ ] Returns an array containing all options in the drop-down list.
disabled Sets or returns whether the drop-down list should be disabled.
length Returns the number of options in the drop-down list.
selectedIndex Sets or returns the selected option in the drop-down list Destination index number. (Start from 0)
add() Add an option to the drop-down list.
remove() Remove an option from the drop-down list.
option object
Option(text,value) Creates an Option object through text (that is, the value between option tags) and value value
selected Sets or returns the value of the selected attribute. (true or false, that is, whether it is selected)
text Sets or Returns the plain text value of an option.
value Sets or returns the value sent to the server.
eg:
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<select id="selected">
<option value="小学一年级">一年级</option>
<option value="小学二年级">二年级</option>
<option value="小学三年级">三年级</option>
<option value="小学四年级">四年级</option>
<option value="小学五年级">五年级</option>
<option value="小学六年级">六年级</option>
</select>
<input type="button" onclick="test()" value="按钮" />
<script>
function test(){
var selects = document.getElementById("selected");
console.log(selects.disabled);
console.log(selects.selectedIndex);
console.log(selects.length);
console.log("@@@@@@@@@@@@@@@@@@@@@@@@"); var options = selects.options;
console.log(options[selects.selectedIndex]);
console.log("$$$$$$$$$$$$$$$$$"); for (var i=0;i<options.length;i++){
console.log(options[i].value);
console.log(options[i].selected);
console.log(options[i].text);
}
console.log("######################"); var option1 = new Option("初一","初中一年级"); var option2 = new Option("初二","初中二年级"); var option3 = new Option("初三","初中三年级");
selects.add(option2);
selects.add(option1);
selects.remove(6);
selects.add(option2);
selects.add(option3);
selects.remove(0);
selects.remove(0);
selects.remove(0);
selects.remove(0);
selects.remove(0);
selects.remove(0);
} </script>
</body></html>element object
In the HTML DOM, the Element object Represents an HTML element. This object can have child nodes of type element node, text node, and comment node. Obtain the Element object through the getElementById() method, getElementsByTagName() or getElementsByName() method of the Document object.
element.className Sets or returns the class attribute of the element.
element.innerHTML Sets or returns the content of the element.
element.style Sets or returns the style attribute of the element.
element.parentNode returns the parent node of the element as a Node object.
eg:
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
function news(){
var elements1 = document.getElementById("news");
elements1.className = "selected"; var elements2 = document.getElementById("see");
elements2.className = "fault"; var elements3 = document.getElementById("list1");
elements3.className = "visited"; var elements3 = document.getElementById("list2");
elements3.className = "unvisited";
} function see(){
var elements = document.getElementById("news");
elements.className = "fault";
var elements2 = document.getElementById("see");
elements2.className = "selected"; var elements3 = document.getElementById("list1");
elements3.className = "unvisited"; var elements3 = document.getElementById("list2");
elements3.className = "visited";
} </script>
<style>
body { color: #333; padding: 5px 0; font: 12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background: #fff; }
a{ color: #666; text-decoration: none; }
a:visited{ color:#666; }
p{ display: block; }
#main{ position: relative; display: block; height: 34px; width: 356px; border: 1px solid #dbdee1; line-height: 34px; background: url(img/bg1px.png) 0 -33px repeat-x; zoom: 1; /*缩放比例*/
}
#main:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;/*隐藏h2标签*/
}
#main #menu{ float: left; margin-left: -2px; }
#main #menu span{ float: left; height: 35px; line-height: 35px; font-size: 16px; font-family: "Microsoft YaHei","微软雅黑","SimHei","黑体"; padding: 0 13px; margin-top: -1px; }
#main #menu .selected{ height: 33px; line-height: 29px; border-top: 3px solid #ff8400; border-left: 1px solid #dbdee1; border-right: 1px solid #dbdee1; background-color: #fff; _position: relative; _margin-bottom: -1px; padding: 0 12px; border-left: 0; padding-left:13px ; }
#main #date{ float: right; display: inline; margin-right: 10px; }
#list1{ position: absolute; }
#list2{ position: absolute; }
#list1 a{ color: #122e67; text-decoration: none; }
#list1 a:visited{ color: #52687e; text-decoration: none; }
#list2 a{ color: #122e67; text-decoration: none; }
#list2 a:visited{ color: #52687e; text-decoration: none; }
.visited{ display: block; }
.unvisited{ display: none; }
ul{ height: auto; height: 208px; overflow: hidden; clear: both; list-style: none; display: block; }
ul li{ padding-left: 10px; line-height: 26px; height: 26px; overflow: hidden; font-size: 14px; background: url(//i0.sinaimg.cn/home/main/index2013/0403/icon.png) no-repeat 0 -881px; _zoom: 1; }
</style>
<body>
<p id="main">
<p id="menu">
<span id="news" class="selected" onmouseover="news()">
<a href="http://news.sina.com.cn/" target="_blank">新闻</a>
</span>
<span id="see" class="fault" onmouseover="see()">
<a href="http://henan.sina.com.cn/" target="_blank">看河南</a>
</span>
</p>
<span id="date">2018.8.6</span>
</p>
<!--main end-->
<p id="list1" class="visited">
<ul>
<li>
<a target="_blank" href="http://news.sina.com.cn/c/xl/2018-08-06/doc-ihhhczfc3414364.shtml">习近平对王继才先进事迹作出重要指示</a>
</li>
<li>
<a target="_blank" href="http://news.sina.com.cn/gov/xlxw/2018-08-06/doc-ihhhczfc3730191.shtml">习近平引领科技强军路</a>
</li>
<li>
<a target="_blank" href="http://news.sina.com.cn/c/2018-08-06/doc-ihhhczfc1300781.shtml">构建更加紧密的中非命运共同体</a>
<a target="_blank" href="http://news.sina.com.cn/zt_d/djbl/">大江奔流</a>
</li>
<li>
<a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc1539880.shtml">人民日报评论员：积极进取 引领中国经济行稳致远</a>
</li>
<li>
<a target="_blank" href="http://news.sina.com.cn/c/nd/2018-08-06/doc-ihhhczfc6968447.shtml">百白破你真的了解吗？</a>
<a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc6967406.shtml">关于免疫和疫苗安全的问答</a>
</li>
<li>
<a target="_blank" href="http://news.sina.com.cn/c/nd/2018-08-05/doc-ihhhczfc0144855.shtml">经济日报连发五文 解读当前经济形势</a>
<a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc1656430.shtml">三大关键词</a>
</li>
<li><a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc1674641.shtml">用不靠谱的手段耍弄世界 注定不能让美国再次伟大</a>
</li>
<li><a target="_blank" href="http://news.sina.com.cn/c/2018-08-06/doc-ihhkusks5999396.shtml">全国网络安全员法制与安全知识竞赛报名网站已开启</a>
</li>
<li>
<a target="_blank" href="http://news.sina.com.cn/c/2018-08-06/doc-ihhhczfc3323403.shtml">特朗普揶揄中国股市 但不小心暴露自己一个硬伤</a>
</li>
<li>
<a target="_blank" href="http://news.sina.com.cn/zx/2018-08-06/doc-ihhhczfc6757917.shtml">上海机场(集团)有限公司董事长吴建融被查</a>
</li>
</ul>
</p>
<!--list1 end-->
<p id="list2" class="unvisited">
<ul>
<li>
<a href="http://henan.sina.com.cn" target="_blank">177家违规网站被通报 河南全面清退县级以下政府网站</a>
</li>
<li>
<a target="_blank" href="http://henan.sina.com.cn">河南四家长联名举报质疑考生答题卡掉包 官方回应</a>
</li>
<li>
<a target="_blank" href="http://henan.sina.com.cn/news/z/2018-08-07/detail-ihhkusks7863084.shtml">央视新闻联播聚焦河南 34条洲际航线扩展开放触角</a>
</li>
<li>
<a target="_blank" href="http://henan.sina.com.cn/news/m/2018-08-07/detail-ihhkusks7805180.shtml">河南开展幼儿园"小学化"治理:幼儿园严禁教小学课程</a>
</li>
<li>
<a target="_blank" href="http://wx.sina.com.cn/news/2018-08-06/detail-ihhhczfc2526781.shtml">百城致敬40年：专注粮油研究半个世纪</a>
</li>
<li>
<a target="_blank" href="http://henan.sina.com.cn/news/zhuazhan/2018-08-07/detail-ihhkusks7771435.shtml">周末夜查+夜间突击检查 河南"夜查"行动将持续至年底</a>
</li>
</ul>
</p>
<!--list2 end-->
</body>The above example is to imitate the effect of switching labels and displaying content by moving the mouse on the Sina page.
window object
In fact, commonly used history, document and other objects belong to the window object, but the window object is a global variable, and "window." is generally omitted in use.
document object
domain returns the domain name of the current document, for example: www.blue-bridge.com
URL returns the URL of the current document, for example: http://www.blue- bridge.com/venus/login.jsp
getElementById() Returns a reference to the first object with the specified id.
getElementsByName() Returns a collection of objects with the specified name.
getElementsByTagName() returns a collection of objects with the specified tag name.
history object
back() loads the previous URL in the history list, the same as the "back" button.
forward() loads the next URL in the history list, the same as the "forward" button.
go() loads a specific page in the history list, history.go(-1)//is equivalent to back().
Related recommendations:
Application example of TextRange object for processing part of text
Single built-in object of "JavaScript Breakthrough"
The above is the detailed content of javascript built-in objects (partial content). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
How to use JavaScript and WebSocket to implement a real-time online ordering system
Dec 17, 2023 pm 12:09 PM
Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order
How to implement an online reservation system using WebSocket and JavaScript
Dec 17, 2023 am 09:39 AM
How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
How to use insertBefore in javascript
Nov 24, 2023 am 11:56 AM
Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).
JavaScript and WebSocket: Building an efficient real-time image processing system
Dec 17, 2023 am 08:41 AM
JavaScript is a programming language widely used in web development, while WebSocket is a network protocol used for real-time communication. Combining the powerful functions of the two, we can create an efficient real-time image processing system. This article will introduce how to implement this system using JavaScript and WebSocket, and provide specific code examples. First, we need to clarify the requirements and goals of the real-time image processing system. Suppose we have a camera device that can collect real-time image data
