初识JQ
Jquery
jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由约翰·雷西格（John Resig）在2006年1月的BarCamp NYC上发布第一个版本。当前是由Dave Methvin领导的开发团队进行开发。全球前10,000个访问最高的网站中，有65%使用了jQuery，是当前最受欢迎的JavaScript库。
JQ操作DOM
$("css选择器")
$("#nnn").css("属性名","值")
$("#nnn").css({"background":"red","fontsize":"25px"})
遍历元素
$(".memeda").each(function(){
//遍历所有元素
//$(this)------>每一个遍历元素
})
hover事件（鼠标移入移出）
$(".memeda").hover(function(){
//移入事件
},function(){
//移出事件
})
数组 对象的遍历
$.each(arr,function(index,val){
//index 所有下标
//val 所有值
})
创建节点
$("htmlTag")
追加节点
$(ele).before()/////同胞之前
$(ele).after()////////同胞之后
$(ele).before()////
万物皆对象
var obj={}
所有对象_proto_(隐士原型) //对象都有这个属性！
attr（‘属性名字’） 当属性不存在 获取不到 可以自定义
prop（“属性名字”） 当属性不存在 也可以获取 不存在自定义
Json对象
obj={name:val,..........,action:function(){
}}
obj.属性
obj.方法（）
$(parent).append(child) --------->追加子元素
$(ele).before() --------->之前追加
$(ele).after() --------->之后追加
$(ele).remove() --------->删除本身
JQ效果属性
hide（）//隐藏===display:none
show（）//展示===display：block
fadeIN（）//透明度由0到1
fadeOut（）//透明度由1到0
sideDown（）//元素收起 过度宽度 从上往下
sideUp（）//元素放出 过渡高度 从下往上
sideToggle（）//自动缩放
异步通信
AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出。
GET
$.get("https://www.apiopen.top/journalismApi",(res)=>{
// res = JSON.parse(res); //如果接受的是json字符串将后端返回的json字符串变成json对象
console.log(res);
})
POST
$.post("https://www.apiopen.top/journalismApi",(res)=>{
// res = JSON.parse(res); //如果接受的是json字符串将后端返回的json字符串变成json对象
console.log(res);
})
JSONP跨域问题
$.getJSON("https://douban.uieee.com/v2/movie/top250?callback=?",{},(res)=>{
console.log(res);
})
EX6新语法（可能需要JQ3.X版本）
$.ajax({
url:"https://www.apiopen.top/journalismApi",
type:"get",
dataType:"json",
data:'',
}).done((res)=>{
console.log(res)
}).fail((res)=>{
console.log(res)
})
promise ES6语法封装通用ajax
function getData(url,ops={},type="get"){//默认get
// es6 promise语法 封装通用异步
var promiseObj = new Promise(function(data,reject){
$.ajax({
type,
url,
data:ops,
async:true,
dataType:"json",
success:(res)=>{
data(res);
},
error:function(res){
reject(res);
}
});
});
return promiseObj;
}
调用方法
var obj = getData("https://www.apiopen.top/journalismApi");
//需要注意的是上面接口未传参数，若传参数只需要在后面加 ?参数即可
obj.then((res)=>{
console.log(res);
})
var obj2 = getData("https://www.apiopen.top/journalismApi",{});
//需要注意的是上面接口的花括号是用来传参的
obj2.then((res)=>{
console.log(res);
})
//post
var obj3 = getData("https://www.apiopen.top/journalismApi",{},type="post");
obj3.then((res)=>{
console.log(res);
})
本地储存与事件对象
两种方式
1.会话型存储。sessionStorage
var storage = window.sessionStorage;//obj
//存值
storage.setItem('memeda','12345600');
//读取
var obj = sessionStorage;
var data = obj.getItem('memeda');
2.永久性存储。localStorage
var storage = window.localStorage;//obj
//存值
storage.setItem('memeda','12345600');
//读取
var obj = localStorage;
var data = obj.getItem('memeda');
方法
obj.removeItem('memeda');//删除某个
obj.clear();//清空
无法设置生命周期，只对本地有效，与服务器无关。
BOM（浏览器对象）
location
histroy(历史记录)
navgation(浏览器客户端)
screen（屏幕对象）
window.confirm("确定删除？")//返回值为布尔
setTimeout();
reload() //重载
replace() //替换当前页面 覆盖历史记录
histroy.go(1)//前进一页
histroy.go(-1)//后退一页
back() //后退 后退键
forward() //前进
ajax不会生成histroy
navigator(返回浏览器客户端)
navigator.appVersion(返回手机或是电脑操作系统信息)
navigator.userAgent(浏览器内核信息)
if(navigator.userAgent.indexOf('Chrome')>0 && navigator.userAgent.indexOf('Edge')==-1){
//判断为谷歌浏览器
}else if(navigator.userAgent.indexOf('Chrome')>0 && navigator.userAgent.indexOf('Edge')>0){
//IE
}else if(navigator.userAgent.indexOf('firefox')>0){
//火狐
}else if(navigator.userAgent.indexOf('UCborwser')>0){
//UC
}
screen 对象
高度 height offsetHeight
宽度 width offsetWidth
事件对象
获取时间对象
var event = window.event;
event.preventDefault();//阻止默认行为 入sumbit a链接等
事件冒泡
当父级和子级都绑定了事件之后，如果子元素的事件被触发，父级也会被触发。（由内向外）
解决办法
第一种 阻止冒泡
var event = window.event();
event.stopPropagation();//非IE
event.cancelBubble()//IE
第二种 事件委托
对于同一种事件，直接把事件委托给最大的父级。（从根本解决冒泡）
$("#memeda").click(()=>{
var event = window.event();//获取事件对象
if(event.target.nodeName.toLowercase()=="li"){
li被点击的后的操作
}else if(event.target.nodeName.toLowercase()=="a"){
a被点击的后的操作
}else if(event.target.nodeName.toLowercase()=="div"){
div被点击的后的操作
}
})
事件捕获
与事件冒泡相反，当父级和子级都绑定了事件之后，如果子元素的事件被触发，父级也会被触发。（由外向内）
案例：数组去重
var arr = [1,2,3,4,5,6,7,8,9,1,2,3,4];
var tmp = [];
for(var i =0 ;i<arr.length;i++ ){
if(tmp.indexOf(arr[i]==-1)){
tmp.push(arr[i]);
}
}
ES6 一句话数组去重
Array//数组原型对象
from 将一个可以迭代的数据对象 转换为数组
set //数据类型{1，2，3，4，5，6，7，8，9} 不允许值重复
var arr = [1,2,3,4,5,6,7,8,9,1,2,3,4];
var newarr = Array.from(new Set(arr));
