js实例教程-js函数script放在head和body里的差别、innerHtml和innerText差别等介绍

发布时间:2018-11-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例教程-js函数script放在head和body里的差别、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 />

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 />

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-js函数script放在head和body里的差别、innerHtml和innerText差别等介绍全部内容,希望文章能够帮你解决js实例教程-js函数script放在head和body里的差别、innerHtml和innerText差别等介绍所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。