对象可以直接. 其属性 拿到的数据是json队形那么就可以直接点属性 调用
成对标签 修改里面的内容 使用 innertext 不是成对比如input 私用value
按钮的排他功能
-
获取所有按钮
-
注册每个按钮点击事件
-
循环让没被点击的按钮的值为没被点击
-
被点击的按钮显示的value值为被点击了 this.value
注意为事件注册点击事件，在浏览器加载完就已经注册完毕了，
点击按钮选中性别和兴趣 document.getElenmentById(‘btn’).onclick=function() {
document.getElementById(‘rad’).checked = true;
输入款过的一些属性设置 true or false
selected也是 true或者false进行操作是否有选中
//注意这里使用true或者false
}
disabled 这个属性是禁用的
readonly这个文本框是只读
在js中操作dom是 不用calss关键字 应该使用className
网页的开关等效果 就是找到body元素 先判断它的类名 在选择添加其样式
阻止超链接默认跳转事件 直接a标签里加入 return false
获取时使用函数也可以 就是结果是return false
getElementsByTagName(‘a’); getElements记得加上s
<ul id="imagegallery">
<li>
<a href="images/1.jpg" title="美女A">
<img src="images/1-small.jpg" width="100" alt="美女1" />
</a>
</li>
获取li里面的a 直接一步到位不需要太复杂的嵌套
var aObj = my$('imagegallery').getElementsByTagName('a');
列表的高亮显示
为li注册鼠标的进入和离开事件
二维码得显示隐藏
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.nodeSmall {
width: 50px;
height: 50px;
background: url(images/bgs.png) no-repeat -159px -51px;
position: fixed;
right: 10px;
top: 40%;
}
.erweima {
position: absolute;
top: 0;
left: -150px;
}
.nodeSmall a {
display: block;
width: 50px;
height: 50px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="nodeSmall" id="node_small">
<a href="#"></a>
<!--锚定-->
<div class="erweima hide" id="er">
<img src="images/456.png" alt="" />
</div>
</div>
<script src="common.js"></script>
<script>
my$('node_small').onmouseover = function() {
my$('er').className = "erweima show";
};
my$('node_small').onmouseout = function() {
my$('er').className = "erweima hide";
};
</script>
</body>
</html>
通过name属性可以获取表单的元素
document.getElementsByName(‘name1’);
根据类样式的名字获取元素
document.getElementsByClassName();
其他获取元素方式 h5c3的方式
document.querySelector("#btn")
document.querySelectorAll(".cls")选择所有的，返回的是多个
这几种有的浏览器不支持
div的高亮
注意设置高亮出现 鼠标经过的时候抖动 这时需要给每个div提前加上一个
border 高亮的其实就是加上border
搜索框 的失去焦点和获取焦点
onblur 和 onfocus 小写的
<input type="text" value="请输入搜索内容" id="txt" />
<script src="common.js"></script>
<script>
var obj = my$("txt");
obj.onfocus = function() {
if (this.value == "请输入搜索内容") {
this.value = "";
this.style.color = "black";
}
};
obj.onblur = function() {
if (this.value == "") {
this.value = "请输入搜索内容";
this.style.color = "gray";
}
};
</script>
验证文本框密码的长度
直接获取value 通过value.length进行匹配
####封装innerText和textContent
有的浏览器支持有的不支持
//设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
//设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持
一个是设置标签的文本内容
一个是获取标签里面的文本内容
封装兼容代码 使用
if (typeof element.innerText == "undefined）来进行 判断
function settext(element, text) {
if (typeof element.innerText == "undefined") {
element.textContent = text;
} else {
element.innerText = text;
}
}
my$('btn').onclick = function() {
var dvObj = my$("dv");
settext(dvObj, "牛逼了");
}
innerHTML和innerText的区别
- 总结:如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
- 总结:innerHTML是可以设置文本内容
- 总结:innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
- 总结:想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML
使用innerHTML没有兼容问题使用innertext有兼容的问题
获取的时候:
- innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.—获取不到标签的,文本可以获取
- innerHTML才是真正的获取标签中间的所有内容
自定义属性操作
在html自定义的属性 通过 alert(this.getAttribute(‘score’));
getAttribute进行获取
不能直接点属性进行操作
添加自定义属性
第一个参数 name 第二个参数属性值
list[i].setAttribute(“score, (i+1)*10”)；
移除自定义属性
my$(“dv”).removeAttribute(“class”);
可以移除自定义和元素自带的属性
tab切换实现
removeAttribute用来移除类样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display: inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
background-color: purple;
}
.bd li {
height: 255px;
background-color: purple;
display: none;
}
.bd li.current {
display: block;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd">
<ul>
<li class="current">我是体育模块</li>
<li>我是娱乐模块</li>
<li>我是新闻模块</li>
<li>我是综合模块</li>
</ul>
</div>
</div>
<script src="common.js"></script>
<script>
var box = my$("box");
var hd = box.getElementsByTagName("div")[0];
var bd = box.getElementsByTagName("div")[1];
var list = bd.getElementsByTagName("li");
var spans = hd.getElementsByTagName("span");
for (var i = 0; i < spans.length; i++) {
//点击保存索引 使用自定义属性
spans[i].setAttribute("index", i);
spans[i].onclick = function() {
//第一件事 所有的span的类样式全部移除
for (var j = 0; j < spans.length; j++) {
spans[j].removeAttribute("class");
}
//第二件事 当被点击的span应用样式
this.className = "current";
//获取存储的索引
var index = this.getAttribute("index");
//获取所有的li标签 在代码上面已经获取了
for (var k = 0; k < list.length; k++) {
list[k].removeAttribute("class");
}
list[index].className = "current";
}
}
</script>
</body>
</html>
按钮的排他功能