1. 概念
javascript是web上一种功能强大的编程语言，用于开发交互式的web页面。它不需要进行编译，而是直接嵌入在HTML页面中，由浏览器执行。
2.特点
3. 组成
4. 在HTML中使用JavaScript方式
内嵌入：
外嵌入：
5. 基本语法
javaScript的变量类型：
数值类型： number
字符串类型： string
对象类型： Object
布尔类型： boolean
函数类型： function
javascript里特殊的值：
undefined 未定义 在js中，所有变量，未赋初始的情况下，默认值都是undefined
JS中的定义变量格式：
var 变量名;
var 变量名 = 值； 直接赋初值
<script type="text/javascript">
var i;
// 默认是undefined
// alert(i);
i = 12;
// typeof 是取变量的类型
// alert( typeof( i ) ); // number
i = "this is a string";
alert( typeof( i ) ); // number
</script>
关系（比较）运算
等于： ==
全等于： ===
<script type="text/javascript">
var i = 12;
var b = "12";
//在js中，等于，只是简单的做字面值的比较。
alert( i == b ); //true
//全等于，除了做字面值的比较之外 。还会比较两个数据的类型
alert( i === b );// false
</script>
逻辑运算
与运算： &&
或运算： ||
取反运算： ！
&& 与运算。
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
|| 或运算
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
并且 && 与运算 和 ||或运算 有短路。
短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行
BOM
Window对象
Location对象
事件
1.页面一加载就触发的函数：
window.onload=function(）{
}
2.表单提交函数：
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
3.获取输入数据值：
var uValue = document.getElementById("user").value;
4.校验邮箱：
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
}
5.修改图片路径：
document.getElementById("img1").src="../../img/"+i+".jpg";
6.页面一加载就触发的函数也可以在< body >标签里增加 init（）方法
在< script >标签中书写初始化函数：
function init(){
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);//定时函数
}
在 < body >里面写加载init方法：
<body onload="init()">
7.获取广告图片的位置，让其显示
var adEle = document.getElementById("img2");
//.修改广告图片元素里面的属性让其显示
adEle.style.display = "block";
获取广告图片并设置其style属性的display值为none
document.getElementById("img2").style.display= "none";//让其隐藏
8.用户名和密码校验：
< script >标签内的方法：
function check(id,info){
//1.获取用户输入的用户名数据
var uValue = document.getElementById(id).value;
//2.进行校验
if(uValue==""){
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}else{
document.getElementById(id+"span").innerHTML="";
}
}
< body >内部的输入：
<input type="text" name="user" size="34px" id="user" onblur="check('user','用户名不能为空！')"/><span id="userspan"></span>
9.表格隔行换色
对< tbody >标签内的内容进行操作
window.onload = function(){
//1.获取表格
var tblEle = document.getElementById("tbl");
//2.获取表格中tbody里面的行数(长度)
var len = tblEle.tBodies[0].rows.length;
//alert(len);
//3.对tbody里面的行进行遍历
for(var i=0;i<len;i++){
if(i%2==0){
//4.对偶数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
}else{
//5.对奇数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
}
10.表格鼠标移上点亮显示
< script >标签内：
<script>
function changeColor(id,flag){
if(flag=="over"){
document.getElementById(id).style.backgroundColor="red";
}else if(flag=="out"){
document.getElementById(id).style.backgroundColor="white";
}
}
</script>
< table >
< thead > < /thead >
< tbody >内对于每一行的触发事件
<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
</tr>
11.点击事件
可以在< input >标签内绑定事件
<input type="button" value="下一张" onclick="changeImg()"/>
也可以在页面加载函数中触发：
window.onload = function(){
document.getElementById("btn").onclick = function(){
location.href="惊喜.html"
}
}
12.全选/全不选
全选框的标签书写：
<input type="checkbox" onclick="checkAll()" id="checkAll"/>
各个单选框的书写：
<input type="checkbox" name="checkOne"/>
js触发的函数：
function checkAll(){
//1.获取编号前面的复选框
var checkAllEle = document.getElementById("checkAll");
//2.对编号前面复选框的状态进行判断
if(checkAllEle.checked==true){
//3.获取下面所有的复选框
var checkOnes = document.getElementsByName("checkOne");
//4.对获取的所有复选框进行遍历
for(var i=0;i<checkOnes.length;i++){
//5.拿到每一个复选框，并将其状态置为选中
checkOnes[i].checked=true;
}
}else{
//6.获取下面所有的复选框
var checkOnes = document.getElementsByName("checkOne");
//7.对获取的所有复选框进行遍历
for(var i=0;i<checkOnes.length;i++){
//8.拿到每一个复选框，并将其状态置为未选中
checkOnes[i].checked=false;
}
}
}
13.动态添加城市
< body >部分：
<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
< script >部分：
window.onload = function(){
document.getElementById("btn").onclick = function(){
//1.获取ul元素节点
var ulEle = document.getElementById("ul1");
//2.创建城市文本节点
var textNode = document.createTextNode("深圳");//深圳
//3.创建li元素节点
var liEle = document.createElement("li");//<li></li>
//4.将城市文本节点添加到li元素节点中去
liEle.appendChild(textNode);//<li>深圳</li>
//5.将li添加到ul中去
ulEle.appendChild(liEle);
}
}
14.省级二级联动
< body >部分：
<select onchange="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
< script >部分：
<script>
//1.创建一个二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
function changeCity(val){
//7.获取第二个下拉列表
var cityEle = document.getElementById("city");
//9.清空第二个下拉列表的option内容
cityEle.options.length=0;
//2.遍历二维数组中的省份
for(var i=0;i<cities.length;i++){
//注意，比较的是角标
if(val==i){
//3.遍历用户选择的省份下的城市
for(var j=0;j<cities[i].length;j++){
//alert(cities[i][j]);
//4.创建城市的文本节点
var textNode = document.createTextNode(cities[i][j]);
//5.创建option元素节点
var opEle = document.createElement("option");
//6.将城市的文本节点添加到option元素节点
opEle.appendChild(textNode);
//8.将option元素节点添加到第二个下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script>
6. JavaScript常用操作
6.1 JavaScript 输出
指定替换id为demo的
document.getElementById("demo").innerHTML=Date();
直接写入 HTML 输出流
document.write("<h1>这是一个标题</h1>");
JavaScript 没有任何打印或者输出的函数。
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
扫一扫
797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
