js基础
js的语句
- if语句
var a=5;
if (a==5)
{
alert("5"); //弹出警告框
}
else{
alert("a=6");
}
- switch语句
var b=6;
switch(b)
{
case 3:
alert("3");
break;
case6:
alert("6");
break;
default:
alert("error");
break;
}
- 循环语句
- while循环
var i =5;
while(i>1){
alert(i);
i--;
}
- for循环
for(var mm=0;mm<=5;mm++)
{
alert(mm);
}
- do while循环
js的运算符
var j=123;
alert(j/1000*1000);
//java中123/1000等于0 0.123=0
//JavaScript中不区分整形和浮点型,javascript中=123
var str='456';
alert(str+1);输出4561
alert(str-1);输出455
//当str是字符时，输出错误提示
bool类型中ture=1，false=0
= = 比较值
=== 比较值和类型
document.write(" 文本内容 ");
//可以把文字直接输出在网页上 包括HTML代码,变量
- 例：document.write("
")
案例1 九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九九乘法表</title>
</head>
<body>
<script type="text/javascript">
document.write("<table>");
for(var i =1;i<=9;i++)//行中循环
{
document.write("<tr>");
for(var j=1;j<=i;j++)//列循环
{
document.write("<td>");
document.write(j+"*"+i+"="+i*j);
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>")
</script>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200718204617747.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djbm1xbXpu,size_16,color_FFFFFF,t_70
js的数组
var arr = [1,2,"3"];
//第一种方式定义数组
var arr1 = new Array(3);
arr1[0]="a";
arr1[1]="b";
arr1[2]="c";
//第二种方式
var arr2 = new Array(6,7,8);
//第三种方式
- 数组的属性
length
js的函数（方法）
- 定义方法
//第一种方式
/* function 方法名（参数列表）
{
方法体；
返回值可有可无；
}
*/
function add(a,b)
{
var sum = a+b;
return sum;
//alert(sum);
}
//第二种方式 匿名函数
/*
function (参数列表)
{
方法体和返回值;
}
*/
var add = function(m,n){
alert(m+n);
}
add(3,4)
//第三种方式
/*
var add =new Fuction("参数列表"，"方法体和返回值");
*/
var add = new Fuction("x,y","var sum;sum=x+y;return sum;");
alert(add(2,5));
js的全局变量与局部变量
- 全局变量：在script标签里定义的一个变量，在页面的所有js部分都可以使用
- 局部变量：在方法体内部定义，只能在方法体内部使用
script标签的位置
原则上可以放在任何位置，但是HTML是从上到下解析，一般放在后面
js的string对象
- 创建String对象
var set="str";
- 方法和属性
- length属性
- 方法
（1）与HTML相关的方法
- 对象名.bold() 加粗
- font color字体颜色
- .link（url）将字符串显示为超链接
…
等
（2）与Java相似的方法
- concat方法 字符串连接 对象名.concat.(对象名)
- charAt方法 返回指定位置的字符串
- indexOf方法 返回字符串中字符的位置
js的data对象
- 在Java里获取时间
Data date = new Date();
var date = new Date();//英文格式
//转换成习惯的格式
document.write(data.toLocaleString());
js的全局函数
== 由于不属于任何一个对象，直接写名字使用 ==
eval（）：执行js代码（如果字符串是一段js代码可以直接执行）
encodeURL（）：对字符进行编码
decode URL（）：对字符进行解码
isNaN（）：判断字符是否是数字，是则返回false
js的重载
- 重载的定义
函数名相同，参数不同。 - js中不存在重载
js中只会执行同名函数中的最后一个，所以它不存在重载，但是它可以模拟重载的情景 例如aruguments会把传递的参数保存在aruguments数组中。
js高级
dom简介
- dom操作元素
1.获取元素对象 document.getElementById("id值");
2.改变属性值 / 改变文本内容
img --> src
h1 -->innerHTML
- 事件简介
1.事件：在特定的操作下触发某个函数的执行 。 如：地雷，只有踩到了才会爆炸。
2.给元素绑定事件有两种方式：
1.直接在元素标签上写,如：<img id="img1" src="" οnclick="fun1();">
2.在js代码中获取元素对象，用匿名函数实现事件：
如： var img1=document.getElementById("img1");
img1.οnclick=function(){
alert("hello");
}
//img1.οnclick=fun1;
- 电灯开关案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script>
/*
分析：
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
* 规则：
* 如果灯是开的 on,切换图片为 off
* 如果灯是关的 off,切换图片为 on
* 使用标记flag来完成
*/
//1.获取图片对象
var light = document.getElementById("light");
var flag = false;//代表灯是灭的。 off图片
//2.绑定单击事件
light.onclick = function(){
if(flag){//判断如果灯是开的，则灭掉
light.src = "img/off.gif";
flag = false;
}else{
//如果灯是灭的，则打开
light.src = "img/on.gif";
flag = true;
}
}
</script>
</body>
</html>
bom学习
1.window对象
无需创建，直接使用
1.弹框方法：
1.alert(); --警告框： 弹框页面只有一个确定按钮
2.confirm(); -- 确认框：弹框页面有一个确定按钮，一个取消按钮
3.prompt(); -- 输入框： 弹框页面有一个提示信息和输入框，还有一个确定按钮，一个取消按钮
2.打开和关闭窗口的方法：
1.open(); 开启一个新的窗口 ，参数就是 新窗口的url，返回值就是一个新窗口对象
可以设置第三个参数，设置窗口的宽和高 "width=300px,height=300px"
2.close(); 关闭窗口，什么窗口对象调用该方法，就关闭什么窗口
3.定时器方法
1.setTimeOut(参数1，参数2):一次性定时器，
参数1：js代码或函数名 参数2：毫秒数
返回值 就是当前这个定时器的编号id
2.clearTimeOut(参数); 取消一次性定时器
参数：某个一次性定时器的返回编号id
3.setInterval(参数1，参数2): 循环定时器
参数1：js代码或函数名 参数2：毫秒数
返回值 就是当前这个定时器的编号id
4.clearInterval(参数); 取消循环定时器
参数：某个循环定时器的返回编号id
注意： setInterval(fun1,3000);
setInterval("fun1()",3000);
4.获取子对象
window.document; -- dom
window.location; -- bom
window.history; -- bom
window.navigator; -- bom
window.screen; -- bom
- 案例1–弹框
<body>
<input type="button" value="退出" οnclick="fun1();">
</body>
<script>
/*
* 1.点击 退出时，有提示信息：真的要走吗？ 点击 确定和取消
* 2.点击确定：又会继续问你：请留下您的宝贵意见： 点击取消：谢谢您留下来
*
* */
function fun1() {
var f=confirm("真的要走吗？");
if(f){//确定
var msg=prompt("请留下您的宝贵意见：")
console.log(msg);
}else {//取消
alert("谢谢您留下来");
}
}
</script>
- 案例2–开关窗口
<body>
<input type="button" value="开启" id="btn1">
<input type="button" value="关闭" id="btn2">
</body>
<script>
//一.实现打开新窗口：
//1.获取开启按钮的对象
var btn1=document.getElementById("btn1");
//2.给btn1绑定一个点击事件
var newWin;
btn1.οnclick=function () {
//3.点击事件中去开一个新窗口,返回的是新的窗口对象
newWin=window.open("1.弹框小案例.html","无用参数","width=300px,height=300px");
}
//二.实现关闭新窗口：1.获取关闭按钮的对象 2.给btn2绑定一个点击事件
var btn2=document.getElementById("btn2");
btn2.οnclick=function () {
//3.点击事件中去关闭新窗口
newWin.close();
}
</script>
2.location对象
表示网页的地址栏
方法：
reload(); -- 重新载入当前页面， 刷新网页
assign(); -- 载入一个新页面 ，跳转到其它页面 -- 超链接也有该功能
属性：
href -- location.href="url网址"; -- 超链接也有该功能
- 案例–自动跳转首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转首页</title>
<style>
p{
text-align : center;
}
span{
color:red;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒之后,自动跳转首页...
</p>
<script>
//获取倒计时秒数
var time = document.getElementById("time");
var second = 5;
function showTime(){
second -- ;
if(second <= 0){
//时间到了，跳转首页
location.href = "https://www.baidu.com";
}
//把当前秒数放在span标签内容中显示
time.innerHTML = second;
}
//设置定时器 -- 每一秒执行一个showTime函数
setInterval(showTime,1000);
</script>
</body>
</html>
3.history对象
记录并存储当前窗口的浏览的历史记录
方法：
back();-- 后退一页
forward();-- 前进一页
go(参数);
参数：1 相当于forward()
参数：-1 相当于back()
dom学习
- 核心dom–document对象
1.思想：把html中的每一个部分都看成是对象：元素对象，文本对象，属性对象；
2.获取元素对象的方法：
1.getElementById("id值");--参数：id值 返回值：元素对象
2.getElementsByTagName("标签名");-- 参数：标签名 返回值：元素对象数组
3.getElementsByClassName("class属性值");-- 参数：class属性值 返回值：元素对象数组
4.getElementsByName("name属性值");-- 参数：name属性值 返回值：元素对象数组
3.创建元素对象和文本对象的方法：
1.document.createElement();创建元素对象
2.document.createTextNode();创建文本对象
- element对象
1.设置属性：
1.setAttribute(参数1，参数2); --给某个元素设置某个属性，参数1：属性名 参数2：属性值
2.removeAttribute(参数); --移除元素的某个属性，参数：属性名
2.追加和删除子节点
1.appendChild();向最后一个子节点的末尾去添加一个元素节点对象
2.removeChild();删除某一个子节点对象
3.replaceChild();替换某个子节点对象
3.属性：parentNode： 获取某个节点的父节点对象
- dom操作样式
1.元素对象.style.样式属性=属性值； 如：document.getElementById("div1").style.fontSize="20px";
2.提前在head标签中定义style标签，将固定的样式显示写好。
在去获取某个元素对象，元素对象.calssName="样式名";
- 动态表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" value="" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table id="table">
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
</table>
</body>
<script>
/*1.获取用户输入的编号值*/
document.getElementById("btn_add").onclick=function () {
var id=document.getElementById("id").value;
console.log(id);
var text_id=document.createTextNode(id);//把编号变成文本节点对象
var td_id=document.createElement("td");
td_id.appendChild(text_id);
var tr=document.createElement("tr");
tr.appendChild(td_id);
var table=document.getElementById("table");
table.appendChild(tr);
}
/*2.删除 父节点对象.removeChild(子节点对象);
a标签的href属性：如果是空字符串：表示跳转到当前页面。功能就是刷新当前页面
*/
function del(e) {
//通过超链接a节点对象获取 父元素的父元素。。。tr和table
var table=e.parentNode.parentNode.parentNode;
var tr=e.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</html>
扫一扫
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
