PART 1 JavaScript基础
chapter 1 了解概念
1 简介
JS是一种客户端编程脚本语言，能被浏览器解释，实现网页内容的一些动态功能。
2 DOM（文档对象模型）
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.
浏览器在加载显示一个网页时，会对页面html代码解析，并在内存中创建一个描述该页面的模型（树形结构）。
JS或其他语言可以操作这个模型的元素（属性）
2.1 window对象
window对象是DOM树结构的根。
window对象包括一些子对象：document location history navigator
代码语言：javascript复制 #调用： window.document
window.document.bodyChapter 2 基本语法
1 编写位置
可以在html代码中直接编写js语句，也可单独将js代码写入文件中并在html中调用。
代码语言：javascript复制 <script>
// javascript语句
</script>
//通常在html head标签中定义javascript2 语句
javascript每个逻辑行用分号结尾
代码语言：javascript复制 // 单行注释
/*
多行注释
*/3 变量
代码语言：javascript复制 var a = 133; //也可省略关键字var
str = "hello hehe"4 操作符
代码语言：javascript复制 - * / % --
eg . var firname = "fank"
var secname = "hu"
var name=firname " " secname5 鼠标事件
代码语言：javascript复制 onclick : 户点击时执行的js语句
<input type="button" id="b1" value="click me" onclick="alert('hey guy')" />
onmouseover 鼠标移入
onmouseout 鼠标移出6 函数
代码语言：javascript复制 <script>
function sayHi(name){
alert(name ",keep calm and caryy on");
return name;
}
</script>
<input type="button" id="b3" value="button3" onclick="sayHi('fankhu')"/>7 条件语句
代码语言：javascript复制 # if .. else if .. else
v=input
if (v > 3) {
//something
}else{
//something else
}
# 三目 (a>b) ? a : b
# switch
switch(){
case "a": v="hi";break;
case "b": v="no";break;
default:
alert("error");
}
#比较操作符
== 值等于
=== 值和类型都等于
>,<,>=,<=,!=
# 逻辑操作符 || &&
8 循环
代码语言：javascript复制 for(i=0;i<10;i ){ }
for(i in arr){ }
while( ){ }
do{ }while()
9 面向对象
代码语言：javascript复制 # 创建一个空对象
obj1= new Object();
# 对象定义方法：创建一个构造函数（有点像其他oop的类定义）
function myobject (name) {
var privateA=111; //外部不可见
this.name=name;
this.info= "I'm a object"; // this关键字，表示对象本身，只有this指向的属性才能被外部看见
this.showInfo=function(){ // 用匿名函数定义对象的方法
alert(this.info);
}
}
# 扩展和继承: prototype
代码语言：javascript复制 扩展 ： myobject.prototype.sayHi=function(){....}
继承 ；对象Dog要继续对象Pet
Dog.prototype = new Pet();
Chapter 3 进阶
10 JSON简介
代码语言：javascript复制 # json 是javascript对象的一种简单紧凑的标签。能被js和浏览器直接解析。
# 语法
var user1='{"username":"toby","location":"JP"}';
var user2='({"username":"toby","location":"JP"})';
# js解析 eval()
代码语言：javascript复制 var ob1=eval('(' user1 ')');
var ob2=eval(user2);
# 浏览器解析
代码语言：javascript复制 var ob3=JSON.parse(user1); # JSON数据序列化 --将js对象转化为JSON序列
JSON.stringify() PART 2 Jquery基础
一 概念
1.1 jQuery 是一个javascript类库，通过jquery可以选取HTML元素，并对它们执行操作。
1.2 语法实例
代码语言：javascript复制
$(this).hide() 隐藏当前HTML元素
$("#test").hide() 隐藏 id="test"的函数
$("p").hide() 隐藏 所有<p>标签
$(".test").hide() 隐藏所有class="test"的标签1.3 语法规则
代码语言：javascript复制 $(selector).action()
选择器 事件1.4 文档就绪函数
代码语言：javascript复制 $(document).readY(function(){
});
为了防止在文档加载完成前就运行jqury代码1.5 jquery 选择器
代码语言：javascript复制 1.5.1 元素选择器
$("p")
$("p.intro") 选取所有class=intro的<p>元素
$("p#demo") 选取所有id=demo的<p>元素1.5.2 属性选择器
代码语言：javascript复制 $("[href]") 选择所有带href属性的元素
$("[href='#']") 选取所有带有href值等于#的元素
$("[href!='#']")
$("[href='.jpg']")
$("input[name='group_status']:checked").val() #选择 radio值
1.5.3 css选择器
代码语言：javascript复制 $("p").css("background-color","red");1.6 jquery事件
代码语言：javascript复制 $(document).ready(function) #文档就绪事件
$(selector).click(function) #单击事件
$(selecto).dblclick(function) #双击
$(selector).mouseover(function)
二 jquery效果
代码语言：javascript复制 #隐藏
$("p").hide();
#显示
$("p").show();
回调函数：
代码语言：javascript复制 $(selector).hide(speed,callbackfunc)
$("p").hide(1000,function(){
alert("The paragraph is now hide");
})三 jQuery HTML
代码语言：javascript复制 #获取DOM内容
text() 设置或返回元素文本内容
html() 设置或返回元素的HTML内容
val() 设置或返回表单字段的值
attr() 获取属性
其中以上函数也可拥有回调函数 #设置内容
test("new content");
html("<p>Hello fank</p>");
val("sth"); $("#w3s").attr("href","http://www.w3school.com.cn/jquery"); #添加元素
append() 在被选元素结尾插入内容
prepend() 在被选元素开头插入内容
after() 在被选元素之后插入内容
before() 在被选元素之前插入内容 # $("#btn4").click(function(){
$("#test2").append("<p>hi</p>");
})
});#删除元素
代码语言：javascript复制 remove() 删除元素及其子元素
empty() 从被选元素中删除子元素#css方法
代码语言：javascript复制 css()
$("p").css("backgroud-color":"yellow");
四 jQuery 遍历
遍历就是根源其相对于其他元素的关系来获取HTML元素
代码语言：javascript复制 # jQuery 祖先
parent() 返回元素的直接父元素
parents() 返回所有父元素
parentsUntil("div") 返回直到div的父元素# jQuery 后代
代码语言：javascript复制 children() 返回所有直接子元素
find("*") 返回所有后代
find("span") 返回span标签的后代
var open_buttion= $(obj).parent().prev().children();
# jQuery 同胞 （水平遍历）
代码语言：javascript复制
siblings() 返回所有同胞元素
next() 返回下一个同胞元素
nextAll() 返回后面所有同胞元素
nextUntil()
prev(),prevAll(),prevUntil()# jQuery 过滤
代码语言：javascript复制 first()
last()
eq() 返回索引 eq(1)
filter() 选取符合条件的元素
filter(".intro") 返回带有类名intro的元素
not() 与filter相反
五 jQuery Ajax
5.1概念
代码语言：javascript复制 Ajax= Asynchronous Javascript And Xml
不重载整个页面，Ajax通过后台加载数据并在页面显示指定内容。
Ajax 支持使用http GET 和POST方法从服务器请求数据5.2 方法
load() 从服务器加载数据，并把返回的数据放入页面被选元素中
$(selctor).load(URL,data,callback);
# URL 必选，指定需要加载的URL
# 可选，与请求一同发送的查询字符串键值对
# 可选，load()方法完成后执行的函数
$.get(URL,callback);
$.post(URL,data,callback)
#补充 GET vs POST
代码语言：javascript复制 GET - 从指定资源请求数据
POST 向指定资源提交要被处理的数据
GET：
GET请求可能会被缓存
GET请求保留在浏览器的历史记录中
GET请求可被收藏为书签
GET请求不应在处理敏感数据时使用
GET请求有长度限制 2048
GET请求应该只用于取回数据
POST:
POST请求不会被缓存
POST请求不会保留在历史记录中
不能被收藏为书签
无长度要求
六 示例
代码语言：javascript复制
1 获取指定列，修改样式
$("#yl_monitor_table tbody tr").each(function(){online=$(this).find('td:eq(4)');online_val=online.text();if(online_val>0){online.css({color:'red',fontWeight:'bold'})}else(online.css({color:'green',fontWeight:'bold'}))})
