js基础
- window - document
- document.title document.head document.body
- document.documentElement (约等于 document.html )
- scrollTop 被卷去的头部 scrollLeft 封装自己的 函数
- scrollTo(x,y) 去往页面的 x 和 y 坐标 的位置
- window.scrollTo(x,y)
- window.onscroll = fucntion() { fun (); } fun() function() {iffss }
-
1.1 client 家族
client 可视区域
offsetWidth: width + padding + border （披着羊皮的狼）
clientWidth： width + padding 不包含border
scrollWidth: 大小是内容的大小
1.1.1 检测屏幕宽度(可视区域)
ie9及其以上的版本
window.innerWidth
标准模式
document.documentElement.clientWidth
怪异模式
document.body.clientWidth
自己封装一个 返回可视区宽度和高度的函数。
1.1.2 window.onresize 改变窗口事件
昨天 window.onscroll = function() {} 屏幕滚动事件
今天 window.onresize = function() {} 窗口改变事件
onresize 事件会在窗口或框架被调整大小时发生
要求：
当我们的页面宽度大于 960 像素的时候 页面颜色是红色
当我们的页面宽度 大于 640 小于 960 页面的颜色是 绿色
剩下的颜色是 蓝色
function fun() { 语句 }
fun 是函数体的意思
fun() 调用函数 的意思
function fun() {
return 3;
}
console.log(fun); // 返回函数体 function fun() { retrun 3}
console.log(fun()); // 调用函数 3 返回的是结果
fun();
window.onresize = 3
window.onresize = function fun() { retrun 3}1.2 检测屏幕宽度(分辨率)
clientWidth 返回的是 可视区 大小 浏览器内部的大小
window.screen.width 返回的是我们电脑的 分辨率 跟浏览器没有关系
1.3 简单冒泡机制
事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
顺序
E 6.0:
div -> body -> html -> document
其他浏览器:
div -> body -> html -> document -> window
不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload
1.3.1 阻止冒泡的方法
标准浏览器 和 ie浏览器
w3c的方法是event.stopPropagation() proPagation 传播 传递
IE则是使用event.cancelBubble = true bubble 冒泡 泡泡 cancel 取消
兼容的写法：
1 if(event && event.stopPropagation)
2 {
3 event.stopPropagation(); // w3c 标准
4 }
5 else
6 {
7 event.cancelBubble = true; // ie 678 ie浏览器
8 }
1.3.2 小案例 点击空白处隐藏盒子
这个案例就是说，一个盒子，点击除了自己之外的任何一个地方，就会隐藏。
原理：
点击自己不算 ( 怎么证明我是我 点击的这个对象id 正好和自己一样 )
点击空白处 就是点击 document
1.3.3 判断当前对象
火狐 谷歌 等 event.target.id
ie 678 event.srcElement.id
兼容性写法：
var targetId = event.target ? event.target.id : event.srcElement.id;
targetId != "show"
代码：
1 <!DOCTYPE html>
9 <html>
10 <head lang="en">
11 <meta charset="UTF-8">
12 <title></title>
13 <style>
14 body {
15 height:2000px;
16 }
17 #mask {
18 width: 100%;
19 height: 100%;
20 opacity: 0.4; /*半透明*/
21 filter: alpha(opacity = 40); /*ie 6半透明*/
22
23 position: fixed;
24 top: 0;
25 left: 0;
26 display: none;
27 }
28 #show {
29 width: 300px;
30 height: 300px;
31 background-color: #fff;
32 position: fixed;
33 left: 50%;
34 top: 50%;
35 margin: -150px 0 0 -150px;
36 display: none;
37 }
38 </style>
39 </head>
40 <body>
41 <a href="javascript:;" id="login">注册</a>
42 <a href="javascript:;">登录</a>
43 <div id="mask"></div>
44 <div id="show"></div>
45 </body>
46 </html>
47 <script>
48 function $(id) { return document.getElementById(id);}
49 var login = document.getElementById("login");
50 login.onclick = function(event) {
51 $("mask").style.display = "block";
52 $("show").style.display = "block";
53 document.body.style.overflow = "hidden"; // 不显示滚动条
54 //取消冒泡
55 var event = event || window.event;
56 if(event && event.stopPropagation)
57 {
58 event.stopPropagation();
59 }
60 else
61 {
62 event.cancelBubble = true;
63 }
64 }
65 document.onclick = function(event) {
66
67 var event = event || window.event;
68 // alert(event.target.id); // 返回的是点击的某个对象的id 名字
69 // alert(event.srcElement.id);
70 var targetId = event.target ? event.target.id : event.srcElement.id;
71 // 看明白这个写法
72 if(targetId != "show") // 不等于当前点点击的名字
73 {
74 $("mask").style.display = "none";
75 $("show").style.display = "none";
76 document.body.style.overflow = "visible"; // 显示滚动条
77 }
78 }
79 </script>
1.3.4 选中之后，弹出层
我们想，选中某些文字之后，会弹出一个弹出框
这个和 我们前面讲过的拖拽有点不一样。
拖拽 是拖着走。 拉着鼠标走 。
选择文字： 这个弹出的层 选中的时候不出来，弹起鼠标的时候才出现 。
所以这个的事件一定是 onmouseup . 盒子显示而且盒子的位置 再 鼠标的 clientX 和 clientY 一模一样
用来判断选择的文字：
1.3.5 获得用户选择内容
window.getSelection() 标准浏览器
document.selection.createRange().text; ie 获得选择的文字
兼容性的写法：
if(window.getSelection)
{
txt = window.getSelection().toString(); // 转换为字符串
}
else
{
txt = document.selection.createRange().text; // ie 的写法
}综合代码:
1 <!DOCTYPE html>
80 <html>
81 <head lang="en">
82 <meta charset="UTF-8">
83 <title></title>
84 <style>
85 div {
86 width: 400px;
87 margin:50px;
88 }
89 #demo {
90 width: 100px;
91 height: 100px;
92
93 position: absolute;
94 top: 0;
95 left: 0;
96 display: none;
97 }
98 </style>
99 </head>
100 <body>
101 <span id="demo"></span>
102 <div id="test">我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字</div>
103 <div id="another">
104 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字
105 </div>
106 </body>
107 </html>
108 <script>
109 function $(id) {return document.getElementById(id)}
110 $("test").onmouseup = function(event) {
111 var event = event || window.event;
112 var x = event.clientX; // 鼠标的x坐标
113 var y = event.clientY; // 同理
114 var txt; // 用于存贮文字的变量
115 if(window.getSelection) // 获取我们选中的文字
116 {
117 txt = window.getSelection().toString(); // 转换为字符串
118 }
119 else
120 {
121 txt = document.selection.createRange().text; // ie 的写法
122 }
123 if(txt) // 所有的字符串都为真 "" 是假 所有的数字为真 0 为假
124 {
125 //看看有没有选中的文字，没有选中文字为空的，就不应该执行 点击一下鼠标 就是空的
126 showBox(x,y,txt); // 调用函数
127 }
128 }
129 document.onclick = function(event) { // 点击空白处隐藏
130 var event = event || window.event;
131 var targetId = event.target ? event.target.id : event.srcElement.id;
132 if(targetId != "demo"){
133 $("demo").style.display = "none";
134 }
135 }
136 function showBox(mousex,mousey,contentText) { // 相关操作
137 setTimeout(function(){
138 $("demo").style.display = "block";
139 $("demo").style.left = mousex + "px";
140 $("demo").style.top = mousey + "px";
141 $("demo").innerHTML = contentText;
142 },300);
143 }
144 </script>
浙公网安备 33010602011771号