javaee学习日记之javascript

来源：互联网发布：php mysql 存储过程编辑：程序博客网时间：2024/05/22 09:47
js与html的结合方式1.在<head>中或<body>中<head><script type="text/javascript">//javascript代码window.onload = function(){}//在页面缓存后执行</script></head><body><script type="text/javascript">//javascript代码</script><!--在页面缓存后执行(写于body底部)--></body>2.导入在<head>标签中写<script type="text/javascript" src="he.js"></script><!--注意不要在这里面写javascript代码不会执行的-->javascript是弱类型语言定义变量类型均为var(关键字)javascript原始类型（五个）：String:字符串var str = "abc";Number:数字类型var m = 123;Booleadn:布尔类型(true(成立)或false（不成立）)var x = true;null：获取对象的引用，null表示对象引用为空var date = null;undifined:定义一个变量，没有赋值var aa;javascript语句：if(){}else if(){}else{}switch(){case :break;default:break;}while(){}do{}while(){}javascript的运算符js里面不区分整数与浮点数NaN表示不是一个数字"100" + "100" = "100100";"100" - "100" = "0"; =  //赋值 == //比较 === //比较 || //逻辑或 && //逻辑与 | //按位与 & //按位或 ! //非 ^ //异或 == 与 === 的区别==比较的只是值 而===比较的是值和类型 javascript类型显示 typeof 变量（或常量） javascript的函数（特性（值传递））        function 函数名(形参列表){           函数体;           返回值;(有无均可)           arguments.length//获取传入实参个数        }        调用：函数名();  动态函数：  var add = Function("形参","函数体及返回值"); javascript的数组对象 var arr = [1,2,3,4]; var tab = new Array(5); 数组可以存放不同数据类型的值 属性： constructor:返回创建此对象的数组函数。 length：返回数组长度 prototype:原型 函数： concat():连接数组（arr.concat(tab)） join():转换为字符串用指定字符分割(arr.join(",")(默认为',')) pop():删除并返回数组最后一个元素 push():在数组末尾添加元素（我认为底层是var x = arr[arr.length]） reverse():让数组倒序 shift():删除数组第一个元素 slice(start,end):返回选定元素（从索引值start到end(但不包括end)） sort():对数组排序 alert(arr.sort(fn)); function fn(a,b){     if(a > b){       return 1;     }else if(a < b){       return -1;     }else{       return 0;     } } 正序  alert(arr.sort(fn)); function fn(a,b){     if(a > b){       return 1;     }else if(a < b){       return -1;     }else{       return 0;     } } 倒序 splice(index,howmany,item1...):删除元素，并向数组添加元素(从索引index的位置，删除howmany个元素，向数组添加iteml及以后的元素) toString():把数组转换为字符串并返回 toLocaleString():将数组转换为本地数组并返回 unshift(ind,faf,afaf,afa):向数组的开头添加一个或更多元素，并返回新的长度 valueOf():返回数组对象的原始值 Math对象 方法 abs(x):返回x的绝对值 ceil(x):对x向上舍入 floor(x):对x向下舍入 max(x,y)：返回x,y之间的最大值 min(x,y)：返回x,y之间的最小值 pow(x,y)：返回x的y此幂 random()：返回0~1之间的随机数（包括0,不包括1） round(x)：对x进行四舍五入 sqrt(x)：返回数的平方根 Number对象 方法： toString:将数字转换为字符串 String对象 charAt(index):返回在指定位置的字符 charCodeAt(index):返回指定位置的字符的Unicode编码 concat():连接字符串 indexOf(src,index):从index索引开始检索字符串src并返回src在本地的位置 lastIndexOf(src):从后向前检索指定字符串 localeCompare(src)：比较两个字符串 match(/\d/g):找到与正则表达式多个的匹配 replace(/\d/g,src):替换与正则表达式匹配的子串 search(/\w/g):检索与正则表达式相匹配的值(返回索引) toLocaleLowerCase() ：把字符串转换为小写。toLocaleUpperCase() ：把字符串转换为大写。toLowerCase() ：把字符串转换为小写。toUpperCase() ：把字符串转换为大写。substr(index,conte):从索引值index开始截取conte位（包括index）substring(index,lastindex):截取从索引index到索引lastindex（不包括lastindex(包括index)）Events对象    onblur  元素失去焦点  onchange    内容改变    onclick     鼠标点击    ondblclick  鼠标双击 onerror     当加载文档或图像时发生某个错误 onfocus     元素获得焦点 onkeydown   键盘的键被按下     onkeypress  键盘的键被按下或按住  onkeyup     键盘的键被松开     onload  某个页面或图像被完成加载    onmousedown     鼠标按键被按下     onmousemove     鼠标移动    onmouseout    鼠标移出onmouseover     鼠标移入    onmouseup   某个鼠标按键被松开   onreset     重置按钮被点击     onresize    窗口或框架被调整尺寸  onselect    文本被选定   onsubmit    提交按钮被点击 事件绑定（优点（可以绑定多个同一事件和不同事件））：element.addEventListener(event,function,useCapture)event:事件名（去掉"on")function:事件触发时执行的函数userCapture:指定事件是冒泡还是捕获。true，捕获(触发从document到绑定事件的对象)。false,冒泡（触发从绑定事件的对象到document）。（默认false）（可以不传）element.attachEvent(event, function)event:事件名（带"on")function:事件触发时执行的函数两个方法兼容性不一样事件解除element.removeEventListener(event,function)event:事件名（与你要解除的事件名一样）function:函数（与你要解除的事件绑定的函数一样）detachEvent(event,function)与上同事件去除冒泡function fn(event){var e = event || window.event;e.cancelBubble = true//事件解除冒泡}fn()函数：事件绑定的函数获取触发事件的坐标（封装函数）function getcoordinate(event) {                var e = event || window.event;                var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;                var scrollY = document.documentElement.scrollTop || document.body.scrollTop;                var x = e.pageX || e.clientX + scrollX;                var y = e.pageY || e.clientY + scrollY;                return { 'x': x, 'y': y };}获取对象样式function getStyle(obj,attr) {                if(obj.currentStyle){                    return obj.currentStyle[attr]                }                else{                    return window.getComputedStyle(obj,null)[attr]                }            }正则：[abc]   查找方括号之间的任何字符。[^abc]  查找任何不在方括号之间的字符。[0-9]   查找任何从 0 至 9 的数字。[a-z]   查找任何从小写 a 到小写 z 的字符。[A-Z]   查找任何从大写 A 到大写 Z 的字符。[A-z]   查找任何从大写 A 到小写 z 的字符。[adgk]  查找给定集合内的任何字符。[^adgk]     查找给定集合外的任何字符。(red|blue|green)    查找任何指定的选项。.   查找单个字符，除了换行和行结束符。\w  查找单词字符。\W  查找非单词字符。\d  查找数字。\D  查找非数字字符。\s  查找空白字符。\S  查找非空白字符。\b  匹配单词边界。\B  匹配非单词边界。\0  查找 NUL 字符。\n  查找换行符。\f  查找换页符。\r  查找回车符。\t  查找制表符。\v  查找垂直制表符。\xxx    查找以八进制数 xxx 规定的字符。\xdd    查找以十六进制数 dd 规定的字符。\uxxxx  查找以十六进制数 xxxx 规定的 Unicode 字符n+  匹配任何包含至少一个 n 的字符串。n*  匹配任何包含零个或多个 n 的字符串。n?  匹配任何包含零个或一个 n 的字符串。n{X}    匹配包含 X 个 n 的序列的字符串。n{X,Y}  匹配包含 X 至 Y 个 n 的序列的字符串。n{X,}   匹配包含至少 X 个 n 的序列的字符串。n$     匹配任何结尾为 n 的字符串。^n  匹配任何开头为 n 的字符串。?=n     匹配任何其后紧接指定字符串 n 的字符串。?!n     匹配任何其后没有紧接指定字符串 n 的字符串。Date对象var date = new Date();函数toLocaleString():转化我们（中国人习惯的格式）getFullYear():获取当前的年getMonth():获取当前的月（+1后才准确）getDay():获取当前的星期数（0-6）（0表示星期日）getDate():获取当前的日期getHours():获取当前的小时getMinutes():获取当前分钟getSeconds():获取当前的秒数getTime():获取从1970.01.01 00：00：00至今的毫秒数全局函数：（不属于任何对象，直接使用）eval(str):如果字符串是一个javascript代码就执行，不是就报错encodeURI(str):对字符进行编码decodeURI(str):对字符进行解码isNaN(str):判断是否是非数字（是返回true，不是返回false）parseInt(str):将字符串转换成数字(整数（遇到非数字就不解析了）)parseFloat(str):将字符串转换成数字(浮点数（遇到非数字就不解析了）)函数的重载（函数名相同，参数不同）：（其实javascript中并不存在重载（但可以模拟重载）实参保存于arguments数组中）Bom对象Navigator对象（获取客户机的信息（浏览器的信息））函数：appName:返回浏览器的名称：appVersion  返回浏览器的平台和版本信息。cpuClass    返回浏览器系统的 CPU onLine  返回指明系统是否处于连网状态的布尔值。platform    返回运行浏览器的操作系统。Screen对象：（屏幕）属性：width:显示器屏幕宽度height:显示器屏幕的高度History对象属性：length:浏览器历史url数目函数：back():上一页面（go(-1)）(持续执行)forward():下一页面（go(1)）go():相对于当前页面位置Location对象属性host:返回或设置当前url的端口号(有时返回url)hostname    设置或返回当前 URL 的主机名。href    设置或返回完整的 URL。pathname    设置或返回当前 URL 的路径部分。protocol    设置或返回当前 URL 的协议。Window对象（顶级对象所有bom对象都在window中操作）属性函数var x = setTimeout(fn,time):设置定时器，time毫秒后，执行一次fn javascript代码;clearTimeout(x):关闭定时器xvar y = setInterval(fn,time):设置定时器，每过time毫秒，执行一次fn javascript代码;clearInterval(y):关闭定时器yalert(str):弹出一个小窗口显示（str）confirm():确认框(返回布尔值)prompt():输入对话框(返回输入的值)open(url):打开一个新窗口urlclose():关闭当前窗口（兼容性差）Dom对象（dom树）Document对象函数write(x):向页面输出x，x可以是html代码getElementById(src):返回id值与src相等的第一个节点对象getElementsByName()     返回带有指定名称的对象集合。getElementsByTagName()  返回带有指定标签名的对象集合。createElement(src):创建标签名为src的节点对象createTextNode(src):创建src的文本appendChild():添加（将li添加到ul下，将文本添加到节点中）元素对象：函数：getAttribute(src):获取属性名为src的值setAttribute(src,num):设置属性名为src的值为numremoveAttribute(src):删除属性名为src的属性（不能是value）Node对象：函数：parentNode:获取父节点childNodes:获取索引子节点（兼容性差）firstChild:获取第一个子节点lastChild：获取最后一个子节点nextsibling:获取给定节点的下一个兄弟节点previoussibling:获取给定节点的上一个兄弟节点操作dom树函数：appendChild():添加子节点到末尾（特点类似于剪切粘贴的效果）insertBefove(newNode,oldNode):在oldNode节点前插入一个newNode节点removeChild():删除节点replaceChild(newNode,oldNode):用newNode节点替换oldNode节点cloneNode(boolean):复制节点()节点属性：innerHTML：节点文本内容value:节点文本内容(input标签有效)style.src:获取样式为src的值面对对象：1.var a = new Object();//创建对象a.name = "tom";//设置对象属性并赋值a.ss = function(){//方法体//返回}//设置对象方法2.var a = {name:"tom",ss:function(){//方法体//返回}}3.构造方法function A(name){this.name = name;this.ss = function(){//方法体//返回}}var a = new A("Tom");4.var a ={this.name = "Tom",this.ss = function(){//方法体//返回值}}对象属性函数遍历：for(var arr in obj){console.log(arr);}闭包：(特点：加强代码的封装性，方便逻辑访问私有变量。不会污染全局变量，常驻内存。缺点：占有内存，浪费资源)function add(){var i = 10;return {get:function(){return i;},set:function(x){return i = x;}}}递归：function roem(x,y){    if(x == 1){        return y;    }    y *= x;    x = x - 1;    return roem(x,y);}
阅读全文
0 0