Day03-jS
javaScript概述
什么是javaScript：javaScript是一种直译式脚本语言。直接解释执行的语言。 什么是脚本语言？ . java源代码--->编译成.class文件 --->java虚拟机中才能执行 . 脚本语言：源码 ---->解释执行 . js由我们的浏览器解释执行
HTML：决定了页面的框架
CSS：用来美化我们的页面
JS:提供用户的交互，是灵魂
JS的组成:
ECMAScript : 核心部分 ,定义js的语法规范
DOM: document Object Model 文档对象模型 , 主要是用来管理页面的
BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高
JS的语法
变量弱类型:var i = true
区分大小写 ， 语句结束之后的分号 可以有，也可以没有
要求写在script标签内
JS的数据类型
基本数据类型
- string
- number
- boolean
- undefine
- null
引用数据类型
- 对象， 内置对象
类型转换
- js内部自动转换
JS的运算符和语句
运算符和java一样
"===" 全等号: 值和类型都必须相等
== 值相等就可以了
语句和java大致一样
js中无逻辑单与和逻辑单或，函数不支持重载
null 属于Object类型。
NaN 不是一个数字，但是属于number类型。
var aa ="哈喽";
alert(typeof(aa)); //这样赋值的就是String类型
var v = new String();//直接new出来的就是Object类型
alert(typeof(v));
- 案例：求偶数和
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// document.write("哈喽");
var num =0;
for (var a =0;a<=100;a++) {
if (a%2==0) {
num+= a;
}
}
alert(num);
document.write(num)
</script>
</head>
<body>
</body>
</html>
JS的输出
- alert() 直接弹框
- document.write() 向页面输出
- console.log()向控制台输出
- innerHTML:向页面输出，可以改变内容
JS声明变量和函数
var 变量的名称 = 变量的值
var 函数的名称 = function(){
• }
• function 函数的名称(){
• }
JS的开发步骤
1. 确定事件
2. 通常事件都会出发一个函数
3. 函数里面通常都会去操作页面元素,做一些交互动作，弹框。修改页面，动态添加一些东西
选择器：
元素选择器: 元素的名称{}
• 类选择器: . 加类名{}
• ID选择器: #ID选择器{}
• 后代选择器: 选择器1 选择器2
• 子元素选择器: 选择器1 > 选择器2
• 选择器分组: 选择器1,选择器2,选择器3{}
• 属性选择器: 选择器[属性的名称='属性的值']
• 伪类选择器:选择器分组: 选择器1,选择器2,选择器3{}
属性选择器: 选择器[属性的名称='属性的值']
伪类选择器:
浮动:
适应于div块 左右排版
float 属性: left right
清除浮动:
clear 属性: both left right
盒子模型: 上右下左 padding 10px 20px 30px 40px 顺时针的方向
内边距: 控制的盒子内距离
边框: 盒子的边框
外边距: 控制盒子与盒子之间的距离
绝对定位: position : absolute; top: left
定时器
- setInterval("test()",3000) 每隔多少毫秒执行一次函数 循环函数
- setTimeout("test()",3000) 多少毫秒之后执行一次函数 一次性函数
- timerID 上面定时器调用之后
- clearInterval() 清除循环函数定时器
- clearTimeout() 清除一次性定时器 。一般不用
切换图片
img.src = "图片路径"
事件：文档加载完成的事件 onload事件
显示广告 ，隐藏广告 :调用display的功能。
var img =document.getElementById("id");
img.style.display = "block";
img.style.display = "none"
引入外部JS文件
<script src="js文件的路径" type="text/javascript"/>
//需要注意的是：当从外部引入后 script中再写js代码就不会生效。
内部引入 ：
直接在文件中任何位置：<script>在这里写js</script> 复选框中 checked = true ；代表选中状态
checked = false 代表未选中状态。
表单中常用的事件：
onfocus: 获取焦点事件
onblur : 失去焦点的事件
onkeyup: 按键抬起的事件
onclick: 单击事件
ondblclick: 双击事件
表格隔行换色,鼠标移入和移除要变色:
onmouseenter: 鼠标移入
onmouseout: 鼠标移出
onload: 文档加载完成事件
onsubmit: 提交
onchange: 下拉列表内容改变
checkbox.checked 选中状态
DOM的文档操作:
添加节点: appendChild
创建节点: document.createElement
创建文本节点: document.createTextNode()
点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 可以传参数
function fun1 (x) {
alert("我被单击了！！"+x);
}
function fun2 () {
alert("我被单机了！！哈哈哈");
}
function fun3 () {
alert("我被双击了！！哈哈哈");
}
</script>
</head>
<body>
<input type="button" value="点击" name="按钮" onclick="fun1(100),fun2()" />
<input type="button" value="双击" ondblclick="fun3()" />
</body>
</html>
#案例一 ，校验#
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/01.css" />
<script>
/*
1.确定事件：表单提交事件 onsubmit事件
2.事件所要触发的函数: checkForm
3. 函数中要执行一些程序
1. 函数中再创建一个方法统一判断用户名，密码，确认密码 是否为空，直接 调用这个函数。
*/
function checkForm(){
//校验用户名是否为空
var v1 = checkFormIsNull("username","用户名");
//校验密码是否为空
var v2 =checkFormIsNull("pwd","密码");
//校验确认密码是否为空
var v3 =checkFormIsNull("repwd","确认密码");
if(v2 && v3 ){
//获取密码的值
var pas = document.getElementById("pwd").value;
//获取确认密码的值
var repas = document.getElementById("repwd").value;
//判断是否一致
if(pas != repas){
alert("两次密码输入不一致！！");
return false;
}
}
var v4 = document.getElementById("email").value;
if(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(v4)){
alert("邮箱验证通过");
}else{
alert("邮箱验证错误");
return false;
}
//要验证的四个有一个不对就错 。
return v1 && v2 && v3 && v4;
}
function checkFormIsNull(id,msg){
//验证用户名,密码，确认密码 是否为空
var ele =document.getElementById(id);
var val = ele.value;
if(val == ""){ //此处不能写null 。
alert(msg+"不能为空！！！");
return false;
}
return true;
}
</script>
</head>
<body>
<div id="divFormId">
<form onsubmit="return checkForm()" action="#" method="get">
<table width="500">
<tr>
<td colspan="3">
<font color="#3164af" size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input type="text" id="username" name="username" size="50"/> </td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input type="password" id="pwd" name="pwd" size="50"/> </td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input type="password" id="repwd" name="repwd" size="50"/> </td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input type="text" id="email" name="email" size="50"/> </td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" id="name" name="name" size="50"/> </td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="image" src="/day03/img/submit.jpg" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
#案例二，隐藏广告 #
<!DOCTYPE html>
<html>
<head>
<!--页面刚加载完成后，先隐藏图片属性，两秒后显示，过两秒后再消失。-->
<meta charset="UTF-8">
<title></title>
<style>
.hmig{
display: none;
}
.sowImg{
display: block;
}
</style>
<script>
function showImg(){
//1.选中广告的这个图片
var obj = document.getElementById("pac");
//2.修改class的值。切换为块，显示状态
obj.className="sowImg";
//2秒后隐藏起来
setTimeout("hiddImg()",2000);
}
function hiddImg(){
var obj = document.getElementById("pac");
//2.修改class的值，使其切换成none值
obj.className="hmig";
}
</script>
</head>
<body onload="setTimeout('showImg()',2000)">
//选择一张图片作为广告。
<img src="../img/3.jpg" id="pac" class="hmig" width="100%"/>
</body>
</html>
隐藏广告的修改版本：
<!DOCTYPE html>
<html>
<head>
<!--页面刚加载完成后，先隐藏图片属性，两秒后显示，过两秒后再消失。-->
<meta charset="UTF-8">
<title></title>
<style>
.hmig{
display: none;
/*display: block;*/
}
</style>
<script> function showImg(){
//1.选中广告的这个图片
var obj = document.getElementById("pac");
//2.修改class的值。切换为块，显示状态 obj.style.display="block";
//2秒后隐藏起来
setTimeout("hiddImg()",2000);
}
function hiddImg(){
var obj = document.getElementById("pac");
obj.style.display="none";
}
</script>
</head>
<body onload="setTimeout('showImg()',2000)">
<img src="../img/3.jpg" id="pac" class="hmig" width="100%"/>
</body>
</html>
#案例三，轮播图#
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var count =1;
function changeImg (){
//获取img元素
var img =document.getElementById("lbt");
//修改src的属性
img.src ="/day03/img/"+(++count)+ ".jpg";
//当count = 3时 归零
if(count ==3){
count =0;
}
}
</script>
</head>
<body onload="setInterval('changeImg()',2000)">
<img id="lbt" src="../../img/1.jpg" width="100%"/>
</body>
</html>
表单验证
表单验证是为了减轻负担，每次提交只有提交符合才能正确提交上去。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/01.css"/>
<script>
function checkForm(){
//每次验证需要先把span标签内容给清空 !!要不然会一直显示错误提示。。切记
var uele = document.getElementById("usernameMsg");
var pele = document.getElementById("pwdMsg");
var rele = document.getElementById("repwdMsg");
uele.innerHTML="";
pele.innerHTML="";
rele.innerHTML="";
//校验用户名是否为空
var v1 = checkFormIsNull("username","用户名");
//校验密码是否为空
var v2 =checkFormIsNull("pwd","密码");
//校验确认密码是否为空
var v3 =checkFormIsNull("repwd","确认密码");
if(v2 && v3 ){
//获取密码的值
var pas = document.getElementById("pwd").value;
//获取确认密码的值
var repas = document.getElementById("repwd").value;
//判断是否一致
if(pas != repas){
//alert("两次密码输入不一致！！");
var rele =document.getElementById("repwdMsg");
rele.innerHTML="<font color='red'>两次密码输入不一致！！</font>"
return false;
}
}
var v4 = document.getElementById("email").value;
if(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(v4)){
}else{
// alert("邮箱验证错误");
var vu = document.getElementById("emailMsg");
vu.innerHTML="<font color='red'>邮箱格式输入错误！！</font>"
return false;
}
return v1 && v2 && v3 && v4;
}
function checkFormIsNull(id,msg){
//验证用户名,密码，确认密码 是否为空
var ele =document.getElementById(id);
var val = ele.value;
if(val == ""){
//1.获取span的标签
var span = document.getElementById(id+"Msg");
//2.设置内容体
span.innerHTML="<font color='red'>"+msg+"不能为空！！</font>"
return false;
}
return true;
}
</script>
</head>
<body>
<div id="divbg">
<div class="divFormed">
<form onsubmit="return checkForm()" action="#" method="get">
<table width="500px">
<tr>
<td colspan="3">
<font color="#3164af" size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input type="text" id="username" name="username" size="50"/> </td>
<td><span id="usernameMsg"></span></td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input type="password" id="pwd" name="pwd" size="50"/> </td>
<td><span id="pwdMsg"></span></td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input type="password" id="repwd" name="repwd" size="50"/> </td>
<td><span id="repwdMsg"></span></td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input type="text" id="email" name="email" size="50"/> </td>
<td><span id="emailMsg"></span></td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" id="name" name="name" size="50"/> </td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="image" src="../../img/submit.jpg" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
InnerHtml和InnerText的区别：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function run1(){
var span1 = document.getElementById("sss");
alert(span1.innerHTML); //innerHTML 输出会全输出
alert(span1.innerText); //innerText 输出只输出文本内容。
}
function run2(){
var span2 = document.getElementById("sss");
//innerText 只能设置普通的文本形式
span2.innerText="大家好，才是真的好！！！"
//只有innerHTML 可以设置样式，字体等格式和html一样
span2.innerHTML="<font color='red'>你好啊</font>";
}
</script>
</head>
<body>
<span id="sss">
<font color="red">今天是8月12号！！</font>
</span>
<input type="button" onclick="run1()" value="获取span内容"/><br />
<input type="button" onclick="run2()" value="设置span内容"/>
</body>
</html>
隔行换色j加上全选，全不选，反选按钮
<!DOCTYPE html>
<html>
<head>
<style>
.sss{
background: lightseagreen;
}
</style>
<meta charset="UTF-8">
<title></title>
<script>
function fun2() {
//1.获取所有复选框对象
var arr = document.getElementsByClassName("itemSelect");
//2.将其状态改为选中。
for (var i =0;i<arr.length;i++) {
arr[i].checked = true;
}
}
function fun3() {
//1.获取所有复选框对象
var arr = document.getElementsByClassName("itemSelect");
//2.将其状态改为全不选。
for (var i =0;i<arr.length;i++) {
arr[i].checked = false;
}
}
function fun4() {
//1.获取所有复选框对象
var arr = document.getElementsByClassName("itemSelect");
//2.将其状态改为反选。
for (var i =0;i<arr.length;i++) {
arr[i].checked = !arr[i].checked;
// if (arr[i].checked ) {
// arr[i].checked = false;
// } else{
// arr[i].checked = true;
// }
}
}
function changeColor(){
//1.先获取所有的行
var line = document.getElementsByTagName("tr")
//2.晒选出所有的偶数行
for(var i =1;i<line.length;i++){
if(i %2==0){
//2.将其背景颜色修改为蓝色
line[i].className="sss";
}
}
}
</script>
</head>
<body onload="changeColor()">
<table border="1" cellpadding="0" cellspacing="0" width="80%">
<tr>
<th>
<input type="button" value="全选" onclick="fun2()"/>
<input type="button" value="全不选" onclick="fun3()"/>
<input type="button" value="反选" onclick="fun4()"/>
</th>
<th>序号</th>
<th>商品名称</th>
<th>商品描述</th>
<th>操作</th>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect"/>
</td>
<td>1</td>
<td>手机数码</td>
<td>手机数码商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr class="sss">
<td>
<input type="checkbox" class="itemSelect"/>
</td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect"/>
</td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect"/>
</td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table> </body>
</html>
省市二级联动：
主要掌握好 onchange :下拉列表内容改变 这个事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
// 定义二维数组,存储城市信息
var cities = new Array();
cities[0] = new Array("海淀区","昌平区","朝阳区");
cities[1] = new Array("郑州市","商丘市","开封市","洛阳市","平顶山市");
cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");
function changeCity(val){
//val 是省份的下标
//根据下标再继续获取城市，再继续获取城市的对象
var arr = cities[val];
var city = document.getElementById("city");
//切记先清空城市这一栏的信息。要不然会一直叠加上个省份的城市
city.innerHTML="<option value=''>----请-选-择-市----</option>"
for(var i =0;i<arr.length;i++){
//city.innerHTML=arr[i];
var temp ="<option>"+arr[i]+"</option>";
city.innerHTML +=temp; //追加，要不然会被最后一个覆盖。
}
}
</script>
<body>
<select id="province" onchange= "changeCity(this.value)" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">河南省</option>
<option value="2">山东省</option>
<option value="3">河北省</option>
<option value="4">江苏省</option>
</select>
<select id="city" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
</body>
</html>
Day03-jS的更多相关文章
- 超全面的JavaWeb笔记day03<JS对象&函数>
1.js的String对象(****) 2.js的Array对象 (****) 3.js的Date对象 (****) 获取当前的月 0-11,想要得到准确的月 +1 获取星期时候,星期日是 0 4.j ...
- Day03 javascript详解
day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...
- day-03（js）
回顾: css: 层叠样式表 作用: 渲染页面 提供工作效率,将html和样式分离 和html的整合 方式1:内联样式表 通过标签的style属性 <xxx style="...&qu ...
- js day03
一)jQuery常用AJAX-API 目的:简化客户端与服务端进行局部刷新的异步通讯 (1)取得服务端当前时间 简单形式:jQuery对象.load(url) 返回结果自动添加到jQuery对象代表的 ...
- js下 Day03、DOM操作--节点方法
语法:parentNode.appendChild(child) 功能:向父节点的子节点列表的末尾添加新的子节点 语法:parentNode.removeChild(child) 功能:从子节点列表中 ...
- Node.js 自学之旅
学习基础,JQuery 原生JS有一定基础,有自己一定技术认知(ps:原型链依然迷糊中.闭包6不起来!哎!) 当然最好有语言基础,C#,java,PHP等等.. 最初学习这个东西的原因很简单,在园子里 ...
- JS的解析与执行过程—全局预处理阶段之全局词法环境对象
问题:有如下代码 var a = 1; function pop() { alert(a); var a = 5; } pop();//执行结果,弹出undefined 这段代码的执行结果为undef ...
- Node.js 自学之旅(初稿篇)
学习基础,JQuery 原生JS有一定基础,有自己一定技术认知(ps:原型链依然迷糊中.闭包6不起来!哎!) 当然最好有语言基础,C#,java,PHP等等.. 最初学习这个东西的原因很简单,在园子里 ...
- day03 Django目录结构与reques对象方法
day03 Django目录结构与reques对象方法 今日内容概要 django主要目录结构 创建app注意事项(重点) djago小白必会三板斧 静态文件配置(登录功能) requeste对象方法 ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
随机推荐
- Mac安装ipython与jupyter
Python从Python发展而来,更倾向于科学计算.互联网数据分析更喜欢用. 首先切换root用户: sudo su - pip3自动安装ipython yuchaodeMacBook-Pro:~ ...
- Linux常用命令及操作
shutdown -r now现在重启 shutdown -h now现在关机 reboot重启 startx进入图形界面 chmod +x 777 文件名 授权和可执行 777为二进制111-111 ...
- MQTT通配符
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- leetcode 51 N皇后问题
代码,由全排列转化而来,加上剪枝,整洁的代码: 共有4个变量,res(最终的结果),level,当前合理的解,n皇后的个数,visit,当前列是否放过皇后,由于本来就是在新的行方皇后,又通过visit ...
- 配置Toad链接远程Oracle数据库
当前环境: 本机系统:Win7 64位 Toad版本:11 32位 数据库:Oracle 10g =================================== 与PLSQL Develope ...
- 二十：jinja2之加载静态文件
静态文件: flask默认指定的静态文件路径为根目录下的static,可以自定义路径,并指定,使用url_for('文件夹', filename='文件名')引用 加载css文件 加载js文件 其他文 ...
- 模糊查询基于select遍历json文件自动填充的实现
HTML页面 <tr> <td align="left"><span>案由</span> <input type=" ...
- fcitx无法切换到中文(manjaro)
安装fcitx后不能切换到中文输入法,在.bashrc或者.profile中添加以下代码: #fcitx export GTK_IM_MODULE=fcitx export QT_IM_MODULE ...
- java：Servlet（Create，LifeCycle，ServletWeb.xml文件的配置，交互式，Tomcat文件分析，单例安全模式）
1.Servlet: Servlet 的主要功能在于交互式地浏览和修改数据,生成动态 Web 内容.这个过程为: 客户端发送请求至服务器端: 服务器将请求信息发送至 Servlet: Servlet ...
- vue-cli本地环境API代理设置和解决跨域
前言 我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cooki ...