javacript总结

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前端js总结

//getElementById函数

function $(id){

return document.getElementById(id);

}

//随机函数不包max

//Math.floor(Math.random()*(max-min+1)+min);包含max和min

function getRandom(min,max){

return Math.floor(Math.random()*(max-min)+min);

}

typeof();//判断基本数据类型，但是它不是一个函数，是一个运算符----------------------

instanceof();//判断引用行数据类型，也就是object对象和array数组。如果赋值的话，保存的是指针-------

//案例

var num=100;var str="字符串";var typ=typeof(num);window.alert(typeof(typ));

//【强制类型转换】】】**********************************************************

Boolean(value) // 把给定的值转换成 Boolean 型；

Number(value) //把给定的值转换成数字（可以是整数或浮点数）；

String(value) //把给定的值转换成字符串；

parseInt() //从一个字符串中提取整型数值,从左往右，如果刚开始就是非数字，如则停止，输出Nan，如a100。不然直到第一个不是数字的字符停止

parseFloat() //从一个字符串中提取浮点型数据,从左往右，直到第一个不是数字的字符停止

isNaN () //判断一个数据是否为非数字

//【js点击事件】】】】********************************************************

onclick="func(this);return false;" //点击事件

onkeydown //键盘按下时触发

onkeyup //键盘松开时触发

onkeypress //捕获到键盘输入的字符时触发,只能输出字符时才会触发

onmouseover 和a标签的hover //鼠标移动到

onmouseout //鼠标离开

onload//页面加载完

onblur//当失去焦点时（这2个主要配合input。用来用户名，默认名）

onfocus//当得到焦点时

onchange//域的内容被改变。

onsubmit//当表单提交时。它是给form标签绑定的

怎样来阻止表单提交。

1:当onsubmit是行内绑定时 return false; 绑定的事件也要加个return

2 当onsubmit是动态绑定时直接return false即可

//【核心DOM】D文档 O对象 M模型节点】******************************************

document.createElement//创建元素节点这4个以下有案例

document.createTextNode//创建文本节点和innerHTML有相似

obj.appendChild//添加创建的节点

父对象.removeChild//删除节点body.removeChild

parentNode//当前元素的父节点

insertBefore//将一个新元素插入到一个现有元素的前面。父元素.insertBefore(newElement,targetElement)

inserAfter//将一个元素插入到一个现有元素的后面。此方法是自己创建的，以下有案例

nextSibling//目标元素的下一个兄弟元素。一个节点有3个元素节点。/元素节点1//1.div p//属性节点2//2.如id="testdiv"//文本节点3/

childNodes[0]//一个节点所有子节点的数组，所以要加下标，一般第一个就是【0】

children//非标准属性，它返回指定元素的子元素集合。但它只返回HTML节点

firstChild//即childNodes[0]，第一个元素

lastChild//最后一个元素

void //运算符避免表达式返回值。

innerHTML//双边标记的内容，html文本值。插入一段HTML内容或替换一段HTML内容,以下有案例

value//单边标记的内容

nodeName//节点名字

nodeValue//节点属性值，一般要配合firstChild.nodeValue使用。这样就和innerHTML一样了。因为文字它是当做一个文本节点，所有还要再取firstChild.。

nodeType//节点等级

//元素节点1//1.div p

//属性节点2//2.如id="testdiv"

//文本节点3//3.this is 文字 /my /content.

//注意，在写代码时，我们经常会换行，空格，但是DOM会把这些当做一个文本节点，这样子元素就

//所以，有时获取节点时，会取错，最后的方法是把空格去点，网上有专门的压缩工具

//就是

//<table>

//<tr></tr>

//</table>

//改为<table><tr></tr></table>

//获取和修改节点属性值先ById，或者class。再修改--------------

object.getAttribute(属性名)//html可以省略，xml不可以。获取节点属性值

//不是document对象，所以不能通过document对象调用如p下的title属性。

object.setAttribute(属性名，属性值)////给增加或修改节点属性值

//修改属性节点的值object.setAttribute("title","a list of good");

