拖拽

拖拽

通过为元素增加draggable=”true”来设置此元素是否可以进行拖拽操作,其中图片、链接默认是开启的

1、拖拽元素

ondrag 应用于拖拽元素,整个拖拽过程都会调用

ondragstart 应用于拖拽元素,当拖拽开始时调用

ondragend 应用于拖拽元素,当拖拽结束时调用

2、目标元素

ondragenter 应用于目标元素,当拖拽元素进入时调用

ondragleave 应用于目标元素,当鼠标离开目标元素时调用

ondragover 应用于目标元素,当停留在目标元素上时调用

ondrop 应用于目标元素,当在目标元素上松开鼠标时调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<body>
<!-- 添加上draggable="true"就可以让一个dom元素产生拖拽效果(是一个影子) -->
<div draggable="true" class="box"></div>
<!-- 目标元素 -->
<div class="info"></div>
<!-- 图片元素默认是可以被拖拽的 -->
<!-- <img src="Chrysanthemum.jpg" alt=""> -->
<script type="text/javascript">
var box = document.querySelector('.box');
var info =document.querySelector('.info');
// 拖拽开始的时候触发
box.ondragstart = function(){
console.log('拽我干嘛,臭流氓');
box.style.background = 'green';
}
// 在拖拽的过程中持续触发
/*box.ondrag = function(){
console.log('别拽我裙子,流氓');
}*/
// 拖拽结束
box.ondragend = function(){
console.log('把裙子还给我');
box.style.background = 'green';
box.style.background = 'pink';
}
// 目标元素
// 拖拽元素进入到目标元素身上的时候触发
info.ondragenter = function(){
console.log('哎呀,客观您来了');
this.style.borderColor = 'red';
}
//拖拽元素离开目标元素身上的时候触发
info.ondragleave = function(){
console.log('欢迎下来再来');
this.style.borderColor = '#000';
}
// 拖拽元素进入到目标元素身上并松开鼠标的时候触发
// drop事件是被浏览器阻止的,要想这个事件得到触发,需要在dragover的时候阻止默认事件
info.ondrop = function(){
console.log('来,雅座里面请');
this.appendChild(box);
}
info.ondragover = function(event){
// console.log('进来坐坐吧');
// 阻止默认事件
event.preventDefault();
}
</script>

3、拖拽读取外部文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<body>
<!-- 目标元素 -->
<div class="info"></div>
<script type="text/javascript">
var info = document.querySelector('.info');
// 获取html元素
var oHtml = document.documentElement;
// 问题:浏览器默认会将外部拖拽的文件直接打开,我们需要阻止掉
// 将外部文件拖拽进浏览器里面松开鼠标的时候其实就是在html页面上触发了drop事件,我们只需要在drop事件的时候阻止默认事件
oHtml.ondrop = function(e){
// 阻止默认事件
e.preventDefault();
}
/*drop事件默认是被阻止的,所以还需要在dragover的时候阻止默认事件*/
oHtml.ondragover = function(e){
e.preventDefault();
}
var fr = [];
info.ondrop = function(e){
// 获取外部拖拽进来的文件
// console.log(e);
// 读取文件
for(var i = 0; i <e.dataTransfer.files.length; i++){
fr[i] = new FileReader();
fr[i].readAsDataURL(e.dataTransfer.files[i]);
}
for(var j = 0; j < fr.length; j++){
fr[j].addEventListener('load',function(){
console.log(fr);
var result = this.result;
var img = document.createElement('img');
img.src = result;
info.appendChild(img);
})
}
}
</script>
</body>

读取文件

读取文件

FileReader对象

var reader = new FileReader(); 可以实例化一个对象

实例方法

1、readAsDataURL 以DataURL形式读取文件

事件监听

onload 当文读取完成时调用

属性

