关于js总结

来源：互联网发布：medline数据库论文编辑：程序博客网时间：2024/04/28 12:27

js编写
js代码
一般放在<script></script>中间

<script></script>
一般放在<head></head>之间
有时候考虑到页面加载的效果，也会直接放在<body></body>中某个dom元素之后

js操作
一般都要结合html元素,及css样式
一般可以为html元素定义一些属性,比如id,name,class等，便于在js中拿到
比如
getElementById("");给目标元素id属性
getElementsByName("");给目标元素name属性

内置对象
window

属性
document
location 当前窗口的url
parent 父窗体
self 当前窗体
top 浏览器的顶层窗体

方法
alert alert(message)
confirm confirm(message,function(){})
prompt prompt(message, inputDefault)
setInterval,clearInterval
setTimeout,clearTimeout
setInterval(expression, msec)
setInterval(function, msec, arg1, ..., argN)
setTimeout(expression, msec)
setTimeout(function, msec, arg1, ..., argN)
e.g.
var timerID = setTimeout("showtime()",1000)
clearTimeout(timeoutID)


open,close 打开,关闭窗体

document
属性
body
forms 表单
方法
write,writeln ->write("<div><span></span></div>");
createElement(Tag) ->createElement("div"),createElement("input"),
getElementById(ID)
通过id属性获得元素
getElementsByName(Name)
通过name属性获得元素
getElementsByTagName(tag)
通过标签名称获得元素

document.body.innerText //设置body>…/body>之间的文本
document.body.innerHTML //设置body>…/body>之间的HTML代码
document.body.appendChild(dom);//其他的dom元素比如div,span,table等都有这个方法

例如:
var div = document.createElement("div");
div.innerHTML="HAHAsdfasfsdfsdfasdfsdf";
document.body.appendChild(div);

js的语法
数据类型
string,number,boolean,
object
null
数组
Date
function

字符串
常量字符串
首尾使用引号-->可以使用单引号,双引号,
引号里面再使用引号,必须使用不同于外层的引号
建议:
在js中使用常量字符串,
最外面使用单引号,
字符串中的引号使用双引号,
双引号里面再使用引号,就是用单引号\'
var html = '<input type="button" value="检查用户名" onclick="checkUsername(\'xiaoming\')"/>';

字符串拼接
使用+号,

多次换行拼接 +=
a += b --> a = a+b;
var str='123';
str = str + 'abc';//str=123abc
str += 'abc'; //str=123abcabc

常量字符串中拼接js变量
在拼接处,先输入两个引号,在引号里面输入两个加号,在加号中间拼接变量
function tdHtml(id){
//var html ='<td><input type="checkbox" value="9" name="ids"></td>';
//在value="9"的处拼接一个id的js变量
var html ='<td><input type="checkbox" value="'+id+'" name="ids"></td>';
return html;
}

注意:两个加号中间,要么是常量字符串,要么是变量(或者表达式),不能两者都有
var html ='<td><input type="checkbox" value="'+id+'" name="ids"></td>';

字符串后面可以拼接数字

