Jquery WEB前端开发总结

初识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

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));