result 文件读取结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
<input type="file" name="" id="">
<button>点击读取文件</button>
<script type="text/javascript">
var btn = document.querySelector('button');
var file = document.querySelector('input[type="file"]');
btn.onclick = function(){
// file.value 这个仅仅是一个字符串,图片的本地路径
// var data = file.value;
console.dir(file);
// 获取真正的图片对象
var data = file.files[0];
// 创建一个读取对象
var fr = new FileReader();
// 读取文件
fr.readAsDataURL(data);
// 读取文件是一个耗时的操作,所以需要用事件监听读取完毕,
// load事件是文件读取完毕之后触发的事件
fr.addEventListener('load', function(){
//获取读取的结果
//result属性里面存储的就是读取文件的结果
var result = fr.result;
// 创建图片对象
var img = document.createElement('img');
img.src = result;
document.body.appendChild(img);
})
}
</script>
</body>

读取多个文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<body>
<input type="file" multiple name="" id="">
<button>点击读取文件</button>
<script type="text/javascript">
var btn = document.querySelector('button');
var file = document.querySelector('input[type="file"]');
var fr = [];
btn.onclick = function(){
// 读取文件
for(var i = 0; i < file.files.length; i++){
fr[i] = new FileReader();
fr[i].readAsDataURL(file.files[i]);
}
// fr.readAsDataURL(data);
// 读取文件是一个耗时的操作,所以需要用事件监听读取完毕,
// load事件是文件读取完毕之后触发的事件
for(var j = 0; j < fr.length; j++){
fr[j].addEventListener('load', function(){
//获取读取的结果
//result属性里面存储的就是读取文件的结果
console.log(fr);
var result = this.result;
// 创建图片对象
var img = document.createElement('img');
img.src = result;
document.body.appendChild(img);
})
}
}
</script>
</body>

本地存储

本地存储

特性

1、设置、读取方便

2、容量较大,sessionStorage约5M、localStorage约20M

3、只能存储字符串,可以将对象JSON.stringify() 编码后存储

window.sessionStorage

1、生命周期为关闭当前页面窗口

2、不能多窗口下数据可以共享 (同源策略,百度家的local阿里他们家是拿不到)

补充:通过跳转可以

运用场景:

页面跳转的时候可以通过session实现数据共享

在一些单页面(spa)的运用中,进行页面传值的时候比较有用

window.localStorage

1、永久生效,除非手动删除或用代码删除

2、可以多窗口共享(同源策略)

运用场景:一些不涉及到安全的一些数据(不要太过庞大)都可以存储到本地

每次http请求都会携带cookie,cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
设置为10天后过期,可以这样实现:
<script language="JavaScript" type="text/javascript">
<!--
//获取当前时间
var date=new Date();
var expireDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expireDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expire="+date.toGMTString();
//-->
</script>
删除cookie
为了删除一个cookie,可以将其过期时间设定为一个过去的时间,例如:
<script language="JavaScript" type="text/javascript">
<!--
//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-10000);
//将userId这个cookie删除
document.cookie="userId=828; expire="+date.toGMTString();
//-->
</script>

指定可访问cookie的路径

1
2
3
4
document.cookie="userId=320; path=/shop";
就表示当前cookie仅能在shop目录下使用。
如果要使cookie在整个网站下可用,可以将cookie_dir指定为根目录,例如:
document.cookie="userId=320; path=/";

方法详解

setItem(key, value) 设置存储内容

getItem(key) 读取存储内容

removeItem(key) 删除键值为key的存储内容

clear() 清空所有存储内容

key(n) 以索引值来获取键名

length 存储的数据的个数

相同点

都是存储数据,存储在web端,并且都是同源

不同点:

(1)cookie 只有4K 小 并且每一次请求都会带上cookie 体验不好,浪费带宽

(2)session和local直接存储在本地,请求不会携带,并且容量比cookie要大的多

(3)session 是临时会话,当窗口被关闭的时候就清除掉 ,而 local永久存在,cookie有过期时间

