• 四、jQuery


    1、jquery介绍

      jQuery是目前使用最广泛的javascript函数库,jQuery的版本分为1.x系列和2.x、3.x系列,1.x系列兼容低版本的浏览器,2.x、3.x系列放弃支持低版本浏览器。

      jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。

       <script type="text/javascript" src="js/jquery-1.12.2.js"></script> 

      (1)http://jquery.com/ 官方网站
      (2)https://code.jquery.com/ 版本下载

    2、jquery加载

      将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快。

      完整的写法:

    <script type="text/javascript">
        $(document).ready(function(){
            ......
    });
    </script>

      简写:

    <script type="text/javascript">
    $(function(){
         ......
    });
    </script>

      说明:导入模块后,不能在当前script标签内写js,需要另外打开一个标签。

    3、jquery选择器

      jquery用法思想一:选择某个网页元素,然后对它进行某种操作。

      3.1 jquery选择器

    <!DOCTYPE html>
    <html>
    <head>
        <mate charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var $div1=$('#div1');
                $div1.css({
                    "color":"blue"
                });
                alert($div1.length);
            });
        </script>
    </head>
    <body>
        <div id="div1">这是一个div测试</div>
    </body>
    </html>

        jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    $('#myId') //选择id为myId的网页元素
    $('.myClass') // 选择class为myClass的元素
    $('li') //选择所有的li元素
    $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
    $('input[name=first]') // 选择name属性等于first的input元素

      3.2 对选择集进行过滤

    $('div').has('p'); // 选择包含p元素的div元素
    $('div').not('.myClass'); //选择class不等于myClass的div元素
    $('div').filter('.myClass'); //选择class等于myClass的div元素
    $('div').eq(5); //选择第6个div元素

      3.3 选择集转移

    $('div').prev(); //选择div元素前面紧挨的同辈元素
    $('div').prevAll(); //选择div元素之前所有的同辈元素
    $('div').next(); //选择div元素后面紧挨的同辈元素
    $('div').nextAll(); //选择div元素后面所有的同辈元素
    $('div').parent(); //选择div的父元素
    $('div').children(); //选择div的所有子元素
    $('div').siblings(); //选择div的同级元素
    $('div').find('.myClass'); //选择div内的class等于myClass的元素

      3.4 判断是否选择到了元素

      jquery有容错机制,即使没有找到元素,也不会出错,可以用length属性来判断是否找到了元素,length等于0,就是没选择到元素,length大于0,就是选择到了元素。

    var $div1 = $('#div1');
    var $div2 = $('#div2');
    alert($div1.length); // 弹出1
    alert($div2.length); // 弹出0
    ......
    <div id="div1">这是一个div</div>

    4、jquery样式操作

      jquert用法思想二:同一个函数完成取值和赋值

    <!DOCTYPE html>
    <html>
    <head>
        <mate charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(function(){
                var $div=$('#box');
    
                //读取属性值
                var sTr=$div.css("fontSize");
                alert(sTr);
    
                //写属性值
                $div.css({
                    "color":"red",
                    "backgroundColor":"pink",
                    "fontSize":"40px"
                })
    
                var $div2=$(".box");
    
                $div2.addClass("big");
            });
        </script>
        <style type="text/css">
            .box{
                100px;
                height:100px;
                background-color:green;
            }
            .big{
                font-size:30px;
            }
        </style>
    </head>
    <body>
        <div id="box">这是一个div测试</div>
        <div class="box">这是第二个测试</div>
    </body>
    </html>

      4.1 操作行间样式

    // 获取div的样式
    $("div").css("width");
    $("div").css("color");
    
    //设置div的样式
    $("div").css("width","30px");
    $("div").css("height","30px");
    $("div").css({fontSize:"30px",color:"red"});

       说明:选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个div的width。

      4.2 操作样式类名

    $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
    $("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
    $("#div1").removeClass("divClass divClass2") //移除多个样式
    $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

    5、绑定click事件

      给元素绑定click事件,可以用如下方法:

    $('#btn1').click(function(){
    
        // 内部的this指的是原生对象
    
        // 使用jquery对象用 $(this)
    
    })
    <!DOCTYPE html>
    <html>
    <head>
        <mate charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#btn01").click(function(){
    
                    //绑定click事件
                    // if($(".box").hasClass("col01")){
                    //     $(".box").removeClass("col01");
                    // }
                    // else{
                    //     $(".box").addClass("col01");
                    // }
                    //简化
                    $(".box").toggleClass("col01")
                })
    
            })
        </script>
        <style type="text/css">
            .box{
                100px;
                height:100px;
                background-color:gray;
                color:green;
                font-size:20px;
            }
            .col01{
                background-color:gold;
                color:white;
            }
        </style>
    </head>
    <body>
        <input type="button" name="" value="切换模式" id="btn01" />
        <div class="box">这是一个div元素</div>
    </body>
    </html>

      获取元素的索引值

      有时候需要获得匹配元素相对于其同胞元素的索引位置,此时可以用index()方法获取。

    var $li = $('.list li').eq(1);
    alert($li.index()); // 弹出1
    ......
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <!DOCTYPE html>
    <html>
    <head>
        <mate charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(function(){
                var $li=$(".list li");
                alert($li.length);
                alert($li.eq(1).index());
                alert($li.filter(".myli").index())
            })
        </script>
        <style type="text/css">
            
            }
        </style>
    </head>
    <body>
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li class="myli">3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    </html>

      选项卡

    <!DOCTYPE html>
    <html>
    <head>
        <mate charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(function(){
                var $btns=$('.btns input');
                var $divs=$('.cons div');
    
                alert($btns.length);
                alert($divs.length);
    
                $btns.click(function(){
                    // this指的是原生的this,它表示当前点击的对象,只能使用类似this.style.color等属性
                    // $(this)是jquery的this,表示指示的地方,可随指示变换
    
                    //当前点击的按钮加上current样式后,同级的去除current样式
                    $(this).addClass("current").siblings().removeClass("current");
                    alert($(this).index())
                    $divs.eq($(this).index()).addClass("active").siblings().removeClass("active")
    
                });
            })
        </script>
        <style type="text/css">
            .btns{
                120px;
                height:30px;
                border:0;
            }
            .btns .current{
                background-color: gold;
            }
            .cons div{
                100px;
                height:100px;
                background-color:green;
                display:none;
            }
            .cons .active{
                display:block;
            }
        </style>
    </head>
    <body>
        <div class="btns">
            <input type="button" name="" value="01" class="current">
            <input type="button" name="" value="02">
            <input type="button" name="" value="03">
        </div>
        <div class="cons">
            <div class="active">选项卡1的内容</div>
            <div>选项卡2的内容</div>
            <div>选项卡3的内容</div>
        </div>    
    </body>
    </html>

    6、jquery特殊效果

    fadeIn() 淡入
    
        $btn.click(function(){
    
            $('#div1').fadeIn(1000,'swing',function(){
                alert('done!');
            });
    
        });
    
    fadeOut() 淡出
    fadeToggle() 切换淡入淡出
    hide() 隐藏元素
    show() 显示元素
    toggle() 切换元素的可见状态
    slideDown() 向下展开
    slideUp() 向上卷起
    slideToggle() 依次展开或卷起某个元素
    <!DOCTYPE html>
    <html>
    <head>
        <mate charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#btn").click(function(){
                    $(".box").fadeToggle(1000,"swing");
                });
            });
        </script>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <input type="button" name="" value="动画" id="btn">
        <div class="box" style="color:red">这是第一个测试</div>
    </body>
    </html>

    7、jquery链式调用

      jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:

    $('#div1') // id为div1的元素
    .children('ul') //该元素下面的ul子元素
    .slideDown('fast') //高度从零变到实际高度来显示ul元素
    .parent()  //跳到ul的父元素,也就是id为div1的元素
    .siblings()  //跳到div1元素平级的所有兄弟元素
    .children('ul') //这些兄弟元素中的ul子元素
    .slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

    8、jquery动画

      通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。

    $('#div1').animate({
        300,
        height:300
    },1000,'swing',function(){
        alert('done!');
    });

      参数可以写成数字表达式:

    $('#div1').animate({
        '+=100',
        height:300
    },1000,'swing',function(){
        alert('done!');
    });

    9、尺寸相关、滚动事件

      9.1 获取和设置元素的尺寸

    width()、height()    获取元素width和height  
    innerWidth()、innerHeight()  包括padding的width和height  
    outerWidth()、outerHeight()  包括padding和border的width和height  
    outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

      9.2 获取元素相对页面的绝对位置

       offset() 

      9.3 获取浏览器可视区宽度高度

    $(window).width();
    $(window).height();

      9.4 获取页面文档的宽度高度

    $(document).width();
    $(document).height();

      9.5 获取页面滚动距离

    $(document).scrollTop();  
    $(document).scrollLeft();

      9.6 页面滚动事件

    $(window).scroll(function(){  
        ......  
    })

    10、jquery属性操作

      10.1 html()取出或设置html内容

    // 取出html内容
    
    var $htm = $('#div1').html();
    
    // 设置html内容
    
    $('#div1').html('<span>添加文字</span>');

      10.2 prop()取出或设置某个属性的值

    // 取出图片的地址
    
    var $src = $('#img1').prop('src');
    
    // 设置图片的地址和alt属性
    
    $('#img1').prop({src: "test.jpg", alt: "Test Image" });

    11、jquery循环

        对jquery选择的对象集合分别进行操作,需要用到jquery循环操作,此时可以用对象上的each方法:

    $(function(){
        $('.list li').each(function(i){
            $(this).html(i);
        })
    })
    ......
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    12、jquery事件

      事件函数列表:

    blur() 元素失去焦点
    focus() 元素获得焦点
    click() 鼠标单击
    mouseover() 鼠标进入(进入子元素也触发)
    mouseout() 鼠标离开(离开子元素也触发)
    mouseenter() 鼠标进入(进入子元素不触发)
    mouseleave() 鼠标离开(离开子元素不触发)
    hover() 同时为mouseenter和mouseleave事件指定处理函数
    ready() DOM加载完成
    resize() 浏览器窗口的大小发生改变
    scroll() 滚动条的位置发生变化
    submit() 用户递交表单

      绑定事件的其他方式:

    $(function(){
        $('#div1').bind('mouseover click', function(event) {
            alert($(this).html());
        });
    });

      取消绑定事件

    $(function(){
        $('#div1').bind('mouseover click', function(event) {
            alert($(this).html());
    
            // $(this).unbind();
            $(this).unbind('mouseover');
    
        });
    });

    13、事件冒泡

      13.1 事件冒泡的定义

        在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window) 

      13.2 事件冒泡的作用

        事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。

      13.3 阻止事件冒泡

        事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止:

    $(function(){
        var $box1 = $('.father');
        var $box2 = $('.son');
        var $box3 = $('.grandson');
        $box1.click(function() {
            alert('father');
        });
        $box2.click(function() {
            alert('son');
        });
        $box3.click(function(event) {
            alert('grandson');
            event.stopPropagation();
    
        });
        $(document).click(function(event) {
            alert('grandfather');
        });
    })
    
    ......
    
    <div class="father">
        <div class="son">
            <div class="grandson"></div>
        </div>
    </div>

      13.4 阻止默认行为

        阻止表单提交

    $('#form1').submit(function(event){
        event.preventDefault();
    })

      13.5 合并阻止操作

        实际开发中,一般把阻止冒泡和阻止默认行为合并起来写,合并写法可以用:

    // event.stopPropagation();
    // event.preventDefault();
    
    // 合并写法:
    return false;

    14、事件委托

      事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。

      一般绑定事件的写法:

    $(function(){
        $ali = $('#list li');
        $ali.click(function() {
            $(this).css({background:'red'});
        });
    })
    ...
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

      事件委托的写法:

    $(function(){
        $list = $('#list');
        $list.delegate('li', 'click', function() {
            $(this).css({background:'red'});
        });
    })
    ...
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    15、jquery元素节点操作

      15.1 创建节点

    var $div = $('<div>');
    var $div2 = $('<div>这是一个div元素</div>');

      15.2 插入节点

        (1)append()和appendTo():在现存元素的内部,从后面插入元素

    var $span = $('<span>这是一个span元素</span>');
    $('#div1').append($span);
    ......
    <div id="div1"></div>

        (2)prepend()和prependTo():在现存元素的内部,从前面插入元素

        (3)after()和insertAfter():在现存元素的外部,从后面插入元素

        (4)before()和insertBefore():在现存元素的外部,从前面插入元素

      15.3 删除节点

         $('#div1').remove(); 

    16、滚轮事件与函数节流

      jquery.mousewheel插件使用

      jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jquery的滚轮事件插件jquery.mousewheel.js。

      函数节流

      javascript中有些事件的触发频率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件,在短事件内多处触发执行绑定的函数,可以巧妙地使用定时器来减少触发的次数,实现函数节流。

    17、json

      json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式,目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。

      javascript自定义对象:

    var oMan = {
        name:'tom',
        age:16,
        talk:function(s){
            alert('我会说'+s);
        }
    }

      json格式的数据:

    {
        "name":"tom",
        "age":18
    }

      说明:与javascript对象不同的是,json数据格式的属性名称和字符串值需要用双引号引起来,用单引号或者不用引号会导致读取数据错误。

      json的另外一个数据格式是数组,和javascript中的数组字面量相同。

       ["tom",18,"programmer"] 

    18、ajax和jsonp

      ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。

      同步和异步

      现实生活中,同步指的是同时做几件事情,异步指的是做完一件事后再做另外一件事,程序中的同步和异步是把现实生活中的概念对调,也就是程序中的异步指的是现实生活中的同步,程序中的同步指的是现实生活中的异步。

      局部刷新和无刷新

      ajax可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只是局部刷新,ajax可以自己发送http请求,不用通过浏览器的地址栏,所以页面整体不会刷新,ajax获取到后台数据,更新页面显示数据的部分,就做到了页面局部刷新。

      同源策略

      ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全的考虑。

      $.ajax使用方法

        常用参数:

        (1)url 请求地址

        (2)type 请求方式,默认是"get",常用的还有"post"

        (3)dataType 设置返回的数据格式,常用的是"json"格式,也可以设置为"html"

        (4)data 设置发送给服务器的数据

        (5)success 设置请求成功后的回调函数

        (6)error 设置请求失败后的回调函数

        (7)async 设置是否异步,默认值是"true",表示异步

        以前的写法:

    $.ajax({
        url: 'js/data.json',
        type: 'GET',
        dataType: 'json',
        data:{'aa':1}
        success:function(data){
            alert(data.name);
        },
        error:function(){
            alert('服务器超时,请重试!');
        }
    });

        新的写法:

    $.ajax({
        url: 'js/data.json',
        type: 'GET',
        dataType: 'json',
        data:{'aa':1}
    })
    .done(function(data) {
        alert(data.name);
    })
    .fail(function() {
        alert('服务器超时,请重试!');
    });
    
    // data.json里面的数据: {"name":"tom","age":18}

      jsonp

      ajax只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要用到jsonp技术,jsonp可以跨域请求数据,它的原理主要是利用了<script>标签可以跨域链接资源的特性。jsonp和ajax原理完全不一样,不过jquery将它们封装成同一个函数。

    $.ajax({
        url:'js/data.js',
        type:'get',
        dataType:'jsonp',
        jsonpCallback:'fnBack'
    })
    .done(function(data){
        alert(data.name);
    })
    .fail(function() {
        alert('服务器超时,请重试!');
    });
    
    // data.js里面的数据: fnBack({"name":"tom","age":18});

      例子:获取360搜索关键词联想数据

    $(function(){
        $('#txt01').keyup(function(){
            var sVal = $(this).val();
            $.ajax({
                url:'https://sug.so.360.cn/suggest?',
                type:'get',
                dataType:'jsonp',
                data: {word: sVal}
            })
            .done(function(data){
                var aData = data.s;
                $('.list').empty();
                for(var i=0;i<aData.length;i++)
                {
                    var $li = $('<li>'+ aData[i] +'</li>');
                    $li.appendTo($('.list'));
                }
            })        
        })
    })
    
    //......
    
    <input type="text" name="" id="txt01">
    <ul class="list"></ul>

    19、本地存储

      本地存储分为cookie,以及新增的localStorage和sessionStorage

      19.1 cookie

        cookie 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽,可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,在设置的过期时间之前有效。

    jquery 设置cookie
    $.cookie('mycookie','123',{expires:7,path:'/'});
    jquery 获取cookie
    $.cookie('mycookie');

      19.2 localStorage

        localStorage 存储在本地,容量为5M或者更大,不会在请求时候携带传递,在所有同源窗口中共享,数据一直有效,除非人为删除,可作为长期数据。

    /设置:
    localStorage.setItem("dat", "456");
    localStorage.dat = '456';
    
    //获取:
    localStorage.getItem("dat");
    localStorage.dat
    
    //删除
    localStorage.removeItem("dat");

      19.3 sessionStorage

        sessionStorage 存储在本地,容量为5M或者更大,不会在请求时候携带传递,在同源的当前窗口关闭前有效。

        localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制,可以将数据的更新通知监听者,Web Storage的api接口使用更方便。

    20、jqueryUI

      jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。  

      jqueryUI 网址:http://jqueryui.com/

  • 相关阅读:
    ajax代码及简单封装
    web开发中不同设备浏览器的区分
    JS实现带复选框的下拉菜单
    常用浏览器的编码设置
    PHP实现实现数字补零格式化
    Linux杂碎2/SHELL
    OS
    Linux sudoers
    代理缓存服务器squid
    es6
  • 原文地址:https://www.cnblogs.com/nuochengze/p/12715591.html
Copyright © 2020-2023  润新知