javascript 内置对象(部分内容)
text对象
Text 对象代表 HTML 表单中的文本输入域。在 HTML 表单中 input type=”text 每出现一次,Text 对象就会被创建。
disabled 设置或返回文本域是否应被禁用。(只有true和false两个值)
readOnly 设置或返回文本域是否应是只读(只能读取,不能被修改)的。(只有true和false两个值)
value 设置或返回文本域的 value 属性的值。
focus() 在文本域上设置焦点。
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对象
Radio 对象代表 HTML 表单中的单选按钮。
checked 设置或返回单选按钮的状态。(true 和 false)
disabled 设置或返回是否禁用单选按钮。
value 设置或返回单选按钮的 value 属性的值。
checkbox对象
Checkbox 对象代表一个 HTML 表单中的 一个选择框。
checked 设置或返回多选按钮的状态。
disabled 设置或返回某个按钮是否应被禁用。
value 设置或返回 checkbox 的 value 属性的值。
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对象
Select 对象代表 HTML 表单中的一个下拉列表。
options[ ] 返回包含下拉列表中的所有选项的一个数组。
disabled 设置或返回是否应禁用下拉列表。
length 返回下拉列表中的选项数目。
selectedIndex 设置或返回下拉列表中被选项目的索引号。(从0开始)
add() 向下拉列表添加一个选项。
remove() 从下拉列表中删除一个选项。
option对象
Option(text,value) 通过text(即option标签之间的值)和value值创建Option对象
selected 设置或返回 selected 属性的值。(true或false,即是否选中)
text 设置或返回某个选项的纯文本值。
value 设置或返回被送往服务器的值。
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对象
在HTML DOM中,Element对象表示HTML元素,该对象可以拥有类型为元素节点、文本节点、注释节点的子节点。通过Document对象的getElementById()方法、getElementsByTagName()或getElementsByName()方法获取Element对象。
element.className 设置或返回元素的 class 属性。
element.innerHTML 设置或返回元素的内容。
element.style 设置或返回元素的 style 属性。
element.parentNode 以Node 对象方式返回元素的父节点。
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>
上例是模仿新浪页面鼠标移动切换标签和显示内容的效果。
window对象
事实上,常用的history,document等对象都属于window对象中,只是window对象是一个全局变量,在使用中“window.”一般被省略。
document对象
domain 返回当前文档的域名,例如:www.blue-bridge.com
URL 返回当前文档的 URL,例如:http://www.blue-bridge.com/venus/login.jsp
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
history对象
back() 加载 history 列表中的前一个 URL,同“后退”按钮。
forward() 加载 history 列表中的下一个 URL,同“前进”按钮。
go() 加载 history 列表中的某个具体页面,history.go(-1)//等同于back()。
相关推荐:
Atas ialah kandungan terperinci javascript 内置对象(部分内容). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.

WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket

Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian Dalam era digital hari ini, semakin banyak perniagaan dan perkhidmatan perlu menyediakan fungsi tempahan dalam talian. Adalah penting untuk melaksanakan sistem tempahan dalam talian yang cekap dan masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian dan memberikan contoh kod khusus. 1. Apakah itu WebSocket? WebSocket ialah kaedah dupleks penuh pada sambungan TCP tunggal.

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Penggunaan: Dalam JavaScript, kaedah insertBefore() digunakan untuk memasukkan nod baharu dalam pepohon DOM. Kaedah ini memerlukan dua parameter: nod baharu untuk dimasukkan dan nod rujukan (iaitu nod di mana nod baharu akan dimasukkan).

JavaScript ialah bahasa pengaturcaraan yang digunakan secara meluas dalam pembangunan web, manakala WebSocket ialah protokol rangkaian yang digunakan untuk komunikasi masa nyata. Menggabungkan fungsi berkuasa kedua-duanya, kami boleh mencipta sistem pemprosesan imej masa nyata yang cekap. Artikel ini akan memperkenalkan cara untuk melaksanakan sistem ini menggunakan JavaScript dan WebSocket, dan memberikan contoh kod khusus. Pertama, kita perlu menjelaskan keperluan dan matlamat sistem pemprosesan imej masa nyata. Katakan kita mempunyai peranti kamera yang boleh mengumpul data imej masa nyata
