前端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的儿子们可以直接取，其孙子不行
<script type="text/javascript">
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
ie
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案例-------------------------
<script type="text/javascript">
//模仿打地鼠
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名字
<script type="text/javascript">
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>
<form id="form1" name="form1" method="post" action="">
<select name="city" id="city">
<option value="北京">北京</option>
<option value="天津" selected="selected">天津</option>
<option value="河北">河北</option>
<option value="山东">山东</option>
<option value="内蒙">内蒙</option>
</select>
</form>
<script type="text/javascript">
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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style>
<script type="text/javascript">
//开始的函数
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/>
<button onclick="start()">开始</button><button onclick="stop()">停止</button>
</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="普通按钮"/>
<button >按钮</button>
hidden 隐藏控件 <input type="hidden" name="" value=""/>
<form method="POST" action="tijiao.php" enctype="multpart/form-data">
//file这个form后面要加enctype="multpart/form-data"
file 文件选择控件 <input type="file" name="" />
</form>
<select name="city" id="city">
<option value="北京">北京</option>
<option value="天津" selected="selected">天津</option>
<option value="河北">河北</option>
<option value="山东">山东</option>
<option value="内蒙">内蒙</option>
</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>
<script type="text/javascript">
function del(){
if(confirm('确定删除吗')){
return true;
}else{
return false;
}
}
</script>