初探JavaScript

最新推荐文章于 2024-10-02 05:39:15 发布
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量69 收藏
点赞数
分类专栏： 前端 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_6091/article/details/82674134
版权

本篇文章主要内容：

一、函数传参

    改变背景颜色

    改变Div的任意样式

    style与className

二、提取行间事件

    为元素添加事件

     -window.onload的意义

     -暂空

    获取一组元素

     -getElementsByTagName

三、选项卡

    在JS里添加自定义属性，但是不可以在HTML中添加，会被过滤

四、JS简易日历

    innerHTML的使用

     -里面的HTML，可赋一段HTML代码

    数组的使用

     -定义：arr=[1,2,3]

     -使用：arr[0]

    字符串拼接

 

 

----------------------------------------------函数传参---------------------------------------------------------------------------

function show(num)

{

    alert(num);

}

show(12);

                                                  //一个简单的关于函数传参的例子

function show(a,b)

{

    alert(a+b);

}

show(5,7) 

实例1：改变背景颜色

<!DOCTYPE>

<html>

<meta charset="utf-8">

<head>

<title>改变背景颜色</title>

<style>

#divl {width:200px; height: 200px; background: red;}

</style>

<script type="text/javascript">

function toGreen()

{

var oDiv=document.getElementById('divl');

oDiv.style.background='green';

}

function toYellow()

{

var oDiv=document.getElementById('divl');

oDiv.style.background='yellow';

}

function toBlack()

{

var oDiv=document.getElementById('divl');

oDiv.style.background='black';

}

</script>

</head>

 

<body>

<input type="button" value="变绿" οnclick="toGreen()"/>

<input type="button" value="变黄" οnclick="toYellow()"/>

<input type="button" value="变黑" οnclick="toBlack()"/>

<div id="divl">

</div>

</body>

</html>

优化后：

function setColor(color)

{

    var oDiv=document.getElementById('divl');

    oDiv.style.background=color;

}

</script>

</head>

 

<body>

<input type="button" value="变绿" οnclick="setColor('green');"/>

<input type="button" value="变黄" οnclick="setColor('yellow');"/>

<input type="button" value="变黑" οnclick="setColor('black');"/>

 

实例2：div改变样式

<!DOCTYPE>

<html>

<meta charset="utf-8">

<head>

<title>改变div的样式</title>

<style>

#divl {width:200px; height: 200px; background: red;}

</style>

<script type="text/javascript">

function setWidth()

{

var oDiv=document.getElementById('divl');

oDiv.style.width='400px';

}

function setHeight()

{

var oDiv=document.getElementById('divl');

oDiv.style.height='400px';

}

function setColor()

{

var oDiv=document.getElementById('divl');

oDiv.style.background='yellow';

}

 

/*function setColor(color)

{

    var oDiv=document.getElementById('divl');

    oDiv.style.background=color;

}*/

</script>

</head>

 

<body>

<input type="button" value="变宽" οnclick="setWidth();"/>

<input type="button" value="变长" οnclick="setHeight();"/>

<input type="button" value="变黄

" οnclick="setColor();"/>

<div id="divl">

</div>

</body>

</html>

 

 

优化后：

function setStyle(name,value)

{

    var oDiv=document.getElementById('divl');

    oDiv.style[name]=value;

}

</script>

</head>

 

<body>

<input type="button" value="变宽" οnclick="setStyle('width','400px');"/>

<input type="button" value="变长" οnclick="setStyle('height','400px');"/>

<input type="button" value="变黄" οnclick="setStyle('background','yellow');"/>

 

总结： 

两种操作属性的方法

 

function setText(name)

{

    var oTxt=document.getElementById('txtl');

    //第一种操作属性的方法

    oTxt.value='dfsdfsfds';

 

    //第二种操作属性的方法

    oTxt[name]='dfsdfsfds';

}

    第二种方法中的‘name’是可变的字符串，是[]里的内容变成可变量

 

style与className

-元素.style.属性=xxx是修改行间样式

-之后再修改className不会有效果（因为优先级）

 

---------------------------------------------提取行间事件----------------------------------------------------------------------

一个小例子

<body>

<input id="btn1" type="button" value="按钮" />

<script>

var oBtn=document.getElementById('btn1');

 

function abc()

{

    alert('a');

}

oBtn.οnclick=abc;

</script>

</body>

将事件从行间提取出来

 

两个实用的小tips：

在函数中 有匿名函数 

 

oBtn.οnclick=function()

{

    alert('a');

}

可以省去给函数取名字的麻烦

 

 

将提取事件的JS代码放入head里会报错

解决办法： Window.onload

window.οnlοad=function()

{

    oBtn.οnclick=function()

    {

alert('a');

    }

} 

 

实例1：

<!DOCTYPE>

<html>

<meta charset="utf-8">

<head>

<title>多个div</title>

<style type="text/css" media="screen">

div {width:200px; height: 200px; float: left; border: 1px solid black;}

</style>

<script type="text/javascript">

    window.οnlοad=function()

