美文网首页WEB前端开发笔记总结
Jquery WEB前端开发总结

Jquery WEB前端开发总结

作者: 南极小丑 | 来源:发表于2019-07-19 15:55 被阅读0次

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

    相关文章

      网友评论

        本文标题:Jquery WEB前端开发总结

        本文链接:https://www.haomeiwen.com/subject/vgujlctx.html