欢迎光临
我们一直在努力

JavaScript操纵HTML元素的自定义属性

阅读(2161)

JS 可以为任何HTML元素添加任意个 自定义属性

元素.属性名=属性值,如:aBtn.abc = 123;

例:

<input type="button" value="按钮1" />
<script>
window.onload = function (){
 var aBtn = document.getElementsByTagName('input')[0];

 aBtn.abc = 123;  // 添加自定义属性 abc
 aBtn.onclick = function(){
  alert( aBtn.abc );  //弹出属性值为 123
 }
};
</script>

例:自定义属性应用——匹配数组内容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>邦邦的小站_分享Web前端的学习心得!</title>
<script>
window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
	var arr = ['Web前端','JavaScript','CSS3','邦邦的小站','jmsbang.com'];

	for(var i=0;i<aBtn.length;i++){
		aBtn[i].num=0;
		
		aBtn[i].onclick = function(){
			this.value=arr[this.num];
			
			this.num++;
			if(this.num==arr.length){
				this.num=0;
			}
		};
	}
	
};
</script>
</head>
<body>
<input type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">

</body>
</html>

js中的this关键字详解

阅读(2171)

this是Javascript的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。




无标题文档




js中巧用cssText属性批量操作样式

阅读(2076)

一般情况下我们用js设置元素对象的样式会使用这样的形式:

var oDiv1= document.getElementById("div1");
oDiv1.style.width="20px";
oDiv1.style.height="20px";
oDiv1.style.border="solid 1px red";

样式一多,代码就很多。而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程,这种销毁和重建,都会增加浏览器的开销。

js中有一个cssText的属性,语法为:obj.style.cssText=”样式”;

上面的代码我们可以改为:

oDiv1.style.cssText="width:20px;height:20px;border:solid 1px red;";

这样就可以尽量避免页面reflow,提高页面性能。

JavaScript For循环

阅读(1990)

如果希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。

语法:

for (语句1; 语句2; 语句3)

{

被执行的代码块;

}

语句1 在循环(代码块)开始前执行

语句2 定义运行循环的条件

语句3 在循环已被执行之后执行

例1:说明for循环的执行顺序

<script>
/*
var i = 0;
for( ; i<3; ){
    alert(1);
    i++;
}

1) var i=0;
2) i<3; 关键!!
3) 括号里面的所有代码
4) i++
*/

for(var i=0; i<3; i++){
    alert(i);  // 弹出 0 1 2
}
// alert(i);	// 弹出 3
</script>

例2:如下例中当循环的内容很多,每循环一次都要进行一次innerHTML的操作,这是性能有问题。可将循环的内容先赋值给变量str,最后再用innerHTML添加到页面。

<script>
window.onload = function (){
	
    var str = '';
    for( var i=0; i<3000; i++ ){
    // document.body.innerHTML += '<input type="button" value="按钮" />';
    // 性能有问题!!!
    str += '<input type="button" value="按钮" />';
    }

    document.body.innerHTML = str;
};
</script>

JavaScript获取元素的第二种方法 getElementsByTagName()

阅读(2737)

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

语法

document.getElementsByTagName(tagname)

说明

如果把特殊字符串 “*” 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。

注释:传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

#list {}	var oUl = document.getElementById('list');      静态方法
li {}		var aLi = document.getElementsByTagName('li');  动态方法
#list li{}      var aLi = oUl.getElementsByTagName('li');
                //  aLi => [ li, li, li ]	 元素的集合
                aLi.length    3
                aLi[0]  // 在用TagName的时候,必须要加上:[]
<ul id="list">
  <li></li>
  <li></li>
  <li></li>
</ul>
<ol>
  <li></li>
  <li></li>
</ol>

<script>
window.onload = function (){
	//var oUl = document.getElementById('list');
	var oUl = document.getElementsByTagName('ul')[0];
	var aLi = oUl.getElementsByTagName('li');
	
	alert( aLi.length );
};
</script>

JavaScript数组(Array)

阅读(1758)

数组的定义:

var arr=[12, 5, 8, 9];

var arr=new Array(12, 5, 8, 9);

没有任何差别,[]的性能略高,因为代码短。

数组的属性

length

既可以获取,又可以设置(快速清空数组)

数组使用原则:数组中应该只存一种类型的变量

<script>
var num = 1;
var str = '这是一句话';

// 用数组:
var arr = [ 1, 2, 3, 'img/1.jpg', 'bbb' ];  // 放数据的仓库
 alert( arr.length ); // 5
// alert( arr[3] );
// alert( arr[4] );
// alert( arr[arr.length-1] );  // 最后一个

arr.push('img/3.jpg');  // 往数组的最后一位添加"数据"
</script>

Array 对象方法