//以下有案例

obj.removeAttribute(属性名)

//在html中，docunent.head docunent.body,可以直接取，因为把html这个节点是跟节点，也就是当做了document

//所以docunent.head docunent.body,可以直接取，也就是html的儿子们可以直接取，其孙子不行

var obj=document;

alert(obj);

</script>

//【HTML DOM】】】】有些加window**********************************************

document.getElementById("")//获取id为的一个对象

(这个或者。父对象)document.getElementsByTagName("")// 获取标签的是个数组,比如多个li标签

document.getElementsByName("")//获取name为的数组

document.getElementsByClassName("")// 获取class类名，给节点加个clss。要写为clssName 这个方法老的不支持,可以自己定义一个方法，以下有案例

//HTML DOM标签属性的操作

// 标签对象.属性="" 删置空 style也算是它一个属性。它对css操作，标签对象.style

//优化简写模式

document.getElementsByClassName("form");//可以简写为document.forms

element.getAttribute("src");//简化为：Element.src

//【CSS-DOM】】】】**********************************************************y

标签对象.style.CSS样式属性="CSS值"//必须img先创建成功后才能使用，和核心DOM的标签属性效果一样，

//但是css DOM更方便.但是一些不能设置style的，就要用核心dom，比如 img

//js会把font-size里的-理解为减号，所以其用驼峰法标记了，如fontSize************

//后面赋值要给其赋值

//案例

