3.javascript(俗称js)
来源：互联网 发布：多益网络有哪些游戏 编辑：程序博客网 时间：2024/04/27 04:41
1.基本概念：
- JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。与java无关。
- 组成部分:
- ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等…)
- BOM:浏览器对象模型
- DOM:文档对象模型
- 作用:
- 修改html页面的内容
- 修改html的样式
- 完成表单的验证
- 注意:
- js可以在页面上直接写,也可以单独出去
- js的文件的后缀名 .js
2.js和html整合
- 方式1:在页面上直接写
将js代码放在 <script></script>标签中,一般放在head标签中- 方式2:独立的js文件
- 通过script标签的src属性导入
案例代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!--方式一--> <script type="text/javascript"> <!--对话框--> alert("哈哈"); </script> <!--方式二--> <script type="text/javascript" src="../js/1.js" ></script> </head> <body> </body></html>1.js文件代码，在js文件夹下
alert("hehhe");3.js中的变量声明
- var 变量名=初始化值;
- var 变量名; 变量名=初始化值;
4.js的数据类型:
- 原始类型:(5种)
NullStringNumberBooleanUndefined通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于那种原始类型typeof 变量|值;若变量为null,使用typeof弹出的值 object使用typeof的返回值undefined - 如果变量是 Undefined 类型的 boolean - 如果变量是 Boolean 类型的 number - 如果变量是 Number 类型的 string - 如果变量是 String 类型的 object - 如果变量是一种引用类型或 Null 类型的 - 引用类型
5. js事件驱动函数
5.1 函数定义格式
- 方式1:
function 函数名(参数){ 函数体;}- 方式2:
var 函数名=function(参数){ 函数体;}注意:
- 函数不用声明返回值类型
- 参数不需要加类型
- 函数调用的时候
- 函数名(参数)
在方法中(function()) this指代的是当前的元素(当前dom对象)注意: 在方法中(function()) this指代的是当前的元素(当前dom对象)5.2 js事件和函数的绑定:
- 方式1:
通过标签的事件属性 <xxx onclick="函数名(参数)"></xxx>- 方式2:
给元素派发事件document.getElementById("id值").onclick=function(参数){....}document.getElementById("id值").onclick=函数名注意:内存中应该存在该元素才可以派发事件a.将方式2的js代码放在html页面的最下面b.在页面加载成功之后在运行方式2的js代码 onload事件.示例代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> function btn_in(){ alert("点击事件"); } function init(){ //alert("页面加载成功"); document.getElementById("btn_2").onclick=btn2cli; } var btn2cli=function(){ alert("哈哈哈"); } </script> </head> <body onload="init()"> <input type="button" value="点我" onclick="btn_in()"/> <input type="button" value="点我试试" id="btn_2"/> </body></html>5.3 js中的事件
常见的事件
- 单击: onclick
- 表单提交: onsubmit 加在form表单上的 onsubmit=”return 函数名()” 注意函数返回值为boolean类型
- 页面加载: onload
- 焦点事件:
- onfocus
- onblur
示例代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> function getFocus(){ var user=document.getElementById("username"); document.getElementById("spanid").innerHTML=user.value; } function loseFocus(){ var user=document.getElementById("username"); alert(user.value); } </script> </head> <body> 用户名：<input id="username" name="username" value="请输入你的名字" onfocus="getFocus()" onblur="loseFocus()"/><br /> <span id="spanid"></span> </body></html>表单事件:
- onsubmit
- onchange 改变
鼠标事件
- ondblclick:双击
- onmousedown:按下
- onmouserup:弹起
- onmousemove:移动
- onmouserover:悬停
- onmouserout:移出
- 键盘事件
- onkeydown:按下
- onkeyup:弹起
- onkeypress:按住
注意：event.preventDefault()，阻止默认事件的发生，可以防止超链接的跳转（不是所有的浏览器适用）
5.4 获取元素及属性
- 获取元素
<!--通过y元素的id获取元素-->var obj=documnet.getElementById("id值");document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)返回一个数组document.getElementsByClassName():需要给元素添加class属性document.getElementsByName():需要给元素添加name属性示例代码(隔行换色)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> onload=function(){ var arr = document.getElementsByTagName("tr");// alert(arr.length); for(var i=1;i<arr.length;i++){ if(i%2==0){ arr[i].style.backgroundColor="yellowgreen"; }else{ arr[i].style.backgroundColor="goldenrod"; } } } </script> </head> <table id="tab1" border="1" width="800" align="center" > <tr style="background-color: #999999;"> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </tr> <tr> <td>1</td> <td>手机数码</td> <td>手机数码类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td>2</td> <td>电脑办公</td> <td>电脑办公类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td>4</td> <td>家居饰品</td> <td>家居饰品类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> </table> </body></html>- 获取元素的标签体中的内容
var ht=document.getElementById("id值").innerHTML;- 设置元素的标签体
document.getElementById("id值").innerHTML="ssss";- 获取元素的value属性
var val=document.getElementById("id值").value;- 设置元素的value属性
document.getElementById("id值").value="sdfsdf";- appendChild(dom对象):在一个元素下添加孩子
<!--获取id为 left元素下的所有option的元素-->var arr = document.getElementById("left").options;document.getElementById("toRight3").onclick=function(){ //获取左边所有的option// var arr = document.getElementsByTagName("option"); var arr = document.getElementById("left").options; for(var i=0;i<arr.length;){ document.getElementById("right").appendChild(arr[i]); }}示例代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> function btn(){ var obj=document.getElementById("btn"); alert(obj.value); var div = document.getElementById("div0"); alert(div.innerHTML); } </script> </head> <body> <input id="btn" value="确定" type="button" onclick="btn()" /> <div id="div0">hahaha</div> </body></html>6. bom中对象的操作
6.1 定时器
var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期执行var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数清除定时器: clearInterval(id); claerTimeout(id);示例代码1(动态的输出文字)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> var i = 0; var s="哈呵嘻"; var body; function init(){ body=document.getElementById("body"); setInterval(show,200);//定时器 } function show(){ i++; var ss = s.substring(0,i); body.innerHTML=ss;//写入内容 if(i == s.length){ i=0; } } </script> </head> <body onload="init()" id="body"> </body></html>示例代码2(轮播图)
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script> var i = 1; function init(){ setInterval(changeImage,3000); } function changeImage(){ var img = document.getElementById("img"); i++; img.src="../img/"+ i +".jpg" if(i >= 3){ i=0; } }</script></head><body onload="init()"><img id="img" src="../img/1.jpg" width="100%"/></body></html>示例代码3（广告的弹出和隐藏）
<script> var i=1; var count=1; var timer; function init(){ timer = setInterval(showAd,4000);//广告 setInterval(changeImage,3000); } //展示广告 function showAd(){ count++; if(count>=4){ clearInterval(timer);//取消定时器 } var div = document.getElementById("div2") div.style.display="block";//显示 setTimeout(hideAd,2000); } //隐藏广告 function hideAd(){ var div = document.getElementById("div2") div.style.display="none";//显示 } function changeImage(){ //获取图片元素 var img = document.getElementById("lb"); i++; img.src="../img/" + i +".jpg"; if(i >= 3){ i=0; } }</script>6.2 操作css属性
document.getElementById("id").style.属性="值"属性:就是css中属性 css属性有"-" 例如:backgroud-color 若有"-" 只需要将"-"删除,后面第一个字母变大写即可示例代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> function btn(){ var obj = document.getElementById("div0"); obj.style.backgroundColor="blue"; obj.style.border="1px solid red"; obj.style.width="100px" obj.style.height="100px" } </script> </head> <body> <input type="button" value="将div加上样式" onclick="btn()"/> <div id="div0"></div> </body></html>6.3 bom(浏览器对象模型)
所有的浏览器都有5个对象
6.3.1 window:窗口
- 常用的属性:
window.onload 等价于 onloadwindow.setInterval() 等价于 setInterval()通过window可以获取其他的四个对象window.location 等价域 locationwindow.history 等价于 history- 常用的方法
- 消息框
alert("...."):警告框confirm("你确定要删除吗?"):确定框 返回值:booleanprompt("请输入您的姓名"):输入框 返回值:你输入的内容消息框示例代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> alert("heheh"); var flag = confirm("lalala"); alert(flag); var res=prompt("请输入你的姓名："); alert(res); </script> </head> <body> </body></html>- 打开和关闭
- open(url):打开
- close():关闭
打开和关闭示例代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="打开" onclick="openA()" /> </body> <script> function openA(){ open("a.html"); } </script></html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 我是A页面 <input type="button" value="关闭" onclick="closeA()" /> </body> <script> function closeA(){ close(); } </script></html>6.3.2 location:定位信息 (地址栏)
常用属性:
- href:获取或者设置当前页面的url(定位信息)
- location.href; 获取url
- location.href=”…”;设置url 相当于 a标签
示例代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> //获取url// var u = location.href;// alert(u); function setUrl(){ location.href="../window/a.html" } </script> </head> <body> <input type="button" value="设置url" onclick="setUrl()" /> </body></html>6.3.3 history:历史
常用的方法：
- back();后退
- forward():向前
- go(int)
- go(-1) 相当于 back()
- go(1) 相当于 forward()
示例代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> function forw(){ history.go(1); } </script> </head> <body> 哈哈页面<br /> <a href="b.html">b页面</a> <input type="button" value="前进" onclick="forw()" /> </body></html>b.html
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> function goBack(){ history.go(-1); } </script> </head> <body> 呵呵页面<br /> <input type="button" value="后退" onclick="goBack()" /> </body></html>阅读全文
0 0
- 3.javascript(俗称js)
- js利用replace方法去除敏感字符（俗称的 河蟹！！！）
- [JavaScript] 3.JS 语句
- PBX俗称：程控交换机
- CBreadcrumbs简介~俗称:面包屑
- 调制解调器(俗称猫)
- 计算机（computer）俗称电脑
- JS：(JavaScript)
- JavaScript(js)
- 话说WAS环境是什么的俗称？
- Algorithm Gossip(基数排序,俗称桶子法)
- linux 做 wifi 热点(俗称AP)
- CSS滤镜效果（俗称毛玻璃）
- JavaScript-----JS---JavaScript的介绍
- js-Javascript数组
- javascript函数库：core.js
- ERP JS(集合):javaScript
- 常用js(javascript)函数
- MT7628/MT7688平台上如何配置任何一个管脚为GPIO模式,试用各种平台
- python第三方库pandas和lxml
- string 直接定义字符
- 一、机器学习初起步
- Linux 应用开发
- 3.javascript(俗称js)
- keytool/android签名/温习
- Android Launcher3修改长按屏幕空白处进入OverviewMode模式，进入OverviewMode模式点击Home无法复原的bug
- 常用的正则表达式验证
- HDU-2017 多校训练赛2-1011-Regular polygon
- 经典算法-“水仙花”3位数的个位，十位，百位的立方和等于原来的数字
- Find a way
- 判断一棵树是不是完全二叉树
- Easyui select onChange事件
