JavaScript与java语言没有任何关系，它是一门独立的客户端浏览器脚本语言，之所以也包含java字样，是因为Netscape在创建这么语言时，最初命名为LiveScript,但java那时大行其道，Netscape为获得市场营销方面的成功，而不顾及产品的实质，也取了一个与java挨边的名字。
Ajax是Asynchronous JavaScript and XML异步javascript和xml
ajax一般是指以下技术的组合：
xhtml
css(Cascading Style sheet) 层叠样式表
使用javascript访问的DOM(Document Object Model 文档对象模型)
XML或JSON这是在服务器和客户端之间传输的数据格式
XMLHttpRequest 用来从服务器获取数据
事件
onabort 用户终止了页面的加载
onblur 用户离开了对象
onchange 用户修改了对象
onclick 用户单击了对象
onerror 脚本遇到了一个错误
onfocus 用户激活了对象
onload 对象完成了加载
onmouseover 鼠标指针移动到对象上
onmouseout 鼠标指针离开了对象
onselect 鼠标选择了对象的内容
onsubmit 用户提交了表单
onunload 用户离开了页面
javascript值和变量
数字 任何数字值
字符串 引号中的字符
布尔值（boolean）true或false
空值null 空且无含义
x+y(数字) 将x+y相加
x+y(字符串) 将x和y拼接在一起
x-y从x中减去y
x*y 将x和y相乘
x／y将x除以y
x%y x和y的模（x除以y的余数）
x++,++x 给x加1,相当于 x = x+1，前者中完成赋值之后再递增x，而后者是加完后再赋值
例如x=5。y=x++，y会设置为5，x设置为6，而y=++x会将x和y都设置6
x--,--x 给x减1，相当于x = x -1
-x
首先创建一个js文件
1 /** 2 * Created by zengchunyun on 16/4/10. 3 */ 4 window.onload = writeMessage; 5 function writeMessage() { 6 document.getElementById("helloMessage").innerHTML = "Hello,World!"; 7 }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>myweb</title> 6 </head> 7 <body> 8 <h1 id="helloMessage"></h1> 9 <script src="js1.js"></script> 10 11 <!--<script>--> 12 <!--window.onload = function () {--> 13 <!--document.getElementById("myMessage").innerHTML = "Hello, Cleveland!";--> 14 <!--};--> 15 <!--var x = 5;--> 16 <!--var y = x--;--> 17 <!--console.log(y, x);--> 18 <!--document.write('hello');--> 19 <!--</script>--> 20 21 </body> 22 </html>
条件表达式
1 if(confirm("yes no?")){ 2 alert("yes"); 3 }else{ 4 alert("no"); 5 } 6 confirm("yes") ? alert("yes") : alert("no");
提示用户
1 var ans = prompt("Are you sure you want to do that?"); 2 if(ans){ 3 alert('you said' + ans); 4 }else { 5 alert("you said"); 6 }
switch case
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <h2>Famous Presidential Quotes</h2> 9 <form action="#"> 10 <input type="button" id="Lincoln" value="Lincoln" /> 11 <input type="button" id="Kennedy" value="Kennedy" /> 12 <input type="button" id="Nixon" value="Nixon" /> 13 </form> 14 15 <script> 16 window.onload = initAll; 17 function initAll() { 18 document.getElementById("Lincoln").onclick=saySomething; 19 document.getElementById("Kennedy").onclick=saySomething; 20 document.getElementById("Nixon").onclick=saySomething; 21 } 22 function saySomething() { 23 console.log(this.id); 24 switch(this.id) { 25 case "Lincoln": 26 alert("Four score and seven years ago..."); 27 break; 28 case "Kennedy": 29 alert("Ask not what your country can do for you..."); 30 break; 31 case "Nixon": 32 alert("I am not a crook!"); 33 break; 34 default: 35 } 36 } 37 </script> 38 </body> 39 </html>
try throw catch
1 <script> 2 window.onload = initAll; 3 function initAll() { 4 var ans = prompt("Enter a number"); 5 try{ 6 if(!ans || isNaN(ans) || ans<0){ 7 throw new Error("Not a valid number"); 8 } 9 alert("the square root of " + ans + " is " + Math.sqrt(ans)); 10 } 11 catch (errMsg){ 12 alert(errMsg.message); 13 } 14 } 15 </script>
for
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 background-color: white; 9 color: black; 10 font-size: 20px; 11 font-family: "Lucida Grande", Verdana,Arial, Helvetica, sans-serif; 12 } 13 h1,th{ 14 font-family: Georgia, "Times New Roman",Times, serif; 15 } 16 h1{ 17 font-size: 28px; 18 } 19 table{ 20 border-collapse: collapse; 21 } 22 th, td { 23 padding: 10px; 24 border: 2px #666 solid; 25 text-align: center; 26 width: 20%; 27 } 28 #free, .pickedBG { 29 background-color: #f66; 30 } 31 .winningBG { 32 background-image:url(images/redFlash.gif); 33 } 34 </style> 35 </head> 36 <body> 37 <h1>Create A Bingo Card</h1> 38 <table> 39 <tr> 40 <th>B</th> 41 <th>I</th> 42 <th>N</th> 43 <th>G</th> 44 <th>O</th> 45 </tr> 46 <tr> 47 <td id="square0"> </td> 48 <td id="square5"> </td> 49 <td id="square10"> </td> 50 <td id="square14"> </td> 51 <td id="square19"> </td> 52 </tr> 53 <tr> 54 <td id="square1"> </td> 55 <td id="square6"> </td> 56 <td id="square11"> </td> 57 <td id="square15"> </td> 58 <td id="square20"> </td> 59 </tr> 60 <tr> 61 <td id="square2"> </td> 62 <td id="square7"> </td> 63 <td id="free">Free</td> 64 <td id="square16"> </td> 65 <td id="square21"> </td> 66 </tr> 67 <tr> 68 <td id="square3"> </td> 69 <td id="square8"> </td> 70 <td id="square12"> </td> 71 <td id="square17"> </td> 72 <td id="square22"> </td> 73 </tr> 74 <tr> 75 <td id="square4"> </td> 76 <td id="square9"> </td> 77 <td id="square13"> </td> 78 <td id="square18"> </td> 79 <td id="square23"> </td> 80 </tr> 81 </table> 82 <p><a href="script01.html" id="reload">Click here</a> to create a new card</p> 83 <script> 84 window.onload = initAll; 85 function initAll() { 86 for (var i=0; i<24; i++) { 87 var newNum = Math.floor(Math.random() * 75) + 1; 88 document.getElementById("square" + i).innerHTML = newNum; 89 } 90 } 91 </script> 92 </body> 93 </html>
Array
定义数组方式,以下这几种定义数组方式都可以定义一个数组
1 usedNums = new Array(76) //定义76个对象 2 usedNums = new Array(1,2,3,4,5) //定义5个对象 3 usedNums = [1,2,3,4,5]
do while
1 window.onload = initALL; 2 var usedNums = new Array(76); 3 function initALL() { 4 if(document.getElementById){ 5 for(var i=0; i<24;i++){ 6 setSquare(i); 7 } 8 }else{ 9 alert("Sorry,your brower doesn't support this script"); 10 } 11 } 12 function setSquare(thisSquare){ 13 var currSquare = "square" + thisSquare; 14 // var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 15 var colPlace = [0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4]; 16 var colBasis = colPlace[thisSquare] * 15; 17 var newNum; 18 do{ 19 newNum = colBasis + getNewNum() + 1; 20 }while (usedNums[newNum]); 21 usedNums[newNum] = true; 22 document.getElementById(currSquare).innerHTML = newNum; 23 // var newNum = colBasis + getNewNum() + 1; 24 // if (!usedNums[newNum]){ //当数组不存在该对象则为真 25 // usedNums[newNum] = true; 26 // document.getElementById(currSquare).innerHTML = newNum; 27 // } 28 } 29 function getNewNum() { 30 return Math.floor(Math.random() * 15); 31 }
字符串（String）
1 var name = "zengchunyun"; 2 var name = String("zengchunyun"); 3 var age = String(18); 4 // var username = prompt("please input name").trim(); //去除用户输入左右两边空白字符 5 console.log(name.charAt(0)); // 获取字符串下标为0的字符 6 console.log(name.substring(1,3)); //获取下标>=1 <3的字符 7 console.log(name.indexOf('ex')); //通过字符查找在字符串里的下标,找不到则为-1,如果输入多个字符,则仅返回找到的第一个下标,且字符必须连续 8 console.log(name.length);
关于字符串更多详细介绍参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String
严格相等＝＝＝与非严格相等＝＝
全等操作符比较两个值是否相等，不会在比较前进行隐式转化，非全等操作在比较前会将两个值转换为相同类型，再进行比较
Array数组
1 [element0, element1, ..., elementN] 2 new Array(element0, element1[, ...[, elementN]]) 3 new Array(arrayLength)
1 var names = ['zeng', 'chun', 'yun']; 2 console.log(names); 3 var name2 = new Array('zeng', 'chun', 'yun'); 4 console.log(name2); 5 console.log(names.length); //显示数组长度 6 console.log(names[0]); // 显示第一个元素 7 names.forEach(function (item, index,array) { 8 console.log(item,index); 9 }); //遍历一个数组 10 11 names.push('hao'); //将hao元素追加到数组末尾 12 console.log(names); 13 14 var outobj = names.pop(); //将数组最后一个元素删除并获得被删除的元素 15 console.log(outobj,names); 16 17 outobj = names.shift(); //删除数组前面的元素,并获得该元素 18 console.log(outobj, names); 19 20 names.unshift("new"); // 添加元素到数组最前面 21 console.log(names); 22 23 var ops = names.indexOf("chun"); //找到元素chun在数组中的索引位置 24 console.log(ops); 25 26 27 names.unshift("new2"); 28 var removeItem = names.splice(2,1); // 删除下标为2的元素,只删除一次,如果第二个数字1改成2,假如数组索引2后面还有元素,则会将连着的这两个元素一起删除 29 console.log(removeItem, ' ',names); 30 names.unshift("new3"); 31 names.unshift("new4"); 32 names.splice(2,0,'test'); //在第二个元素后的第一个位置插入一个新元素,如果第二位数字是1,则会替换从第一位数字后开始算起的到第二位数,及1这个下标的元素 33 console.log(names); 34 35 var shallow = names.slice(); //复制数组 36 console.log(shallow); 37 38 var newsha = names.slice(1,3); //取>=1 <3的元素给newsha数组,相当于切片 39 console.log(newsha,' ',names); 40 41 var newarr = newsha.concat(shallow); //将两个数组合并 42 console.log(newarr); 43 44 newarr.reverse(); //将数组顺序反转 45 console.log(newarr); 46 47 var newstr = newarr.join('-'); // 用-拼接元素 48 console.log(newstr); 49 50 //更多数组介绍https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
函数定义三种形式
1 //普通函数 2 function fus() { 3 console.log('fus'); 4 return '222' 5 } 6 var a = fus(); 7 console.log(a); 8 function aaa(arg) { 9 console.log(arg); 10 } 11 aaa(222); 12 //匿名函数 13 var aas = function (arg) { 14 console.log(arg); 15 }; 16 aas(333); 17 //自执行函数 18 (function (arg) { 19 console.log(arg) 20 })(223); //223为参数
面向对象
1 //面向对象 2 function MyFoo(name,age) { 3 this.Name = name; 4 this.Age = age; 5 this.Func = function (arg) { 6 return this.Name + arg; 7 } 8 } 9 10 var obj = new MyFoo('zeng',18); 11 var ret = obj.Func('chunyun'); 12 console.log(ret);
1 class Polygon { 2 constructor(height,width){ 3 this.height = height; 4 this.width = width; 5 } 6 get area() { 7 return this.calcArea() 8 } 9 calcArea(){ 10 return this.height * this.width; 11 } 12 } 13 14 class Point { 15 constructor(x, y) { 16 this.x = x; 17 this.y = y; 18 } 19 20 static distance(a, b) { 21 const dx = a.x - b.x; 22 const dy = a.y - b.y; 23 24 return Math.sqrt(dx*dx + dy*dy); 25 } 26 } 27 28 const p1 = new Point(5, 5); 29 const p2 = new Point(10, 10); 30 31 console.log(Point.distance(p1, p2)); 32 //更多介绍https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes
DOM
1.选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title id="2">Title</title> 6 </head> 7 <body> 8 9 <div> 10 <h2>ok</h2> 11 <form action="#" id="1" class="form1" name="form1"> 12 <input type="text"> 13 <input type="text"> 14 <p>男:<input id=3 type="checkbox" name="男" value="nan"></p> 15 <input type="submit"> 16 </form> 17 <h1>hao</h1> 18 <input type="datetime-local"> 19 </div> 20 <script> 21 //选择器 22 // var names = document.getElementsByClassName('form1'); // 得到的是一个列表对象 23 // var names = document.getElementsByName('form1'); //得到的是一个列表对象 24 // var names = document.getElementsByTagName('FORM'); // 得到的是一个列表对象 25 var names = document.getElementById('1'); //得到一个普通对象 26 // var names = document.querySelector('*'); //得到一个最先找到的对象,可以使用通配符* 27 28 console.log(names); 29 </script> 30 31 </body> 32 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title id="2">Title</title> 6 </head> 7 <body> 8 9 <div> 10 <h2>ok</h2> 11 <form action="#" id="1"> 12 <input type="text"> 13 <input type="text"> 14 <p>男:<input id=3 type="checkbox" name="男" value="nan"></p> 15 <input type="submit"> 16 </form> 17 <h1>hao</h1> 18 </div> 19 <script> 20 // var names = document.getElementById('1').childElementCount; //查询子元素个数 21 //var names = document.getElementById('1').firstElementChild; //查询第一个元素 22 //var names = document.getElementById('1').getAttribute('action'); //获取该元素属性对应的值,不存在则为null 23 //var names = document.getElementById('1').hasAttribute('name'); //查询元素是否设置了name属性 24 //var names = document.getElementById('1').lastElementChild; //查询最后一个元素,如果查询的元素内没有包含其它元素,则返回null 25 //var names = document.getElementById('1').nextElementSibling; //查询下一个同级别元素 26 //var names = document.getElementById('1').previousElementSibling; //查询同级别的上一个元素 27 //var names = document.getElementById('1').querySelector('H1'); //在子元素里查询找到的第一个子元素标签 28 //var names = document.getElementById('1').querySelectorAll('INPUT'); //查询子元素内所有INPUT的标签,如果设置了ID则会将ID一并返回 29 //var names = document.getElementById('1').removeAttribute('action'); //移除存在的属性 30 //var names = document.getElementById('1').setAttribute('method','post'); //添加属性,并设置属性值 31 //var names = document.getElementById('1').tagName; //查询元素的标签名 32 //var names = document.getElementById('1').attributes; //查询元素所有属性 33 //var names = document.getElementById('1').baseURI; //查询元素所属url 34 //var names = document.getElementById('1').id; //查询元素ID 35 //var names = document.getElementById('2').innerText ="hhh"; //设置元素内文本属性 36 //var names = document.getElementById('1').innerHTML; //查询元素内的html及文本内容 37 var names = document.getElementById('1').innerText; //查询元素内文本属性 38 39 console.log(names); 40 </script> 41 42 </body> 43 </html>
修改标签内容
可以通过找到的对象obj
obj.innerText = "ok"
obj.innerHtml = "<h1>ok</h1>"
修改标签内容
对于特殊的标签
input系列
textarea标签
select标签
需要通过obj.value = 'ok'形式修改内容
插入标签的几种形式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title id="2">Title</title> 6 </head> 7 <body> 8 9 <div> 10 <h2>ok</h2> 11 <form action="#" id="1" class="form1" name="form1"> 12 <input id =5 type="text"> 13 <input type="text"> 14 <p>男:<input id=3 type="checkbox" name="男" value="nan"></p> 15 <input type="submit"> 16 </form> 17 <h1 id="h1">hao</h1> 18 <input type="datetime-local"> 19 </div> 20 <script> 21 var names = document.getElementById('5'); //得到一个普通对象 22 // var names = document.querySelector('*'); //得到一个最先找到的对象,可以使用通配符* 23 names.value = "ok"; 24 var newtag = document.createElement('a'); 25 newtag.href = "http://www.forts.cc"; 26 newtag.innerText = "堡垒"; 27 28 var container = document.getElementsByTagName('form')[0]; // 找到第一个H1标签 29 // container.appendChild(newtag); //将新标签放到该标签里面,作为H1标签的子标签 30 31 // container.insertBefore(newtag,container.firstChild); //将新标签插到H1标签第一个子标签位置 32 // container.innerHTML = "<input type='text' />"; //这种方式会直接把container里面的所有元素覆盖 33 //'beforeBegin', 'afterBegin','beforeEnd','afterEnd' 34 // container.insertAdjacentHTML('beforeEnd', "<a href='#'>堡垒</a>"); // 插在容器末尾最后一个子元素 35 // container.insertAdjacentHTML('beforeBegin', "<a href='#'>堡垒</a>"); //插在容器前,同级插入 36 // container.insertAdjacentHTML('afterBegin', "<a href='#'>堡垒</a>"); //插在容器内,成为容器的第一个儿子 37 container.insertAdjacentHTML('afterEnd', "<a href='#'>堡垒</a>"); //同级插入,在容器标签的后面 38 console.log(names); 39 </script> 40 41 </body> 42 </html>
修改属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title id="2">Title</title> 6 </head> 7 <body> 8 9 <div> 10 <h2>ok</h2> 11 <form action="#" id="1" class="form1" name="form1"> 12 <input id =5 type="text"> 13 <input type="text"> 14 <p>男:<input id=3 type="checkbox" name="男" value="nan"></p> 15 <input type="submit"> 16 </form> 17 <h1 id="h1">hao</h1> 18 <input type="datetime-local"> 19 </div> 20 <script> 21 var names = document.getElementById('5'); //得到一个普通对象 22 names.id = 'newid'; //修改设置新标签属性ID 23 names.className = "form"; //设置或修改标签css 24 names.style.fontSize = '20px'; //设置标签样式 25 names.setAttribute('txt','mydefine'); //添加新属性 26 names.setAttribute('txt','mydefine'); //添加新属性,存在则忽略不报错 27 names.removeAttribute('txt'); //移除属性 28 names = names.getAttribute('id'); //获取属性值 29 console.log(names); 30 </script> 31 32 </body> 33 </html>
提交表单
1 var names = document.getElementById('1'); //得到一个普通对象 2 names.submit(); //提交表单
页面刷新跳转
1 // console.log(location.href); //显示当前链接地址 2 // location.href = 'http://www.baidu.com'; //跳转链接 3 window.location.reload(); //刷新链接,如果不设置终止操作,则页面一直刷新 4 window.location = "http://www.baidu.com"; //页面跳转 5 alert("yes");
定时器
1 var obj = setInterval('alert("hello")', 1000); //设置定时器 2 clearInterval(obj); //清除定时器 3 var obj = setTimeout("Go()",3000); //设置超时 4 clearTimeout(obj); //清除超时
实例
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" value="清除定时器" id="clear" onclick="clearI()"> 9 <script> 10 function clearI() { 11 document.getElementById('clear').onclick = clearInterval(obj); 12 } 13 obj = setInterval('Go()',1000); 14 15 function Go() { 16 var content = document.title; 17 var firstChar = content[0]; 18 var sub = content.substring(1, content.length); 19 document.title = sub + firstChar; 20 } 21 22 </script> 23 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>search</title> 6 <style> 7 .gray{ 8 color: gray; 9 } 10 .black{ 11 color: black; 12 } 13 </style> 14 </head> 15 <body> 16 <input type="text" class="gray" id="tip" value="请输入关键字" onfocus="Enter();" onblur="Level();"> 17 18 <script> 19 function Level() { 20 var id = document.getElementById('tip'); 21 var value = id.value; 22 if(value.length == 0||id.value.trim() ==""){ 23 id.value = "请输入关键字"; 24 id.className = 'gray'; 25 }else { 26 id.className = 'black'; 27 } 28 } 29 function Enter() { 30 var id = document.getElementById('tip'); 31 id.className = 'black'; 32 if (id.value=="请输入关键字"||id.value.trim()==""){ 33 id.value = ""; 34 } 35 36 } 37 </script> 38 </body> 39 </html>
进度条
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 a{ 8 color: #428bca; 9 text-decoration: none; 10 } 11 .modal-backdrop{ 12 position: fixed; 13 top:0; 14 right: 0; 15 bottom: 0; 16 left: 0; 17 z-index: 1050; 18 background-color: white; 19 opacity: 0.8; 20 } 21 .modal{ 22 position: fixed; 23 top: 30%; 24 left: 50%; 25 z-index: 1030; 26 } 27 .hide{ 28 display: none; 29 } 30 </style> 31 </head> 32 <body> 33 <div> 34 <input type="button" onclick="fadeIn();" value="加载条"> 35 </div> 36 <div id="shade" class="modal-backdrop hide"> 37 <div class="modal"> 38 <img src="loading.gif"> 39 </div> 40 </div> 41 <script> 42 function fadeIn() { 43 document.getElementById('shade').className = "modal-backdrop"; 44 setTimeout('fadeOut()',10000); //定时清除进度条 45 } 46 47 function fadeOut() { 48 document.getElementById('shade').className = "modal-backdrop hide"; 49 } 50 </script> 51 52 </body> 53 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .container{ 11 width: 300px; 12 height: 600px; 13 background-color: #ddd; 14 border: 1px solid #999; 15 } 16 .container .title{ 17 height: 38px; 18 font-size: 28px; 19 line-height: 38px; 20 background-color: #777777; 21 cursor: pointer; 22 } 23 .container .body{ 24 background-color: #ddd; 25 } 26 .container .body a{ 27 display: block; 28 padding: 10px; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="container"> 34 <div> 35 <div class="title">资产管理</div> 36 <div class="body"> 37 <a href="#">资产概要</a> 38 <a href="#">资产列表</a> 39 <a href="#">资产变更</a> 40 </div> 41 </div> 42 43 <div> 44 <div class="title">用户中心</div> 45 <div class="body hide"> 46 <a href="#">个人信息</a> 47 <a href="#">修改个人信息</a> 48 <a href="#">修改身份验证</a> 49 </div> 50 </div> 51 52 <div> 53 <div class="title">系统设置</div> 54 <div class="body hide"> 55 <a href="#">初始化设置</a> 56 <a href="#">重启系统</a> 57 <a href="#">更新系统</a> 58 </div> 59 </div> 60 61 <div> 62 <div class="title hide">审计管理</div> 63 <div class="body hide"> 64 <a href="#">常规日志</a> 65 <a href="#">操作日志</a> 66 <a href="#">导出日志</a> 67 </div> 68 </div> 69 </div> 70 71 <script src="jquery-2.2.3.js"></script> 72 <script> 73 $(function () { 74 $(".title").click(function () { 75 $(this).parent().siblings().children('.body').addClass('hide'); 76 $(this).next().removeClass('hide'); 77 }) 78 }) 79 </script> 80 </body> 81 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Market</title> 6 <style> 7 body{ 8 margin: 0 auto; 9 font-family: Arial; 10 font-size: 12px; 11 } 12 body,div{ 13 margin: 0; 14 padding: 0; 15 } 16 .container{ 17 width: 1190px; 18 margin-left: auto; 19 margin-right: auto; 20 } 21 .tab-menu-box1{ 22 border: 1px solid #ddd; 23 margin-bottom: 20px; 24 } 25 .tab-menu-box1 .menu{ 26 line-height: 33px; 27 height: 33px; 28 background-color: #F5F5F5; 29 } 30 .tab-menu-box1 .content{ 31 min-height: 100px; 32 border-top: 1px solid #ddd; 33 background-color: white; 34 } 35 .tab-menu-box1 .menu ul{ 36 padding: 0; 37 margin: 0; 38 list-style: none; 39 } 40 .tab-menu-box1 .menu ul li{ 41 position: relative; 42 float: left; 43 font-size: 14px; 44 font-family: 'Microsoft YaHei','SimHei'; 45 text-align: center; 46 font-weight: bold; 47 border-right: 1px solid #ddd; 48 padding: 0 18px; 49 cursor: pointer; 50 } 51 .tab-menu-box1 .menu ul li:hover{ 52 color: #c9033b; 53 } 54 .tab-menu-box1 .menu .current{ 55 margin-top: -1px; 56 color: #c9033b; 57 background: #fff; 58 height: 33px; 59 border-top: 2px solid #c9033b; 60 z-index: 10; 61 } 62 .tab-menu-box1 63 </style> 64 </head> 65 <body> 66 <div class="container"> 67 <div class="tab-menu-box1"> 68 <div class="menu"> 69 <ul id="tab-menu-title"> 70 <li class="current" content-to="1">价格趋势</li> 71 <li content-to="2">市场分析</li> 72 <li content-to="3">其它</li> 73 </ul> 74 </div> 75 76 <div id="tab-menu-body" class="content"> 77 <div content="1">content1</div> 78 <div content="2" class="hide">content2</div> 79 <div content="3" class="hide">content3</div> 80 </div> 81 </div> 82 </div> 83 84 <script src="jquery-2.2.3.js"></script> 85 <script> 86 $(function () { 87 ChangeTab('#tab-menu-title', '#tab-menu-body'); 88 }); 89 function ChangeTab(title,body) { 90 $(title).children().bind('click',function () { 91 $menu = $(this); 92 $content = $(body).find('div[content="' + $(this).attr("content-to") + '"'); 93 $menu.addClass('current').siblings().removeClass('current'); 94 }) 95 } 96 </script> 97 98 </body> 99 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .back{ 8 position: fixed; 9 bottom: 0px; 10 right: 0px; 11 cursor: pointer; 12 } 13 .hide{ 14 display: none; 15 } 16 </style> 17 </head> 18 <body> 19 <div style="height: 2000px;"></div> 20 <div onclick="GoTop()" class="back hide">返回顶部</div> 21 <script src="jquery-2.2.3.js"></script> 22 <script> 23 function GoTop() { 24 $(window).scrollTop(0); 25 } 26 $(function () { 27 $(window).scroll(function () { 28 var top = $(window).scrollTop(); 29 if(top>100){ 30 $('.back').removeClass('hide'); 31 }else { 32 $('.back').addClass('hide'); 33 } 34 }) 35 }) 36 </script> 37 38 </body> 39 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="checklist"> 9 <input type="checkbox" value="1" />篮球 10 <input type="checkbox" value="2" />足球 11 <input type="checkbox" value="3" />羽毛球 12 </div> 13 <input type="button" value="全选" id="selectAll" /> 14 <input type="button" value="不选" id="unselectAll" /> 15 <input type="button" value="反选" id="reverseAll" /> 16 17 <script src="jquery-2.2.3.js"></script> 18 <script> 19 $(function () { 20 $('#selectAll').click(function () { 21 $('#checklist :checkbox').prop('checked',true); 22 }); 23 $('#unselectAll').click(function () { 24 $('#checklist :checkbox').prop('checked',false); 25 }); 26 $('#reverseAll').click(function () { 27 $('#checklist :checkbox').each(function () { 28 $(this).prop('checked',!$(this).prop('checked')); 29 }); 30 }) 31 }) 32 </script> 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 img{ 11 border: 0; 12 } 13 ul{ 14 padding: 0; 15 margin: 0; 16 list-style: none; 17 } 18 .clearfix:after{ 19 content: "."; 20 display: block; 21 height: 0; 22 clear: both; 23 visibility: hidden; 24 } 25 .wrap{ 26 width: 980px; 27 margin: 0 auto; 28 } 29 .pg-header{ 30 background-color: #303a40; 31 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,2); 32 -moz-box-shadow: 0 2px 5px rgba(0,0,0,2); 33 box-shadow: 0 2px 5px rgba(0,0,0,2); 34 } 35 .pg-header .logo{ 36 float: left; 37 padding: 5px 10px 5px 0; 38 } 39 .pg-header .logo img{ 40 vertical-align: middle; 41 width: 110px; 42 height: 40px; 43 } 44 .pg-header .nav{ 45 line-height: 50px; 46 } 47 .pg-header .nav ul li{ 48 float: left; 49 } 50 .pg-header .nav ul li a{ 51 display: block; 52 color: #ccc; 53 padding: 0 20px; 54 text-decoration: none; 55 font-size: 14px; 56 } 57 .pg-header .nav ul li a:hover{ 58 color: #fff; 59 background-color: #425a66; 60 } 61 .pg-body{ 62 63 } 64 .pg-body .catalog{ 65 position: absolute; 66 top: 60px; 67 width: 200px; 68 background-color: #fafafa; 69 bottom: 0; 70 } 71 .pg-body .catalog.fixed{ 72 position: fixed; 73 top: 10px; 74 } 75 .pg-body .catalog .catalog-item.active{ 76 color: #fff; 77 background-color: #425a66; 78 } 79 .pg-body .content{ 80 position: absolute; 81 top: 60px; 82 width: 700px; 83 margin-left: 210px; 84 background-color: #fafafa; 85 overflow: auto; 86 } 87 .pg-body .content .section{ 88 height: 500px; 89 } 90 </style> 91 </head> 92 <body> 93 <div class="pg-header"> 94 <div class="wrap clearfix"> 95 <div class="logo"> 96 <a href="#"> 97 <img src="logo_7012c4a4.png"> 98 </a> 99 </div> 100 101 <div class="nav"> 102 <ul> 103 <li> 104 <a href="#">首页</a> 105 </li> 106 <li> 107 <a href="#">聊天室</a> 108 </li> 109 <li> 110 <a href="#">娱乐新闻</a> 111 </li> 112 </ul> 113 </div> 114 </div> 115 </div> 116 117 <div class="pg-body"> 118 <div class="wrap"> 119 <div class="catalog"> 120 <div class="catalog-item" auto-to="function1"><a>第一张</a></div> 121 <div class="catalog-item" auto-to="function2"><a>第二张</a></div> 122 <div class="catalog-item" auto-to="function3"><a>第三张</a></div> 123 </div> 124 125 <div class="content"> 126 <div menu="function1" class="section"> 127 <h1>第一章</h1> 128 </div> 129 <div menu="function2" class="section"> 130 <h1>第二章</h1> 131 </div> 132 <div menu="function3" class="section"> 133 <h1>第三章</h1> 134 </div> 135 </div> 136 </div> 137 </div> 138 139 <script src="jquery-2.2.3.js"></script> 140 <script> 141 $(function () { 142 Init(); 143 }); 144 function Init() { 145 $(window).scroll(function () { 146 var scrollTop = $(window).scrollTop(); 147 if(scrollTop >50){ 148 $('.catalog').addClass('fixed'); 149 }else { 150 $('.catalog').removeClass('fixed'); 151 } 152 $('.content').children().each(function () { 153 var offSet = $(this).offset(); 154 var offTop = offSet.top - scrollTop; 155 var height = $(this).height(); 156 if(offTop<=0 && offTop> -height){ 157 var docHeight = $(document).height(); 158 var winHeight = $(window).height(); 159 if(docHeight == winHeight+scrollTop){ 160 $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active') 161 }else{ 162 var target = $(this).attr('menu'); 163 $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active'); 164 } 165 } 166 }) 167 }) 168 } 169 </script> 170 </body> 171 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>roll</title> 6 </head> 7 <body> 8 <div> 9 <div id="currentPosition" style="position: fixed;top: 0;right: 0;"></div> 10 <div> 11 <div class="chapter" style="height: 500px;"> 12 <h1>第一章</h1> 13 </div> 14 <div class="chapter" style="height: 1500px;"> 15 <h1>第二章</h1> 16 </div> 17 <div class="chapter" style="height: 50px;"> 18 <h1>第三章</h1> 19 </div> 20 </div> 21 </div> 22 23 <script src="jquery-2.2.3.js"></script> 24 <script> 25 $(function () { 26 $(window).scroll(function () { 27 var scroll_top = $(window).scrollTop(); 28 var list = []; 29 $.each($('.chapter'),function (i) { 30 var current_height = $($('.chapter')[i]).offset().top; 31 list.push(current_height); 32 }); 33 $.each(list,function (i) { 34 if(scroll_top + $(window).height() == $(document).height()){ 35 $('#currentPosition').text($('.chapter').last().text()); 36 return 37 } 38 if(scroll_top>list[i]){ 39 $('#currentPosition').text($($('.chapter')[i]).text()); 40 return 41 } 42 }) 43 }) 44 }) 45 </script> 46 47 </body> 48 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>event</title> 6 </head> 7 <body> 8 <div style="border: 1px solid #ddd; 600px;position: absolute;"> 9 <div id="title" style="background-color: black;height: 40px;"></div> 10 <div style="height: 300px;"></div> 11 </div> 12 13 <script src="jquery-2.2.3.js"></script> 14 <script> 15 $(function () { 16 $('#title').mouseover(function () { 17 $(this).css('cursor','move'); 18 }).mousedown(function (e) { 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||widows.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 }).mouseup(function () { 38 $(this).unbind('mousemove'); 39 }) 40 }) 41 </script> 42 </body> 43 </html>