{

var aDiv=document.getElementsByTagName('div');

/*aDiv[0].style.background='red';

aDiv[1].style.background='red';

aDiv[2].style.background='red';

aDiv[3].style.background='red';

        */

               //下面为用循环简化后的代码

for(var i=0;i<aDiv.length;i++)   //循环 以及div的数量变换不会受影响

{

aDiv[i].style.background='red';

}

 

}

</script>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

</body>

</head>

</html>

 

实例2：全选、不选、反选

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>全选、不选、反选</title>

<script type="text/javascript">

window.οnlοad=function()

{

var oBtn1=document.getElementById('btn1');

var oBtn2=document.getElementById('btn2');

var oBtn3=document.getElementById('btn3');

   var oDiv=document.getElementById('div1');

   var aCh=oDiv.getElementsByTagName('input');//避免button也被选进去

   oBtn1.οnclick=function ()

   {

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

       {

       aCh[i].checked=true;

       }

   

   }

   oBtn2.οnclick=function ()

   {

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

       {

       aCh[i].checked=false;

       }

   

   }

   oBtn3.οnclick=function ()

   {

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

       {

       if(aCh[i].checked==true)

       {

       aCh[i].checked=false;

       }

       else

       {

       aCh[i].checked=true;

       }

 

       }

   

   }

}

</script>

</head>

<body>

<input id="btn1" type="button"  value="全选"   /><br>

<input id="btn2" type="button"  value="不选"   /><br>

<input id="btn3" type="button"  value="反选"   /><br>

<div id="div1">

<input type="checkbox" /><br>

<input type="checkbox" /><br>

<input type="checkbox" /><br>

<input type="checkbox" /><br>

<input type="checkbox" /><br>

<input type="checkbox" /><br>

<input type="checkbox" /><br>

<input type="checkbox" /><br>

<input type="checkbox" /><br>

</div>

</body>

</html>

 

 

------------------------------------------------------------选项卡---------------------------------------------------------------

代码：

<!DOCTYPE>

<html>

<meta charset="utf-8">

<head>

<title>选项卡</title>

<style>

#div1 .active {background: yellow;}

#div1 div {width:200px; height: 200px; background: #CCC; border:1px solid #999; display: none}

</style>

<script>

window.οnlοad=function()

{

var oDiv=document.getElementById('div1');

var oBtn=oDiv.getElementsByTagName('input');

var aDiv=oDiv.getElementsByTagName('div');

 

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

{

oBtn[i].index=i;

oBtn[i].οnclick=function()

{

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

{

 

oBtn[i].className='';

aDiv[i].style.display='none';

}

this.className='active';

aDiv[this.index].style.display='block';

}

}

}

</script>

</head>

 

<body>

<div id="div1">

<input class="active" type="button" value="教育"/>

<input type="button" value="培训"/>

<input type="button" value="招生"/>

<input type="button" value="招生"/>

<div style="display:block;">1111</div>

<div>2222</div>

<div>3333</div>

<div>4444</div>

</div>

</body>

</html>

 

 

-----------------------------------------JS简易日历-----------------------------------------------------------------------------

ps：由于style还没有学，所以这个代码并不是一个成型的日历，日后会跟进修改

 

代码：

<!DOCTYPE>

<html>

<meta charset="utf-8">

<head>

<title></title>

<style>

#div tab{width:200px; height: 200px; border:1px solid #999;}

</style>

<script>

window.οnlοad=function()

{

var arr=[

'快过年了',

'二月了',

'三月233',

'四月啦'

]

 

var oDiv=document.getElementById('tab');

var aLi=oDiv.getElementsByTagName('li');

var oTxt=oDiv.getElementsByTagName('div')[0];

 

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

{

aLi[i].οnmοuseοver=function()

{

aLi[i].index=i;

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

{

aLi[i].className='';

}

this.className='active';

 

oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';

}

}

 

}

</script>

</head>

 

<body>

<div id="tab" class="calender">

<ul>

<li class="active"><h1>1月</h1><p>JAN</p></li>

<li><h1>2月</h1><p>FER</p></li>

<li><h1>3月</h1><p>MAR</p></li>

<li><h1>4月</h1><p>APR</p></li>

<li><h1>5月</h1><p>MAY</p></li>

<li><h1>6月</h1><p>JUN</p></li>

<li><h1>7月</h1><p>JUL</p></li>

<li><h1>8月</h1><p>AUG</p></li>

<li><h1>9月</h1><p>SEP</p></li>

<li><h1>10月</h1><p>OCT</p></li>

<li><h1>11月</h1><p>NOV</p></li>

<li><h1>12月</h1><p>DEC</p></li>

</ul>

<div class="text">

<h2>一月活动</h2>

<p>快过年了</p>

</div>

 

 

</div>

 

 

</body>

 

</html>

 

 

