- js基础
- js的代码需要编译才能运行,js编写的程序运行在:浏览器中
- 每个浏览器中都有js运行引擎,chrom: V8引擎
- jsp必须在html中才能运行
- ｊｓ严格区分大小写
- jsp主要设计网页的行为
- js的三个组成
- ECMAScript:前端开发的一个标准;JS是其标准的一种实现.
- 版本:ES5
- DOM:document object model 文档对象模型,js需要借助DOM才能进行页面的动态操作
- BOM:browser object model ：浏览器对象模型 ｂｏｍ包含ｄｏｍ
- ECMAScript:前端开发的一个标准;JS是其标准的一种实现.
目录
从整个dom树上选择我们想要操作的对象，在dom中提供了两种方式：调用doc对象的相关方法
-
ｊｓ在网页中的位置和结合方式；
-
ｊｓ代码的编写位置，
-
.写到标签的属性中
- 这么写标签和代码强耦合
-
-
在ｈｅａｄ里面写ｊｓｐ
- ａｌｅｒｔ是一个阻塞的方法，浏览器是自顶向下执行的
- ｓｃｒｉｐｔ可以写在任意位置；但是在不同的位置执行顺序不一样；一般放在＜／ｂｏｄｙ＞之前
-
ｊｓ代码和网页在同一个文件；
- 将ｊｓ代码单独设计到一个文件中，引入．ｊｓｐ文件
- 如果通过ｓｒｃ指定外部ｊｓ文件之后，ｓｃｒｒｉｐｔ标签中编写的脚本会被浏览器忽略
- 将ｊｓ代码单独设计到一个文件中，引入．ｊｓｐ文件
-
- ｊｓｐ代码以分号结束
- ｊｓｐ是一种解释型语句；但是与ｊａｖａ不同，是编译一条执行一条
- 可以用一个ａｌｅｒｔ进行代码调试，手动调试
- ｊｓｐ的三种输出方式
- ａｌｅｒｔ（内容）必须点击之后才会运行
- ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（输出内容）
- ｃｏｎｓｏｌｅ．ｌｏｇ（.内容）将内容往控制台输出
js变量的使用
- '不能写强类型 统一用var指定 . var可以存储任何 类型的数据,同一个变量中,在程序执行过程中发生变化.
- js中变量命名不能有非法字符,不能以数字开头,不能用关键字
alert弹两次
大括号不起作用- 在es6中对有问题的语法更改；通过 let 进行变量的声明
js的变量数据类型
- 弱类型不代表无类型 可以用typeof进行测试类型
- js一共有6种数据类型 ：1.number 类型用来表示数值，不区分浮点和整型
- 2.String 类型 表示文本类型，没有字符和字符串之分 单引号和双引号完全一样；双引号内用单引号
- 3.boolean类型 表示逻辑值
- 4.null 空对象 搞对象唯一取值null
- 5.undefined 表示定义了没有被付值；不付值默认是undefined
- 6.object类型 对象类型
- 2.String 类型 表示文本类型，没有字符和字符串之分 单引号和双引号完全一样；双引号内用单引号
- 运算符
- 算数运算符，付值运算符 ，关系运算符，逻辑运算 三目运算符 与java一模一样
- 和Java不同点：js中进行两个数据相等比较时会自动转换。
- “123”==123 为true 发生了自动转换， null==undefine 为true
- 进行精确的比较：=== 要求值相同，而且类型也要求一样才能为true
- 流程控制结构
- if else if() switch break.. while do while for break continue...
- 和java不同点：js的条件；可以是任何类型的数据。
- js中提供了两个类型转换函数
- parseint 将传入的文本或者小数转成整数；parsefloat 将文本或数值转换成小数
- 输入：prompt 弹出一个输入框，接收用户的输入，
案例：乘法表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsp</title>
<style>
table{border: 1px solid gray;}
td{border: 1px solid gray;}
</style>
</head>
<body>
<script type="text/javascript">
document.write("<table>")
for(var i =1 ; i<10;i++)
{
document.write("<tr>")
for(var j=1;j<=i;j++)
{
document.write("<td>")
var temp=0;
temp=i*j;
document.write(i +"*"+j+"=" + temp + " ");
document.write("</td>")
}
document.write("</tr>")
document.write("<br>")
}
document.write("</table>")
</script>
<script type="text/javascript">
//随机产生1-100整数
var num=parseInt(Math.random()*100) ;
alert(num);
var temp=0;
while(true){
//输入一个文本转换成整数
var cai = parseInt(prompt("猜的数"),0);
if(cai===num)
{alert("猜对了");
break;}
tmep++;
}
if(temp<=3)
{alert("666");}
else if(temp<=6)
{alert("还可以")}
else{alert("不对")}
</script>
</body>
</html>
document.write("<table>")：编译器自动解析
js中的函数（重点）
- 类似java代码；分为有参函数；无参函数 有 返回值 和无返回值
- js的函数本身也是一种类型；function 类型对象
函数定义
- 每个函数都可以看成一个Function实例
- 调用方式：f1( );
- 这种通过创建对象的方式几乎不用
- 通过函数表达式的方式： var f2 =function(){ console.log("f2.....") }
- 通过函数声明式进行js函数的定义 function f3(){ console.log("f3.....") }
- 2和3的区别：var f2 =function(){} 调用写在定义之前不会被调用；function f3(){}的声明会被提前到script最前面，调用写在定义之前可以被调用
- 每个函数都是一个对象
函数和Java函数的区别
- function f1(x,y) 参数列表写参数名就可以了，不用写类型
- f1( )不传参数 默认是undefined
- 参数传递方式;先作为一个整体传给arguments 再传给参数 x,y
- js中没有重载；
- js中任何一个函数都有返回值，如果没有写return 会默认返回 undefined
函数作为参数传给另一个函数
作用域
- 全局作用域 函数作用域
- 在script的变量都属于全局作用御 ；全局的成员可以在任何一个函数访问
-
在 浏览器窗口创建时创建，在浏览器窗口关闭时销毁
-
函数作用域：局部作用，函数结束销毁
-
-
全局作用域中定义的所有变量将会作为全局对象window的属性存在；
-
window对象是浏览器的一个内置对象，代表整个浏览器窗口；可以通过window.对象调用 可以省略不写；
-
声明一个局部a时；会把定义提前但赋值会延后。-
输出为undefined
-
js中的对象
- js中没有类的概念；object是js内置的一个构造函数
- 静态面向对象：运行过程不能增加；js是动态对象
- 对象创建方式
- var p1=new Object()
- var 对象名={ }//字面量创建一个空对象
- {属性名：属性值，属性名：属性值}属性值用引号
- 对象的属性访问
- 对象名.属性名 或 对象名【“属性名”】
- 遍历对象的所有方法方法 for(var p in p2) 遍历出来的是对象的属性名；p本身是字符串
- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for(in)</title>
</head>
<body>
<script>
var p1={name:'zhangsan',age:18,gender:"male"}
for(var p in p1)
{
alert("属性名"+p+"属性值"+p1[p])
}
</script>
</body>
</html>
- js给对象添加新的属性 p2.modefy=mobile ;直接增加，不需要更改原来的数据
- 删除，delete p2.name ; delete p2["name"]
- js为对象 p2.study=function(){ alert("study ...") }
- 调用：p2.study(); 或者 p2["study"] ()
-
返回调用这个方法的属性
直接调用study()是调用的window.study() window.省略了
对象中的数组
- 数组是前端的唯一可以使用的容器；使用和java区别很大
- 数组在js中也是一个对象
- 创建的语法：var 组名 = new Array(); 创建一个空数组
- 和java不同；js的数组是动态变化的 相当于集合框架；每个元素可以是不同的类型
- 相同的是从下标0开始
- 使用字面量的方式创建一个数组对象
- var 数组名 =【】 ; 创建一个空数组
- 遍历js数组
- 用for()循环 for(var i=0;i<arr.length;i++){...}
- 使用for in 进行遍历 for(var i in arr){ arr[i] }
- 调用数组对象(js内置)的forEach 方法对数组进行遍历。arr.forEach(function(value,index)) //value:每个元素值，index每个元素下标
- 创建对象数组（后期接触最多的，由服务器返回）
- var persons=[{name:"张三",gender："男",age:"19" },{ name:"张三",gender："男",age:"19},{ name:"张三",gender："男",age:"19}];
- 遍历：
- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for(in)</title>
</head>
<body>
<script>
var p1=[{name:'zhangsan'},
{name:'lisi'}]
// for(var p in p1)
// {
// alert("属性名"+p+"属性值"+p1[p])
// }
p1.forEach(function(value){
for(var p in value)
{
alert(p)//name K
alert(value[p])//zhangsan V
}
})
</script>
</body>
</html>
- js数组常用方法介绍（重点）
- push
- pop() var deleteValue=scores.pop(); //删除最后一个
- unshift(,,,) var length = scores.unshift(99)
- push unshift构成一个队列操作
- splice() scores.splice(2,2) 从2开始删除两个
- scores.splice(2,1,88) 删除一个再加一个；等于修改一个
- 插入元素
- concat() 用来完成多个数组合并
- 不会对原数组更改；将多个数组复制到新数组
- reverse() 对数组反转，对原表操作
- join(字符串分隔符) 按照指定分隔符将指定数组所有内容输出成一个字符串
- slice(2,5) 从2截取到5部分元素返回一个新的数组；
- sort() 对数组进行排序。默认按照文本进行比较。可以传入一个比较器
- push
-
日期
- var date =new Date();//获取当前日期
DOM(Documents object model)
- 文档（网页）对象模型（关系）
- 按照文档生成的对象树的模型就是DOM ； dom是沟通javascript的桥梁;js操作dom对象；dom变化之后会被浏览器解析
DOM对象的获取
-
从整个dom树上选择我们想要操作的对象，在dom中提供了两种方式：调用doc对象的相关方法
- 1.document.getElementsByTagName(String tagName):根据指定标签获取对象；返回一个数组
- 对于双标签 通过innerHTML属性访问该对象中的内部文本
- dom对象数组不能通过.forEach(value , index) 遍历；js数组可以用
- 2.document.getElementsByClassName() 按照类名访问；返回数组 (class="")
- 3.document.getElementById() 通过id访问；返回一个
- 4.document.getElementByName() 根据name属性获取指定元素；返回元素；用于表单元素
-
根据元素之间的层次关系进行dom对象的相对选择
- children 获取父元素中所有的子元素
- parentNode 获取当前元素的父元素
- previousElementSibling 获取当前元素的上一个兄弟元素
- nextElementSibling:获取当前元素的下一个兄弟元素
DOM对象操作
- innerHTML 设置或获取元素的内部的子标签（双标签）
- innerText和innerHTML一样
- 区别是：如果没有设置的内容包含有子标签 必须用innerHTML
- value：专门操作表单元素的值
-
可以动态的操作 DOM 对象的属性，我们不仅可以操作 HTML 中定义的属性，还可以给 DOM对象自定义属性。setAttribute （属性名 , 属性值 ） : 给 DOM 对象设置自定义属性getAttribute(" 属性名 ") 获取 DOM 对象的自定义属性值
-
为 DOM 对象进行动态的事件注册事件：对象能够识别的动作事件的三要素：1. 事件源对象（事件发生哪个 DOM 对象上 事件发生的主体） 比如 按钮2. 事件类型 比如 click 点击
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<title>DOM</title>
</head>
<body>
<h1 >我是一个标题</h1>
<p>我是一个段落</p>
<p >我是一个P段落</p>
<p>我是一个段落</p>
<ul>
<li >我是列表第一项</li>
<li>我是列表第二项</li>
<li>我是列表第三项</li>
<li >我是列表第四项</li>
</ul>
<img src="images/ad-01.jpg" >
<a href="">百度</a>
<input id="username" name="username">
<input type="button" value="测试" onclick="test()">
<script>
function test(){
//var h1Node=document.getElementsByTagName("h1")[0];
// alert(h1Node.innerHTML)
// h1Node.innerHTML="我是修改后的"
// alert(h1Node.innerHTML)
// h1Node.innerText="我是修改后的"
//var inputNode =document.getElementById("username");
//alert(inputNode.value)
//点击切换图片
// var imgNode=document.getElementsByTagName("img") [0];
// imgNode.src="images/ad-02.jpg"
//动态操作属性让用户指定跳转页面
// var baiduNode=document.getElementsByTagName("a")[0];
// baiduNode.href="http://www.baidu.com"
//设置图片的宽高
// var imgNode=document.getElementsByTagName("img")[0];
// imgNode.width="300"
// imgNode.height="200"
//设置元素样式
// var h1Node=document.getElementsByTagName("h1")[0];
// h1Node.align="center"
//设置属性的值，程序员看的，页面不显示 设置名字=值
// var h1Node=document.getElementsByTagName("h1")[0];
// h1Node.setAttribute("abc"="123")
// alert(h1Node.getAttribute("abc"))可以拿到123
}
</script>
</body>
</html>
DOM对象事件注册
-
事件：对象能够识别的动作
-
事件的三要素
-
1. 事件源对象（事件发生哪个 DOM 对象上 事件发生的主体） 比如 按钮2. 事件类型 比如 click 点击3. 事件响应函数给对象进行事件处理函数的绑定这个过程称为 “ 事件的注册 ”
-
在 JS 中对象的事件注册有两种方式：1. 静态事件注册，通过为标签设置相应的属性完成事件的注册2. 动态事件注册：通过执行一段 JS 代码为 DOM 对象进行事件处理函数的绑定在事件处理函数中可以通过 this 关键字来获取当前事件出发的对象，还可以为处理函数设置一个参数 e, 然后在函数体中可以通过 e.target 获取当前事件源对象
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Keywords" content=""> <title>DOM</title> <style> li{cursor:pointer;} </style> </head> <body> <h1 >我是一个标题</h1> <p>我是一个段落</p> <p >我是一个P段落</p> <p>我是一个段落</p> <ul> <li onclick="fun(this)">我是列表第一项</li><!-- 把调用fun的当前对象传给fun(node) --> <li >我是列表第二项</li> <li >我是列表第三项</li> <li >我是列表第四项</li> </ul> <input type="button" value="测试" onclick="fun()" > <script> function fun(node){ alert(node.innerHTML)//undefined 因为是windows的innerHTML //传一个当前对象进来依然可以实现 } // function fun(nodes){ // alert("点击了一次") // } //alert(node.innerHTML) // //对所有的li便签进行统一的操作动态注册批量元素绑定 // var nodes=document.getElementsByTagName("li"); // for(var i=0;i<nodes.length;i++){ // nodes[i].onclick=fun; // } //所有的都绑定在一个；不利于业务更改 。标准写法： //var nodes=document.getElementsByTagName("li"); //for(var i=0;i<nodes.length;i++) //{ // nodes[i].onclick=function(){ // //alert(i)=4 // //alert(nodes[i].innerHTML) // //报错了；整个for循环页面加载完就执行完了；还没点击；点击时访问集合下标是4 // //nodes[i].setAttribute("index",i) // //alert(this.innerHTML); // //this获取触发函数的对象 // }; //nodes[i].onclick=function(e){ //alert(e.target.innerHTML) //等同于this.而且e的信息更全面 //}; //} </script> </body> </html>
-
全选案例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<title>全选全部选功能</title>
<style>
table{border:1px solid gray;border-collapse:collapse;}
td{border:1px solid gray;}
</style>
</head>
<body>
<table >
<tr>
<td><input id="check_all" type="checkbox"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input class="other" type="checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td><input class="other" type="checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td><input class="other" type="checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td><input class="other" type="checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td><input class="other" type="checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td><input class="other" type="checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td><input class="other" type="checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td><input class="other" type="checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>333</td>
</tr>
</table><script>
//1.获取全选的复选框按钮
var checkAll=document.getElementById("check_all");
var others=document.getElementsByClassName("other");
checkAll.οnclick=function(){
//2.获取全选按钮点击后的选中状态 true/false
var status=this.checked;
//3.获取其他的所有复选框
for(var i=0;i<others.length;i++){
others[i].checked=status;
}
}for(var i=0;i<others.length;i++){
others[i].οnclick=function(){
//检查所有其他按钮是否都是选中状态
var flag=true;
for(var i=0;i<others.length;i++){
if(!others[i].checked){
flag=false;
break;
}
}
checkAll.checked=flag;
}
}</script>
</body>
</html>
-
可以通过JS动态的操作DOM对象的样式
-
方式 1 ：通过行内样式设置语法： DOM对象.style.样式名=样式值如果样式名由两个单词组成则在 DOM 操作中的规律是：将单词之间的 -去掉，同时将第二个单词的首字母改成大写
-
方式2：通过内部样式进行设置的
提前编写好一个类样式，然后通过 JS 动态的为 DOM 对象添加一个 className 属性
-
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<title>元素样式的动态设置</title>
<style type="text/css">
//写一个样式
.current{
color:white;
background:green;
border:4px solid blue;
width:200px;
height:200px;
font-size:26px;
}
</style>
</head>
<body>
<div ><h1>我是一个盒子</h1></div>
<input type="button" value="测试" onclick="fun()">
<script>
function fun(){
//获取div对象
//var divNode=document.getElementsByTagName("div")[0]
//设置元素样式,不推荐使用，通过行内样式进行设置
//divNode.style.color="white";
//divNode.style.backgroundColor="green"
//方式2动态设置样式:提前写一个类样式；通过js动态为dom对象添加一个className
var divNode=document.getElementsByTagName("div")[0];
divNode.className="current";
}
</script>
</body>
</html>
案例：设计一个tab标签
案例设计：设计一个tab标签页
<!doctype html><html><head><meta charset = "UTF-8" > <meta name = "Keywords" content = "" ><title> tab 标签页的设计 </title><style>*{ margin : 0 ; padding : 0 ;}ul { overflow : hidden ;}li { list-style : none ; float : left ; border : 1px solid gray ; margin-right : 2px ; width : 50px ; text-align : center ; cursor : pointer ;}div { width : 500px ; height : 200px ; border : 1px solid gray ;}.current {background : green ;color : white ;}</style></head><body style = "margin:50px;" ><ul><li class = "current" > 民生 </li><li> 体育 </li><li> 娱乐 </li></ul><div>这是民生新闻内容...</div><div style = "display:none;" >这是体育新闻内容...</div><div style = "display:none;" >这是娱乐新闻内容...</div><script>//1.为 li 注册单击事件var liNodes = document . getElementsByTagName ( "li" );var divNodes = document . getElementsByTagName ( "div" );//2. 动态事件注册for ( var i = 0 ; i < liNodes . length ; i ++ ){liNodes [ i ]. setAttribute ( "index" , i );//设置每个li的唯一标识；与div一 一对应liNodes [ i ]. onclick = function (){// 取消所有 li 的 class 样式for ( var i = 0 ; i < liNodes . length ; i ++ ){liNodes [ i ]. className = "" ;//先全部至为空}this . className = "current" ; // 设置 DIV的显示和隐藏 获取调用函数的元素；设置点击之后样式// 获取当前点击的 li 的 index 属性值var currentIndex = this . getAttribute ( "index" );for ( var i = 0 ; i < divNodes . length ; i ++ ){divNodes [ i ]. style . display = "none" ;}divNodes [ currentIndex ]. style . display = "block" ;}}</script></body></html>
DOM value属性的补充 ：
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