拼接多行html代码的字符串
1.复制html的代码,粘贴到js代码中,调整缩进,对齐格式
2.复制一个加在前面的字符串变量 += ' (比如:ul_html += ')
3.使用快捷键 Alt + Shift + A 在行首划线, 然后ctrl + v 粘贴
4.使用快捷键 Alt + Shift + A 在行尾划线, 然后键盘输入 ';
5.修改字符串,可以使用jstl的标签,也可以在其中加入js变量
var ul_html = "";
ul_html += '<table class="gridtable"> ';
ul_html += ' <thead> ';
ul_html += ' <tr> ';
ul_html += '  ';
ul_html += ' <th><input type="checkbox" id="select_all" onclick="select_all();"/></th> ';
ul_html += ' <th>id</th> ';
ul_html += ' <th>会员类型</th> ';
ul_html += ' <th>姓名</th> ';
ul_html += ' <th>性别</th> ';
ul_html += ' <th>年龄</th> ';
ul_html += ' <th>兴趣</th> ';
ul_html += ' <th>加入日期</th> ';
ul_html += ' <th>数据创建时间</th> ';
ul_html += ' <th>数据修改时间</th> ';
ul_html += ' <th>操作</th> ';
ul_html += ' </tr> ';
ul_html += ' </thead> ';
<c:forEach items="${members}" var="member" varStatus="stat" >
ul_html += ' ';
ul_html += ' <tr <c:if test="${stat.index%2==1}">bgColor="gray"</c:if>> ';
ul_html += '  ';
ul_html += ' <td><input type="checkbox" name="ids" value="${member.id}"/></td> ';
ul_html += ' <td>${member.id}</td> ';
ul_html += ' <td> ';
ul_html += ' <c:if test="${member.memberType==1}">铜牌会员</c:if> ';
ul_html += ' <c:if test="${member.memberType==2}">银牌会员</c:if> ';
ul_html += ' <c:if test="${member.memberType==3}">金牌会员</c:if> ';
ul_html += ' </td> ';
ul_html += ' <td>${member.ename}</td> ';
ul_html += ' <td> ';
ul_html += ' <c:if test="${member.gender==1}">男</c:if> ';
ul_html += ' <c:if test="${member.gender==0}">女</c:if> ';
ul_html += ' </td> ';
ul_html += ' <td>${member.age}</td> ';
ul_html += '  ';
ul_html += ' <td> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'1')}">java,</c:if> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'2')}">.net,</c:if> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'3')}">php,</c:if> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'4')}">ruby,</c:if> ';
ul_html += ' <c:if test="${fn:contains(member.hobby,'5')}">python,</c:if> ';
ul_html += ' </td> ';
ul_html += ' <td><fmt:formatDate value="${ member.enterDate}" pattern="yyyy-MM-dd"/></td> ';
ul_html += ' <td><fmt:formatDate value="${ member.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td> ';
ul_html += ' <td><fmt:formatDate value="${ member.modifyTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td> ';
ul_html += ' <td> ';
ul_html += ' <a href="${ctx}/member/edit?id=${member.id}">修改</a> ';
ul_html += ' <a href="#" onclick="btn_remove(${member.id});">删除</a> ';
ul_html += ' </td> ';
ul_html += ' </tr> ';
</c:forEach>
ul_html += '</table> ';

数字
+,-,*,/,%

parseInt
将数字字符串转换成整数
isNaN
判断是否是数字

除法:
var i;
i= 10/3;
console.log(i);//3.3333333333333335

i= parseInt(10/3);
console.log(i);//3

乘法:
浮点数问题
当有小数的时候,会出现浮点数的问题
var i ;
i = 33 * 12.22;
console.log(i);//403.26000000000005

i = 100 * 12.222;
console.log(i);//1222.2

i = 1100 * 12.222;
console.log(i);//13444.199999999999

数组
定义
[], new Array()
比如:
var arr = [];
var arr = new Array();
操作
长度
.length
增加一个元素
.push(ele)
比如:
var arr = [];
arr.push(1);
[key] = value;//可以把数组当做java里面的map
比如:
var arr = [];
arr[1] = 'a'; //key为数字
arr['1'] = 'a';//key为字符串
拼接为字符串
.join(分隔符)
比如:
var arr = [1,2,3];
arr = arr.join(',');//arr = '1,2,3';

变量
定义
js中的变量,没有类型,都用var

变量可以指向任意类型
var a =1; //将变量a 指向一个数字
a = '1'; //将变量a 指向一个字符串
a = []; //将变量a 指向一个数组
a = function log(){};//将变量a 指向一个函数

js的变量也可以当做一个引用理解,引用只能指向对象,不能指向引用
var a ='123'; //变量a指向字符串123
var b = a; //变量b指向 (变量a指向的字符串) 123
a='abc'; //变量a指向字符串abc
console.log(b); //变量b仍然指向字符串123

window的变量(或者说是window的属性)
一般也指全局变量
只要不在函数内部定义的变量,都是window的变量
比如:
var a = 1; //a是window的变量
b = 2; //b是window的变量
console.log(a);
console.log(window.a);
console.log(window['a']);

console.log(window.b);
console.log(window['b']);

函数中的变量
临时变量
window的变量

function fun(){
var c = 3; //c是函数fun中的临时变量
d = 4; //当函数fun()运行之后,d成为是window的变量
}

console.log('函数fun()运行之前');
console.log('测试变量d');
try{
console.log(c);//此时c未定义
}catch(e){
console.log(e);
}

try{
console.log(d);//此时d未定义
}catch(e){
console.log(e);
}

try{
console.log(window.d);//此时d未定义
}catch(e){
console.log(e);
}

fun();//运行fun函数

console.log('函数fun()运行之后');
console.log('测试变量c');
try{
console.log(c);//此时c未定义
}catch(e){
console.log(e);
}

console.log('测试变量d');
console.log("d:"+d);
console.log("window.d:"+window.d);
console.log("window['d']:"+window['d']);

表达式
常量,变量, 或者常量/变量和运算符组成的代码片段
1, a+b, a+1, a && b, a || b, !a
条件表达式
当表达式作为判断条件,就称为条件表达式
一般用在if()中,或者三目运算符条件表达式?表达式1 : 表达式2

