zoukankan      html  css  js  c++  java
  • 前段(五)jquery及事件

    1.jquery介绍

    jquery的优势

    1.js代码对浏览器的兼容性做的更好了
    2.隐式循环
    3.链式操作
    

    jquery是什么?

    高度封装了js代码的模块
    	封装了dom节点
    	封装了操作dom节点的简便方法
    

    jquery的导入

    https://code.jquery.com/jquery-3.4.1.js 未压缩版
    https://code.jquery.com/jquery-3.4.1.min.js 压缩版
    下载:保存在本地文件里
    引入:<script src="jquery3.4.1.min.js"></script>
    

    $和jQuery的关系

    $就是jQuery名字的简写,实际上是一回事儿
    

    jquery对象和dom对象的关系和转换

    jquery封装了dom
    dom转成jquery : jQuery(dom对象)  $(dom对象)
    jquery转成dom : jq对象[index]
    

    2.jquery选择器

    基础选择器

    #id选择器   .类选择器  标签选择器   *通用选择器
    $('#city')
    k.fn.init [ul#city]0: ul#citylength: 1__proto__: Object(0)
    $('.box')
    k.fn.init [div.box, prevObject: k.fn.init(1)]0: div.boxlength: 1prevObject: k.fn.init [document]__proto__: Object(0)
    $('li')
    k.fn.init(4) [li, li, li, li, prevObject: k.fn.init(1)]0: li1: li2: li3: lilength: 4prevObject: k.fn.init [document]__proto__: Object(0)
    $('a')
    k.fn.init(2) [a, a, prevObject: k.fn.init(1)]0: a1: alength: 2prevObject: k.fn.init [document]__proto__: Object(0)
    $('*')
    k.fn.init(16) [html, head, meta, title, body, div.box, ul#city, li, li, a, li, a, li, p, script, script, prevObject: k.fn.init(1)]
    
    div.c1交集选择器      div,p并集选择器
    $('div.box')
    k.fn.init [div.box, prevObject: k.fn.init(1)]0: div.boxlength: 1prevObject: k.fn.init [document]__proto__: Object(0)
    $('div,p,a')
    k.fn.init(4) [div.box, a, a, p, prevObject: k.fn.init(1)]                           
    

    层级选择器

    空格 后代选择器    >子代选择器 +毗邻选择器  ~弟弟选择器
    $('div li')
    $('div>ul>li')
    $('.baidu+li')
    k.fn.init [prevObject: k.fn.init(1)]
    $('.baidu~li')
    k.fn.init(3) [li, li, li, prevObject: k.fn.init(1)]
    

    属性选择器

    $('[属性名]')         必须是含有某属性的标签
    $('a[属性名]')        含有某属性的a标签
    $('选择器[属性名]')    含有某属性的符合前面选择器的标签
    $('选择器[属性名="aaaa"]')  属性名=aaa的符合选择器要求标签
    $('选择器[属性名$="xxx"]')  属性值以xxx结尾的
    $('选择器[属性名^="xxx"]')  属性值以xxx开头的
    $('选择器[属性名*="xxx"]')  属性值包含xxx
    $('选择器[属性名1][属性名2="xxx]')  拥有属性1,且属性二的值='xxx',符合前面选择器要求的
    

    3.jquery筛选器

    基础筛选器

    $('选择器:筛选器')
    $('选择器:first')
    作用于选择器选择出来的结果
    first      找第一个
    last       最后一个
    eq(index)  通过索引找
    even       找偶数索引
    odd        找奇数索引
    gt(index)  大于某索引的
    lt(index)  小于某索引的
    not(选择器) 不含 符合选择器 要求的
    has(选择器) 后代中含有该选择器要求的(找的不是后代,找的是本身)
    

    表单筛选器

    type筛选器

    $(':text')
    $(':password')
    $(':radio')
    $(':checkbox')
    $(':file')
    $(':submit')
    $(':reset')
    $(':button')
    注意 : date type的input是找不到的
    

    状态筛选器

    enabled
    disabled
    checked
    selected
    
    :enabled   #可用的标签
    :disabled  #不可用的标签
    :checked   #选中的input标签
    :selected  #选中的option标签
    
    $(':disabled')
    jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]
    $(':enabled')
    jQuery.fn.init(15) [input, input, input, input, input, input, input, input, input, input, input, select, option, option, option, prevObject: jQuery.fn.init(1)]
    $(':checked')
    jQuery.fn.init(4) [input, input, input, option, prevObject: jQuery.fn.init(1)]
    $(':selected')
    $(':checkbox:checked')
    jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
    $('input:checkbox:checked')
    jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
    

    4.jquery的筛选器方法

    找兄弟 :$('ul p').siblings()
    找哥哥
    $('ul p').prev()             找上一个哥哥
    $('ul p').prevAll()          找所有哥哥
    $('ul p').prevUntil('选择器') 找哥哥到某一个地方就停了
    找弟弟 : next()  nextAll()   nextUntil('选择器')
    找祖宗 : parent()  parents()   parentsUntil('选择器')
    找儿子 : children()
    
    
    下一个:
        $('#l3').next();  找到下一个兄弟标签
        $('#l3').nextAll(); 找到下面所有的兄弟标签
        $('#l3').nextUntil('#l5');#直到找到id为l5的标签就结束查找,不包含它
    上一个
    	$("#id").prev()
    	$("#id").prevAll()
    	$("#id").prevUntil("#i2")
    父亲元素
        $("#id").parent()
        $("#id").parents()  // 查找当前元素的所有的父辈元素(爷爷辈、祖先辈都找到)
        $("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止,这里直到body标签,不包含body标签,基本选择器都可以放到这里面使用。
    
    儿子和兄弟元素
    $('ul').children(); 
    $('ul').children('#l3');  #找到符合后面这个选择器的儿子标签
    
    $('#l5').siblings();
    $('#l5').siblings('#l3'); #找到符合后面这个选择器的兄弟标签
    
    
    find
    	$('ul').find('#l3')  -- 类似于  $('ul #l3')
    filter过滤
    	$('li').filter('#l3');
    
    
    
    
    筛选方法
    first()
    last()
    eq(index)
    not('选择器')   去掉满足选择器条件的
    filter('选择器')交集选择器,在所有的结果中继续找满足选择器要求的
    find('选择器')  后代选择器 找所有结果中符合选择器要求的后代
    has('选择器')   通过后代关系找当代 后代中有符合选择器要求的就把当代的留下
    
    
    .first() // 获取匹配的第一个元素
    .last() // 获取匹配的最后一个元素
    .not()  // 从匹配元素的集合中删除与指定表达式匹配的元素  $('li').not('#l3');
    .has()  // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
    .eq()  // 索引值等于指定值的元素
    

    5.事件的绑定

    事件的绑定
    jquery操作标签
    	操作文本 : <>文本内容<>
    	操作标签 : 添加 删除 修改 克隆 
    	操作属性 : 通用属性 类 css样式 value 盒子模型 滚动条  
    
    
    
    
    <body>
        <button>点击1</button>
        <button>点击2</button>
    </body>
    
    <script src="jquery.3.4.1.js"></script>
    <script>
        $('button').click(
            function () {
                alert('你点了我一下!')
            }
        )
    </script>
    

    6.标签操作

    标签的文本操作

    text()
    $('li:first').text()         // 获取值
    $('li:first').text('wahaha') // 设置值
    
    $('li:last').html()          // 获取值
    $('li:last').html('qqxing')  // 设置值
    
    $('li:first').html('<a href="http://www.mi.com">爽歪歪</a>')   //a标签
    
    var a = document.createElement('a')
    a.innerText = '我是AD钙'
    $('li:last').html(a)     //a 是dom对象
    
    var a2 = document.createElement('a')
    var jqobj = $(a2)
    jqobj.text('乳娃娃')
    $('li:last').html(jqobj)   //jqobj是jquery对象
    

    标签的操作

    增加

    父子关系:
    	追加儿子 :(父).append(子) (子).appendTo(父)
    	头部添加 :(父).prepend(子) (子).prependTo(父)
    兄弟关系:
    	添加哥哥 :参考点.before(要插入的)     要插入的.insertbefore(参考点)
    	添加弟弟 :参考点.after(要插入的)      要插入的.insertAfter(参考点)
    如果被添加的标签原本就在文档树中,就相当于移动
    
    
    例子append
        var li = document.createElement('li')
        var jq = $(li).text('张艺兴')
        $('ul').append(jq)
        
        var li = document.createElement('li')
        var jq = $(li).text('张艺兴')
        $('ul').append(jq[0])
       
        var li = document.createElement('li')
        var jq = $(li).text('张艺兴')
        $('ul').append('<li>鹿晗</li>')
        
    例子appendTo
    	var li = document.createElement('li')
        var jq = $(li).text('张艺兴')
        jq.appendTo('ul')
        
        var dom_ul = document.getElementsByTagName('ul')[0]
        var li = document.createElement('li')
        var jq = $(li).text('张艺兴')
        jq.appendTo(dom_ul)
        
        var li = document.createElement('li')
        var jq = $(li).text('张艺兴')
        jq.appendTo($('ul'))
       
    对已经存在的内容进行添加 -- 移动
       $('li:first').appendTo('ul')
    
    
    $('li:last').prependTo('ul')
    $('ul').prepend('<li>李东宇</li>')
    $('<li>邓帅</li>').prependTo('ul')
    
    
    $('#l2').before('<li>李东宇</li>')
    $('<li>李东宇222</li>').insertBefore('#l2')
    
    $('#l2').after('<li>邓帅</li>')
    $('<li>邓帅222</li>').insertAfter('#l2')
    

    删除 修改 克隆

    删除 : remove detach empty
    remove : 删除标签和事件,被删掉的对象做返回值
    detach : 删除标签,保留事件,被删掉的对象做返回值
    empty : 清空内容标签,自己被保留
    
    修改 : replaceWith replaceAll
    replaceWith : a.replaceWith(b)  用b替换a
    replaceAll : a.replaceAll(b)    用a替换b
    
    复制 : clone
    var btn = $(this).clone()      //克隆标签但不能克隆事件
    var btn = $(this).clone(true)  //克隆标签和事件
    
    
    var obj = $('button').remove()
    obj是button标签,但是事件已经被删除了
    
    var  a = document.createElement('a')
    a.innerText = 'wahaha'
    $(a).replaceAll('p')
    $('p').replaceWith(a)
    

    标签的属性操作

    通用属性

    attr
    获取属性的值
    $('a').attr('href')
    设置/修改属性的值
    $('a').attr('href','http://www.baidu.com')
    设置多个属性值
    $('a').attr({'href':'http://www.baidu.com','title':'baidu'})
    
    removeAttr
    $('a').removeAttr('title') //删除title属性
    
    
    如果一个标签只有true和false两种情况,适合用prop处理
    $(':checkbox:checked').prop('checked') //获取值
    $(':checkbox:checked').prop('checked',false) //表示取消选中
    如果设置/获取的结果是true表示选中,false表示取消选中
    

    类的操作

    添加类   addClass
    $('div').addClass('red')        //添加一个类
    $('div').addClass('red bigger') //添加多个类
    
    删除类   removeClass
    $('div').removeClass('bigger')  //删除一个类
    $('div').removeClass('red bigger')
    
    转换类   toggleClass             //有即删 无即加
    $('div').toggleClass('red')      
    $('div').toggleClass('red bigger')
    

    value值的操作

    $(input).val()
    $(':text').val('值')
    $(':password').val('值')
    
    对于选择框 : 单选 多选 下拉选择
    设置选中的值需要放在数组中 : 
    	$(':radio').val([1])
    	$(':radio').val([1,2,3])
    

    7.css样式

    css('样式名称','值')
    css({'样式名1':'值1','样式名2':'值2'})
    
    $('div').css('background-color','red')           //设置一个样式
    $('div').css({'height':'100px','width':'100px'}) //设置多个样式
    

    8.滚动条

    scrollTop()
    scrollLeft()
    
    $(window).scrollLeft()
    $(window).scrollTop()
    

    9.盒子模型

    内容宽高 : width和height
    
    内容+padding : innerWidth和innerHeight
    
    内容+padding+border :outerWidth和outerHeight
    
    内容+padding+border+margin : outerWidth(true)和outerHeight(true)
    
    设置值:变得永远是content的值
    

    10.表单操作

    $(':submit').click(
        function () {
            return false
        }
    )
    如果返回false不提交
    如果返回true不提交
    

    作业例子

    定时器

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>定时器</title>
    
    </head>
    <body>
    
    <input type="text" id="timer">
    <button id="start">开始</button>
    <button id="end">结束</button>
    
    
    <script>
        var timetag;
        // 1 获取当前时间
        function f1() {
            var showTime = new Date();
            var showLocaleTime = showTime.toLocaleString();
            var inpEle = document.getElementById('timer');
            inpEle.value = showLocaleTime;
        }
        // 2 把时间放进去
        //     2.1 找到strat开始按钮,绑定点击事件
        var startBtn = document.getElementById('start');
        startBtn.onclick = function () {
            //2.2 找到input标签,并将值放到input标签里面
            f1();
            if (timetag === undefined){
                timetag = setInterval(f1,1000);
            }
        };
        // 3 停止时间
        var endBtn = document.getElementById('end');
        endBtn.onclick = function () {
            clearInterval(timetag);
            timetag = undefined;
        }
    
    
    </script>
    
    </body>
    </html>
    

    select联动

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>select联动</title>
    </head>
    <body>
    
    <select id="province">
      <option>请选择省:</option>
    
    </select>
    
    <select id="city">
      <option>请选择市:</option>
    </select>
    
    <script>
        var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    
        // 1 将省份的数据放到省份的下拉框里面
        //1.1 找到省份下拉框
        var proSelect = document.getElementById('province');
        // 1.2 创建option标签
    
        //1.3  将数据放到option标签中,并将option标签放到省份下拉框里面
        for (var province in data){
            var proOption = document.createElement('option');
            proOption.innerText = province;
            proSelect.appendChild(proOption);
        }
    
        //2 选择省份,将被选择的省份的市都放到市的那个下拉框里面
        var citySelect = document.getElementById('city');
        proSelect.onchange = function () {
            citySelect.innerText = '';
            var proText = this.options[this.selectedIndex].innerText;
            var cityData = data[proText];
            for (var cityindex in cityData){
                var cityOption = document.createElement('option');
                cityOption.innerText = cityData[cityindex];
                citySelect.appendChild(cityOption);
    
            }
        }
    
    
    </script>
    
    </body>
    </html>
    

    事件

    1.事件绑定方式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1{
                background-color: black;
                height: 200px;
                 200px;
            }
        </style>
    </head>
    <body>
    <div id="d1"></div>
    
    <script src="jquery.js"></script>
    <script>
        //方式一
        $('#d1').click(function () {
            $(this).css({'background-color':'green'})
        })
        //方式二
        $('#d1').on('click',function () {
            $(this).css({'background-color':'green'});
        })
    </script>
    </body>
    </html>
    
    // bind 参数都是选传的,接收参数e.data
        $('button').bind('click',{'a':'b'},fn)
        function fn(e) {
            console.log(e.data)
            console.log(e.data.a)
        }
    
        $('button').bind('click',fn)
        function fn(e) {
            console.log('wahaha')
        }
    // 简写的事件名称当做方法名
        $('button').click({'a':'b'},fn)
        function fn(e) {
            console.log(e.data)
            console.log(e.data.a)
        }
    
        $('button').click(fn)
        function fn(e) {
            console.log('wahaha')
        }
    
    
    解除绑定
    		$('button').unbind('click')
    

    2.常用事件

    click(function(){...}) // 单机事件

    blur(function(){...}) // 失去焦点
    focus(function(){...}) // 获得焦点

    change(function(){...}) // input框鼠标离开时内容改变触发

    keyup(function(){...}) // 按下的键盘触发事件 27对应的是esc键 获取键盘编号 e.keyCode
    mouseover/mouseout // 如果给父元素绑定了over事件,那么这个父元素如果有子元素,每一次进入子元素也 触发父元素的over事件
    mouseenter/mouseleave = hover(function(){...}) //鼠标的悬浮

    1.左键点击事件

    $('#d1').click(function () {
            $(this).css({'background-color':'green'})
        })
    

    2.获取光标(焦点)触发事件/失去光标(焦点)出发的事件

    //获取 focus
    $('[type="text"]').focus(function () {
            $('.c1').css({'background-color':'black'});
        });
    //失去 blur
    $('[type="text"]').blur(function () {
            $('.c1').css({'background-color':'purple'});
        });
    

    3.域内容发生变化时触发的事件

    $('select').change(function () {
            $('.c1').toggleClass('cc');
        });
    

    4.鼠标悬浮触发的事件

    $('.c1').hover(
        //鼠标放上去
        function(){$(this).css({'background-color':'black'});},
        //鼠标移走
        function(){$(this).css({'background-color':'yellow'});}
    )
    
    鼠标悬浮等同于hover
    
    	// mouseenter鼠标进入
        $('.c1').mouseenter(function () {
             $(this).css({'background-color':'blue'});
         });
    	//mouseout鼠标移出
          $('.c1').mouseout(function () {
             $(this).css({'background-color':'yellow'});
         });
    	//mouseover鼠标进入
         $('.c2').mouseover(function () {
             console.log('得港绿了');
         });
    ps:mouseover 和 mouseenter的区别是:mouseover事件是如果该标签有子标签,那么移动到该标签或者移动到子标签时会连续触发,mmouseenter事件不管有没有子标签都只触发一次,表示鼠标进入这个对象。
    

    5.键盘按下触发的事件/键盘抬起触发的事件(e\event时间对象)

    //keydown键盘按下出发事件 
    $(window).keydown(function (e) {
            // console.log(e.keyCode); 
            //每个键都有一个keyCode值,通过不同的值来触发不同的事件
            if (e.keyCode === 37){
                $('.c1').css({'background-color':'red'});
            }else if(e.keyCode === 39){
                $('.c1').css({'background-color':'green'});
            }
            else {
                $('.c1').css({'background-color':'black'});
            }
        })
    //keyup键盘抬起触发事件
    $(window).keyup(function (e) {
            console.log(e.keyCode);
        })
    //特殊的input事件:(必须用.on('input',function))
            22期百度:<input type="text" id="search">
            <script src="jquery.js"></script>
            <script>
                $('#search').on('input',function () {
                    console.log($(this).val());
                })
    

    3.事件冒泡

    ps:触发子标签事件的时候会一直往上找,把父级以上标签事件全部触发。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1{
                background-color: red;
                height: 200px;
            }
            #d2{
                background-color: green;
                height: 100px;
                 100px;
            }
    
        </style>
    
    </head>
    <body>
    
    <div id="d1">
        <div id="d2"></div>
    
    </div>
    
    
    <script src="jquery.js"></script>
    <script>
        $('#d1').click(function () {
            alert('父级标签');
        });
        $('#d2').click(function () {
            alert('子级标签');
        });
        
    
    </script>
    
    </body>
    </html>
    

    4.阻止后续事件发生(事件冒泡)

    $('#d1').click(function () {
            alert('父级标签');
        });
        $('#d2').click(function (e) {
            alert('子级标签');
            return false;
            // e.stopPropagation();
        });
    //return false;    e.stopPropagation();
    
    
                // e.stopPropagation() //阻止事件冒泡方法1
                return false    //阻止事件冒泡方法2
    

    5.事件委托

    ps:事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件,将未来添加进来的某些子标签自动绑定上事件。事件委托,类似于python的装饰器, 把绑定事件拉出来装在父标签上,所有子标签事件,相当于触发父标签事件。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <div id="d1">
        <button class="c1">爱的魔力转圈圈</button>
    
    </div>
    
    <script src="jquery.js"></script>
    <script>
        // $('.c1').on('click',function () {
        //     alert('得港被雪飞调教了,大壮很难受!');
        //     var btn = document.createElement('button');
        //     $(btn).text('爱的魔力转圈圈');
        //     $(btn).addClass('c1');
        //     console.log(btn);
        //     //添加到div标签里面的后面
        //     $('#d1').append(btn);
        //
        // });
    
    	#将'button' 选择器选中的标签的点击事件委托给了$('#d1');
        $('#d1').on('click','button',function () {
            alert('得港被雪飞调教了,大壮很难受!');
            var btn = document.createElement('button');
            $(btn).text('爱的魔力转圈圈');
            $(btn).addClass('c1');
            console.log(btn);
            console.log($(this)) //还是我们点击的那个button按钮
            //添加到div标签里面的后面
            $('#d1').append(btn);
    
        });
    
    </script>
    </body>
    </html>
    
    $('div').on('click','button',{'a':'b'},function (event) {
            console.log(event.data)
            alert('不许点')
        })
    相当于把button元素的点击事件委托给了父元素div
    后添加进来的button也能拥有click事件
    

    6.页面载入和window.onload

    1. jquery文件要在使用jquery的代码之前引入(文件先加载了jpuery但是还没有加载样式,所以不会生效)
    
    2. js代码最好都放到body标签下面或者里面的最下面来写
    
    3.window.onload
    	// window.onload = function () {
        //     $('.c1').click(function () {
        //         $(this).css({'background-color':'green'});
        //     })
        // }
    4.页面载入,$(function (){alert('xx');}) -- $(document).ready(function(){});
    	页面载入与window.onload的区别
        1.window.onload()函数有覆盖现象,必须等待着图片资源加载完成之后才能调用
        2.jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数)
        
    示例:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery.js"></script>
        <script>
            // 等待整个页面中的内容全部加载完成之后,触发window.onload对应的函数里面的内容
            // window.onload 有覆盖现象,会被后面的window.onload给重新赋值
            // window.onload = function () {
            //     $('.c1').click(function () {
            //         $(this).css({'background-color':'green'});
            //     })
            // }
    
            
            $(function () {
                $('.c1').click(function () {
                    $(this).css({'background-color':'green'});
                })
            });
    
        </script>
        <script src="xx.js"></script>
    
    
        <style>
            .c1{
                background-color: red;
                height: 200px;
                 200px;
            }
        </style>
    </head>
    <body>
    
    <div class="c1"></div>
    
    <img src="" alt="">
    
    
    </body>
    
    </html>
        
    
    
    
    document.onload = function(){
       //js 代码 
    }
    window.onload = function () {
                $('button').click(function () {
                alert('不许点')
                })
    }
    onload要等到所有的文档 音视频都加在完毕才触发
    onload只能绑定一次
    
    //jquery的方式,只等待文档加载完毕之后就可以执行,在同一个html页面上可以多次使用
    $(document).ready(
         function () {
           //文档加在完毕之后能做的事情 
    })
    
    //jquery的方式(简写)*****
    $(function () {
    	//文档加在完毕之后能做的事情        
      })
    
    //示例
    $(function () {
         $('button').click(function () {
              alert('不许点')
         })
    })
    
    //jquery中等待所有的资源包括视频 音频都加载完才执行function中的代码,可以使用多次
    $(window).ready(
          function () {
               alert('123')
    })
    

    7.动画

    show系列
    	show hide toggle
    slide滑动系列
       slideUp slideDown slideToggle(时间,回调函数)
    fade淡入淡出系列
       fadeOut fadeIn fadeToggle
    动画的停止
       stop 永远在动画开始之前,停止动画
    

    8.each

    <body>
        <ul>
            <li>选项一</li>
            <li>选项二</li>
            <li>选项三</li>
        </ul>
    </body>
    <script>
        $('li').each(
            function (ind,dom) {      //主动传ind是每项的索引,dom是每一项的标签对象
                console.log(ind,dom)
            }
        )
    </script>
    

    9.date

    ps:类似于添加全局变量,给标签赋值。
    
    	.data(key, value): 设置值
    	.data(key)   取值
    	.removeData(key) 删除值
    

    10.插件

    jQuery.extend({ //$.extend({})
      min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法,min和max作为键,值是一个function
      max:function(a, b){return a > b ? a : b;}
    });
    这么写的插件方法不能通过标签对象调用,只能用$调用
    
    jQuery.fn.extend({  //给任意的jQuery标签对象添加一个方法
        check:function(){
          return this.each(function(){this.checked =true;});
        },
        uncheck:function(){
          return this.each(function(){this.checked =false;});
        }
      });
      中间加了fn.就可以调用了
    

    Bootstrap

    官网地址:https://www.bootcss.com/

    全局样式,组件,js插件。下载以后导入就可以

    作业

    1.form表单的验证提示信息用focus和blur事件完成

    2.表格操作 使用事件委托

    3.小米购物车

    4.模态对话框

  • 相关阅读:
    Recommended Books for Algo Trading in 2020
    Market Making is simpler than you think!
    Top Crypto Market Makers of 2020
    Top Crypto Market Makers, Rated and Reviewed
    爬取伯乐在线文章(五)itemloader
    爬取伯乐在线文章(四)将爬取结果保存到MySQL
    爬取伯乐在线文章(三)爬取所有页面的文章
    爬取伯乐在线文章(二)通过xpath提取源文件中需要的内容
    爬取伯乐在线文章(一)
    爬虫去重策略
  • 原文地址:https://www.cnblogs.com/yly123/p/11399331.html
Copyright © 2011-2022 走看看