(4)cookie 和local都可以支持多窗口共享,而session不支持多窗口共享 但是都支持a链接跳转的新窗口

1
2
3
4
5
// localStorage是永久存储,这个页面关闭,浏览器关闭,电脑断电都不会消失,适合存储一些永久性的数据
// sessionStorage是临时存储,这个页面关闭了,session数据会自动删除
/*window.localStorage.setItem('username','congcong');
window.sessionStorage.setItem('username','congcong');*/

API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 存数据
console.log(window.localStorage);
// 在本地存储了一个键为:username 值为feifei的这个一个对象
// 在chrome的控制台的application里面的Storage可以查看
window.localStorage.setItem('username','feifei');
window.localStorage.setItem('username1','feifei1');
window.sessionStorage.setItem('username','feifei');
window.sessionStorage.setItem('username1','feifei1');
// 索引键的名字
alert(window.localStorage.key(0));
alert(window.sessionStorage.key(0));
// 取数据
alert(window.localStorage.getItem('username'));
alert(window.sessionStorage.getItem('username'));
// 获取本地数据的长度
alert(window.localStorage.length);
alert(window.sessionStorage.length);
// 删除数据
window.localStorage.removeItem('username');
window.sessionStorage.removeItem('username');
// 清空所有的数据
window.localStorage.clear();
window.sessionStorage.clear();

jQuery选择器

jQuery选择器

基本选择器

