浅谈JS中的常用选择器及属性、方法的调用
2017-07-28 07:49
731 查看
选择器、属性及方法调用的配合使用:
<style> #a{ width: 200px; height: 100px; background-color: red; } .b{ width: 200px; height: 100px; background-color: green; } .div1{ width: 200px; height: 100px; background-color:aqua; } </style> <body> <div id="a"></div> <div class="b" style="background-color: black;"></div> <div class="b" style="background-color: chartreuse;"></div> <div class="div1">精英教育</div> <input type="text" name="ipt1" /> <input type="checkbox" name="ckb2" / disabled="disabled"> </body> <script> //先选择元素在进行加效果 //ID选择器(使用较高JS) var a = document.getElementById("a"); //检测类型 alert(typeof(document.getElementById("a"))) a.style.backgroundColor="royalblue"; a.innerHTML ="<span>hello<span>"; a.innerText = "<span>hello<span>"; // class选择器 var b_class = document.getElementsByClassName("b"); b_class[0].style.backgroundColor="red"; var b_class = document.getElementsByClassName("b"); b_class[1].style.backgroundColor="blueviolet"; // 标签选择器 var b_b = document.getElementsByTagName("div"); b_b[1].style.backgroundColor="yellow"; var div_1 = document.getElementsByName("ipt1"); div_1[0].value="文本框"; var ckb2 = document.getElementsByName("ckb2")[0]; ckb2.setAttribute("checked",""); //移除属性 ckb2.removeAttribute("disabled") //创造元素 var a = document.createElement("a"); a.setAttribute("href","http://www.baidu.com"); a.innerText="百度一下"; document.body.appendChild(a); document.body.removeChild(a); div1.appendChild(a); </script> <body> <!--DOM Document Object Model BOM Bowers O M--> <div id="div1" class="div1"></div> <div class="div1"></div> <input type="text" name="ipt1" /> <input type="checkbox" name="ckb1" disabled="disabled"/> </body> </html> <script> // alert('1111'); // window.alert('123') var div1 = document.getElementById('div1'); div1.style.backgroundColor = 'red'; // div1.innerHTML = "<ul><li>123456</li></ul>"; div1.innerText = "<ul><li>123456</li></ul>"; var div1_class = document.getElementsByClassName('div1'); div1_class[1].style.backgroundColor = "green"; var div1_1 = document.getElementsByTagName('div'); div1_1[1].style.backgroundColor = "blue"; // jQuery var div1_2 = document.getElementsByName('ipt1'); div1_2[0].value = '123'; var ckb1 = document.getElementsByName('ckb1')[0]; // ckb1.setAttribute("checked","checked"); ckb1.removeAttribute('disabled'); var a = document.createElement("a"); a.setAttribute("href","http://www.baidu.com"); a.innerText = "百度"; document.body.appendChild(a); document.body.removeChild(a); div1.appendChild(a); </script>
以上这篇浅谈JS中的常用选择器及属性、方法的调用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- C#调用Media Player 控件播放音乐的常用方法及属性
- js 常用操作页面方法 属性
- 【JS基础回顾】String对象及其常用属性以及方法
- 转载: js的Prototype属性 解释及常用方法
- 总结Silverlight与HTML页面交互基本方法(js调用Silverlight方法/属性)
- js异常:“SCRIPT65535: 意外地调用了方法或属性访问。 ”
- Windows Media Player在页面中调用的常用属性和方法
- 原始JS选择器使用方法和常用事件手册
- knockout.js(js)代码在IE中出现“意外地调用了方法或属性”的错误
- js的Prototype属性 解释及常用方法
- js中常用的属性方法
- js 常用属性和方法
- js的Prototype属性 解释及常用方法
- JS的Document属性和常用方法
- C# 后台调用前台的JS方法 以及常用的代码片断
- js的Prototype属性解释及常用方法
- 开发中“错误: 意外地调用了方法或属性访问。” 和 第一行错误 的IE 两个问题( JQ 进行转义字符 , 分页JS 调用 时参数问题。)
- js的Prototype属性 解释及常用方法
- asp.net中js调用activex的方法提示“该对象不支持此属性或方法”
- 【JS基础回顾】Array对象及其常用属性以及方法