javascript
1. Javascript基本语法
1.1 js引入方式
js引入方式
1.页面中加script标签 <script></script> 调试时使用
2.通过script标签加src 引入js文件
<script type="text/javascript" src="js/myjs.js"></script> 调试完 放入js文件 引入到html中
3.在事件上直接编辑javascript代码 尽量不用
<script>
console.log(123);
</script>
//JavaScript的注释方法，与Java一致
// 单行注释
/* 多行注释*/
1.2 基本语法
- 变量声明规则与java基本一致
- 由于 JavaScript 对大小写敏感，变量名也对大小写敏感 （y 和 Y 是两个不同的变量）
- 变量必须以字母或下划线或美元符$开始 ，不能使用关键字作为变量名 //JS的变量声明 ，是通过 var 语句来声明 //弱类型，声明时无需指定数据类型，赋值时根据值决定类型 var num = 10 ;
弱类型 定义时不指定类型 赋值时根据值的类型
- Js中变量类型
-
Number 数字类型
-
String 字符串类型 /* 引号中的引号 使用单引号套双引号 或者双引号套单引号 */
-
Boolean 布尔类型
-
Undefined 未定义或未初始化类型
-
Null 表示空对象 一般作为对象类型的初始值
-
Object 复合类型 包含js中的各种对象
var mystr2 = "a15";//NAN not a number 数字类型的特殊值 表示不是数字
- Typeof关键字 可以返回当前变量的类型，typeof运算符返回值如下：
-
undefined：变量被声明后，但未被赋值
-
string：用单引号或双引号来声明的字符串
-
boolean：true或false
-
number：整数或浮点数
-
function：函数方法
-
object：对象 或 数组 或 Null 类型
- 类型转换函数
- parseInt():字符串转换为整数
- parseFloat():字符串转换为浮点数 丢失精度时，可以使用.toFixed 保留指定位数的小数
- toString()：返回字符串
- 注意parseInt parseFloat对字符串的转换
- 运算符
| 类型 | 运算符 |
|---|---|
| 算术运算符 | +，-，*，/，%，++，- |
| 赋值运算符 | =，+=，-=，*=，/=，%= |
| 比较运算符 | >，<，>=，<=，，!=，= |
| 逻辑运算符 | &&，||，! |
Js中运算符与java中基本一致
+可以做数字加 也可以做字符串拼接
注意：小数相加时会丢失精度 如0.1+0.2 需要取位数 使用toFixed（位数）
与=的区别
console.log("----------");
var temp3 = false;
var temp4 = 0;
console.log(temp3===temp4); //false == 就是 true
/*
0 false
1 true
if(!0){
}
==比较值 ===比较值和类型
1.3 条件与循环
-
条件语句语法与java基本一致
If…else
Switch…case
-
循环语句语法与java基本一致
For
for…in 可循环数组成员
While
Do…while
1.4 函数
系统函数(parseInt()😉
parseInt
parseFloat
IsNaN 是否不是数字
eval 把字符串转为运行的结果
var mystr = "123a";
console.log(isNaN(mystr)) //true
//isNaN 是否不是数字
var mystr = "123+211";
console.log(eval(mystr)); //334
//eval 把字符串转为运行的结果
自定义函数(mytest()😉
function 函数名(参数1,参数2,参数3){
//代码
}
等同于
var 函数名 = function(参数1,参数2,参数3){
//代码
}
Js中的函数不需要定义返回值类型 如果需要返回值 在函数中加上return关键字即可
function 函数名(参数1,参数2,参数3){
//代码
return xxx;
}
注意1：特殊写法 立即执行函数
(function(){
})();
注意2：js中作用域，有函数作用域与全局
function myTest(){
var myval1 = 10; //不加var就是全局 在函数外随机生成了myval1
console.log("函数内输出"+myval1);
}
1.5 Js事件
Js会自动对行为进行监听，当触发某些行为时，可以调用自定义函数来完成用户交互。
事件通常与函数配合使用，当事件发生时去调用函数
- 鼠标点击 onclick
- 鼠标悬浮于页面的某个热点之上 onmouseover 鼠标离开页面的某个热点后状态 onmouseout
- 在表单中选取输入框 onfocus 在表单中离开输入框后状态 onblur
- 内容改变 onchange(不与onfocus 同时使用 产生冲突)
- 页面或图像载入 onload(加载结束)
- 键盘按键 onkeyup
- 表单提交 onsubmit
/*
1.由谁触发
2.触发什么事件
3.触发的代码
--哪个元素 发生什么改变
.style.xxx 改变元素的样式
.value 表单元素的值
.innerHTML 双标签中的内容
.src 图片路径
.className 改class
*/
onclick 鼠标点击 button 块元素
onmouseover 鼠标经过 块元素
onmouseout 鼠标移出 。。。
onfocus 获取焦点 输入框
onblur 失去焦点 。。。
onchange 内容改变 select 输入框
onkeyup 键盘弹起 输入框
onload 加载结束 body
onsubmit 表单提交 form
/* //第一种方式 推荐
1.在元素上选择事件
2.定义出来函数
3.用函数给事件赋值
*/
<script>
function clickBtn(){
console.log("按钮被点了");
}
</script>
<body>
<input type="button" value="点我" οnclick="clickBtn()"/>
</body>
//第二种方式 //绑定事件 <script>要放下边 因为是从上到下运行 要找到元素才能运行
<body>
<input id="mybtn" type="button" value="点我" />
</body>
<script>
document.getElementById("mybtn").οnclick=function(){
console.log("按钮被点了");
}
</script>
//onmouseover 鼠标悬浮于页面的某个热点之上 用法
<head>
<meta charset="utf-8">
<title></title>
<script>
function clickBtn(){
console.log("按钮被点了");
}
function changeColor(mycolor){
//元素.属性.属性 = "xxx" 给属性赋值 写 将读完的属性值修改成xxx
//var xxx = 元素.属性.属性 读取属性的值 读 将读完的属性值赋给定义的xxx
/* console.log(document.getElementById("mydiv"));
var mydivColor = document.getElementById("mydiv").style.backgroundColor;
console.log(mydivColor); */
//js调用函数传参 οnmοuseοver="changeColor('lightblue')" 参数和数字不用加 字符串加上''
//this用法
//this表示触发当前onmouseover的元素 这个事件在哪个模块 哪个模块就触发
//οnmοuseοver="changeFontColor('red',this)"
//在函数里传入"myobj",用它来表示document.getElementById("mydiv")
document.getElementById("mydiv").style.backgroundColor=mycolor;
}
/*
document.getElementById("xxx")获取元素
.style.xxx 样式相关属性
.value 值
*/
</script>
<style>
.mydiv{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="mydiv" class="mydiv" onclick="clickBtn()" onmouseover="changeColor('lightblue')">mydiv</div>
</body>
//内容改变 onchange
function myCopy(){
//console.log(document.getElementById("text1").value);
//可直接获取获取 text1 输入的值
//document.getElementById("text2").value=document.getElementById("text1").value;
//获取 通过text1 输入的值改变text2的值
}
<input id="text1" type="text" onchange="myCopy()"/>
<input id="text2" type="text" />
键盘按键 onkeyup
表单提交 onsubmit
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.phonePic{
display: none;
}
.phonePicShow{
display: inline;
}
</style>
<script>
function myCheck(){
var myreg = /^1(3|4|5|7|8)\d{9}$/; //正则表达式要放在 /xxxxx/ 里面
var flag = false; //定义一个flag
document.getElementById("phonePic").className="phonePicShow";
if(myreg.test(document.getElementById("mytext").value)){
document.getElementById("phonePic").src="img/ok.png";
flag = true; //格式正确后改变flag
}else{
document.getElementById("phonePic").src="img/wrong.png";
flag = false;
}
return flag; //用户名方法 返回flag
}
function checkMail(){
return true; //邮箱框返回flag 没写
}
function checkAll(){
return myCheck()&&checkMail(); // 检测用户名跟邮箱都正确才提交
}
</script>
</head>
<body>
<form action="xxxx" method="get" οnsubmit="return checkAll()"> //onsubmit
<input id="mytext" name="mytext" type="text" οnkeyup="myCheck()" />
<img id="phonePic" class="phonePic xxx xxx" src="img/wrong.png"/><br />
<input type="text" placeholder="请输入邮箱"/><br />
<input type="submit" />
</form>
</body>
</html>
1.6 正则表达式
在js中 经常用正则表达式配合进行前端校验，给用户相应提示
语法：/ reg /
两个特殊的符号’^‘和’$’。他们的作用是分别指出一个字符串的开始和结束。
例：/^xxxxxx$/
- 字符匹配符
（1）[…]：匹配方括号中包含的字符集中的任意一个字符。例如，正则表达式“[abc]”，字符“a”、“b”、“c”都可以与之匹配。
（2）[^…]：匹配方括号中未包含的任何字符。例如，正则表达式“[^ab]”，除了字符“a”、“b”之外,其他的任何字符都可以与之匹配。
（3）[a-z]，[1-9]：匹配指定范围内的任何字符。
（4）[^a-z]，[^1-9]：匹配不在指定的范围内的任何字符。
（5）\d：匹配任意一个数字字符，等效于[0-9]。
（6）\D：匹配任意一个非数字字符，等效于[^0-9]。
（7）\s：匹配任何空白字符，包括空格、制表符等。
（8）\S：匹配任何非空白字符。
（9）\w：匹配任何英文字母、数字和下划线，等效于[A-Za-z0-9_]。
（10）\W：匹配任何非英文字母和数字类字符，但不包括下划线，等效于[^A-Za-z0-9_]。
（11）.：匹配除换行符\n之外的任何单字符。
- 次数限定符
（1）{n}:出现n次
（2）{n,}：规定前面的元素或组合项至少出现n次。例如“o{2,}”，字符串“bod”不能与之匹配，但“foood”可以与之匹配。
（3）{n,m}：规定前面的元素或组合项至少连续出现n次，至多连续出现m次，其中n≤m，逗号和数字之间不能有空格。例如“o{1,3}”，字符串“food”和字符串“foood”都能与之匹配。
（4）+：规定前面的元素或组合项必须出现一次或连续出现多次，等效于{1,}。
（5）*：规定前面的元素或组合项可以出现零次或连续多次，等效于{0,}。例如“zo*”，字符串“z”和“zoo”都能与之匹配。
（6）?：规定前面的元素或组合项出现零次或一次，等效于{0,1}。例如“zo?”,字符串“z”和“zo”都能与之匹配。
- 常见正则表达式
1．匹配身份证号码：^\d{15}$|^\d{18}$
2．邮箱：^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$;
3．中国的邮政编码：^\d{6}$
4．匹配字符串中的中文字符：
5．验证5到12位的qq号：^\d{5,12}$
6.验证手机号 ^1(3|4|5|7|8)\d{9}$
2.Javascript操作对象
Bom浏览器对象模型
Window对象
<script>
//停止页面加载运行 难看
//alert("abc");
//prompt("请输入");
//confirm("确认么");
//文档对象 文档对象模型 属于window对象
//document
</script>
//Window 对象是全局对象，可直接调用其方法和属性
//Window对象的一些方法和属性可省略不写
//如 window.document 等同于 document
//window.alert() 等同于 alert()
History对象
常用方法
History对象 浏览器历史记录
back()：加载上一个浏览的文档
forward()：加载下一个浏览过的文档
go(n)：n为整数，跳转第n个浏览过的文档
n==0 则刷新当前页面
n>0 则向前跳转到第n个文档
n<0 则向后跳转到第n个文档
//例子:
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function myBack(){
history.back();
}
function myFword(){
history.forward();
}
function myGo(){
history.go(0);
}
</script>
</head>
<body>
<input type="button" value="鍚庨��" onclick="myBack()" />
<input type="button" value="鍓嶈繘" onclick="myFword()" />
<input type="button" value="go" onclick="myGo()" />
</body>
</html>
Location对象
常用属性和方法
location对象 浏览器地址栏
.Href属性 与浏览器地址栏直接输入地址效果相同
.Reload（）方法 与浏览器刷新按钮效果相同
//例子
<script>
function myJump(){
location.href="1window对象.html?aaa=xxx&bbb=xxx";
}
function myReload(){
location.reload();
}
</script>
Document对象
常用属性和方法
Title 可以设置文档的title
getElementById() 返回对拥有指定id的第一个对象的引用 通过id查找 找到一个
getElement ByTagName() 返回带有指定名称的对象集合 通过标签名查找
getElementsByName() 通过name属性查找
getElementsByClassName() 返回带有指定名称的对象集合 通过class属性查找
//js中可以获取多个元素
//拿到的元素集合是数组 用下标(index)取值
//通常和遍历一起使用
//Elements 查到的放在数组中 通过下标取值
//为了避免找到不想关的元素
//在元素上加嵌套关系
//先查父元素 再查子元素
//document.getElementById("mydiv").getElementsByTagName("input") //可以在元素内部查找元素
//如果还筛选不出来 可以再加上元素的属性来筛选
//if(myeles[i].type=="text"){}
window.onload=function(){
var myeles = document.getElementById("mydiv").getElementsByTagName("input");
for(var i = 0;i<myeles.length;i++){
if(myeles[i].type=="text"){
myeles[i].value="默认值";
}
}
}
Window对象常用方法
newWin= window.open(“弹出窗口的url”, “窗口名称”, “窗口特征”)
| 属性名称 | 说明 |
|---|---|
| height、width | 窗口文档显示区的高度 |
| left、top | 窗口的x坐标、y坐标。以像素记 |
| toolbar=yes|no|1|0 | 是否显示浏览器的工具栏。默认是yes |
| scrollbars=yes|no|1|0 | 是否显示滚动条。默认是yes |
| localtion=yes|no|1|0 | 是否显示地址字段。默认是yes |
| status=yes|no|1|0 | 是否显示状态栏。默认是yes |
| menubar=yes|no|1|0 | 是否显示菜单栏。默认是yes |
| resizable=yes|no|1|0 | 窗口是否可调节尺寸。默认是yes |
| titlebar=yes|no|1|0 | 是否显示标题栏。默认是yes |
| fullscreen=yes|no|1|0 | 是否使用全屏模式显示浏览器。默认是no |
newWin.close() 关闭打开的窗口
<script>
var newWin;
function myOpen(){
newWin = window.open("1window对象.html","","")
}
function myClose(){
newWin.close();
}
/* window.οnlοad=function(){
//window.open("1window对象.html","","")
} */
</script>
定时函数
- setInterval（fun,time）开启定时循环函数 反复执行
- clearInterval 停止
方式1：
var task = setInterval（“myfun()”,1000） //("需要执行的函数",毫秒数)
方式2：
var task = setInterval（myfun,1000） 不常用
方式3：
var task = setInterval（function(){xxxxxx},1000）
clearInterval（task） 停止定时函数
- setTimeout（fun,time）开启定时函数 执行一次
- clearTimeout 停止
<script>
var mytask
function myalert(){
alert(1);
}
function myTimeOut(){
mytask = setTimeout("myalert()",3000);
}
function myStop(){
clearTimeout(mytask);
}
</script>
用法同上
文档对象模型（dom树结构）
DOM(文档对象模型)提供了添加、移动、改变或移除结构文档的方法和属性
HTML 文档中的每个成分都是一个节点（Node）
DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
每个节点都拥有包含节点某些信息的属性
nodeName（节点名称）
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeValue（节点值）
对于文本节点，nodeValue 属性包含文本
对于属性节点，nodeValue 属性包含属性值
nodeType（节点类型）
元素 1 、属性 2、 文本 3、 注释 8、 文档 9
不同数字代表不同节点类型
常用方法和属性
1. 获取元素节点
getElementById():返回对拥有指定id的第一个对象的引用
getElementsByTagName():返回带有指定名称的对象集合
getElementsByClassName():返回带有指定名称的对象集合
2. 根据节点层次关系获取节点（属性 不是方法）
parentNode：返回节点的父节点
childNodes：返回子节点集合,childNodes[i]
firstElementChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild： 返回节点的最后一个子节点
nextElementSibling：下一个节点
previousElementSibling：上一个节点
3. 获取操作属性节点
getAttribute() 获取某个节点的属性值
节点对象.getAttribute( "属性名" );
setAttribute() 设置某个节点的属性值
节点对象.setAttribute( "属性名", "属性值" );
Dom动态操作相关方法
createElement("元素类型") 创建元素
appendChild(新元素) 追加元素
insertBefore(新元素，某元素) 在某元素前追加元素
cloneNode(bol) 复制元素：bol 默认为false 不复制子元素 / true 复制子元素
removeChild() 删除元素
Dom操作表格相关方法
Js中把table描述成二维数组 有rows数组和cells数组 可以根据行列下标 找到对应的单元格内容
table被描述为二维数组
.rows 所有行
.cells 该行的所有单元格
insertRow(idx) 添加行
insertCell(idx) 新增单元格（列）
deleteRow(idx) 删除行
//例子
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function getTableVal(){
//table描述成二维数组 rows 所有的行 cells 该行所有的单元格
console.log(document.getElementById("mytable").rows[3].cells[0].innerHTML);
}
function addOneRow(){
var newRow = document.getElementById("mytable").insertRow(document.getElementById("mytable").rows.length);
var td1 = newRow.insertCell(0);
var td2 = newRow.insertCell(1);
var td3 = newRow.insertCell(2);
td1.innerHTML="奥利给";
td2.innerHTML="奥利给";
td3.innerHTML="奥利给";
}
function delOneRow(){
document.getElementById("mytable").deleteRow(document.getElementById("mytable").rows.length-1);
}
</script>
</head>
<body>
<input type="button" value="获取table中的数据" onclick="getTableVal()" />
<input type="button" value="动态添加一行数据" onclick="addOneRow()" />
<input type="button" value="动态删除一行数据" onclick="delOneRow()" />
<table id="mytable" border="1">
<tr><th>姓名</th><th>年龄</th><th>班级</th></tr>
<tr><td>葫芦大娃</td><td>1</td><td>704A</td></tr>
<tr><td>葫芦二娃</td><td>1</td><td>704A</td></tr>
</table>
</body>
</html>
//从页面拿值增加表格
function getTableVal(){
//table描述成二维数组 rows 所有的行 cells 该行所有的单元格
console.log(document.getElementById("mytable").rows[3].cells[0].innerHTML);
}
function addOneRow(){
var rowName = document.getElementById("nameText").value;
document.getElementById("mytable").innerHTML+='<tr><td>'+rowName+
'</td><td>2</td><td>704A</td></tr>';
}
function delOneRow(){
document.getElementById("mytable").deleteRow(document.getElementById("mytable").rows.length-1);
}
</script>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//元素.innerHTML 以文本方式 添加 替换
//删除时 使用dom操作
/*
追加 替换
innerHTML
删除
dom操作
*/
function addEle(){
//innerHTML 浏览器可以解析html标签内容 innerText 不解析html标签内容
document.getElementById("myul").innerHTML+='<li><input type="button" value="新按钮" /></li>';
//document.getElementById("myul").innerText
console.log(document.getElementById("myul").innerHTML);
}
function delEle(){
document.getElementById("myul").removeChild(document.getElementById("myul").lastElementChild);
}
</script>
</head>
<body>
<input type="button" value="添加元素" onclick="addEle()" />
<input type="button" value="删除元素" onclick="delEle()" />
<hr />
<ul id="myul">
<li id="aimli"><input type="password" /></li>
</ul>
</body>
</html>
Js常用对象
String
字符串对象中包含很多字符串处理方法，跟java类似
IndexOf 查找指定字符
subString 截取字符串
Substr 截取字符串
Split 分割
toUppercase 转大写
//例子
<script type="text/javascript">
var mystr = "abcdefgcdeji";
console.log(mystr.lastIndexOf("cdea"));
if(mystr.lastIndexOf("cdea")>0){
//cdea 包含在指定字符串中
}
//substring(开始索引,结束索引)
//substr(开始索引,截取个数)
console.log(mystr.substring(2,5));
console.log(mystr.substr(2,5));
var myval = "name=jack&age=15";//"name=rose234234&age=15";
var kvs = myval.split("&");
console.log(kvs);
for(var i = 0;i<kvs.length;i++){
var kandv = kvs[i].split("=");
if("name"==kandv[0]){
console.log(kandv[1]);
}
}
</script>
Math
Ceil 向上取整
Floor 向下取整
Round 四舍五入
Random 伪随机数 [0-1)
//例子
<script>
var mynum = 12.1
var res = Math.round(mynum);
var res = Math.floor(mynum);
var res = Math.ceil(mynum);
console.log(res);
var myrand = parseInt(Math.random()*3)+1;
//获取指定随机数时 1.扩倍数 2.通过加减移动区间
console.log(myrand);//[0-1)
</script>
Date
日期相关对象
通过new Date（）获取日期对象 参数允许多种格式如”2011-11-11 11:11:11” “2011/11/11”都可以 不加参数获取当前客户端的时间
| 方法 | 说明 |
|---|---|
| getDate() | 返回Date对象的一个月中的每一天，其值介于1~31之间 |
| getDay() | 返回Date对象的星期中的某一天，其值介于0~6之间 |
| getHours() | 返回Date对象的小时数，其值介于0~23之间 |
| getMinutes() | 返回Date对象的分钟数，其值介于0~59之间 |
| getSeconds() | 返回Date对象的秒数，其值介于0~59之间 |
| getMonth() | 返回Date对象的月份，其值介于0~11之间 |
| getFullYear() | 返回Date对象的年份，其值为4位数 |
| getTime() | 返回某一时刻(1970年1月1日)以来的毫秒数 |
<script>
/*
new Date() 获取执行时的时间
new Date("2011-11-11 11:11:11") 指定时间
获取年
月
日
时分秒
1970年1月1日到现在的毫秒数 没带市区 跟东八区有误差
getTime()
*/
var nowDate = new Date();
console.log(nowDate.getTime());
var myDate = new Date("2011-11-11 11:11:11");
var myDate = new Date("2011/12/12 11:11:11");
console.log(myDate);
</script>
Array对象
创建数组可直接赋值 var myarr=[1,3,5,”g”];
也可以通过var myarr = new Array();
js中数组不定长 可以扩容 也可以放任意类型数据
属性
Lenght 数组长度
方法
Join() 通过特定字符拼成字符串
Sort() 排序
Push() 尾部添加元素
Pop() 尾部删除元素
Shift() 头部删除元素
Unshift() 头部添加元素
<script>
var myarr = ["a",15,true,new Date()];
console.log(myarr.join()); //Join() 通过特定字符拼成字符串
var myarr2 = [1,15,8,6]; //Sort() 排序
myarr2.sort(function(a,b){
return b-a; //a-b 升序排列 b-a 降序排列
})
console.log(myarr2);
myarr2.push("a"); //Push() 尾部添加元素
console.log(myarr2);
myarr2.unshift("b"); //Unshift() 头部添加元素
console.log(myarr2);
myarr2.pop(); //Pop() 尾部删除元素
console.log(myarr2);
myarr2.shift() //Shift() 头部删除元素
console.log(myarr2);
/*
push(xxx) 队尾添加
pop() 队尾清除
unshift(xxx) 队头添加
shift() 队头清除
*/
/*
js中 获取元素集合 数组中放节点对象
*/
var myarr3 = [[1,2],["a","b"],[true,false]];
console.log(myarr3);
</script>
Js中常用属性总结
Xxx.value 表单标签的value值
Xxx.innerHTML 双标签中的内容
Xxx.className 标签的class属性
Xxx.style.xxx 标签的样式属性（某些属性与css的属性值不相同）
jquery
Jquery下载使用
jQuery官网：http://jquery.com
jQuery库分开发版和发布版
Jquery-x.x.js 开发版
Jquery-x.x.min.js 发布版 代码经过压缩 容量更小
在页面引入jQuery
<script src="jquery-x.x.min.js" ></script>
扫一扫
2718
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