iteye_6091
关注
专栏目录
初探JavaScript与HTML的交互之美：Hello World实例详解
06-28
这背后，是JavaScript引擎的精密运作，是DOM操作的巧妙运用，是对事件驱动机制的基本理解。每一个字符的出现，都是对编程逻辑的一次实践，对代码执行流程的一次把握。 当我们按下浏览器的刷新按钮，看到那句熟悉的...
Examples-Node.js_20140424:Node.js开发实务：初探JavaScript 应用程式设计书本范例
05-13
《Node.js开发实务：初探JavaScript 应用程式设计》是一本专为开发者介绍Node.js技术的书籍。这本书的核心在于帮助读者理解如何利用JavaScript进行服务器端编程，通过一系列的实例来深入浅出地讲解Node.js的基本概念...
初探javascript
05-17 61
javascript是一种在网络广泛应用的脚本语言，虽然名字与java相近，但其实两者并没有直接的关系，脚本语言是一种为了便于操作和拓展功能而开发出来的解释性语言，不同于传统的编程语言，脚本语言不需要编译即可通过解释器运行，各大浏览器中均内置javascript解释器。 html中提供了script标签来标明需要使用javascript解释器的代码块，script标签可以放在html文...
初探JavaScript与canvas
Q_w7742的博客
09-02 917
首先在VS code中安装：canvas-snippets、Live Server、open in browser。创建一个文件夹：JS_Project，在JS_Project下创建一个hw1.js和一个hw1index.html。首先给这个canvas赋予一个ID，我们称为myCanvas，设置宽度700，高度400。接下来我们来详细编辑这个canvas。我们通过循环的方式划线。
01 初探JavaScript和概述
wucan111的博客
11-25 114
01 初探JavaScript和概述 一、聊一下JavaScript的历史 (1) 产生背景和原因 早期的Html是什么样的呢？ 现在收藏的最早的网页 那个时候还没有JavaScript呢！Css也还在整合当中，当初网页要实现一个表单的提交，可没有Html5这么简单轻松。以前的input可没有验证属性之类的验证方法，只有每次提交经有服务器验证确认才能确定自己是否有正确填写格式。 对的也许你已经能够想到当时网民的痛苦，数据格式还不是其它错误都需要30s的等待回复时间，这是一个相当漫长的过程。直到1995年，终
初探JavaScript一
可芭乐的博客
01-10 366
鼠标、函数、隐藏显示、换肤、提示框鼠标操作 onmouseover鼠标移入显示 onmouseout鼠标移出显示<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1 { widt
初探JavaScript之浅拷贝
weixin_46308155的博客
07-26 142
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对象拷贝</title> </head> <body> <script type="text/javascript"> //对象浅拷贝------------>>>>>>>>>>> O
01 - 初探JavaScript魅力
10-10 76
网页特效原理 用JavaScript修改样式 编写JS的流程 布局：HTML+CSS 属性：确定要修改哪些属性 事件：确定用户做哪些操作（产品设计） 编写JS：在事件中，用JS来修改页面元素的样式 鼠标移入移出效果 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"&g...
初探JavaScript PDF blob转换为Word docx方法
葡萄城技术团队博客
10-20 1950
PDF转WORD为什么是历史难题 PDF 转Word 是一个非常非常普遍的需求，可谓人人忌危，为什么如此普遍的需求，却如此难行呢，还得看为什么会有这样的一个需求： PDF文档遵循iOS32000的规范是由Adobe 公司推出的文档格式，之所以应用如此广泛，是因为PDF精确定位了每个字符的坐标、根据坐标绘制的各种形状，使用PDF格式传输和打印文档可以保证格式的一致性，然后很多PDF文件是可用于阅读，展示，打印，但编辑起来是非常困难，如格式调整，文字修改，样式调整等，那么就衍生了PDF 转Word这一历史性的需
初探JavaScript魅力
weixin_30390075的博客
02-26 70
<style> #div1{width:200px; height:200px; background:red;} </style> </head> <script> function setColor(color){ var oDiv=document.getElementById("div1"); oDiv.style.ba...
【JavaScript从入门到精通】第一课 初探JavaScript魅力-02
荆盼的博客
01-27 250
变量 说起变量，我们不得不提起我们有一部比较古老的电视剧叫《包青天》。包青天有一把非常厉害的宝剑叫“尚方宝剑”，见到尚方宝剑有如见到皇帝。某种程度来说，变量具有类似于尚方宝剑的特性。 我们对第一课末的代码进行如下修改： function toGreen() { var oDiv=document.getElementById("div1"); //变量 oDiv.style.width=
初探JavaScript 面向对象(推荐)
10-19
JavaScript 面向对象编程是理解JavaScript核心概念的关键部分，它是建立复杂应用程序和模块化代码的基础。面向对象编程（OOP）主要包含三个核心概念：封装、继承和多态。以下将详细介绍JavaScript中的面向对象特性。...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 900
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 434
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 445
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 607
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 345
【代码】如何使用Redisson的布隆过滤器？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1179
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
精通JavaScript应用设计：构建方法初探
"JavaScript Application Design (英文版)" 是一本由 Nicolas Bevacqua 撰写，Addy Osmani 前言的书籍，专注于讲解如何设计JavaScript应用程序。本书采用“构建优先”的方法来探讨JavaScript应用的设计原则和实践。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值