JavaScript、Dom和jQuery
JavaScript
JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。
1、JavaScript代码存在形式
|
1
2
3
4
5
6
7
|
<!-- 方式一 --><script type"text/javascript" src="JS文件"></script><!-- 方式二 --><script type"text/javascript"> Js代码内容</script> |
2、JavaScript代码存在位置
- HTML的head中
- HTML的body代码块底部(推荐)
由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。
|
1
2
3
4
5
6
|
如：<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script><script> alert('123');</script> |
3、变量
- 全局变量
- 局部变量
JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量
|
1
2
|
var name = "seven" # 局部变量age = 18 # 全局变量 |
注：注释 // 或 /* */
4、基本数据类型
数字（Number）
|
1
2
3
4
5
|
var page = 111;var age = Number(18);var a1 = 1,a2 = 2, a3 = 3;parseInt("1.2");parseFloat("1.2"); |
字符串(String)
|
1
2
3
4
5
6
7
8
9
10
|
var name = "wupeiqi";var name = String("wupeiqi");var age_str = String(18);常用方法： obj.trim() obj.charAt(index) obj.substring(start,end) obj.indexOf(char) obj.length |
布尔(Boolean)
|
1
2
3
|
var status = true;var status = false;var status = Boolen(1==1) |
数组(Array)
|
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
|
var names = ['alex', 'tony', 'eric']var names = Array('alex', 'tony', 'eric')常用方法： 添加 obj.push(ele) 追加 obj.unshift(ele) 最前插入 obj.splice(index,0,'content') 指定索引插入 移除 obj.pop() 数组尾部获取 obj.shift() 数组头部获取 obj.splice(index,count) 数组指定位置后count个字符 切片 obj.slice(start,end) 合并 newArray ＝ obj1.concat(obj2) 翻转 obj.reverse() 字符串化 obj.join('_') 长度 obj.length字典var items = {'k1': 123, 'k2': 'tony'} |
更多操作见：http://www.shouce.ren/api/javascript/main.html
undefined
|
1
2
|
undefined表示未定义值var name; |
null
|
1
|
null是一个特殊值 |
5、循环语句
|
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
|
var names = ["alex", "tony", "rain"];// 数组：方式一for(var i=0;i<names.length;i++){ console.log(i); console.log(names[i]);}// 数组：方式二for(var index in names){ console.log(index); console.log(names[index]);}var names = {"name": "alex", "age": 18};// 字典：方式一for(var index in names){ console.log(index); console.log(names[index]);}// while循环while(条件){ // break; // continue;} |
6、条件语句
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//if条件语句 if(条件){ }else if(条件){ }else{ }var name = 'alex';var age = 1;// switch,case语句 switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; } |
7、异常处理
|
1
2
3
4
5
6
7
|
try{}catch(e) {}finally{} |
8、函数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
函数的声明 function func(arg){ return true; } 匿名函数 var func = function(arg){ return "tony"; }自执行函数 (function(arg){ console.log(arg); })('123') |
9、面向对象
|
1
2
3
4
5
6
7
8
9
10
11
|
function Foo (name,age) { this.Name = name; this.Age = age; this.Func = function(arg){ return this.Name + arg; }}var obj = new Foo('alex', 18);var ret = obj.Func("sb");console.log(ret); |
Dom
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
注：一般说的JS让页面动起来泛指JavaScript和Dom
1、选择器
|
1
2
3
|
document.getElementById('id');document.getElementsByName('name');document.getElementsByTagName('tagname'); |
2、内容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
innerTextinnerHTMLvar obj = document.getElementById('nid')obj.innerText # 获取文本内容obj.innerText = "hello" # 设置文本内容obj.innerHTML # 获取HTML内容obj.innerHTML = "<h1>asd</h1>" # 设置HTML内容特殊的： input系列 textarea标签 select标签 value属性操作用户输入和选择的值 |
3、创建标签
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
方式一： var obj = document.createElement('a'); obj.href = "http://www.etiantian.org"; obj.innerText = "老男孩"; var container = document.getElementById('container'); //container.appendChild(obj); //container.insertBefore(obj, container.firstChild); //container.insertBefore(obj, document.getElementById('hhh'));方式二： var container = document.getElementById('container'); var obj = "<input type='text' />"; container.innerHTML = obj; // 'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd' //container.insertAdjacentHTML("beforeEnd",obj); |
4、标签属性
|
1
2
3
4
5
6
7
8
9
10
11
|
var obj = document.getElementById('container');固定属性 obj.id obj.id = "nid" obj.className obj.style.fontSize = "88px";自定义属性 obj.setAttribute(name,value) obj.getAttribute(name) obj.removeAttribute(name) |
5、提交表单
|
1
|
document.geElementById('form').submit() |
6、事件
特殊的：
|
1
2
3
|
window.onload = function(){} //jQuery：$(document).ready(function(){}) //onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。 |
特殊参数：this，event
7、其他功能
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
console.log()alert()confirm()// URL和刷新location.hreflocation.href = "url" window.location.reload()// 定时器setInterval("alert()",2000); clearInterval(obj)setTimeout(); clearTimeout(obj) |
实例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' > 5 <title>欢迎blue shit莅临指导 </title> 6 <script type='text/javascript'> 7 function Go(){ 8 var content = document.title; 9 var firstChar = content.charAt(0) 10 var sub = content.substring(1,content.length) 11 document.title = sub + firstChar; 12 } 13 setInterval('Go()',1000); 14 </script> 15 </head> 16 <body> 17 </body> 18 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' /> 5 <title></title> 6 7 <style> 8 .gray{ 9 color:gray; 10 } 11 .black{ 12 color:black; 13 } 14 </style> 15 <script type="text/javascript"> 16 function Enter(){ 17 var id= document.getElementById("tip") 18 id.className = 'black'; 19 if(id.value=='请输入关键字'||id.value.trim()==''){ 20 id.value = '' 21 } 22 } 23 function Leave(){ 24 var id= document.getElementById("tip") 25 var val = id.value; 26 if(val.length==0||id.value.trim()==''){ 27 id.value = '请输入关键字' 28 id.className = 'gray'; 29 }else{ 30 id.className = 'black'; 31 } 32 } 33 </script> 34 </head> 35 <body> 36 <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/> 37 </body> 38 </html>
jQuery
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
http://www.php100.com/manual/jquery/
1、选择器和筛选器
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta charset="utf-8"> 6 <title>Index</title> 7 <style> 8 a { 9 color: #428bca; 10 text-decoration: none; 11 } 12 13 .modal-backdrop { 14 position: fixed; 15 top: 0; 16 right: 0; 17 bottom: 0; 18 left: 0; 19 z-index: 1050; 20 background-color: #white; 21 opacity: 0.8; 22 } 23 24 .modal { 25 position: fixed; 26 top: 30%; 27 left: 50%; 28 z-index: 1030; 29 } 30 31 .hide { 32 display:none; 33 } 34 </style> 35 </head> 36 <body> 37 <div> 38 <input type="button" onclick="fadeIn();" value="加载条"/> 39 </div> 40 <div id="shade" class="modal-backdrop hide"> 41 <div class="modal"> 42 <img src="./images/loading_32.gif"/> 43 </div> 44 </div> 45 <script > 46 function fadeIn() { 47 document.getElementById('shade').className = 'modal-backdrop'; 48 } 49 50 function fadeOut() { 51 document.getElementById('shade').className = 'modal-backdrop hide'; 52 } 53 </script> 54 </body> 55 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' /> 5 <link rel="stylesheet" type="text/css" href="common.css" /> 6 <script type="text/javascript" src='jquery-1.8.2.js'></script> 7 <style> 8 .hide{ 9 display: none; 10 } 11 12 .container{ 13 width:300px; 14 height: 600px; 15 background-color: #ddd; 16 border: 1px solid #999; 17 } 18 19 .container .title{ 20 height: 38px; 21 font-size: 28px; 22 line-height: 38px; 23 background-color: orange; 24 cursor: pointer; 25 } 26 27 .container .body{ 28 background-color:white; 29 } 30 31 .container .body a{ 32 display:block; 33 padding: 10px; 34 } 35 </style> 36 </head> 37 <body> 38 <div class='container'> 39 <div> 40 <div class='title'>Menu1</div> 41 <div class='body'> 42 <a href="">content1</a> 43 <a href="">content2</a> 44 <a href="">content3</a> 45 </div> 46 </div> 47 48 <div> 49 <div class='title'>Menu1</div> 50 <div class='body hide'> 51 <a href="">content1</a> 52 <a href="">content2</a> 53 <a href="">content3</a> 54 </div> 55 </div> 56 57 <div> 58 <div class='title'>Menu1</div> 59 <div class='body hide'> 60 <a href="">content1</a> 61 <a href="">content2</a> 62 <a href="">content3</a> 63 </div> 64 </div> 65 66 <div> 67 <div class='title'>Menu1</div> 68 <div class='body hide'> 69 <a href="">content1</a> 70 <a href="">content2</a> 71 <a href="">content3</a> 72 </div> 73 </div> 74 75 <div> 76 <div class='title'>Menu1</div> 77 <div class='body hide'> 78 <a href="">content1</a> 79 <a href="">content2</a> 80 <a href="">content3</a> 81 </div> 82 </div> 83 84 </div> 85 86 <script type="text/javascript"> 87 $(function(){ 88 $('.title').click(function(){ 89 $(this).parent().siblings().children('.body').addClass('hide'); 90 $(this).next().removeClass('hide'); 91 }); 92 }); 93 </script> 94 </body> 95 </html>
1 /*公共开始*/ 2 body { 3 margin: 0 auto; 4 font-family: Arial; 5 _font-family: 宋体,Arial; 6 font-size: 12px; 7 } 8 body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure, div { 9 margin: 0; 10 padding: 0; 11 } 12 13 ol, ul, li { 14 list-style: none; 15 } 16 a{ 17 cursor:pointer; 18 text-decoration:none; 19 } 20 /*a:hover{ 21 color: #F60 !important; 22 text-decoration: underline; 23 }*/ 24 img{ 25 border:none; 26 border-width:0px; 27 } 28 table{ 29 border-collapse: collapse; 30 border-spacing: 0; 31 } 32 33 .red{ 34 color: #c00!important; 35 } 36 .m8{ 37 margin:8px; 38 } 39 .mt10{ 40 margin-top:10px; 41 } 42 .mt20{ 43 margin-top:20px; 44 } 45 .mr5{ 46 margin-right:5px; 47 } 48 .ml5{ 49 margin-left:5px; 50 } 51 52 .ml10{ 53 margin-left:10px; 54 } 55 56 .mb10{ 57 margin-bottom:10px; 58 } 59 .pt18{ 60 padding-top:18px; 61 } 62 .pt20{ 63 padding-top:20px; 64 } 65 .pb20{ 66 padding-bottom:20px; 67 } 68 .nbr{ 69 border-right:0px; 70 } 71 .font12{ 72 font-size:12px; 73 } 74 .font14{ 75 font-size:14px; 76 } 77 .font16{ 78 font-size:16px; 79 } 80 .bold{ 81 font-weight:bold; 82 } 83 .left{ 84 float:left; 85 } 86 .right{ 87 float:right; 88 } 89 .hide{ 90 display:none; 91 } 92 .show{ 93 display:table; 94 } 95 .clearfix{ 96 clear:both; 97 } 98 .clearfix:after { 99 content: "."; 100 display: block; 101 height: 0; 102 clear: both; 103 visibility: hidden; 104 } 105 * html .clearfix {zoom: 1;} 106 107 .container{ 108 width:1190px; 109 margin-left:auto; 110 margin-right:auto; 111 112 } 113 114 .group-box-1 .title{ 115 height: 33px; 116 line-height: 33px; 117 border: 1px solid #DDD; 118 background: #f5f5f5; 119 padding-top: 0; 120 padding-left: 0; 121 122 } 123 .group-box-1 .title .title-font{ 124 display: inline-block; 125 font-size: 14px; 126 font-family: 'Microsoft Yahei','SimHei'; 127 font-weight: bold; 128 color: #333; 129 padding-left: 10px; 130 } 131 .group-box-1 .body { 132 border: 1px solid #e4e4e4; 133 border-top: none; 134 } 135 136 .tab-menu-box1 { 137 border: 1px solid #ddd; 138 margin-bottom: 20px; 139 } 140 141 .tab-menu-box1 .menu { 142 line-height: 33px; 143 height: 33px; 144 background-color: #f5f5f5; 145 } 146 147 .tab-menu-box1 .content { 148 min-height: 100px; 149 border-top: 1px solid #ddd; 150 background-color: white; 151 } 152 153 .tab-menu-box1 .menu ul { 154 padding: 0; 155 margin: 0; 156 list-style: none; 157 /*position: absolute;*/ 158 } 159 160 .tab-menu-box1 .menu ul li { 161 position: relative; 162 float: left; 163 font-size: 14px; 164 font-family: 'Microsoft Yahei','SimHei'; 165 text-align: center; 166 font-size: 14px; 167 font-weight: bold; 168 border-right: 1px solid #ddd; 169 padding: 0 18px; 170 cursor: pointer; 171 } 172 173 .tab-menu-box1 .menu ul li:hover { 174 color: #c9033b; 175 } 176 177 .tab-menu-box1 .menu .more { 178 float: right; 179 font-size: 12px; 180 padding-right: 10px; 181 font-family: "宋体"; 182 color: #666; 183 text-decoration: none; 184 } 185 186 .tab-menu-box1 .menu a:hover { 187 color: #f60 !important; 188 text-decoration: underline; 189 } 190 191 .tab-menu-box1 .menu .current { 192 margin-top: -1px; 193 color: #c9033b; 194 background: #fff; 195 height: 33px; 196 border-top: 2px solid #c9033b; 197 z-index: 10; 198 } 199 200 .tab-menu-box-2 .float-title { 201 display: none; 202 top: 0px; 203 position: fixed; 204 z-index: 50; 205 } 206 207 .tab-menu-box-2 .title { 208 width: 890px; 209 border-bottom: 2px solid #b20101; 210 border-left: 1px solid #e1e1e1; 211 clear: both; 212 height: 32px; 213 } 214 215 .tab-menu-box-2 .title a { 216 float: left; 217 width: 107px; 218 height: 31px; 219 line-height: 31px; 220 font-size: 14px; 221 font-weight: bold; 222 text-align: center; 223 border-top: 1px solid #e1e1e1; 224 border-right: 1px solid #e1e1e1; 225 background: url(/Content/images/bg4.png?3) 0 -308px repeat-x; 226 text-decoration: none; 227 color: #333; 228 cursor: pointer; 229 } 230 231 .tab-menu-box-2 .title a:hover { 232 background-position: -26px -271px; 233 text-decoration: none; 234 color: #fff; 235 } 236 237 .tab-menu-box-2 .content { 238 min-height: 100px; 239 background-color: white; 240 } 241 242 243 .tab-menu-box3 { 244 border: 1px solid #ddd; 245 } 246 247 .tab-menu-box3 .menu { 248 line-height: 33px; 249 height: 33px; 250 background-color: #f5f5f5; 251 } 252 253 .tab-menu-box3 .content { 254 height: 214px; 255 border-top: 1px solid #ddd; 256 background-color: white; 257 } 258 259 .tab-menu-box3 .menu ul { 260 padding: 0; 261 margin: 0; 262 list-style: none; 263 /*position: absolute;*/ 264 } 265 266 .tab-menu-box3 .menu ul li { 267 position: relative; 268 float: left; 269 font-size: 14px; 270 font-family: 'Microsoft Yahei','SimHei'; 271 text-align: center; 272 font-size: 14px; 273 width:50%; 274 cursor: pointer; 275 } 276 277 .tab-menu-box3 .menu ul li:hover { 278 color: #c9033b; 279 } 280 281 .tab-menu-box3 .menu .more { 282 float: right; 283 font-size: 12px; 284 padding-right: 10px; 285 font-family: "宋体"; 286 color: #666; 287 text-decoration: none; 288 } 289 290 .tab-menu-box3 .menu a:hover { 291 color: #f60 !important; 292 text-decoration: underline; 293 font-weight: bold; 294 } 295 296 .tab-menu-box3 .menu .current { 297 298 margin-top: -1px; 299 color: #c9033b; 300 background: #fff; 301 height: 33px; 302 border-top: 2px solid #c9033b; 303 z-index: 10; 304 font-weight: bold; 305 306 } 307 308 /*公共结束*/
1 <!DOCTYPE html> 2 <html> 3 <head></head> 4 <link href="common.css" rel="stylesheet" /> 5 <body> 6 <div class='container'> 7 <div class='tab-menu-box1'> 8 <div class='menu'> 9 <ul id='tab-menu-title'> 10 <li class='current' content-to='1'>价格趋势</li> 11 <li content-to='2'>市场分布</li> 12 <li content-to='3'>其他</li> 13 </ul> 14 </div> 15 16 <div id='tab-menu-body' class='content'> 17 <div content='1'>content1</div> 18 <div content='2' class='hide'>content2</div> 19 <div content='3' class='hide'>content3</div> 20 </div> 21 </div> 22 </div> 23 <script src="./jquery-1.8.2.js"></script> 24 <script type='text/javascript'> 25 $(function(){ 26 ChangeTab('#tab-menu-title', '#tab-menu-body'); 27 }) 28 function ChangeTab(title, body) { 29 $(title).children().bind("click", function () { 30 $menu = $(this); 31 $content = $(body).find('div[content="' + $(this).attr("content-to") + '"]'); 32 $menu.addClass('current').siblings().removeClass('current'); 33 $content.removeClass('hide').siblings().addClass('hide'); 34 }); 35 } 36 </script> 37 </body> 38 </html>
2、属性和css
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .back{ 8 position: fixed; 9 bottom: 0px; 10 right: 0px; 11 } 12 .hide{ 13 display: none; 14 } 15 </style> 16 </head> 17 <body> 18 19 <div style="height: 2000px;"></div> 20 21 <div onclick="GoTop()" class="back hide">返回顶部</div> 22 23 <script src="jquery-1.8.2.js"></script> 24 <script type="text/javascript"> 25 26 function GoTop(){ 27 //返回顶部 28 $(window).scrollTop(0); 29 } 30 $(function(){ 31 $(window).scroll(function(){ 32 //当滚动滑轮时，执行函数体 33 //获取当前滑轮滚动的高度 34 var top = $(window).scrollTop(); 35 if(top>100){ 36 //展示“返回顶部” 37 $('.back').removeClass('hide'); 38 }else{ 39 //隐藏“返回顶部” 40 $('.back').addClass('hide'); 41 } 42 }); 43 }); 44 </script> 45 </body> 46 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' /> 5 <title></title> 6 <script type="text/javascript" src='jquery-1.8.2.js'></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $('#selectAll').click(function(){ 10 $('#checklist :checkbox').prop('checked',true); 11 }) 12 $('#unselectAll').click(function(){ 13 $('#checklist :checkbox').prop('checked',false); 14 }) 15 $('#reverseAll').click(function(){ 16 $('#checklist :checkbox').each(function(){ 17 $(this).prop('checked',!$(this).prop('checked')) 18 }) 19 }) 20 21 }) 22 </script> 23 </head> 24 <body> 25 <div id='checklist'> 26 <input type='checkbox' value='1'/>篮球 27 <input type='checkbox' value='2'/>足球 28 <input type='checkbox' value='3'/>羽毛球 29 </div> 30 <input type='button' value='全选' id='selectAll' /> 31 <input type='button' value='不选' id='unselectAll' /> 32 <input type='button' value='反选' id='reverseAll' /> 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 body{ 9 margin: 0px; 10 } 11 img { 12 border: 0; 13 } 14 ul{ 15 padding: 0; 16 margin: 0; 17 list-style: none; 18 } 19 .clearfix:after { 20 content: "."; 21 display: block; 22 height: 0; 23 clear: both; 24 visibility: hidden; 25 } 26 27 .wrap{ 28 width: 980px; 29 margin: 0 auto; 30 } 31 32 .pg-header{ 33 background-color: #303a40; 34 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); 35 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); 36 box-shadow: 0 2px 5px rgba(0,0,0,.2); 37 } 38 .pg-header .logo{ 39 float: left; 40 padding:5px 10px 5px 0px; 41 } 42 .pg-header .logo img{ 43 vertical-align: middle; 44 width: 110px; 45 height: 40px; 46 47 } 48 .pg-header .nav{ 49 line-height: 50px; 50 } 51 .pg-header .nav ul li{ 52 float: left; 53 } 54 .pg-header .nav ul li a{ 55 display: block; 56 color: #ccc; 57 padding: 0 20px; 58 text-decoration: none; 59 font-size: 14px; 60 } 61 .pg-header .nav ul li a:hover{ 62 color: #fff; 63 background-color: #425a66; 64 } 65 .pg-body{ 66 67 } 68 .pg-body .catalog{ 69 position: absolute; 70 top:60px; 71 width: 200px; 72 background-color: #fafafa; 73 bottom: 0px; 74 } 75 .pg-body .catalog.fixed{ 76 position: fixed; 77 top:10px; 78 } 79 80 .pg-body .catalog .catalog-item.active{ 81 color: #fff; 82 background-color: #425a66; 83 } 84 85 .pg-body .content{ 86 position: absolute; 87 top:60px; 88 width: 700px; 89 margin-left: 210px; 90 background-color: #fafafa; 91 overflow: auto; 92 } 93 .pg-body .content .section{ 94 height: 500px; 95 } 96 </style> 97 </head> 98 <body> 99 100 <div class="pg-header"> 101 <div class="wrap clearfix"> 102 <div class="logo"> 103 <a href="#"> 104 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> 105 </a> 106 </div> 107 <div class="nav"> 108 <ul> 109 <li> 110 <a href="#">首页</a> 111 </li> 112 <li> 113 <a href="#">功能一</a> 114 </li> 115 <li> 116 <a href="#">功能二</a> 117 </li> 118 </ul> 119 </div> 120 121 </div> 122 </div> 123 <div class="pg-body"> 124 <div class="wrap"> 125 <div class="catalog"> 126 <div class="catalog-item" auto-to="function1"><a>第1张</a></div> 127 <div class="catalog-item" auto-to="function2"><a>第2张</a></div> 128 <div class="catalog-item" auto-to="function3"><a>第3张</a></div> 129 </div> 130 <div class="content"> 131 <div menu="function1" class="section"> 132 <h1>第一章</h1> 133 </div> 134 <div menu="function2" class="section"> 135 <h1>第二章</h1> 136 </div> 137 <div menu="function3" class="section"> 138 <h1>第三章</h1> 139 </div> 140 </div> 141 </div> 142 143 </div> 144 145 <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> 146 <script type="text/javascript"> 147 $(function(){ 148 Init(); 149 }); 150 function Init(){ 151 $(window).scroll(function() { 152 var scrollTop = $(window).scrollTop(); 153 if(scrollTop > 50){ 154 $('.catalog').addClass('fixed'); 155 }else{ 156 $('.catalog').removeClass('fixed'); 157 } 158 $('.content').children().each(function(){ 159 var offSet = $(this).offset(); 160 var offTop = offSet.top - scrollTop; 161 var height = $(this).height(); 162 163 if(offTop<=0 && offTop> -height){ 164 //去除其他 165 //添加自己 166 var docHeight = $(document).height(); 167 var winHeight = $(window).height(); 168 169 if(docHeight == winHeight+scrollTop) 170 { 171 $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active'); 172 }else{ 173 var target = $(this).attr('menu'); 174 $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active'); 175 } 176 177 } 178 }); 179 }); 180 } 181 </script> 182 </body> 183 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div> 9 <div id="currentPosition" style="position: fixed;top: 0px;right: 0px;"></div> 10 <div> 11 <div class="chapter" style="height: 500px;"> 12 <h1>第一张</h1> 13 </div> 14 15 <div class="chapter" style="height: 1500px;"> 16 <h1>第二张</h1> 17 </div> 18 19 <div class="chapter" style="height: 30px;"> 20 <h1>第三张</h1> 21 </div> 22 </div> 23 </div> 24 25 26 27 <script src="jquery-1.8.2.min.js" type="text/javascript"></script> 28 <script type="text/javascript"> 29 $(function(){ 30 $(window).scroll(function(){ 31 var scroll_top = $(window).scrollTop(); 32 var list = []; 33 $.each($('.chapter'), function(i){ 34 var current_height = $($('.chapter')[i]).offset().top; 35 list.push(current_height); 36 }); 37 $.each(list,function(i){ 38 if (scroll_top+$(window).height() == $(document).height()){ 39 $('#currentPosition').text($('.chapter').last().text()); 40 return 41 } 42 if (scroll_top>list[i]){ 43 $('#currentPosition').text($($('.chapter')[i]).text()); 44 return 45 } 46 }) 47 48 }) 49 }); 50 </script> 51 </body> 52 </html>
3、文档处理
4、事件
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> 9 <div id="title" style="background-color: black;height: 40px;"></div> 10 <div style="height: 300px;"></div> 11 </div> 12 <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> 13 <script> 14 $(function(){ 15 $('#title').mouseover(function(){ 16 $(this).css('cursor','move'); 17 }).mousedown(function(e){ 18 //console.log($(this).offset()); 19 var _event = e || window.event; 20 var ord_x = _event.clientX; 21 var ord_y = _event.clientY; 22 23 var parent_left = $(this).parent().offset().left; 24 var parent_top = $(this).parent().offset().top; 25 26 $(this).bind('mousemove', function(e){ 27 var _new_event = e || window.event; 28 var new_x = _new_event.clientX; 29 var new_y = _new_event.clientY; 30 31 var x = parent_left + (new_x - ord_x); 32 var y = parent_top + (new_y - ord_y); 33 34 $(this).parent().css('left',x+'px'); 35 $(this).parent().css('top',y+'px'); 36 37 }) 38 }).mouseup(function(){ 39 $(this).unbind('mousemove'); 40 }); 41 }) 42 </script> 43 </body> 44 </html>
5、扩展
下载：https://files.cnblogs.com/files/wupeiqi/%E7%99%BB%E9%99%86%E6%B3%A8%E5%86%8C.zip
6、ajax和跨域
下载：https://files.cnblogs.com/files/wupeiqi/ajax_demo.zip
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" onclick="AjaxRequest()" value="跨域Ajax" /> 9 10 11 <div id="container"></div> 12 13 <script src="jquery-1.8.2.min.js" type="text/javascript"></script> 14 <script type="text/javascript"> 15 function AjaxRequest() { 16 $.ajax({ 17 url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403', 18 type: 'GET', 19 dataType: 'jsonp', 20 jsonp: 'callback', 21 jsonpCallback: 'list', 22 success: function (data) { 23 $.each(data.data,function(i){ 24 var item = data.data[i]; 25 var str = "<p>"+ item.week +"</p>"; 26 $('#container').append(str); 27 $.each(item.list,function(j){ 28 var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>"; 29 $('#container').append(temp); 30 }); 31 $('#container').append("<hr/>"); 32 }) 33 34 } 35 }); 36 } 37 </script> 38 </body> 39 </html>
