目录:
一、JS补充
1、函数类型
2、string对象
3、instanceof
4、Array 数组对象
5、Date对象
6、RegExp 正则表达式
7、Math对象
二、BOM补充
1、window对象
2、histroy对象
3、location对象
三、DOM补充
四、替换clear:both撑开页面的方法
五、show hide toggle方法
内容:
类型函数:
1、typeof
只能判断基本数据类型,对于引用数据类型,只能判断它为object
var s=8;console.log(typeof(s));
var s2=new String('hello2');console.log(typeof(s2)); //没法判断它的具体类型
2、instanceof
var s3= new String('hello')console.log(s3 instanceof(String));//判断s3是否为String实例化的对象
3、String对象
String有两种创建方式:
1) var s=“hello”;
2)var s=new String(‘hello’);
String可以操作的方法:
1)length
2)字体:
s.italics() 斜体
s.bold() 加粗
s.anchor() 链接,正确写法:s.anchor(‘alex’)
3)大小写转换:
s.toUpperCase();都变大写
s.toLowerCase();都变小写
4)获取指定字符:
s.charAt(1) 根据索引取值
5)查询字符串:
match();
search();
s.search('h'); 返回第一个匹配结果的索引值
s.match('l'); 返回所有的匹配结果的数组
6)replace
s.replace(‘e’,'E')
7) split
s.split('e')
8) concat 拼接
s.concat('world')
9) substr sbustring slice 截取字符串
s.substr(1,2)
s.slice(1,-2) slice可以倒着取
10)Indexof
s.IndexOf(‘h’)
s.lastIndexOf('h')
4、Array 数组对象
var arr=[];
var arr=[1,2,3,4,5];
var arr=new Array(1,2,3,4,5)
var arr2 = new Array(3) 表示占了3个位置,三个值都是undefined,如果采用初始化对象的方式创建数组
如果里面只有一个值还是数字,那么数字表示长度而不是内容
Array的方法:
1、join方法
var ret = ['hello', 'world'].join('+++++')
2、shift unshift pop push方法(栈方法)
补充:
栈操作:
先进后出,有压栈和弹栈两个操作
队列操作:
先进先出
var arr1=[1,4,6];
arr1.push(13);
console.log(arr1) 发现13放在最后面
arr1.pop() 弹最后的数值
arr1.shift(45);从前面插入
arr1.unshift() 从前面移除
3、sort和reverse方法
arr1.reverse();反转
arr1.sort(); 排序
4、Date对象
创建方式:
var date_obj=new Date()
console.log(date_obj.toLocaleString())
var date_obj = new Date('017/07/20 16:30')
console.log(date_obj.toLocaleString())
date_obj.getFullYear();
date_obj.getZMonth();
date_obj.getDate();
date_obj.getDay();
date_obj.getHours();
date_obj.getSeconds();
date_obj.getMinutes();
date_obj.getHourMinuteSecond();
date_obj.getMilliseconds();
5、RegExp 正则表达式
var re_obj=new RegExp("\d+","g");
console.log(re_obj.test('asdf2345dk'))
Title
6、Math对象
console.log(Math.random()); 随机小数
console.log(Math.round(2.8)); 取四舍五入值
console.log(100*Math.pow(2,3));2的3次方
二、BOM对象
BOM浏览器对象模型,可以对浏览器窗口进行访问和操作,使用BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作
使JavaScript有能力与浏览器对话
1、window对象
所有浏览器都支持window对象
概念上将一个html文档对应一个window对象
功能上讲控制浏览器窗口的
使用上讲,window对象不需要创建对象,直接使用即可
例如:window.alert() 是window对象,前面的值可以不写
window对象方法:
1、alert()显示带有一段消息和一个确认按钮的警告框
2、confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
3、prompt() 显示可提示用户输入的对话框
4、open() 打开一个新的浏览器窗口或查找一个已命名的窗口
5、close()关闭浏览器窗口
6、setInterval()按照指定周期(以毫秒计)
7、clearInterval()取消由setInterval()设置的timeout
8、setTimeout()在指定的毫秒数后调用函数或计算表达式
9、clearTimeout()取消setTimeout()方法设置的timeout
10、scrollTo()把内容滚动到指定的坐标
例子:
var ret=confirm('是否保存');alert(ret)if(ret == true{}{ }else{}//可以根据返回值来进行后面的操作
var ret=prompt('hello')alert(ret)返回值是用户输入的内容如果什么都不输入,就返回空,如果选择取消,就返回null
2、history对象
能够知道用户上一次从哪来,下一次往哪去,也就是浏览器的前进和回退按钮
Title lesson2
3、location对象
方法:
1、locatin.reload() 重新加载界面
三、DOM对象
DOM是W3C的标准,定义了访问HTML和XML文档的标准
推荐:
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementchild 最后一个子标签元素
nextElementSibing 下一个兄弟标签元素
previousElementSibing 上一个兄弟标签元素
DOM Event(事件)
1、onclick
2、ondblclick 当用户双击某对象时调用的事件句柄
3、onfoucs 元素获取焦点 ,input点击输入框时获取焦点
例子:
function func1(){ alert(111) }
4、onblur 失去焦点时触发的事件
5、onchange 一旦内容改变就触发
备注:input标签的DOM对象,判断非空字符是通过Document.getElementzByid('xx').value.trim().length==0,其中trim()表示去掉空格
6、onkeydown 某个键盘按键被按下触发
7、keyCode 对于keypress事件,虚拟键盘码不同,对于不同的键盘码可以区别不同的按键
8、onkeyup 当按键松开时触发
9、onmousedown 鼠标按键按下
10、onmousemove 鼠标被移动
11、onmouseout 鼠标从某元素移开
12、onmouseover 鼠标移到某元素之上
13、onsubmit 只能用于form表单
14、onselect 文本被选中
例子:判断并阻止表单提交内容
Title
标签的增删改查:
1、增加:
document.createElement('p') 创建一个p标签
例子:
var ele = document.getElementById('div1');
var son=document.createElement('p')
son.innerHTML='<em>hello world</em>'
ele.appendChild(son);
2、移除:
removeChild();
例子:
var ele = document.getElementById('div1');
var last_son = ele.lastElementChild;
ele.removeChild(last_son);
3、修改:
例子:
var ele = documnt.getElementById('div1');
ele.style.fontSize ="30px";
关于class操作:
elementNode.className
var ele = documnt.getElementById('div1');
ele.className 查找这个标签对应的class的名称
elementNode.classList.add
elementNode.classList.remove
改变HTML属性:
getAttribute()获取属性
setAttribute()设置属性
例子:
var ele=document.getElementById('add')
ele.οnclick=function(){
var div1=document.getElementByClassName('div1')[0]
var img=document.createElement('img')
img.src='a.jpg' 这个方式是dynmic html语法,动态html
这个也可以写成 img.setAttribute('src','a.jpg') a.jpg是一张图片
div1.appendChild(img);
}
四、替换clear:both方法:
使用class名:after{
content:ooo;必须的
display:block;
clear:both;
visibility:hidden;
height:0;
}
五、jQuery动画效果
$('#id1').show(1000) 会显示display:none的标签,1000表示1s后执行该动作
$('#id1').hide() 会隐藏display:block的标签
$('#id1').toggle() 会判断标签属性然后做相反的动作
$('#id1').fadein(1000) 会将display:none的标签显示
$('#id1').fadeout(1000) 会将display:block的标签隐藏
$('#id1').fadetoggle(1000) 判断并进行相反的操作
$('#id1').fadeto(1000,0.3) 会调整透明度