attribute 属性
标签属性的修改
<img id="img" src="1.jpg" alt="1.jpg" width="2560" height="1600" />
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var img = document.getElementById("img");
img.onclick = function(){
this.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1517742692207&di=a0e665c1aaae6d0bb693e31360bb5b64&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F140227%2F235111-14022F9410899.jpg";
this.width="500";
this.height = '600';
}
</script>
result
点击之后图片发生变化
添加不存在的属性
每种标签仅能支持一部分属性
<div id="box" data-bg="#EE4242" href="http://baidu.com" class="box">123456</div>
例如div标签中没有data-bg属性,添加之后是不能存在的
自定义属性获取方法:
getAttribute 获取属性
setAttribute 设置属性(属性,属性值)
removeAttribute 移除属性
var box = document.getElementById("box")
box.onclick = function(){
// alter(box.getAttribute("data-bg"));//所有属性都能被这个方法获取属性,不管标签属性被不被支持
var color = box.getAttribute("data-bg");
box.style.background = color;
box.style.color = "blue";
box.setAttribute('tanker','this is writing!');
box.removeAttribute('href');
可以看出多了tanker的属性
data-bg的属性值颜色赋值给了background
<div id="box" data-bg="#EE4242" class="box" tanker="this is writing!" style="background: rgb(238, 66, 66); color: blue;">123456</div>
autoFileName插件
sublime插件
用于url() img src中提示文件名字
样式获取与更改
先写两个样式
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box{
width: 150px;
height: 150px;
background: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="box" class="box" style="width:200px; height:200px; background: skyblue; "></div>
</body>
dom.currentStyle.CSSattr(仅支持IE8+)
var box = document.getElementById("box");
alert(box.currentStyle.borderRadius);
返回50%
getComputedStyle(dom).CSSattr (支持chrome Firefox)
alert(getComputedStyle(box).width);
返回200px
如何让IE和chrome都能获取样式属性
function getStyle(dom,attr){
if(dom.currentStyle){
return dom.currentStyle[attr];
} else {
return getComputedStyle(dom)[attr];
}
}
alert(getStyle(box,"width"));
返回200px
- 另一种简写方式,三目运算符
三目运算符
if(5==5){
alert(true);
} else {
alert(false);
}
//三目运算符
5==5 ? alert(true) : alert(false)
数组 array
数组是继承对象的数据类型
数组:
- 数组是由序列的集合,每一个值叫元素,而每个元素都有一个位置,这个位置叫索引、下标、偏移
- 索引最大值(2^32-2)数组最大容纳4294667295个元素
- 通常情况下,数组访问会比对象访问属性快很多,数组的底层经过了一些优化
- 数组可以装任意数据类型
弹出数组时,undefined不会显示的
var arr1 = [, , , ];
alert(arr1.length);
返回长度3
数组时可以接受可选逗号结尾
- 取最后一个元素
alert(arr[arr.length-1]);
- 添加元素
arr5[20] = {function:function() {alert("This is Object")}}
arr.pop() 删除数组最后一个元素 返回删掉的元素
arr.shift() 删除数第一个元素 并返回删掉的元素
alert(arr.push(abcd))
- 清空所有元素
arr=[]; 重新赋值 指针发生变化
arr.length = 0; 仅删除数组,不删除对象
arr.attr = " this is laowang";
alert(arr.attr)
- in运算符
- 对象:判断左边属性是否存在对象
- 数组:判断当前索引位置是否被赋值
var arr= [1,2,3,4,5];
var arr1 = [];
arr1[20]= 1;
var obj = {name:"brooks",
age:18};
alert("age" in obj);
-
数组剪切:
任意位置删除、插入、替换元素 -
arr.splice()
参一:起始索引 [Number] 只传参数一:从索引位置开始往后剪掉元素 该参数支持负数
参二:剪切个数 [Number]
参三:不定参数,主要用来替换或者插入元素
var arr= [1,2,3,4,5,6,7,8,9];
arr.splice(4) //返回[1,2,3,4]
arr.splice(4,2) //返回[1,2,3,4,7,8,9]
arr.splice(-4,2) //返回[1,2,3,4,5,8,9] 从右往左数 6,7
arr.splice(0); //清空数组,保留属性
- 数组转字符串
Array.toString() 没有参数,默认使用逗号拼接数组元素
Array.join() 可以添加参数,默认使用逗号拼接 可以使用""拼接元素
var str = arr.toString();
alert(typeof str)
var str = arr.join(""); //返回123456789
js获取所有的节点:
document.getElementByTagName("*");
document.all
for循环判断所有的元素的class名字是否与传进来的className相同
相同的时候,把当前for循环到的元素推进push我们的数组里面,return这个数组
对象的定义:
var obj = {
"name":"brooks"
}
//调用方式
obj.name
循环点击事件的复习
获取list的元素属性
获取li的元素属性
<body>
<ul id="list">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<script>
var list = document.getElementById("list");
var lis = list.getElementsByTagName("li");
for(var i=0 ; i<lis.length; i++){
lis[i].count = i;
lis[i].onclick = function(){
alert(this.innerHTML+"当前索引位置"+this.count);
};
};
</script>
插件安装
view in browser
用于快速打开对应的浏览器