# JavaScript笔记
## ECMA:
基本类型(五种)：Number,String,Boolean,Null,Undefined
## BOM(Browser Object Model)
Window对象:三个弹窗(alert,confirm,prompt)，四个计时(setInterval(函数名,毫秒值),clearInterval(计时对象),setTimeout,clearTimeout)
Navigator对象：navigator.cookieEnabled 判断浏览器cookie是否可用
Location对象：location.reload location.href="" var href=location.href;
History对象：history.length,go(参数前进或后退几个页面),forword(),back()
Screen对象：
## DOM(Document Object Model)
元素节点：
属性节点：
内容节点：
添加/删除/获取属性：元素对象.setAttribute("属性名","属性值");元素对象.removeAttribute("属性名");元素对象.getAttribute("属性名");==元素对象.属性名(注意类名是用className);
获取元素：getElementById();getElementsByName();getElementsByClassName();getElementsByTagName();
创建/添加/删除元素(标签)：document.createElement("标签名");父元素对象.appendChild(子元素对象名(注意不能加引号));
父元素对象.removeChild(子元素对象名(注意不能加引号));
获取父节点：子节点对象.parentNode;
创建文本节点：document.createTextNode(字符串);
元素对象.innerHTML;element.style.样式的属性名 = "";
## Event事件：
onclick
ondblclick
onfocus:获取焦点
onblur:失去焦点
onchange:可用于下拉选择框的select元素
onmouseover:
onmouseout:
onload:
onkeyup:
onsubmit:用于form元素，在该事件触发的函数中一定需要有return，true表示表单提交，false表示表单不提交，默认是true
eg:<form onsubmit= "return fun();"></form>
function fun(){
return true/false;
}
## jQuery:
获取元素(节点)对象：$("标签选择器/类选择器/id选择器")--类选择器和标签选择器得到的是一个数组，id选择器得到的是单个对象
如果使用jQuery选择器获取的是多个元素组成的数组，但是数组中的每个元素都是js对象
如果遍历这个数组，遍历出来的每个元素都是js对象，要使用jQuery方法，则要转换成为jQuery对象
-- jQuery与js对象之间的转化：
jQuery对象转js对象：var jsObj=$("")[0];var jsObj=$("").get(0);转换只能是0，获取可以是其他值
js对象转jQuery对象：var jqObj=$(js对象名);
-- jQuery获取节点对象：
1.标签选择 -var divs=$("div");
2.id选择 -var box=$("#box");
3.类选择 -var demo=$(".demo");
4.属性选择 -var value=$("input[value]"); var id=$("div[id]");
1. 基本选择器
1. 标签选择器（元素选择器）
* 语法： $("html标签名") 获得所有匹配标签名称的元素
2. id选择器
* 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器
* 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
4. 并集选择器：
* 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
2. 层级选择器
1. 后代选择器
* 语法： $("A B ") 选择A元素内部的所有B元素，包括孙子，曾孙子中的B元素
2. 子选择器
* 语法： $("A > B") 选择A元素内部的所有B子元素(只包括子元素)
3. 属性选择器
1. 属性名称选择器
* 语法： $("A[属性名]") 包含指定属性的选择器
2. 属性选择器
* 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
3. 复合属性选择器
* 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
4. 过滤选择器
1. 首元素选择器
* 语法： :first 获得选择的元素中的第一个元素
2. 尾元素选择器
* 语法： :last 获得选择的元素中的最后一个元素
3. 非元素选择器
* 语法： :not(selector) 不包括指定内容的元素
4. 偶数选择器
* 语法： :even 偶数，从 0 开始计数
5. 奇数选择器
* 语法： :odd 奇数，从 0 开始计数
**** 6. 等于索引选择器
* 语法： :eq(index) 指定索引元素
7. 大于索引选择器
* 语法： :gt(index) 大于指定索引元素
8. 小于索引选择器
* 语法： :lt(index) 小于指定索引元素
9. 标题选择器
* 语法： :header 获得标题（h1~h6）元素，固定写法
5. 表单过滤选择器
1. 可用元素选择器
* 语法： :enabled 获得可用元素
2. 不可用元素选择器
* 语法： :disabled 获得不可用元素
3. 选中选择器
* 语法： :checked 获得单选/复选框选中的元素
4. 选中选择器
* 语法： :selected 获得下拉框选中的元素
绑定事件：节点对象.click(function(){});
修改样式：节点对象.css("属性名","属性值");
入口函数：$(function(){})与window.onload=function(){}不同的是，jq入口函数可以设置多个，且都会执行，而js的则只会执行最后一个
js入口函数在页面所有资源加载完毕再执行，而jQuery则是在页面document树加载完成就执行
jQuery入口函数比js入口函数先执行
2. DOM操作
1. 内容操作
1. html(): 获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font> 和.innerHTML效果一样，标签体内容
2. text(): 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容 和.innerText效果一样
3. val()： 获取/设置元素的value属性值
2. 属性操作
1. 通用属性操作
1. attr(): 获取/设置元素的属性
2. removeAttr():删除属性
3. prop():获取/设置元素的属性
4. removeProp():删除属性
* attr和prop区别？
1. 如果操作的是元素的固有属性，则建议使用prop
2. 如果操作的是元素自定义的属性，则建议使用attr
2. 对class属性操作
1. addClass():添加class属性值
2. removeClass():删除class属性值
3. toggleClass():切换class属性
* toggleClass("one"):
* 判断如果元素对象上存在class="one"，则将属性值one删除掉。 如果元素对象上不存在class="one"，则添加
4. css():
3. CRUD操作:
**** 1. append():父元素将子元素追加到末尾
* 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
**** 2. prepend():父元素将子元素追加到开头
* 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
3. appendTo():
* 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
4. prependTo()：
* 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头
5. after():添加元素到元素后边
* 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系
6. before():添加元素到元素前边
* 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
7. insertAfter()
* 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
8. insertBefore()
* 对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
**** 9. remove():移除元素
* 对象.remove():将对象自己删除掉
**** 10. empty():清空元素的所有后代元素。
* 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点
## Ajax Asynchronize javascript and xml
异步非阻塞<--->同步阻塞
传递数据的载体：
文本：xmlhttp.responseText;
XML:xmlhttp.responseXML;----可以看作是一种小型的数据库，存储万条内的数据
Json：文本;
## JSON：JavaScript Object Notation-->javascript对象表示法
•数据在名称/值对中
•数据由逗号分隔
•花括号保存对象
•方括号保存数组
•JSON 文件的文件类型是 ".json"
•JSON 文本的 MIME 类型是 "application/json"
JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
JsonIgnoreProperties({"","",...});
JsonFormat(pattern="");
JsonIgnore;
mapper.setDateFormat(new SimpleDateFormat(""));
javaBean --->json mapper.writeValueAsString();
json --->javaBean
json --->javascript对象
javascript对象--->json
> 点击获取元素自身的方法：
1.在元素上加onclick="fun(this)";注意一定要加this;
2.function fun(obj){
var this_obj=$(obj);
}
```java
javascript实现动态展示分页
if(data.data.currentPage>data.data.totalPage-10){//当前页大于总页数-10时
end=data.data.totalPage;
begin=end-10;
}else if(data.data.currentPage<10){//当前页小于十页时
begin=1;
end=begin+9;
}else {//其他情况时
if(end-2<data.data.currentPage){//当前页大于end-2;
end=data.data.currentPage+2;
begin=end-9;
}else if(data.data.currentPage<begin+2){//当前小于begin+2;
begin=data.data.currentPage-2;
end=begin+9;
}
}
```