如何判断条件表达式为true|false
(false,0,"",undefined,null都为假,其他都为真)
看表达式的值
表达式的值为boolean类型
1 > 0 ->true, 1==0 ->false
"0" === 0 ->false, "0"!==0 ->true
表达式的值为数字
值为非0 -> true
值为0 ->false
if(0){//数字0为假
console.log("数字0");
}

if(1){//非0数字为真
console.log("数字1");
}
表达式的值为字符串
值为非空字符串 ->true
值为空字符串 ->false

if(""){//空字符串为假
console.log("空字符串");
}

if("1"){//非空字符串为真
console.log("非空字符串");
}
表达式的值为对象
值不为undefinded,null -> true
值为undefinded,null -> false
if(undefined){//undefined为假
console.log("undefined");
}

if(null){//null为假
console.log("null");
}

if(new Object()){//非undefined/null的对象为真
console.log("对象");
}

if(new Date()){//非undefined/null的对象为真
console.log("日期");
}
if([]){//非undefined/null的对象为真
console.log("数组");
}
表达式的值为函数
if(function(){}){//函数为真
console.log("function(){}");
}

运算符
算术运算符
+ - * / %
比较运算符
>,<,>=,<=,==,!=,===,!==

==,!=是比较值
==,!=比较的时候
空字符串,0 都为假(这时候值是false)
undefined,null(这时候是没有值)
console.log(''==0);//true
console.log(''==false);//true
console.log(false==0);//true
console.log(undefined==null);//true
console.log(false==null);//false

===,!==是比较值和类型是否都相等
console.log(''===0);//false
console.log(null===undefined);//false
console.log(null!==undefined);//true

逻辑运算符
&& || !
&&
都为真,结果才为真
一个为假,结果就为假,并且不再进行后面的运算
||
一个为真,结果就为真,并且不再进行后面的运算
都为假,结果才为假
!
取反
三目运算符
条件表达式?表达式1 : 表达式2
var b = (a==undefined)? "a未定义":"a已经定义";
console.log(b);//a未定义
var a=1;
var c = (a==undefined)? "a未定义":"a已经定义";
console.log(c);//a已经定义

判断
if(条件表达式){

}

循环
for(var i=0;i<10;i++){

}

var arr = [1,2,3];
for(var i in arr){
var ele = arr[i];
}

函数
定义
js的函数使用关键字function,不声明返回值类型, 也不声明参数类型

function 函数名(参数名){

}

函数参数
js函数定义了参数, 但是调用的时候, 可以不传入参数
比如:
//定义一个函数log,有一个参数id
function log(id){
console.log(id);
}
//调用时,可以不传入参数
log(); //控制台输出undefined
log(1);

自定义类型
js本身是弱类型,
js自有一些类型
但是js不能定义类型
定义
像java一样定义类型,是使用js的函数来定义类型
Stu = function(id,name){
this.id=id;
this.name=name;

this.getId = function(){
return this.id;
}

this.getName = function(){
return this.name;
}
}
对象: 使用new关键字
var stu = new Stu(1,'xiaoming');
console.log(stu.getId());
console.log(stu.getName());
js对象
{
属性名1 :属性值1,
属性名2 :属性值2,
//...
属性名n :属性值n
}
属性值可以是各种类型,字符串,数字,boolean类型,对象,函数
使用{}这种方式定义的对象,不需要显示的声明类型(new 类型()这种方式)

html页面的内容是顺序加载的,html的代码从上到下加载(或者说运行)
当使用js代码获得一个html的元素,这个元素必须在js的代码之前
比如:
------------------------------------------------------------------------
<script>
var div1 = document.getElementById("div");//div1是undefined
</script>

<div id="div"></div>

<script>
var div2 = document.getElementById("div");//div2是[<div id="div"></div>]的js的dom对象
</script>

html元素的属性,dom对象的属性
比如:
------------------------------------------------------------------------
<input type="text" style="display:none;min-width:50px" id="username" name="username" value="aa"/>
<script>
var input = document.getElementById('username');//input是一个dom对象
var input_id = input.id;//得到字符串'username'
var input_name = input.name;//得到字符串'username'
var input_value = input.value;//得到字符串'aa'
var input_display = input.style.display;//得到字符串'none'
var input_min_width = input.style.minWidth;//得到字符串'none'
</script>
html的onclick等属性中使用的this
<img src="" onclick="this.src=''"/> 这里的this指的是<img>元素

事件
onclick,
点击事件
onblur,
输入框失去鼠标焦点
onfocus,
输入框获得鼠标焦点
onmouseover,
鼠标移动到元素的区域之内
onmouseout,
鼠标移出元素的区域之外

阅读全文

0 0