名称 用法 描述
ID选择器 $(“#id”); 获取指定ID的元素
类选择器 $(“.class”); 获取同一类class的元素
标签选择器 $(“div”); 获取同一类标签的所有元素
并集选择器 $(“div,p,li”); 使用逗号分隔,只要符合条件之一就可。
交集选择器 $(“div.redClass”); 获取class为redClass的div元素

总结:跟css的选择器用法一模一样。

层级选择器

名称 用法 描述
子代选择器 $(“ul>li”); 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
后代选择器 $(“ul li”); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

跟CSS的选择器一模一样。

过滤选择器

这类选择器都带冒号:

名称 用法 描述
:eq(index) $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。
:odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中,选择索引号为奇数的元素
:even $(“li:even”).css(“color”, ”red”); 获取到的li元素中,选择索引号为偶数的元素

筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。

名称 用法 描述
children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”),子类选择器
find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器
siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点,不包括自己本身。
parent() $(“#first”).parent(); 查找父亲
eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始
next() $(“li”).next() 找下一个兄弟
prev() $(“li”).prev() 找上一次兄弟

$(“li”).index()获取索引

DOM

DOM

添加样式

className

添加样式

style

添加样式,不推荐,会引起重排

修改对象的某一些属性

DOM对象 .alt .title .className .src

查找元素

getElementById()

getElementsByTagName()

兼容性

不管找到了多少个,返回都是一个伪数组

点击事件对应索引

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
方法一:
var itemli = document.getElementsByTagName("li");
for(var i = 0; i<itemli.length; i++){
    itemli[i].index = i; //给每个li定义一个属性索引值,赋
    itemli[i].onclick = function(){
      alert("下标索引值为:"+this.index+"\n"+"文本内容是:"+this.innerHTML); // \n换行 索引值从0开始
    }
}
方法二:(常用)
var itemli = document.getElementsByTagName("li");
for(var i = 0; i<itemli.length; i++){
   (function(n){
  itemli[i].onclick = function(){
      alert("下标索引值为:"+n+"\n"+"文本内容是:"+itemli[n].innerHTML); // \n换行 索引值从0开始
     }
  })(i)
}
或者or:
for(var i = 0; i<itemli.length; i++){
itemli[i].onclick = function(n){
    return function(){
alert("下标索引值为:"+n+"\n"+"文本内容是:"+itemli[n].innerHTML); // \n换行 索引值从0开始
}
  }(i)
}
方法三:jQuery(更简单)
$("ul li").click(function(){
var item = $(this).index(); //获取索引下标 也从0开始
var textword = $(this).text(); //文本内容
alert("下标索引值为:" + item +"\n"+ "文本内容是:"+textword); // \n换行
})js

attribute系列

attribute系列方法用于设置标签的属性,不管是自定义的还是固有的属性。

1
2
3
getAttribute(name);
setAttribute(name, value);
removeAttribute(name);

DOM API

DOM API

标签内容

innerText和innerHTML属性都是用来获取和设置标签的内容的。但是二者还是有区别的

innerHTML

innerHTML可以用于获取和设置标签的所有内容,包括标签和文本内容

1
2
3
//innerHTML:内部的HTML
// 获取标签内容的时候,不管标签还是文本,都能获取到
// innerHTML设置内容的时候,覆盖原来内容,标签也能生效,浏览器能解析这个标签。

innerText

innerText可以用于获取和设置标签的文本内容,会丢弃掉标签

1
2
3
//innerText:内部 文本
// 获取标签内容的时候,只会获取文本,标签扔掉了
// 设置标签内容的时候,覆盖原来内容,对标签进行转义(目的:把标签直接当文本来用)

二者的区别:

  • innerHTML是W3C的标准属性,而innerText是IE提出来的属性,存在兼容性问题。因此更加推荐大家使用innerHTML。
  • innerText的作用:防止xss攻击

书写innerText的兼容性代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//获取标签的innerText(兼容所有浏览器)
function getInnerText(element) {
if (typeof element.innerText === "string") {
return element.innerText;
} else {
return element.textContent;
}
}
//设置标签的innerText(兼容所有浏览器)
function setInnerText(element, value) {
//能力检测
if (typeof element.innerText === "string") {
element.innerText = value;
} else {
element.textContent = value;
}
}

节点操作

孩子节点

childNodes

获取所有的孩子节点(包括了元素节点和其他很多类型的节点,基本不常用)

children

获取所有的子元素(用途很广泛)

firstChild

第一个节点

firstElementChild

第一个子元素 有兼容性问题 可以封装一个兼容性方法

lastChild

最后一个节点

lastElementChild

最后一个子元素 有兼容性问题 可以封装一个兼容性方法

兄弟节点

nextSibling

下一个兄弟节点

nextElementSibling

下一个兄弟元素(IE678不兼容)

previousSibling

上一个兄弟节点

previousElementSibling

上一个兄弟元素 有兼容性问题 可以封装一个兼容性方法

样式操作

标签不仅可以通过class属性操作样式,还可以通过style属性操作样。同样的DOM对象可以通过className操作样式,也可以通过style属性操作样。

1 style属性是一个对象
2 style这个对象中属性值都是字符串格式
3 标签中style属性有哪些样式名,在style这个对象中就有对应的属性名。
4 标签中有一些属性带了-,比如background-color,到了style对象中,变成了驼峰命名法,backgroundColor(因为-在js中不是一个合法的标识符)
5 DOM中的style属性只能获取和设置行内样式,在类样式中定义的样式通过style获取不到。

1
2
3
// 获取的时候,只能获取行内样式 style通常只是用来设置样式的,很少用来获取样式。
console.log(box.style.width);
console.log(box.style.height);

克隆节点

语法:var newNode = node.cloneNode(deep)

功能:在内存中克隆一份节点

参数:deep

  • false:默认值:是浅复制,只会复制标签,节点本身,不会复制节点的孩子。
  • true:深度复制,会复制标签,还会复制标签的所有内容 常用
  1. 克隆出来的节点跟原来的节点没有关系了,修改了也不会相互影响。
  2. 如果克隆的节点带了id,我们需要给id重新设置一个值,不让id冲突

添加节点

appendChild

语法:parent.appendChild(newChild)

parent:调用者,父节点来调用

newChild:需要添加的那个孩子。

作用:把newChild添加到parent的孩子的最后面。

如果添加的是页面中本来就存在的元素,是一个剪切的效果,原来的就不在了。

1
2
3
var demo = document.getElementById("demo");
var box = document.getElementById("box");
box.appendChild(demo);

insertBefore

语法:parent.insertBefore(newChild, refChild);

parent:必须要父节点来调用

newChild:需要添加的那个节点

refChild:添加到哪一个节点的前面。

1
2
3
4
5
var ul = document.getElementById("list");
var li = document.createElement("li");
li.innerHTML = "骥骥";
//就是添加到子节点的最前面。
ul.insertBefore(li, ul.children[0]);

BOM

BOM

BOM(Browser Object Model):浏览器对象模型,提供了一套操作浏览器功能的工具。

window.onload

window.onload事件会在窗体加载完成后执行,通常我们称之为入口函数。

1
2
3
4
window.onload = function(){
//里面的代码会在窗体加载完成后执行。
//窗体加载完成包括文档树的加载、还有图片、文件的加载完成。
}

window.open 打开窗口

1
2
3
4
5
6
7
8
9
//语法:window.open(url, [name], [features]);
//参数1:需要载入的url地址
//参数2:新窗口的名称
//_self:在当前窗口打开
//_blank:在新的窗口打开
//参数3:窗口的属性,指定窗口的大小
//返回值:会返回刚刚创建的那个窗口,用于关闭
//示例:
var newWin = window.open("http://www.baidu.com","_blank", "width=300,height=300");

window.close 关闭窗口

1
2
newWin.close();//newWin是刚刚创建的那个窗口
window.close();//把当前窗口给关闭了

定时器

延时定时器

设置延时定时器

1
2
3
4
5
6
7
8
//语法:setTimeOut(callback, time);
//参数1:回调函数,时间到了就会执行。
//参数2:延时的时间
//返回:定时器的id,用于清除
//示例:
var timer = setTimeOut(function(){
//1秒后将执行的代码。
}, 1000);

清除延时定时器

1
2
3
4
//语法:clearTimeOut(timerId)
//参数:定时器id
//示例:
clearTimeOut(timer);//清除上面定义的定时器

间歇定时器

设置间歇定时器

1
2
3
4
5
6
7
8
//语法:var intervalID = setInterval(func, delay);
//参数1:重复执行的函数
//参数2:每次延迟的毫秒数
//返回:定时器的id,用于清除
//示例:
var timer = setInterval(function(){
//重复执行的代码。
}, 1000);

清除间歇定时器

1
2
3
4
//语法:clearInterval(intervalID)
//参数:定时器id
//示例:
clearInterval(timer);//清除上面定义的定时器

location对象

location对象也是window的一个属性,location其实对应的就是浏览器中的地址栏。

常用属性和方法

location.href:控制地址栏中的地址

1
location.href = “http://www.baidu.com”;//让页面跳转到百度首页

location.reload():让页面重新加载

1
2
location.reload(true);//强制刷新,相当于ctrl+F5
location.reload(false);//刷新,相当于F5

location的其他属性

1
2
3
4
5
6
7
console.log(window.location.hash);//哈希值 其实就是锚点
console.log(window.location.host);//服务器 服务器名+端口号
console.log(window.location.hostname);//服务器名
console.log(window.location.pathname);//路径名
console.log(window.location.port);//端口
console.log(window.location.protocol);//协议
console.log(window.location.search);//参数

【案例:定时跳转.html】

其他对象

window.navigator的一些属性可以获取客户端的一些信息

1
//navigator.userAgent:浏览器版本

history对象表示页面的历史

1
2
3
4
5
6
//后退:
history.back();
history.go(-1);
//前进:
history.forward();
history.go(1);

screen对象

1
2
3
4
console.log(screen.width);//屏幕的宽度
console.log(screen.height);//屏幕的高度
console.log(screen.availWidth);//浏览器可占用的宽度
console.log(screen.availHeight);//浏览器可占用的高度