方法 描述
concat() 连接两个或更多的数组,并返回结果。
every() 检测数组元素的每个元素是否都符合条件。
filter() 检测数组元素,并返回符合条件所有元素的数组。
indexOf() 搜索数组中的元素,并返回它所在的位置。
join() 把数组的所有元素放入一个字符串。
lastIndexOf() 返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
map() 通过指定函数处理数组的每个元素,并返回处理后的数组。
pop() 删除数组的最后一个元素并返回删除的元素。
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
reverse() 反转数组的元素顺序。
shift() 删除并返回数组的第一个元素。
slice() 选取数组的的一部分,并返回一个新数组。
some() 检测数组元素中是否有元素符合指定条件。
sort() 对数组的元素进行排序。
splice() 从数组中添加或删除元素。
toString() 把数组转换为字符串,并返回结果。
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。
valueOf() 返回数组对象的原始值。

JavaScript 中 if条件判断

阅读(2176)

1.第一种if条件语句
if(条件){
……
}

2.第二种if条件语句
if(条件){
……
}else{
……
}

3.第三种if条件语句
if(){
……
}else if(条件){
……
}else if(条件){
……
}else if(条件){
……
}else{
……
}

4.布尔值(boolean)
真true=1
假false=0

5.要懂得在无条件可选的情况下给自身创造条件

JavaScript中属性操作的注意事项

阅读(1807)

1.JS中不允许出现“-”

例:oP.style.font-size(这个是错误的)

正确写法:font-size应该改成fontSize

padding-left应该改成paddingLeft

应该把“-”去掉,然后在“-”后面的第一个字母改成大写即可

2.className

例:oP.class=’red’;是无效的

class 保留字   关键字如:var functionc

所以应当写成className   如:oP.className=’red’;

3.判断的那点事

所有相对路径,都别拿来作判断 img src=””; href=””;

颜色值不要拿来作判断  color:red  #f00 rgb(250,0,0)

innerHTML值不要拿来作判断

4.JS里浮动的问题

技术上:必须做到掌握兼容性(兼容性问题的解决方案)

需求上:商量着来(提供最准确的呈现方案)

例:$Div.style.float=’left’;//会有兼容问题

正确兼容写法:

$Div.style.styleFloat='left';
$Div.style.cssFloat='left';
IE(styleFloat)、非IE(cssFloat)

或者

.left{float:left;}
.right{float:right;}
<div class="left"></div>

5.[]的使用

JS里允许“.”替换成“[]”

例子:

$Btn.onclick=function(){
	//$Div.style.width='400px';	//width是不可修改的
	//$Div.style.$Sxm.value=$Sxz.value;	//无效的,这样写就变  成了div1下的style变成了等于style=“$Sxm.value”;这个是不存在的。
	$Div.style[$Sxm.value]=$Sxz.value;	//正确的写法
  }

innerHTML 属性

阅读(2051)

定义:

inerHTML是html标签的属性,几乎所有的元素都有innerHTML属性,它是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML。(获取HTML当前标签的起始和结束里的内容,不包括标签本身)

用法:

元素名.innerHTML    (读取元素内的所有HTML内容)

元素名.innerHTML = 新的值    (替换或修改元素内的所有HTML内容)

例:

<input id="text1" type="text" />
<input id="btn1" type="button" value="按钮" />
<p id="p1">这是一些文字....</p>
<script>
window.onload = function (){
	var oBtn = document.getElementById('btn1');
	var oText = document.getElementById('text1');
	var oP = document.getElementById('p1');

	oBtn.onclick = function (){
		alert( oP.innerHTML );		//读取oP元素里的内容
		oP.innerHTML = oText.value;	//oP元素里的内容为oText的值
	};
};
</script>

注意:innerHTML不可写为innerHtml或是其他形式,大小写要严格遵守,不然无法获取或者设置数据。

JavaScript中的HTML属性操作

阅读(1757)

HTML属性操作:读、写
属性名:比如id=”name”这里的id就是属性名
属性值:id=”name”这里的name就是属性值

属性读操作:获取、找到
元素.属性名

属性写操作:替换、修改
元素.属性名=新的值

字符串连接

innerHTML
$P.innerHTML(读取元素内的所有HTML内容)
$P.innerHTML=新的值(替换或修改元素内的所有HTML内容)
inerHTML是html标签的属性,成对出现的标签大多数都有这个属性是开始标签和结束标签之间的字符,不包括标签本身
比如

aaaaaaaaaabbbbbbbb

这里的p标签和span标签嵌套在一起
那么pp.innerHTML的内容就是
aaaaaaaaaabbbbbbbb
ss.innerHTML的内容就是bbbbbbbb

添加
元素名.innerHTML=元素名.innerHTML+元素名(text类型元素名).新的值(value)