javaee学习日记之javascript

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]   查找任何从 09 的数字。
[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 000000至今的毫秒数

全局函数:(不属于任何对象,直接使用)
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):关闭定时器x
var y = setInterval(fn,time):设置定时器,每过time毫秒,执行一次fn javascript代码;
clearInterval(y):关闭定时器y
alert(str):弹出一个小窗口显示(str)
confirm():确认框(返回布尔值)
prompt():输入对话框(返回输入的值)
open(url):打开一个新窗口url
close():关闭当前窗口(兼容性差)

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的值为num
removeAttribute(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);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值