js作用、基础语法和格式省略，可以百度
第3课 标识符 算数运算符 赋值运算符
3fb7479f7879fdddc10ec717b5eedbaf.png
6a07afe4c7c2e262f5e2f3d30bf684ef.png
60bc73d37ce3b8776fc16778e88b5d1c.png
JavaScript核心篇
6、判断语句 if if……else…… if……if else……else
<script type="text/javascript">
var a=40;
// if(a>50){alert("a大于50")}
//if(条件表达式){条件满足时执行内容}else{条件相反时执行的内容}
// if(a>50){
// alert("a大于50")
// }else{
// alert("a小于50")
// }
// 没有else的if时可以不使用花括号
// if(条件表达式){}else if(条件表达式){}...else{以上条件都不满足的时候执行}
var x=50;
if(x==100){
alert("甲")
}else if(x>=90){
alert("乙")
}else if(x>=80){
alert("丙")
}else if(x>=70){
alert("丁")
}else if(x>=60){
alert("及格")
}else{
alert("不及格")
}
7、for 循环
cfb52b6eaf525640c8e718160f28f2e5.png
小案例：
<script type="text/javascript">
// 开始是1岁，生命结束91岁，每1岁，都在页面中显示
for (var i = 1; i <= 99; i++) {
document.write(i+'岁');
document.write('<br>')
}
</script>
8、while循环和do while循环
小案例：把x小于等6的数值打印出来
<script type="text/javascript">
// while循环
// var x=1
// while(x<=6){
// document.write(x+"<br>");
// x++;
// }
// 把y小于等于7的数值打印出来，结果为8。
// do while循环 不管条件是否正确，先执行一遍循环体
var y=8
do{
document.write(y+"<br>");
y++;
}while(y<=7);
</script>
</body>
9、switch语句
switch语句是多重条件判断语句，用于多个值相等的比较
switch(表达式){
case常量表达式1:语句体1；
baeak //跳出循环，防止穿透
case常量表达式1:语句体1；
……
default：语句体;否则的意思，上面都不匹配
}
continue //跳过本次循环，执行循环意外的语句
<script type="text/javascript">
var box=3
switch(box){
case 1:document.write("one")
break;
case 2:document.write("tow")
break;
case 3:document.write("three")
break;
default:document.write("以上值都不匹配")
}
</script>
10、字符串（string）操作函数
<script type="text/javascript">
// 计算字符串长度
var txt="hello world"
// document.write(txt.length);
// charAt:返回一个字符值，是指定索引位置的值,从0开始
// var b=txt.charAt(3);
// document.write(b)
// 查找字符(返回的都是整数值)
// indexOf()指出字符串的开始位置
// lastIndexOf()指出最后一个字符串开始位置
// 区分大小写，没有或者大小写不一致返回+1
// var str="how do you do"
// var v1=str.indexOf("do");
// document.write(v1+'<br>');
// var v2=str.lastIndexOf("hello");
// document.write(v2+'<br>');
// substring(开始下标，结束下标)返回一个子字符串
// var a=txt.substring(2,6)
// document.write(a);
// replace(要被替换的字符串,需要被替换成字符串):字符串替换函数，只可以替换第1次出现
// var x=txt.replace("world","PHP中文网");
// document.write(x);
// concat():可以连接两个或者多个字符串;
// var text="PHP中文网"
// var y=txt.concat(text)
// document.write(y);
// substr(起始位置,长度)返回一个子字符串
// document.write(txt.substr(2,6))
</script>
11、类型相互转换
<!-- 字符转数字函数 -->
<script type="text/javascript">
var a="123"
var b=123
// string-0
document.write(a-0+"<br>");
var c=a-0
document.write(c+"<br>");
document.write(typeof(c)+"<br>");
document.write(typeof(a)+"<br>");
document.write(typeof(a-0)+"<br>");
//Number(string)
var x="456"
var y=Number(x)
document.write(Number(x)+"<br>");
document.write(typeof(y)+"<br>");
//parseInt(string)可以忽略非数字部分,找到非数字就终止,只取整数部分，忽略小数
var txt="123php中文网123"
document.write(parseInt(txt)+"<br>")
document.write(Number(txt)+"<br>"); //无法转换含非数据的
//parseFloat(string)把小数部分也取到
var box="123.2php中文网123"
document.write(parseFloat(box)+"<br>")
// 数字转字符串
// number+""添加空字符串方法
var num=12345
var num_str=num+''
// document.write(typeof(num)+"<br>")
// document.write(typeof(num_str)+"<br>")
// document.write(num+'')
// String()数字转字符串
var text=String(num)
document.write(typeof(text)+"<br>")
//number.toString()
var d=num.toString()
document.write(typeof(d)+"<br>")
</script>
12、数组Array
<body>
<!-- 数组：方便存取，并且减少内存占用，
作用：使用单独的变量名来储存一系列的值 -->
<!-- 下标(房间号)从0开始 数组总数就是最后一个下标+1 -->
<script type="text/javascript">
//创建组数
// var a=new Array()
// a=[0]=1;
// a=[1]=2;
// ……
// a[n]=n+1
// var Array(0,1,2,3,4……n);
// var a=['php','html','web']
//访问数组通过指定的数组名，以及索引号码(下标)
var a=['php','html','web'];
document.write(a[1]+"<br>");
// 二维数组
// var b=new Array(2)
// b[0]=new Array(1,2,3)
// b[1]=new Array(4,5,6)
// 创建一个二维数组，并且输出二维数组的最后一个值，再改变最后一个值将其改为100，并输出
var box=new Array(
new Array(11,12),
new Array(13,14)
)
document.write(box[1][1]);
document.write('<br>');
box[1][1]=100;
document.write(box[1][1]);
document.write('<br>');
//for in 循环
var x
var week=new Array()
week[0]='php'
week[1]='html'
week[2]='javascript'
week[3]='jQ'
for(x in week){
document.write(week[x]+'<br>');
}
</script>
13、数组操作函数（在浏览器console里查看结果）
<script type="text/javascript">
// 数组合并函数:concat()
// 结构: concat(item1,item2……)
// var a,b,c,d
// a=Array(1,2,3,4);
// b="php中文网";
// c=Array("小狗","小猫");
// d=a.concat(b,c);
// document.write(d+'<br>');
// 将数组元素变成字符串，并且以指定分割符号分割 join()
// var a,b
// a=Array(1,2,3,4)
// b=a.join('_')
// document.write(b)
// console.log(b) //在控制
// 数组排序函数 reverse() sort()
// reverse()数组元素逆向排序
// sort()数组元素按照一定规则排序
// var x,l
// x=Array(1,2,3,4)
// console.log(x.reverse())
// l=Array(1,100,3,4,1000,5,2000)
// console.log(l.sort())
// 删除元素并向数组添加新元素splice(),三个参数第一个是起始位置，第2个是要替换个数,第3个要换成的数据
// 增，删，改
// var a,b
// a=Array("jack","bill","jun")
// b=a.splice(1,0,"long")
// console.log(b)
// console.log(a)
// 从数组中返回选定的元素 slice(起始位置,end)
var a,b,c,b
a=Array("jack","bill","jun","jack","ben","week")
b=a.slice(1,3)
console.log(b)
console.log(a)
// push()向数组末尾添加一个或者多个元素，并返回一个新数组的长度
// pop() 删除并且返回数组的最后一个元素
// c=a.push('合肥')
// console.log(c)
// console.log(a)
console.log(a.pop())
console.log(a)
</script>
14、函数（function）
函数是定义一次但可以调用或者执行任意多次的一段js代码，
通过函数我们可以封装任意多条语句，并且可以在任何地方，任何位置调用执行
<script type="text/javascript">
// 函数的分类：
// 系统函数(库函数):js的内置函数，可以直接使用
// alert() 警告框
// confirm() 确认框
// prompt() 提示框
// var x="确定还是取消"
// var r=confirm(x)
// alert(r);
// var y="你叫什么名字?"
// var a=prompt(y)
// alert(a);
// 自定义函数：自己创建的有特定功能的函数
// 函数的声明
// function 函数名 (参数1,参数2,……){
// 函数体
// }
// 没有参数的函数
// function 函数名 (){
// 函数体
// }
// 函数的调用方式
// 1、直接使用函数名，并且传参数给函数全局（任意地方）
// 2、使用windows.onload=函数名(表示页面加载完成，调用该函数)
// 3、在body内部加载函数
// <body onload="函数名 ()"></body>
// 4、通过事件驱动来执行函数
// <input type="button" onclick="函数名()">
function test(name,age) {
alert("姓名为"+name+"年龄为"+age)
}
test('jack',23)
</script>
15、变量的作用域及生存周期
<script type="text/javascript">
// 局部变量：在JavaScript函数内部声明的变量我们称之为局部变量（只能在函数体内部访问它）这个边浪的作用域是局部的
// function dome() {
// var a=1 //局部变量
// }
// 全局变量：在函数外声明的变量是全局变量(网页上所有的函数和脚本都可以使用)函数体外部的变量在函数外部使用
// 也可以在内部使用，如果在函数体内想使用全局变量：加上windows对象
// 格式：window.全局变量名
var a=1 //全局变量
function aa(){
alert(window.a)
var b=2 //函数体内定义，局部变量
alert(b) //输出局部变量b
}
aa() //函数不调用就不会执行
// 变量的生存周期
// JavaScript内部的变量的生存周期从它被声明开始
// 局部变量的生存周期:函数运行以后这个变量就被删除
// 全局变量：会在当前页面关闭以后被删除
</script>
16、事件
<body>
<!-- HTML 事件触发浏览器中的动作(action),比如当用户点击某个HTML元素时启动一段JavaScript代码。下面是一个属性列表地，这些属性可以插入HTML标签来定义事件动作
属性 描述
onfocus 元素获得焦点。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按键被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上
onmouseup 鼠标按键被松开
onsubmit 确认按钮被点击
-->
<script type="text/javascript">
function myfocus(x) {
x.style.background="red"
}
function myclic(y1) {
y1.style.borderRadius="75px"
}
var y="请输入领奖电话?"
var a=prompt(y)
alert(a);
function myclic1(y1) {
y1.style.background="url(/images/jiang/1.jpg)"
}
function myclic2(y2) {
y2.style.background="url(/images/jiang/2.jpg)"
}
function myclic3(y3) {
y3.style.background="url(/images/jiang/3.jpg)"
}
function myclic4(y4) {
y4.style.background="url(/images/jiang/4.jpg)"
}
</script>
姓名：<input type="text" onfocus="myfocus(this)">
<br>
<br>
<div style="float:none;background-color:pink;" onclick="myclic(this)"></div>
<br>
<div onclick="myclic1(this)"></div>
<div onclick="myclic2(this)"></div>
<div onclick="myclic3(this)"></div>
<div onclick="myclic4(this)"></div>
</body>
17.HEML DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型(Document Obiect Model)
改变html元素的内容（操作html元素内容）
改变HTML
改变HTML的输出流
document.write()
查找HTML元素：
通过ID来查找：document.getElementById("id名");
通过class来查找：document.getElementsByClassName("calss名");
通过标签名(tag name)来查找：document.getElementsByTagName("标签名"); -->
<div id="box" style="background: #ccc;width:100px;height:100px;" onclick="box_1(this)""></div>
<img src="images/1.jpg" id="pic" style="width:400px;" onmouseover="box_2(this)" onmouseout="box_3(this)">
<script type="text/javascript">
function box_1(x) {
y=document.getElementById("box")
y.innerHTML="我是添加的内容";
x.style.borderRadius="10px";
x.style.backgroundColor="pink";
}
function box_2(x) {
document.getElementById("pic").src="images/2.jpg";
}
function box_3(x) {
document.getElementById("pic").src="images/1.jpg";
}
</script>
18、HTML DOM-改变CSS
<head>
<meta charset="UTF-8">
<title>HTML DOM-改变CSS</title>
<style type="text/css">
#box{width: 100px;height: 100px;background: pink;}
</style>
</head>
<body>
<!-- 改变css样式 -->
<!-- 语法:document.getElementById().style.属性名="属性值" -->
<div id="box"></div>
<script type="text/javascript">
box.onclick=function mydiv(x) {
y=document.getElementById("box")
y.style.background="red"
y.style.borderRadius="50%"
}
</script>
</body>
19、Date(日期操作方法)
<title>Date(日期操作方法)</title>
</head>
<body>
<script type="text/javascript">
// 日期对象时用以处理日期和时间的
// 获取当前时间
var myday=new Date()
document.write(myday+"<br>");
//获取年份 getFullYear()
document.write(myday.getFullYear()+"年");
//获取月份 getMonth() 0代表的是1月，11代表的是12月
document.write(myday.getMonth()+"月"+"<br>");
var month=new Array(12)
month[0]="一月"
month[1]="二月"
month[2]="三月"
month[3]="四月"
month[4]="五月"
month[5]="六月"
month[6]="七月"
month[7]="八月"
month[8]="九月"
month[9]="十月"
month[10]="十一月"
month[11]="十二月"
document.write("这个月是"+month[myday.getMonth()]+"<br>")
//获取星期 getDay() 0代表的是周日，6代表是星期六(返回值是0-6之间的一个整数)
document.write("今天是星期"+myday.getDay()+"<br>");
// 获取日期getDate()(返回值是0-31之间的一个整数)
document.write("今天是"+myday.getDate()+"号"+"<br>");
// 获取日期getHours()(返回值是0-23之间的一个整数)
document.write("现在是"+myday.getHours()+"时");
// 获取分钟 getMinutes()(返回值是0-59之间的一个整数)
document.write(myday.getMinutes()+"分");
// 获取秒钟 getSeconds()(返回值是0-59之间的一个整数)
document.write(myday.getSeconds()+"秒");
</script>
6682d013c191b0b4640fa1f1dbcf6211.png
以下为：JS案例篇
20、changeDIV
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>changeDIV</title>
<style type="text/css">
#box{width: 100px;height: 100px;background: red;margin: 20px 80px; }
</style>
</head>
<body>
<!-- 用按钮控制div高度、宽度、颜色、重置、隐藏、显示 -->
<script type="text/javascript">
var box
window.onload=function () {
box=document.getElementById('box')
}
function aa() {
box.style.height="400px" //改变高度
}
function bb() {
box.style.width="400px" //改变宽度
}
function cc() {
box.style.background="pink" //改变颜色
}
function dd() {
box.style.height="100px"
box.style.width="100px"
box.style.background="red"
}
function ee() {
box.style.display="none"
}
function ff() {
box.style.display="block"
}
</script>
<div id="box"></div>
<input type="button" value="变高" onclick="aa()">
<input type="button" value="变宽" onclick="bb()">
<input type="button" value="变色" onclick="cc()">
<input type="button" value="重置" onclick="dd()">
<input type="button" value="隐藏" onclick="ee()">
<input type="button" value="显示" onclick="ff()">
</body>
</html>
21、全选
<style type="text/css">
.box{width: 150px;height: 300px;border: 3px solid #ff6700;border-radius: 5px,padding:5px 10px;margin: 20px auto;}
.box div{border-top: 1px solid #ff6700;padding-top: 10px;margin-bottom: 8px;}
.box input{margin:9px;font-size: 10px;}
span{color:#ff6700;}
</style>
<script type="text/javascript">
function checkall() {
var checkall,tiem;
checkall=document.getElementById('checkall') //获取全选
item=document.getElementsByName("item[]") //获取下面的勾选框
console.log(item)
for (var i=0 ; i<item.length; i++) {
if(checkall.checked){
item[i].checked=true; //当全选框被选中时，下面的勾选框选中
}else{
item[i].checked=false; //反之取消选中
}
}
}
</script>
</head>
<body>
<div class="box">
<input type="checkbox" name="item[]"><span>选项1</span><br>
<input type="checkbox" name="item[]"><span>选项2</span><br>
<input type="checkbox" name="item[]"><span>选项3</span><br>
<input type="checkbox" name="item[]"><span>选项4</span><br>
<input type="checkbox" name="item[]"><span>选项5</span><br>
<input type="checkbox" name="item[]"><span>选项6</span><br>
<input type="checkbox" name="item[]"><span>选项7</span><br>
<input type="checkbox" name="item[]"><span>选项8</span><br>
<div>
<input type="checkbox" id="checkall" onclick="checkall()" name=""><label for="checkall">全选</label>
</div>
</div>
</body>
22-23、微博输入字数检查
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微博输入</title>
<style type="text/css">
body{font-size: 12px;}
.box{width: 600px;height: 160px;border:8px solid pink;margin:0px auto;padding: 10px;}
img{float: left;}
.box1 {float:left;margin-left: 255px;width: 150px;height: 24px;text-align: right;font-size: 10px;color: #888;}
.box1 span{font-size:16px;font-weight: bold;}
#text{width: 600px;height: 100px;border:1px solid #888;margin-top: 5px;}
.box #sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float:left;width: 30px;height: 32px;line-height: 32px;padding-left: 26px;}
#sp1{background: url(img/an5.png) no-repeat left center;}
#sp2{background: url(img/an4.png) no-repeat left center;}
#sp3{background: url(img/an3.png) no-repeat left center;}
#sp4{background: url(img/an2.png) no-repeat left center;}
#sp5{background: url(img/an1.png) no-repeat left center;width: 40px;}
#sp6{margin-left: 150px;margin-right: 15px;color: #888;}
#bt{float:left;width: 80px;height: 30px;border: none;background: #ffc09f;color: #fff;border-radius: 5px;}
</style>
<script type="text/javascript">
var text,number,m
window.onload=function(){
text=document.getElementById('text')
number=document.getElementById('number')
bt=document.getElementById('bt')
text.onkeyup=function aa(){
m=140-text.value.length //微博限制字数是140
if(m<0){
number.style.color="red"
}else{
number.style.color="#888"
}
number.innerHTML=m;
}
bt.onclick=function(){
if(m==140){
alert("你还没有输入")
text.focus() //这里是什么意思
}else if(m<0){
alert("字数太多，不可以发布")
text.focus()
}else{
alert("发布成功")
}
}
aa() //这个地方不太理解
}
</script>
</head>
<body>
<div>
<img src="img/12.png">
<div>还可以输入<span id="number">字</span></div>
<textarea id="text"></textarea>
<span id="sp1">表情</span>
<span id="sp2">图片</span>
<span id="sp3">视频</span>
<span id="sp4">话题</span>
<span id="sp5">长微博</span>
<span id="sp6">公开</span>
<input type="button" value="发布" id="bt">
</div>
</body>
</html>
468b0567b085cea14d78890718e4de17.png
网友评论