前段（五）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.模态对话框