1. Javascript概述
Javascript是一种直译式的脚本语言
什么是脚本语言：
java源代码->翻译成class文件->java虚拟机中才能执行
脚本语言：源码---->解释执行
HTML：决定了页面的框架
CSS：用来美化页面
js：提供用户交互
js的组成：
ECMAScript：核心部分，定义：语法，类型，语句，关键字， 保留字， 运算符， 对象
DOM:document Object Model：文档对象模型，用来管理页面
BOM:Browser Object Model：浏览器对象模型，前进，后退，页面刷新，地址栏，历史记录，屏幕的宽高
js的语法：
变量弱类型：var i = true;...
区分大小写
语句结束以后的分号，可以有，也可以没有
写在script标签
js的数据类型
基本类型：
undefined:
boolean:
number:
string:
object:
引用类型：
对象，内置对象
类型转换：
js的运算符和语句
运算符和java一样
===全等号，需要值和类型都一致返回true
== 值相等就可以
js的输出
alert():直接弹框
document.write():向页面输出
console.log():向控制台输出
innerHTML:向页面输出
获取页面元素：document.getElementById("d的名称“)
js声明变量
var 变量的名称=变量的值
js声明函数
var 函数的名称 = function(参数的名字){
}
function 函数的名称(){
}
js开发的步骤
1. 确定事件
2. 通常事件都会触发一个函数
3. 函数里通常都会操作页面元素，做一些交互动作。
变量类型案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>变量类型</title> <script> var i = 1; var j = "zhuansan"; /* alert(typeof(i)); // number alert(typeof(j)); // string */ // === 类型和值都必须相等 var str1 = 222; var str2 = "222"; // 向页面输出内容 document.write(str1 == str2); document.write(str1 === str2); // 向控制台输出 console.log("xiaoxiaoxiao"); </script> </head> <body> </body> </html>
点击弹框案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击弹框</title> <script> function clickd(){ alert("我被点击啦，快来救我"); } </script> </head> <body> <input type = "button" value = "点我" onclick = "clickd()" /> <div> </div> </body> </html>
修改文本案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>修改文本</title> <script> function clicc(){ var div = document.getElementById("div1"); /* div.innerHTML = "<font color = 'red'>替换啦</font>"; */ // html格式 div.innerText = "<font color = 'red'>替换啦</font>"; // 文本格式 } </script> </head> <body> <input type = "button" value = "点我修改文本" onclick = "clicc()" /> <div id = "div1"> 这里的内容点击替换 </div> </body> </html>
js的简单数据校验
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的数据校验</title> <script> function checkForm(){ var inpu = document.getElementById("username"); /* alert(inpu.value); */ var uValue = inpu.value; if(uValue.length >= 6){ }else{ alert("对不起，用户名太短"); return false; } var email = document.getElementById("email"); var uEmail = email.value; if(/^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(uEmail)){ alert("邮箱校验成功"); <!-- 校验邮箱 --> return true; }else{ alert("邮箱校验失败"); return false; } return false; } </script> </head> <body> <form action = "../网站/网站首页.html" onsubmit = "return checkForm()"> <!-- 该事件必须要有返回值 --> 用户名:<input type = "text" id = "username" /> <br /> 密码:<input type = "password" /> <br /> 邮箱:<input type = "text" id = "email" /> <br /> <input type = "submit" value = "提交" /> </form> </body> </html>
修改图片案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自动轮播图</title> <script> function changeImg(){ alert("change image"); var img = document.getElementById("img1"); img.src = "../imgs/1-161104143944.gif"; } </script> </head> <body> <input type = "button" value = "点击切换图片" onclick = "changeImg()" /> <br /> <img src = "../imgs/美女.jpg" id = "img1" /> </body> </html>
定时器案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定时器</title> <script> function test(){ console.log("setInterval 调用了"); } var timeID; function startTimer(){ timeID = setInterval("test()", 2000); // timeID = setInterval("test()", 2000); } function stopTimer(){ clearInterval(timeID); // clearTimeout(timeID); } /* // window对象是一个最顶层的对象 window.setInterval("test();", 2000); // 等同于 setInterval.("alert('2213');", 2000) window.setTimeout("test();", 2000); // 只执行一次 */ </script> </head> <body> <input type = "button" value = "开启定时器" onclick = "startTimer()" /> <br /> <input type = "button" value = "取消定时器" onclick = "stopTimer()" /> <br /> </body> </html>
点击显示和隐藏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击显示和隐藏</title> <script> // 文档加载顺序 function hideImg(){ var img = document.getElementById("img1"); // 从上到下加载，所以最好放到这里 img.style.display = "none"; } function showImg(){ var img = document.getElementById("img1"); img.style.display = "block"; } </script> </head> <body> <input type = "button" value = "显示" onclick = "showImg()" /> <input type = "button" value = "隐藏" onclick = "hideImg()" /> <br /> <img src = "../imgs/1-161104143944.gif" id = "img1" /> </body> </html>
自动轮播图
<!DOCTYPE html> <html> <!-- 步骤分析： 1. 确定事件,文档加载完成的事件onload 2. 事件要触发:init() 3. 函数里面要做一些事情 4. changeImg() a. 获得要切换图片的元素 --> <head> <meta charset="UTF-8"> <title>自动轮播图</title> <script> var index = 0; function changeImg(){ var img = document.getElementById("img1"); // 计算当前切换到第几张土拍你 var curIndex = index % 3 + 1; img.src = "../imgs/" + curIndex +".jpg"; index = index + 1; } function init(){ setInterval("changeImg()", 2000); } </script> </head> <body onload = "init()"> <img src = "../imgs/1.jpg" width = "100%" id = "img1" /> </body> </html>
定时弹出和关闭广告
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定时弹出广告</title> <script> function showAD(){ var img = document.getElementById("img1"); img.style.display = "block"; setTimeout("hideAD()", 3000); } function hideAD(){ var img = document.getElementById("img1"); img.style.display = "none"; } function init(){ setTimeout("showAD()", 3000); } </script> </head> <body onload = "init()"> <img src = "../imgs/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width = "100%" id = "img1" style = "display: none" /> <img src = "../imgs/美女.jpg" /> </body> </html>
js的常用事件：
onfocus事件：获得焦点事件
onblur：失去焦点事件
onkeyup：按键抬起事件
页面校验：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的数据校验</title> <script type = "text/javascript" src = "regutils.js"></script> <script> /* 1. 确定事件:onfocus 2. 事件要驱动函数 3. 函数需要做一些事情，修改span的内容 */ function showtips(spanID, msg){ var span = document.getElementById(spanID); span.innerHTML = msg; } /* 1. 事件:onblur 失去焦点 2. 函数:checkUsername() 3. 函数显示校验结果 4. 事件:onkeyup:按键抬起 */ function checkUsername(){ var span = document.getElementById("span_username"); var uValue = document.getElementById("username").value; if(uValue.length < 6){ // 显示校验结果 span.innerHTML = "<font color = 'red' size = '2'>对不起用户名太短</font>"; return false; }else{ span.innerHTML = "<font color = 'red' size = '2'>用户名可用</font>"; return true; } } function checkPassword(){ var span = document.getElementById("span_password"); var uPassword = document.getElementById("password").value; if(uPassword.length < 6){ span.innerHTML = "<font color = 'red' size = '2'>对不起密码太短</font>"; return false; }else{ span.innerHTML = "<font color = 'red' size = '2'>密码可用</font>"; return true; } } function recheckPassword(){ var span = document.getElementById("span_repassword"); var uRepassword = document.getElementById("repassword").value; var uPassword = document.getElementById("password").value; if(uRepassword == uPassword){ span.innerHTML = "<font color = 'red' size = '2'>密码确认成功</font>"; return true; }else{ span.innerHTML = "<font color = 'red' size = '2'>密码不一致</font>"; return false; } } function checkMail(){ var uMail = document.getElementById("email").value; var span = document.getElementById("span_email"); var flag = checkEmail(uMail); if(flag){ span.innerHTML = "<font color = 'red' size = '2'>邮箱可用</font>"; return true; }else{ span.innerHTML = "<font color = 'red' size = '2'>邮箱不匹配</font>"; return false; } } function checkForm(){ var flag = checkUsername() && checkPassword() && recheckPassword() && checkMail(); return flag; } </script> </head> <body> <form action = "自动轮播图.html" onsubmit = "return checkForm()"> 用户名:<input type = "text" id = "username" onfocus = "showtips('span_username', '用户名长度不得少于六位')" onblur = "checkUsername()" onkeyup = "checkUsername()" /><span id = "span_username"></span> <br /> 密码:<input type = "password" id = "password" onfocus = "showtips('span_password', '密码长度不能少于六位')" onblur = "checkPassword()" onkeyup = "checkPassword()" /> <span id = "span_password"></span> <br /> 确认密码:<input type = "password" id = "repassword" onfocus = "showtips('span_repassword', '密码不一致')" onblur = "recheckPassword()" onkeyup = "recheckPassword()" /> <span id = "span_repassword"></span> <br /> 邮箱:<input type = "text" id = "email" onfocus = "showtips('span_email', '邮箱不可用')" onblur = "checkMail()" onkeyup = "checkMail()" /><span id = "span_email"></span><br /> 手机号:<input type = "text" id = "telphone" /> <br /> <input type = "submit" value = "提交" /> </form> </body> </html>
隔行换色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隔行换色</title> <script> /* 1. 确定事件，文档加载完成 onload 2. 事件要触发函数:init() 3. 函数:操作页面的元素 要操作表格中的每一行 动态的修改行的颜色 */ function init(){ var tab = document.getElementById("tab"); // 得到表中中的每一行 var rows = tab.rows; // 得到所有的行，然后根据奇数和偶数 for(var i = 1; i < rows.length; i++){ var row = rows[i]; // 得到其中的每一行 if(i % 2 == 0){ row.bgColor = "yellow"; }else{ row.bgColor = "red"; } } } function checkAll(){ var check1 = document.getElementById("check1"); var checked = check1.checked; // var checks = document.getElementsByTagName("input"); // alert(checks.length); var checks = document.getElementsByName("checkone"); for(var i = 0; i < checks.length; i++){ var checkone = checks[i]; checkone.checked = checked; } } </script> </head> <body onload = "init()"> <table border = "1px" width = "600px" id = "tab"> <tr> <td> <input type = "checkbox" id = "check1" onclick = "checkAll()" /> <!-- 默认选中 checked = "checked" --> </td> <td>分类ID</td> <td>分类名称</td> <td>分类商品</td> <td>分类描述</td> <td>操作</td> </tr> <tr> <td> <input type = "checkbox" name = "checkone" /> </td> <td>1</td> <td>手机数码</td> <td>小米华为</td> <td>myeclipse</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> <tr> <td> <input type = "checkbox" name = "checkone" /> </td> <td>2</td> <td>冰箱彩电</td> <td>海尔 TCL</td> <td>支持国产，从我做起</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> <tr> <td> <input type = "checkbox" name = "checkone" /> </td> <td>3</td> <td>箱子名包</td> <td>耐克，阿迪</td> <td>鞋子贵，鞋子好</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> <tr> <td> <input type = "checkbox" name = "checkone" /> </td> <td>4</td> <td>香烟酒水</td> <td>黄山，玉溪</td> <td>吸烟有害健康</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> <tr> <td> <input type = "checkbox" name = "checkone" /> </td> <td>5</td> <td>小小超市</td> <td>java,eclipxe,php</td> <td>在线教育</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> </table> </body> </html>
2. HTML DOM
DOM：Document Object Model：管理文档，增删改查规则
【HTML中的DOM操作】
一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
查找节点：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
增加节点：
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。
删除节点：
removeChild() 删除子节点。
replaceChild() 替换子节点。
修改节点：
setAttribute() 修改属性
setAttributeNode() 修改属性节点
DOM操作实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM操作</title> <script> /*动态添加 <p>文本</p>*/ function clicked(){ var div = document.getElementById("div1"); // 创建元素节点 var p = document.createElement("p"); // <p></p> // 创建文本节点 var textNode = document.createTextNode("文本内容"); // 将p标签和文本关联起来 p.appendChild(textNode); // 将p添加到目标div中 div.appendChild(p); } </script> </head> <body> <input type = "button" onclick = "clicked()" value = "点击添加文本"/> <div id = "div1"> </div> </body> </html>
省市联动案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市联动</title> <script> var provinces = [ ["深圳市", "东莞市", "广州市", "惠州市"], ["长沙市", "岳阳市", "株洲市", "湘潭市"], ["厦门市", "福州市", "潭州市", "泉州市"], ]; /* 1. 确定事件:onchange 2. 函数:selectProvince() 3. 得到当前操作元素 得到当前操作的元素 从数组中去除对于的城市信息 动太创建城市节点 添加到城市的select中 */ function selectProvince(){ var province = document.getElementById("province"); // 得到当前选中的元素 var value = province.value; var cities = provinces[value]; var cityselect = document.getElementById("city"); // 清空之前select的内容 cityselect.options.length = 0; for(var i = 0; i < cities.length; i++){ var cityText = cities[i]; // 动态创建城市节点 <option></option> var option1 = document.createElement("option"); // 创建城市文本节点 var textNode = document.createTextNode(cityText); option1.appendChild(textNode) cityselect.appendChild(option1); } } </script> </head> <body> <select onchange = "selectProvince()" id = "province"> <option value = "-1">--请选择--</option> <option value = "0">广东省</option> <option value = "1">海南省</option> <option value = "2">福建省</option> </select> <select id = "city"> </select> </body> </html>
商品的左右移动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商品的左右移动</title> <!-- 步骤分析 1. 确定事件：点击事件:onclick事件 2. 事件要触发的函数selectOne 3. selectONe要做一些操作 将左边选中的元素移动到右边select中 1. 获取左边select中被选中的元素 2. 将选中的元素添加到右边的select中 --> <script> function selectOne(){ var rightSelect = document.getElementById("rightSelect"); var leftSelect = document.getElementById("leftSelect"); var options = leftSelect.options; for(var i = options.length - 1; i >= 0; i--){ var option1 = options[i] if(option1.selected){ rightSelect.appendChild(option1); } } } function selectAll(){ var rightSelect = document.getElementById("rightSelect"); var leftSelect = document.getElementById("leftSelect"); var options = leftSelect.options; for(var i = options.length - 1; i >= 0; i--){ var option1 = options[i] rightSelect.appendChild(option1); } } </script> </head> <body> <table border = "1px red solid" width = "300px"> <tr> <td>分类名称</td> <td>手机数码</td> </tr> <tr> <td>分类描述</td> <td>都很贵</td> </tr> <tr> <td>分类商品</td> <td> <div style = "float: left;"> 已有商品 <br /> <select multiple = "multiple" id = "leftSelect" ondblclick = "selectOne()"> <option>华为</option> <option>小米</option> <option>锤子</option> <option>山寨</option> </select> <br /> <a href = "#" onclick = "selectOne()"> >> </a> <br /> <a href = "#" onclick = "selectAll()"> >>> </a> </div> <div style = "float: right;"> 未有商品 <br /> <select multiple = "multiple" id = "rightSelect"> <option>苹果</option> <option>三星</option> <option>oppo</option> <option>大哥大</option> </select> <br /> <a href = "#"> << </a> <br /> <a href = "#"> <<< </a> </div> </td> </tr> <tr> <td colspan = "2"> <input type = "submit", value = "提交" /> </td> </tr> </table> </body> </html>