一： js
1：概念： 基于对象的脚本语言， 浏览器直接解析：
基于对象： 模拟面向对象。，
基本语言： 不是高级语言， 解析的时候不需要编译。
浏览器：
2： 基本数据类型：
数值类型： number
字符串类（字符）： String
undefined： 未定义
null
boolean类型：
3：复合类型
数组：
函数：
对象：
4： 运算符：
算数： ++ –
关系： NaN 和 NaN 自身不相等
逻辑： 1 && 2
条件： （三目）
赋值：
js:非0非null 都是true：
5： 数组的定义：
js和java当中的数组区别：
（1）定义形式不一样。
（2） js当中的数组： 可以存放任意类型：
java当中的数组， 只能存放相同类型或者是兼容类型：
（3）js当中的数组可以自动扩容：
java当中数组的长度是固定的。
var arr=[]; 直接赋值方式：
var arr= new Array(); //定义了一个数组， 数组的长度2
var arr= new Array(12,21); 定义了一个数组， 数组的值12，21
6： 函数的定义：
函数： 三种
function funName(a, b){
return value;
}
var funName= function(){
}
var funName = new Function(“param1”,“param”);
param1： 参数列表：
param2： 方法体：
区别：
(1)如果函数需要动态的传值， 定义函数的时候， 需要定义具有形式参数的方法：
形式参数在定义需要不需要给出类型。
(2) 如果函数需要定义有返回值， 函数当中， 直接通过return关键字，将函数运算的结果返回。
7：js函数当中是否存在函数的重载：
（1）js当中不存在函数的重载：
(2)可以通过函数当中的内置数组， arguments 模拟函数的重载。
8： js当中的内置对象：
Date： 和日期相关的： var date = new Date();
Array: 和数组相关： var array = new Array();
String:和字符串相关： var str=new String(“加减”);
Function 函数相关： var funName = new Function("","");
Math: 和数学相关： 单体对象： 方法可以通过类名直接调用：
9： 正则表达式：
补充： 正则表达式： 定义和java当中完全一致：
RegExp ： 和正则表达式相关的：
定义一个正则表达式：
方式一：var reg = new RegExp("[1][345789][0-9]{9}");
方式二： var reg = /[1][345789][0-9]{9} /;
事件： onsubmit(); 事件是所有事件当中最特别的一个事件，这个事件必须有一个返回值。 true，可以提交。 false 不能提交。
10： script放在位置“：
script： 引入外部文件： 在head标签：
自定义js代码： body解释之前。
11: 创建对象：
创建一个json对象：
var obj ={}; //创建一个对象：
var obj ={“username”:“wnagdaoyan”,“age”:30,“gender”:“nv”};
创建一个对象： 使用构造器：
//创建一个构造器“：
function Person(name,age,gender){
this.name= name;
this.age=age;
this.gender= gender;
}
//将对象转换成一个json格式：
var json = JSON.stringify(Bean);
location对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="btn" id="btn" value="but" onclick="fun();"/>
<input type="button" name="btn" id="btn" value="but" onclick="deleteFun();"/>
<input type="button" name="btn" id="btn" value="but3" onclick="deleteFun2();"/>
<input type="button" name="btn" id="btn" onclick="fun3();" value="关闭" />
<script type="text/javascript">
//href属性：
function fun(){
//window对象： 可以省略不写：
window.location.href="${pageContext.request.contextPath}/servlet/VerifyCodeServlet?time="+new Date().getTime();
}
//window.document.write()
function deleteFun(){
var flag = window.confirm("确定要删除吗？");
if(flag){
alert("success");
}else{
alert("fail");
}
}
//提示框： 带有用户输入的提示框
function deleteFun2(){
var value= window.prompt("请现写你的银行卡号和密码","xxx");
//带有用户输入框：
document.write(value);
}
function fun3(){
window.close();
}
</script>
</body>
</html>
在这里插入代码片
对象的创建以及转换json：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//
var person1={"username":"yinxiaoyu","age":29,"gender":"nan"};
document.write(person1.username);
//使用构造器创建：
function Person(name, age, gender){
this.name= name;
this.age=age;
this.gender=gender;
}
//创建对象：
var p= new Person("llisi",21,"nana");
document.write("<br/>");
document.write(p.gender);
//将对象转换成json：
var jsonP= JSON.stringify(p);
document.write(jsonP);
</script>
</body>
</html>
12: js的组成：
js： ECMAScript： 语法，语句， 关键字。 运算符。对象的定义：
BOM： 浏览器对象模型：
DOM： 文档对象模型：
二： BOM对象： （有重点）
Navigator： 浏览器的基本信息; 版本信息： 浏览器的名称等：
Screen： 封装类浏览器的屏幕信息， 浏览器的高度，宽度。
history： 对象：
forward();
back();
go(+1);//相当于forward
go(-1);//相当于back：
location： 重点：
href属性： 能够进行页面的跳转：
window对象： 是所有对象的父对象：
API方法：
alert();
confirm(); //带有确定和取消按钮的提示框：
prompt(param1，param2);带有用户输入的提示框
param1：提示用户的信息：
param2：输入框当当中的默认值。
函数带有返回值 ， 用户点击确定， 获得了用户输入的值。
和定时器相关：
setInterval(“param1”,“param2”);
param1:js代码：
param2：执行的时间： 毫秒单位：
返回返回值， 返回的定时器的id的值。
clearInterval(id);//取消指定的定时器：
setTimeout(“js代码”,“millis”);指定的毫秒后，指定一次js函数。
clearTimeout(id);//取消指定的定时器。
open("","","");
参数一： URL 地址： 指定开启的页面。
参数二： 给当前窗口命名。
参数三： 窗口的样式信息。
定时器的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="btn" id="btn" onclick="fun();"
value="取消" />
<input type="button" name="btn" id="btn" onclick="fun2();"
value="取消2" />
<script type="text/javascript">
//var id =setInterval("alert('x')",3000);
function fun(){
//取消定时器：
window.clearInterval(id);
}
//只指定一次js代码
var id2= setTimeout("alert('xxxxxx')",3000);
function fun2 () {
window.clearTimeout(id2);
}
</script>
</body>
</html>
三：Dom： 文档对象模型：
HTML： 浏览器在对其进行解析的时候， 把html封装成一个树形结构：
document： 对象： 对应整个树：
Element： 标签节点：
Attribute 属性节点：
TextNode ： 文本节点：
Node： 标签节点， 属性节点， 文本节点的一个父节点。
API方法：
document：
获得其他的节点：
document.getElementById(“id”);//返回的是一个元素：
document.getElementsByName(“name”);//获得复选框，返回的数组。
document.getElementsByTagName(“tagname”);//通过标签的名称，获得元素。， 返回的是数组。
//创建元素节点： 增加
document.createElement(“li”);//
document.createTextNode(“文本”);//
appendChild(“childNode”);//删除：
removeChild(“childNode”);
//替换：
replaceChild(“newNode”,“oldNode”);具体操作代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li id="yangyuhuan">杨玉环</li> <li>王昭君</li> <li>貂蝉</li> <li>西施</li> </ul> <input type="button" name="" id="" value="add"onclick="fun();" /> <input type="button" name="" id="" value="replace"onclick="fun2();" /> <script type="text/javascript"> function fun(){ /* * 添加： * 1： 创建一个新的节点：L * 2：创建文本节点： * 3：文本节点和创建新的节点建立关系： * 4： 获得父节点： * 5：执行添加操作： */ var liEle = document.createElement("li"); var textNode = document.createTextNode("高圆圆"); liEle.appendChild(textNode); var ulEle = document.getElementsByTagName("ul")[0]; ulEle.appendChild(liEle); } //insertBefore(); function fun2(){ /* * 创建文本节点。 * 创建li节点。 * 建立关系。 * 获得ul节点。 * 获得要替换的节点。 * ul执行替换。 */ var liEle1 = document.getElementsByTagName("li")[0]; var liEle = document.createElement("li"); var textNode = document.createTextNode("高圆圆"); liEle.appendChild(textNode); //父节点直接执行替换操作： liEle1.parentNode.replaceChild(liEle,liEle1); } /* * 获得其他的节点： */ var liEle1 = document.getElementsByTagName("li")[1]; var preEle = liEle1.previousElementSibling; // alert(preEle.id); var nextEle = liEle1.nextElementSibling; </script> </body> </html>四： innerHTML属性：
属性不是dom的一部分， 但是大部门浏览器都支持。
作用： 能够获得标签当中的内容。
设置标签当中的内容。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width:100px; height: 200px; border:1px solid red; } </style> </head> <body> <script type="text/javascript"> window.onload= function (){ var divEle = document.getElementsByTagName("div")[0]; divEle.innerHTML="<h1>哈哈</h1>"; /* * 1：创建一个新的节点： * 2：文件文本节点： * 3：建立关系： * 4：放在div下： * 传统的方式： */ } </script> <div class="c1"> </div> </body> </html>五： Element对象：
获得元素的值：
查询：
对象.value; //前提具备value属性： input
对象.getAttribute();//增加：
setAttribute(“attName”,“attValue”);//删除：
removeAttribute(“attName”);<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="username" id="username" value="ddd" /> <script type="text/javascript"> /* * Element对象 */ var inputEle = document.getElementById("username"); document.write(inputEle.value); //方法： alert(inputEle.getAttribute("value")); //增： inputEle.setAttribute("maxlength","6"); //删除： inputEle.removeAttribute("value"); </script> </body> </html>六： Node对象：
属性的名称 :标签节点 | ********** 属性节点| ************** 文本节点
nodeType： 1 ********* ***************** 2 ******************* 3
nodeName： 标签名称大写 ***********属性名称 **********text
nodeValue : ***** NULL ************** 属性值： *********** 文本的内容：获得其他的节点：
获得父节点; parentNode;
同步节点： 上一个节点：previousElementSibling
下一个节点： nextElementSibling
获得孩子节点： childNodes; 不兼容：
document.getElementsByTagName();<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li id="yangyuhuan">杨玉环</li> <li>王昭君</li> <li>貂蝉</li> <li>西施</li> </ul> <input type="button" name="" id="" value="add"onclick="fun();" /> <input type="button" name="" id="" value="replace"onclick="fun2();" /> <script type="text/javascript"> function fun(){ /* * 添加： * 1： 创建一个新的节点：L * 2：创建文本节点： * 3：文本节点和创建新的节点建立关系： * 4： 获得父节点： * 5：执行添加操作： */ var liEle = document.createElement("li"); var textNode = document.createTextNode("高圆圆"); liEle.appendChild(textNode); var ulEle = document.getElementsByTagName("ul")[0]; ulEle.appendChild(liEle); } //insertBefore(); function fun2(){ /* * 创建文本节点。 * 创建li节点。 * 建立关系。 * 获得ul节点。 * 获得要替换的节点。 * ul执行替换。 */ var liEle1 = document.getElementsByTagName("li")[0]; var liEle = document.createElement("li"); var textNode = document.createTextNode("高圆圆"); liEle.appendChild(textNode); //父节点直接执行替换操作： liEle1.parentNode.replaceChild(liEle,liEle1); } /* * 获得其他的节点： */ var liEle1 = document.getElementsByTagName("li")[1]; var preEle = liEle1.previousElementSibling; // alert(preEle.id); var nextEle = liEle1.nextElementSibling; </script> </body> </html>2018年12月4日21:14:47于易动
时间匆忙，又赶上期末复习。
写的比较粗糙，见谅~
扫一扫
286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
