JavaScript
JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。
1、JavaScript代码存在形式
1 <!-- 方式一 --> 2 <script type"text/javascript" src="JS文件"></script> 3 4 <!-- 方式二 --> 5 <script type"text/javascript"> 6 Js代码内容 7 </script>
2、JavaScript代码存在位置
- HTML的head中
- HTML的body代码块底部(推荐)
由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。
1 如： 2 3 <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> 4 <script> 5 alert('123'); 6 </script>
3、变量
- 全局变量
- 局部变量
JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量
1 var name = "seven" # 局部变量 2 age = 18 # 全局变量
注：注释 // 或 /* */
4、基本数据类型、
数字（Number）
1 var page = 111; 2 var age = Number(18); 3 var a1 = 1,a2 = 2, a3 = 3; 4 parseInt("1.2"); 5 parseFloat("1.2");
字符串(String)
1 var name = "wupeiqi"; 2 var name = String("wupeiqi"); 3 var age_str = String(18); 4 5 常用方法： 6 obj.trim() 7 obj.charAt(index) 8 obj.substring(start,end) 9 obj.indexOf(char) 10 obj.length
布尔(Boolean)
1 var status = true; 2 var status = false; 3 var status = Boolen(1==1)
数组(Array)
1 var names = ['alex', 'tony', 'eric'] 2 var names = Array('alex', 'tony', 'eric') 3 4 常用方法： 5 添加 6 obj.push(ele) 追加 7 obj.unshift(ele) 最前插入 8 obj.splice(index,0,'content') 指定索引插入 9 移除 10 obj.pop() 数组尾部获取 11 obj.shift() 数组头部获取 12 obj.splice(index,count) 数组指定位置后count个字符 13 14 切片 15 obj.slice(start,end) 16 合并 17 newArray ＝ obj1.concat(obj2) 18 翻转 19 obj.reverse() 20 21 字符串化 22 obj.join('_') 23 长度 24 obj.length 25 26 27 字典 28 var items = {'k1': 123, 'k2': 'tony'}
序列化和反序列化
1 var items = {'k1': 123, 'k2': 'tony'} 2 3 s = JSON.stringify(items) #序列化字典 4 5 m = JSON.parse(s) #反序列化
undefined
1 undefined表示未定义值 2 var name;
null
1 null是一个特殊值
5、循环语句
1 var names = ["alex", "tony", "rain"]; 2 3 4 // 数组：方式一 5 for(var i=0;i<names.length;i++){ 6 console.log(i); 7 console.log(names[i]); 8 } 9 10 11 // 数组：方式二 12 for(var index in names){ 13 console.log(index); 14 console.log(names[index]); 15 } 16 17 var names = {"name": "alex", "age": 18}; 18 19 20 // 字典：方式一 21 for(var index in names){ 22 console.log(index); 23 console.log(names[index]); 24 } 25 26 27 // while循环 28 while(条件){ 29 // break; 30 // continue; 31 }
6、条件语句
1 //if条件语句 2 3 if(条件){ 4 5 }else if(条件){ 6 7 }else{ 8 9 } 10 11 var name = 'alex'; 12 var age = 1; 13 14 // switch,case语句 15 switch(name){ 16 case '1': 17 age = 123; 18 break; 19 case '2': 20 age = 456; 21 break; 22 default : 23 age = 777; 24 }
7、异常处理
1 try{ 2 3 }catch(e) { 4 5 }finally{ 6 7 }
8、函数
1 函数的声明 2 function func(arg){ 3 return true; 4 } 5 6 匿名函数 7 var func = function(arg){ 8 return "tony"; 9 } 10 11 自执行函数 12 (function(arg){ 13 console.log(arg); 14 })('123')
9、面向对象
1 function Foo (name,age) { 2 this.Name = name; 3 this.Age = age; 4 this.Func = function(arg){ 5 return this.Name + arg; 6 } 7 } 8 9 var obj = new Foo('wu', 18); 10 var ret = obj.Func("sb"); 11 console.log(ret);
Dom
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
注：一般说的JS让页面动起来泛指JavaScript和Dom
1、选择器
1 document.getElementById('id'); 2 document.getElementsByName('name'); 3 document.getElementsByTagName('tagname'); 4 document.getElementsBycClassName('classname');
2、内容
1 innerText 2 innerHTML 3 4 var obj = document.getElementById('nid') 5 obj.innerText # 获取文本内容 6 obj.innerText = "hello" # 设置文本内容 7 obj.innerHTML # 获取HTML内容 8 obj.innerHTML = "<h1>asd</h1>" # 设置HTML内容 9 10 11 特殊的： 12 input系列 13 textarea标签 14 select标签 15 16 value属性操作用户输入和选择的值
3、创建标签
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="container"></div> 9 <a href="http://www.baidu.com" οnclick="return AddElement();">添加</a> 10 <script type="text/javascript"> 11 function AddElement(){ 12 var createObj = document.createElement('a'); 13 createObj.href = "http://www.baidu.com"; 14 createObj.innerText = "百度一下" 15 16 var container = document.getElementById("container"); 17 container.appendChild(createObj) 18 return false; 19 } 20 </script> 21 </body> 22 </html>
1 方式一：(推荐) 2 var obj = document.createElement('a'); 3 obj.href = "http://www.etiantian.org"; 4 obj.innerText = "老男孩"; 5 6 var container = document.getElementById('container'); 7 //container.appendChild(obj); 8 //container.insertBefore(obj, container.firstChild); 9 //container.insertBefore(obj, document.getElementById('hhh')); 10 11 方式二： 12 var container = document.getElementById('container'); 13 var obj = "<input type='text' />"; 14 container.innerHTML = obj; 15 // 'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd' 16 //container.insertAdjacentHTML("beforeEnd",obj);
4、标签属性
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、提交表单
document.geElementById('form').submit()
6、事件
特殊的：
window.onload = function(){}
//jQuery：$(document).ready(function(){})
//onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。
特殊参数：this，event
7、其他功能
console.log()
alert()
confirm()
// URL和刷新
location.href
location.href = "url" window.location.reload()
// 定时器
setInterval("alert()",2000);
clearInterval(obj)
setTimeout();
clearTimeout(obj)
实例：
<!DOCTYPE html> <html> <head> <meta charset='utf-8' > <title>欢迎blue shit莅临指导 </title> <script type='text/javascript'> function Go(){ var content = document.title; var firstChar = content.charAt(0) var sub = content.substring(1,content.length) document.title = sub + firstChar; } setInterval('Go()',1000); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <style> .gray{ color:gray; } .black{ color:black; } </style> <script type="text/javascript"> function Enter(){ var id= document.getElementById("tip") id.className = 'black'; if(id.value=='请输入关键字'||id.value.trim()==''){ id.value = '' } } function Leave(){ var id= document.getElementById("tip") var val = id.value; if(val.length==0||id.value.trim()==''){ id.value = '请输入关键字' id.className = 'gray'; }else{ id.className = 'black'; } } </script> </head> <body> <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/> </body> </html>
jQuery
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
http://www.php100.com/manual/jquery/
1、选择器和筛选器
实例:
加载
实例:
左侧菜单
实例:
Tab菜单-css
实例:
Tab菜单-html
2、属性和css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .back{ position: fixed; bottom: 0px; right: 0px; } .hide{ display: none; } </style> </head> <body> <div style="height: 2000px;"></div> <div onclick="GoTop()" class="back hide">返回顶部</div> <script src="jquery-1.8.2.js"></script> <script type="text/javascript"> function GoTop(){ //返回顶部 $(window).scrollTop(0); } $(function(){ $(window).scroll(function(){ //当滚动滑轮时，执行函数体 //获取当前滑轮滚动的高度 var top = $(window).scrollTop(); if(top>100){ //展示“返回顶部” $('.back').removeClass('hide'); }else{ //隐藏“返回顶部” $('.back').addClass('hide'); } }); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <script type="text/javascript" src='jquery-1.8.2.js'></script> <script type="text/javascript"> $(function(){ $('#selectAll').click(function(){ $('#checklist :checkbox').prop('checked',true); }) $('#unselectAll').click(function(){ $('#checklist :checkbox').prop('checked',false); }) $('#reverseAll').click(function(){ $('#checklist :checkbox').each(function(){ $(this).prop('checked',!$(this).prop('checked')) }) }) }) </script> </head> <body> <div id='checklist'> <input type='checkbox' value='1'/>篮球 <input type='checkbox' value='2'/>足球 <input type='checkbox' value='3'/>羽毛球 </div> <input type='button' value='全选' id='selectAll' /> <input type='button' value='不选' id='unselectAll' /> <input type='button' value='反选' id='reverseAll' /> </body> </html>
实例:滚动菜单
3、文档处理
4、事件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;"></div> <div style="height: 300px;"></div> </div> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> <script> $(function(){ $('#title').mouseover(function(){ $(this).css('cursor','move'); }).mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $(this).bind('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }).mouseup(function(){ $(this).unbind('mousemove'); }); }) </script> </body> </html>
5、扩展
下载：http://files.cnblogs.com/files/wupeiqi/%E7%99%BB%E9%99%86%E6%B3%A8%E5%86%8C.zip
6、ajax和跨域
下载：http://files.cnblogs.com/files/wupeiqi/ajax_demo.zip
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" onclick="AjaxRequest()" value="跨域Ajax" /> <div id="container"></div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function AjaxRequest() { $.ajax({ url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403', type: 'GET', dataType: 'jsonp', jsonp: 'callback', jsonpCallback: 'list', success: function (data) { $.each(data.data,function(i){ var item = data.data[i]; var str = "<p>"+ item.week +"</p>"; $('#container').append(str); $.each(item.list,function(j){ var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>"; $('#container').append(temp); }); $('#container').append("<hr/>"); }) } }); } </script> </body> </html>
作业：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>selfHomework</title> <style> .tableAttr{ border:1px solid black; width:300px; text-align:center; margin: 100px auto 0px auto; } .tableAttr td{ border:1px solid black; } .hiden{ display:none; } .edit{ background-color: #ADADAD; width: 500px; height: 300px; margin: auto; } .edit .bj{ width: 300px; margin: 0px auto; padding-top: 30px; } .edit .tj{ width: 50px; height: 30px; margin-left: 80px; } .edit .qx{ width: 50px; height: 30px; margin-right: 80px; } .red-color{ border:2px red solid; } </style> </head> <body> <script src="jquery-2.2.3.js"></script> <table class="tableAttr"> <tbody> <tr id="1"> <td>1</td> <td>2</td> <td class="ed">编辑</td> </tr> <tr id="2"> <td>11</td> <td>22</td> <td class="ed">编辑</td> </tr> <tr id="3"> <td>111</td> <td>222</td> <td class="ed">编辑</td> </tr> </tbody> </table> <div class="edit hiden"> <div class="bj">ID:<input type="text" id="key" value=""></div> <div class="bj">NUM:<input type="text" id="num" value=""></div> <div class="bj"> <button class="tj">提交</button> <button class="qx">取消</button> </div> </div> <script type="text/javascript"> var lock = 0 var edit_id = 0 //编辑操作 $(".ed").click(function(){ if(lock == 1){ return false; } lock = 1; edit_id=$(this).parent().attr("id"); $(".edit").removeClass("hiden"); $(this).siblings().each(function(i){ if(i==0){ $("#key").val($(this).text()); } if(i==1){ $("#num").val($(this).text()); } }) }) //提交 $(".tj").click(function(){ var key_val = $("#key").val().trim(); var key_num = $("#num").val().trim(); if(key_val==""){ $("#key").addClass("red-color"); alert("请输入有效内容"); return false; }else if($("#key").hasClass("red-color")){ $("#key").removeClass("red-color"); } if(key_num==""){ $("#num").addClass("red-color"); alert("请输入有效内容"); return false; }else if($("#num").hasClass("red-color")){ $("#num").removeClass("red-color"); } $(".edit").addClass("hiden"); $("#"+edit_id).children().each(function (i) { if(i==0) { $(this).text(key_val); } if(i==1){ $(this).text(key_num); } }) lock = 0; }) //取消 $(".qx").click(function(){ $(".edit").addClass("hiden"); lock = 0; }) </script> </body> </html>
1026
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
