欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js函数script放在head和body里的差别、innerHtml和innerText差别等介绍

程序员文章站 2022-08-21 18:42:27
1.script放在head和body里的差别 2.innerhtml和innertext差别 innerhtml获取整个对象 innertext获取的是文本值 实例:...

1.script放在head和body里的差别

2.innerhtml和innertext差别

innerhtml获取整个对象

innertext获取的是文本值

实例:

3. 事件源  当前获取的按钮 

事件名称 

body>

<input type="button" name="btn" id="btn" value="点我" />

</body>

<script type="text/javascript">

var btn=document.getelementbyid("btn");//通过id获取元素

btn.onclick=function(){

prompt("我速度是");

}

</script>

4.innerhtml用法事例

5.函数返回false的主要作用

终止某一段程序

<a id="aaa" href="www.baidu.com">第一次遇见你,你就像一个啥子一样</a>

var ajs=document.getelementbyid("aaa");

ajs.onclick=fbunction(){

prompt("你是一个*啊,我受不撩了啊")

}

return false;

*****************************************************************

length长度 字符串类型的集合

set大小  数字类型集合  .get(i)方式

*****************************************************************

6.通过标签,id,name获取元素

标签:getelementsbytagname

id:getelementbyid

name:getelementsbyname

实例:

<input type="button" name="btn" id="btn" value="点我" />

<a >第一次遇见你,你就像一个啥子一样</a>

<a >第一次遇见你,你就像一个啥子一样</a>

<a >第一次遇见你,你就像一个啥子一样</a>

<a >第一次遇见你,你就像一个啥子一样</a>

<a >第一次遇见你,你就像一个啥子一样</a>

<script type="text/javascript">

btn.onclick=function() {

var a1=document.getelementsbytagname("a");//返回的是一个集合  一定不能忘了是tagname  获取标签

for (var i = 0; i < a1.length; i++) {

alert(a1[i]);

}

</script>

7.操作修改获得元素的属性

例:改变一个a标签内的内容

<a id="btn">dsgfdjshufdsufjdshfgd</a>

<script type="text/javascript">

var btn=document.getelementbyid("btn");

btn.onclick=function(){

btn.innertext="我爱你,亲爱的姑娘";

}

</script>

例:图片切换效果

<body>

<img src="image/a1 (1).jpg" id="imgss"/>

<script type="text/javascript">

var a=1;

var b=document.getelementbyid("imgss");

b.onclick=function(){

if (a==4) {

a=1;

}

if (a==1) {

b.src="image/a1 (2).jpg";

} else if(a==2){

b.src="image/a1 (3).jpg";

}else if(a==3){

b.src="image/a1 (1).jpg";

}

a++;

}

</script>

</body>

例:图片查看效果

<body>

<img src="images/a1 (1).jpg" id="img1" width="185" height="260" />

<img src="images/a1 (2).jpg" id="img2" width="185" height="260" /> 

<img src="images/a1 (3).jpg" id="img3" width="185" height="260" />

<img src="images/a1 (4).jpg" id="img4" width="185" height="260" />

<br />