function highlightRow(){

if(!document.getElementsByName)return false;

var =document.getElementsByName("tr");

for(var i=0;i<row.length;i++){

.onmouseover=function(){

this.style.fontWeight="bold";

}

.onmouseout=function(){

this.style.fontWeight="normal";

}

//【event DOM】】*********************************

// 用户的一些行为如鼠标点击，鼠标经过等事件

//event事件的相关属性

//clientX离窗口左边多远

//clientY离窗口上边多远

//pageX：离网页左边多远

//pageY：离网页上面多远

//还有键盘的keyCode码

//鼠标点击事件，以下是屏幕

function(event){

var eve=event||window.event;//兼容

alert(event)

console.log(event)//在console上面看

eve.clientX;

eve.pageX;

}

onkeydown//键盘事件

keyCode//键盘码

window.onload=function(){document.onkeydown=function(e){

var eve=e||window.event;//兼容

var keycode=e.keyCode;

alert(keycode);

}

//【【window】】】】window以下有些可以省略***************************************

window.onload//可以理解为document页面加载完也就是html先加载完

window.alert//弹出

window.confirm();//确定框，会返回true或者false,主要用来做判断的

window.prompt("*提示信息"，[~默认显示的初始值])//输入

//var str=window.prompt("输入","2000");if(str>20){alert(str);}else{alert();}

window.open(url,name,options)

window.close//火狐阻止关闭窗口，设置：地址栏输入about:config，搜索close->dom.allow_script_to_close_windows改为true。

//window.open(url,name,options).window.close()//关闭当前打开的那个小窗口，不是当前窗口。window可以省略、

console.log()

window.setTimeout(code,Millisec)//有案例用于计时器，，延时器，执行一次.当指定的时间到了后，就执行一次js程序，只执行一次

//function cod(){alert("hello");window.setTimeout("cod()",3000};递归

window.clearTimeout(timer);//清除延时器

window.setInterval(code,Millisec)//定时器。按指定的毫秒周期循环

window.clearInterval(timer);//清除定时器

window.location.href 当前Url =的话就是跳转

document.write//输出

window.getSelection().toString();

事件源

var ev=evt|window.event

if(document.selection){

w3c

}else{window.getSelection()}

//childNodes案例--------------------------------------------------------------

//获取所有body中的元素，计算它的个数childNodes一个元素的所有子元素的数组

//要放在body后面.因为要先获取

function countBodyChildren(){

var body_element=document.getElementsByTagName("body")[0];

alert(body_element.childNodes.length);

}

//页面加载时调用

window.onload=countBodyChildren();

//js常用匿名函数

window.onload=function(){

}

//createElement，appendChild，removeChild，setAttribute案例-------------------------

//模仿打地鼠

window.onload=function(){

document.body.bgColor="#ff0000";

//一秒出一个

window.setInterval("start()",1000);

}

function start(){

//当前文档创建img节点

var imgObj = document.createElement("img");

//给这个节点增加属性src。且给地址。

imgObj.setAttribute("src","logo.gif");

//定义一个宽为随机为50-100的数

var width1=getRandom(50,100);

//给这个节点增加宽度。且给宽度。

imgObj.setAttribute("width",width1);

//随机2个数getRandom自己定义的方法

var a=getRandom(0,1800)+"px";

var b=getRandom(0,850)+"px";

//给其设置位置

imgObj.setAttribute("style","position:absolute;left:"+a+";top:"+b+";");

//真加一个点击事件，给其方法，下面会写这个方法;这个事件其实就是删除自己

imgObj.setAttribute("onclick","removeImg(this)");

//把创建的节点加进去body

document.body.appendChild(imgObj);

}

function getRandom(x,y){var z=Math.floor(Math.random()*(y-x)+x); return z;}

//点击事件

function removeImg(Obj){

document.body.removeChild(Obj);

}

</script>

function fundele(obj){

var ta=window.confirm('确定删除吗');

if(ta){

obj.setAttribute("date-src","{:U('Public/delsandc')}");

}

// getElementsByClassName(nav)案例----------------------------------------------

//获取class类名这个方法老的不支持,可以自己定义一个方法

//传2个参数，一个是dom树中的搜索起点，一个是要搜索的clss名字

function getElementsByClassName(node,classname){

//先判断当前浏览器有没这个方法

if(node.getElementsByClassName){

//假如有，则返回

return node.getElementsByClassName(classname);

}else{

//预先声明一个数组，待会下面要用

var results=new Array();

//*通配符是查找所有的节点

var elems=node.getElementsByTagName("*");

//遍历循环匹配所有的classindexOf 方法

//indexOf返回 String 对象内第一次出现子字符串的字符位置

for(var i=0;i<elems.length;i++){

//如果elems中的classname不为1，就是存在的意思

if (elems[i].className.indexOf(classname)!= -1){

//则数组results储存，results对应的下标和对应的elems的对象数据

results[results.length]=elems[i];

}

//返回所需要的class

return results;

}

var navid=document.getElementById("nav");

var res=getElementsByClassName(navid,"blue");

</script>

////innerHTML案例------------------------------------------------------

window.onload=functiom(){

var testdiv=document.getElmentById("testdiv");

testdiv.innerHTML="<p>一段文字<em>文章</em>内容</p>";

}

////select中查找

<body>

</select>

</form>

var city=document.getElementById("city");

var c=city.getElementsByTagName("option");

for(var i=0;i<c.length;i++){

alert(c[i].innerHTML);}//节点值的话为nodeValue

</script>

</body>

//inserAfter函数//将一个元素插入到一个现有元素的后面。此方法是自己创建的----------------

//定义一个函数，传入2参数，即新的元素，要哪个元素之前的目标元素

function inserAfter(newElement,targetElement){

//目标元素的父元素

var parent=targetElement.parentNode;

//如果这个父元素的最后一个元素已经是目标元素了的话,也就是只要目标元素了的话。

if(parent.lastChild == targetElement){

//直接在这个父元素添加这个元素

parent.appendChild(newElement);

}else{

//不是的话，则把这个元素添加在目标元素的下一个兄弟元素的前面。也就是现有元素的后面

parent.insertBefore(newElement,targetElement.nextSibling);

}

//setTimeout计时器--------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

//开始的函数

var i = 0;

var timer;

function start(){

i++;

//alert(i);

//第一步获取对象：

var button_obj = document.getElementById('res');

button_obj.innerHTML = "程序运行了<font color='red'>"+i+"</font>秒";

//使用延时器

timer = window.setTimeout("start()",1000);

}

//停止的函数

function stop(){

//需要清除延时器

window.clearTimeout(timer);

}

</script>

</head>

<body>

<button id="res">程序运行了0秒</button><br/>

</body>

</html>

//this-------------------------------------------------

表格的专用属性

基础班16讲，Table隔行换色加高亮

先获取table

要给其加tbody

表格对象.tBodies【0】

tbody对象.rows【0】

行对象。cells【0】列对象

tobody对象

for

里面的function i已经走完才执行，取this

清除颜色或者，保存颜色

//***************************************************************

//js逻辑声明声明，使用函数，调用定义的函数。返回。

方法后的()去掉，这样的效果是检测。

如果不去掉，则是无论方法是否存在，立即执行；

//js简写模式---------

a>b?1:2;

if(a>b)return false;

//js性能***********

一，平稳退化，

1，jiavascript：伪协议，也就是内嵌在html标签内

2，少数搜索机器人理解

二，解决方法

1，结构与样式的分离，就是写在外部，//更高级的做法，html里面完全不要有javascript代码

//如a 标签里的onclick事件代码完全放在外部，只要在外部

//通过dom来获取那个标签，在给其绑定一个事件。

2，渐进增强

三，向后兼容

1，对象检测为了方便古老的浏览器

// window.onlad=function{

// if(!getElementById)return false;) 判断这个函数存在否后，在执行

四，性能考虑

1.尽量少访问DOM和尽量减少标记//getElementById那些会请求，增加请求数据，浪费

2.合并和放置脚本

3，压缩脚本。//就是把不必要的字节，空格，注释，统统删除，从而达到压缩的文件的目的。从而达到压缩文件的目的

//多数情况下，你应该有2个版本，一个是工作副本，一个是精简副本，加上min字样。7

五，为了避免以后删除某个标签，而javascript的代码会突然出错，

1，检查当前浏览器是否理解getElementsByTagName。//就是检测所需要的dom代码，浏览器是不是支持理解

2，检查当前浏览器是否理解getElementById。

3，检查当前网页是否存在一个id为XXX的元素

4，遍历xxx元的所有链接。

5，设置onclick事件，让它在有关链接被点击时完成操作

//这样先判断，就可以防止以后删除某些东西后，javascript代码不会被影响。

if(!document.getElementsByTagName){

return false;

}

if(!document.getElementById){

return false;

}

if(!document.getElementById("xxx")){

return false;

}

//以上是三个出口

//改为一个，可以为

function prea(){

if(!document.getElementsByTagName){

if(!document.getElementById){

if(!document.getElementById("xxx")){

}

//以上就是一个出口

//可以简写为

function prea(){

if(!document.getElementsByTagName)return false;

if(!document.getElementById)return false;

if(!document.getElementById("xxx"))return false;

}

//*********************************************************************

type属性值控件名称代码

text 单行文本输入框 <input type="text"/>

password 密码输入框 <input type="password"/>

checkbox 复选框 <input type="checkbox"/>

radio 单选框 <input type="readio" checked="checked" />

submit 提交按钮 <input type="submit" value="提交"/>

reset 重置按钮 <input type="reset" value="重置"/>

image 图片提交按钮 <input type="image" src="URL"/>

button 普通按钮 <input type="button" value="普通按钮"/>

hidden 隐藏控件 <input type="hidden" name="" value=""/>

//file这个form后面要加enctype="multpart/form-data"

file 文件选择控件 <input type="file" name="" />

</form>

</select>

---------------------------------------------------------------------

字符串也有下标，var str=javascript

str[0]=j

str[1]=a

同时也可以遍历

一、String对象字符串 ----------------

.lenght 字符个数

.charAt(0) 第几个位置出现的值；

.indexOf(substr);返回子字符串在原字符首次出现的位置(从左往右)，如果找得到则返回其下标。反之返回-1；

.lastIndexOf();

返回子字符串在原字符最后一次出现的位置，如果找得到则返回其下标。反之返回-1；

.substr(startIndex,[length]); //[]是可选的意思

从原字符串中截取子字符串，startIndex,从哪里截取下标。length长度，如果没有，默认是到结尾

.substring(starIndex,[endIndex]);也是从原字符串中截取子字符串

startIndex,从哪里截取下标。[endIndex]);到哪里下标的前一位，如果没有，默认是到结尾

.toLowerCase();将字符串转换为小写

.toUpperCase()将字符串转换为大写

.split(sep);指定的分割法，将字符串分割为数组split(","）;如果为""则每一个字符都为一个下标；

localeCompare():将汉字进行排序

二、Math对象数学计算方法

Math.abs(n);绝对值

Math.ceil(n);天花板，向上取整

Math.floor(n);地板，向下取整

Math.round(n);四舍五入

Math.max(3,2,100,200);取出最大值

Math.min(3,2,100,200);取出最小值

Math.random()返回0到1之间的随机数，包含0不包含1

Math.ceil(Math.random()*(max-min)+min);

Math.floor(Math.random()*(max-min+1)+min);包含max和min

三、Number对象

toFixed（n）进行四舍五入后保留n位小数

num=138.383838 num.toFixed(3) //138.3834

四、Array数组对象

.length 数组长度

.shift()删除数组的第一个元素;并且把第一个位置也删了

.unshift()向数组开头添加一个元素并将新数组元素的长度返回;

.pop()删除数组中最后一个元素并将它返回

.push()向数组的末尾添加一个或者多个元素；

.join([sep])将一个数组合并为一个字符串，sep不写的话，则默认是逗号

.reverse();数组倒序，颠倒

.sort（[sortby]）默认是按字符编码排序的

对数组元素进行排序

.sort（sortby）是可选参数，

function sortby(a,b){

return a-b;

}倒序就b-a

//这个是字符串的比较

.sort（sortby）是可选参数，

function sortby(a,b){

return a.localeCompare.b;

}倒序就b.localeCompare.a

五、Date对象日期

var today=new Data();

function stops(ind){

//判断参数是不是存在

if(ind){

}

//下拉框，切换div。设置其多的属性，好标志

//判断其自己的style.display是不是none，是的话就换为block。不是的话就重新为none

//表单后

<form class="login1" method="post" action="{:U('validate')}"

onsubmit="return validate(this)" >

function validate(obj){

//控件，组件，域，表单对象的id/name

var check1=document.getElementById('check1');

var check2=document.getElementById('check2');

var check3=document.getElementById('check3');

if(obj.username.value==''){

check1.innerHTML="<font color='red'>请输入用户名</font>";

obj.username.focus();

return false;

}

if(obj.password.value==''){

check2.innerHTML="<font color='red'>请输入密码</font>";

obj.password.focus();

return false;

}

if(obj.yzcode.value==''){

check3.innerHTML="<font color='red'>请输入验证码</font>";

obj.yzcode.focus();

return false;

}

return true;

}

--------------------------------------

var del=document.getElementById('btnDel');

del.onclick=function(){

var ck=document.getElementsByTagName('input');

var ids=[];

var j=0;

for(i=0;i<ck.length;i++){

if(ck[i].checked){

ids[j]=ck[i].value;

j=j+1;

}

if(ids.length>0 && confirm('确定要删除吗')){

var url='__CONTROLLER__/delete/ids/'+ids;

location=url;

}

-----------------------------------------------------------

确定删除

<a href="__CONTROLLER__/del/id/<?php echo $v['id'];?>" onclick="return del()">删除</a>

function del(){

if(confirm('确定删除吗')){

return true;

}else{

return false;

}

</script>

正文

前端js总结

相关阅读

前端架构设计视图，前端架构设计视图

前端网站设计模式，前端网站设计模式分析

thinkphp拖拽布局插件，前端实现拖拽布局完成界面

西安html5培训多少钱，html5前端课程培训

go前端编程，go前端开发

jquery前端工程师实战案例，jquery前端开发课后题答案

web前端是指html5，什么叫web前端

前端工设计模式，前端常用的设计模式有哪些

目录[+]