前端 -- jQuery

11.4 Jquery

jQuery的优势

• js代码对浏览器的兼容性更好

• 隐式循环

• 链式操作

jQuery是什么? -- 高度封装了js代码块的模块,封装了dom节点,封装了操作dom节点的简便方法

$: 就是jQuery的简写.

jQuery对象和DOM对象的互相转换

jQuery封装了DOM
DOM转换成jQuery : jQuery(DOM对象) / $(DOM对象)
jQuery转成DOM : jQuery对象[index]
​
</ jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能

11.4.1 jQuery选择器

1. 基础选择器

代码	解释
$("#id")	id选择器
$("tagName")	标签选择器
$(".className")	类选择器
$("*")	通用选择器
$("div.className")	交集选择器(含有className的div标签
$("#id, .className, tagName")	并集选择器

2. 层级选择器

代码	解释
$("div li")	后代选择器,div下面的所有li标签
$("div>ul>li")	子代选择器,div下面的ul标签里的所有里标签
$(".xxx+li")	毗邻选择器,有类名xxx标签的下一个li标签
$(".xxx~li")	弟弟选择器,有类名xxx标签的下面的所有li标签

3. 属性选择器

代码	解释
$('[属性名]')	含有某属性的标签
$('xxx[属性名]')	含有某属性的xxx标签
$('选择器[属性名]')	符合选择器且含有某属性的标签
$('选择器[属性名='xxx']')	符合选择器且某属性值='xxx'的标签
$('选择器[属性名$='xxx']')	符合选择器且某属性值以xxx结尾的标签
$('选择器[属性名^='xxx']')	符合选择器且某属性值以xxx开头的标签
$('选择器[属性名*='xxx']')	符合选择器且某属性值包含xxx的标签
$('选择器[属性名1] [属性名2='xxx']')	符合选择器且拥有属性1和属性2,且属性2的值为xxx的标签

11.4.2 jQuery筛选器

1. 基础筛选器

代码	解释
$('选择器:筛选器')	作用域选择器选择出来的结果
$('选择器:first')	找第一个的标签
$('选择器:last')	找最后一个的标签
$('选择器:eq(index)')	通过索引找的标签
$('选择器:even')	找偶数索引的标签
$('选择器:odd')	找奇数索引的标签
$('选择器:gt(index)')	找大于索引的标签
$('选择器:lt(index)')	找小于索引的标签
$('选择器:not(选择器)')	找没有某选择器的标签
$('选择器:has(标签)')	找含有xxx标签的的标签

2. 表单筛选器

type筛选器

代码	解释
$(':text')	找type属性值为text的标签(文本框)
$(':password')	找type属性值为password的标签(密码框)
$(':radio')	找type属性值为radio的标签(单选框)
$(':checkbox')	找type属性值为checkbox的标签(多选框)
$(':file')	找type属性值为file的标签(文件选择框)
$(':submit')	找type属性值为submit的标签(提交按钮框)
$(':reset')	找type属性值为reset的标签(重置按钮框)
$(':button')	找type属性值为button的标签(普通按钮框)

<!-- date , type的input是找不到的 -->

状态筛选器

enabled  //可选择的
disabled //不可选择
checked  //默认选择
selected //默认选择
​
$(':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)]

11.4.3 jQuery筛选器方法

代码	解释
$('ul p').siblings()	找兄弟
$('ul p').prev() / next() / parent()	找上一个哥哥 / 弟弟 / 祖宗
$('ul p').prevAll() / nextAll() / parents()	找所有哥哥 / 弟弟 / 祖宗
$('ul p').prevUntil('选择器') / nextUntil('选择器') parentsUnitil('选择器')	找哥哥 / 弟弟 / 祖宗到某一个地方就停止
$('ul').children()	找儿子

// 筛选方法
first()
last()
eq(index)
not('选择器')   去掉满足选择器条件的
filter('选择器')交集选择器,在所有的结果中继续找满足选择器要求的
find('选择器')  后代选择器,找所有结果中符合选择器要求的后代
has('选择器')   通过后代关系找当代 

<!-- 注意:内容补充 -->

// 不要用for(i in li_list){}的方式循环一个jq对象,每个对象会封装方法
​
for(let i=0;i<li_list.length;i++){   //let 声明的变量的作用域只在for循环中
        console.log(i)
}

11.4.5 事件绑定

为button按钮绑定单击事件，单机按钮弹出警告框
$('button').click(
        function () {
            alert('别点我啊')
        }
)

11.4.6 标签的文本操作

$('li:first').text()       //获取第一个列表的文本内容
$('li:first').text('小白') //将第一个列表的文本值改为小白
​
$('li:last').html()       //获取最后一个列表的内容
$('li:last').html('大白') //将最后一个列表的内容改为xxx
​
$('li:first').html('<a href="https://www.baidu.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对象
​
</ html可以接受 标签,dom对象,jq对象

11.4.7 标签的操作

1. 增加

父子关系:
    (父).append(子)    //给父级的最后添加一个子
    (子).appendTo(父)  //将子添加到父级的最后
    (父).prepend(子)   //给父级的最前添加一个子
    (子).prependTo(父) //将子添加到父级的最前
​
兄弟关系:
    参考点.before(插入内容)       //在参考点之前插入内容
    $(插入内容).insertBefore(参考点) //将内容插入在参考点之前
    参考点.after(插入内容)        //在参考点之后插入内容
    $(插入内容).insertAfter(参考点)  //将内容插入在参考点之前
​
</ 如果被添加的标签原本就在文档树中,就相当于移动,参考点可以是标签,id,class等

2. 删除

remove / detach / empty
var obj = $('button').remove() //删除标签和事件,被删除的对象做返回值,将对象重新添加回去,有标签但没有事件
var obj = $('button').detach() //删除标签保留事件,被删掉的对象做返回值,将对象重新添加回去,有标签也有事件
$('ul').empty()                //清空ul里面的li标签,ul标签仍保留(清空内部内容,保留本身)

3. 修改

$('li').replaceWith(p)    //用p对象内容替换所有的li标签
$(p).replaceAll('li')     //将所有的li标签替换成p对象内容

4. 复制

var btn = $(this).clone()      //克隆标签但不能克隆事件
var btn = $(this).clone(true)  //克隆标签和事件
​
$('button').click(
        function () {
            var btn = $(this).clone(true);
            $(this).after(btn);
        }
    )

11.4.8 标签的属性操作

1. 通用属性

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处理
​
$('input').prop('checked');       //查看是否有某属性,返回true或false
$('input').prop('checked',false); //取消全部选择
$('input').prop('checked',true);  //全部选择

2. 类的操作

添加类   addClass
$('div').addClass('red')           //添加一个类
$('div').addClass('red bigger')    //添加多个类
​
删除类   removeClass
$('div').removeClass('bigger')     //删除一个类
$('div').removeClass('red bigger') //删除多个类
​
转换类   toggleClass             //有就删除,没有就添加
$('div').toggleClass('red')      
$('div').toggleClass('red bigger')

3. 值的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jQuery3.4.1.js"></script>
</head>
<body>
<input type="text">
<input type="password">
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="2">女
<input type="checkbox" name="hobby" value="1" checked>足球
<input type="checkbox" name="hobby" value="2">音乐
<input type="checkbox" name="hobby" value="3">游戏
<input type="checkbox" name="hobby" value="4">电影
<select name="city" id="">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">天津</option>
    <option value="4">山东</option>
    <option value="5">河南</option>
</select>
</body>
<script>
    $(':text').val()             //查看值
    $(':text').val('123456');    //设置value值为xxx
    $(':password').val('456456');//设置value值为xxx
    $(':radio').val([2]);        //选择value值为2的选择
    $(':checkbox').val([1,3]);   //选择value值为1,3的选项
    $('select').val([5])         //选择value值为5的城市
</script>
</html>
​
# 对于选择框 : 单选,多选,下拉选择 -- 设置选中的值需要放在数组中.

11.4.9 css样式

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

11.4.10 滚动条

$(window).scrollLeft()  //水平滚动条距离左边的距离
$(window).scrollTop()   //垂直滚动条距离顶部的距离

11.4.11 盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: tomato;
        }
    </style>
    <script src="../jQuery3.4.1.js"></script>
</head>
<body>
<div></div>
</body>
<script>
    // $('div').css({'width':'100px','height':'100px'})
    $('div').height(100);  //设置content高度
    $('div').height();     //查看content中content的高度
    $('div').width(100);   //设置content宽度
    $('div').width();      //查看content中content的宽度
    $('div').css('padding','20px'); //设置padding距离
    $('div').innerHeight(); //查看content+padding的高度
    $('div').innerWidth();  //查看content+padding的宽度
    $('div').css({'border':'5px','border-style':'solid'}); //设置border的宽度
    $('div').outerHeight(); //查看content+padding+border的高度
    $('div').outerWidth();  //查看content+padding+border的宽度
    $('div').css('margin','10px'); //设置margin的距离
    $('div').outerHeight(true); //查看content+padding+border+margin的高度
    $('div').outerWidth(true);  //查看content+padding+border+margin的宽度
    $('div').innerHeight(500)   //设置值,改变的是content的高度
</script>
</html>
​
# 设置值:变得永远是content的值

11.4.12 动画

slied滑动系列
sliedDown : 向下滑动显示
siledUp : 向上滑动隐藏
sliedToggle : down和up交替
# 动画时间用毫秒表示,也可以加回调函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            position: relative;
            float: right;
            height: 40px;
             120px;
            background-color: lightblue;
        }
        .box{
            position: absolute;
            height: 100px;
             300px;
            background-color: lightcoral;
            top: 40px;
            right: 0;
            display: none;
        }
        .car{
            position: absolute;
             120px;
            line-height: 40px;
            text-align: center;
            top: 0;
            right: 0;
        }
    </style>
    <script src="../jQuery3.4.1.js"></script>
</head>
<body>
<div class="container">
    <div class="car">购物车(<span>0</span>)</div>
    <div class="box"></div>
</div>
</body>
<script>
    var block = false;
    $('.car').click(
        function () {
            // $('.box').slideToggle(500);
            if(block){
                $('.box').slideUp(500,fn2);  //fn1 , fn2 是回调函数
                block = false;
            }else {
                $('.box').slideDown(500,fn1);
                block = true;
            }
            function fn1() {                  
                $('.car').css('color','orange')
            }
            function fn2() {
                $('.car').css('color','black')
            }
        }
    )
</script>
</html>
​

show系列
show : 对角滑动显示
hide : 对角滑动隐藏
toggle : show和hide交替
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jQuery3.4.1.js"></script>
    <style>
        div{
            height: 200px;
             200px;
            background-color: lawngreen;
            display: block;
        }
    </style>
</head>
<body>
<button>显示</button>
<div></div>
</body>
<script>
    $('button').click(
        function () {
            $('div').stop();           //如果没有stop,连续点击,执行完当前动作,才会执行下一个动作
            // $('div').show(1000)     //显示
            // $('div').hide(1000)     //隐藏
            $('div').toggle(1000,fn)   //交替
        }
    )
    function fn() {
        if($('button').text()==='显示'){
            $('button').text('隐藏')
        }else {
            $('button').text('显示')
        }
    }
</script>
</html>

11.4.13 事件的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jQuery3.4.1.js"></script>
</head>
<body>
    <button>点击</button>
</body>
<script>
    // 方式一
    $('button').click({'a':'b'},fn);  //可以不传参
    function fn(e){
        console.log(e.data);
        console.log(e.data.a);
        console.log('小白')
    }
    
    // 方式二
    $('button').bind('click',{'a':'b'},fn); //可以不传参
    function fn(e) {
        console.log(e);         //打印事件
        console.log(e.data);    //打印事件参数
        console.log(e.data.a);  //打印事件参数的值
        console.log('参数')
    }
    
    //解除绑定事件
    $('button').unbind('click',fn); 
</script>
</html>

11.4.14 各种事件

事件	解释
click(function(){...})	单击事件.点击触发
blur(function(){...})	失去焦点
focus(function(){...})	获得焦点
change(function(){...})	input框鼠标离开时,内容改变触发
keyup(function(){...})	按下键盘触发事件, 获取字符编号: e.keyCode
hover(function(){...})	鼠标悬浮触发
mouseover / mouseout	父元素绑定此事件,如果有子元素出入子元素也会触发
mouseenter / mouseleave	鼠标悬浮触发,鼠标进入 / 离开

1. 获得 / 失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jQuery3.4.1.js"></script>
</head>
<body>
<input type="text">
</body>
<script>
    $('input').focus(
        function () {
            console.log('获得焦点')
        }
    );
    $('input').blur(
        function () {
            console.log('失去焦点')
        }
    );
    $('input').change(
        function () {
            console.log('内容改变')
        }
    )
</script>
</html>

2. keyup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jQuery3.4.1.js"></script>
    <style>
        .mask{
            position: absolute;
            background-color: rgba(255,255,0,0.3);
             100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        .tk{
            position: absolute;
             400px;
            height: 300px;
            background-color: lightblue;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -150px;
        }
    </style>
</head>
<body>
<input type="text">
<h1>那女孩对我说,说我保护她的梦</h1>
<div class="mask">
    <div class="tk"></div>
</div>
</body>
<script>
    // $('input').keyup(
    //     function (e) {
    //         console.log(e.keyCode)  //keyCode:字符的ASCLL编号
    //     }
    // )
​
    $(window).keyup(
        function (e) {
            if(e.keyCode===27){
                $('.mask').css('display','none')
            }
        }
    )
</script>
</html>

3. mouseenter / leave

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            position: relative;
            float: right;
            height: 40px;
             120px;
            background-color: lightblue;
        }
        .box{
            position: absolute;
            height: 100px;
             300px;
            background-color: lightcoral;
            top: 40px;
            right: 0;
            display: none;
        }
        .car{
            position: absolute;
             120px;
            line-height: 40px;
            text-align: center;
            top: 0;
            right: 0;
        }
    </style>
    <script src="../jQuery3.4.1.js"></script>
</head>
<body>
<div class="container">
    <div class="car">购物车(<span>0</span>)</div>
    <div class="box"></div>
</div>
</body>
<script>
    $('.container').mouseenter(    //鼠标悬浮触发
        function () {
            $('.box').stop();
            $('.box').slideDown(500);
        }
    );
    $('.container') .mouseleave(
        function () {
            $('.box').stop();
            $('.box').slideUp(500);
        }
    )
    $('.container').hover(            //鼠标悬浮触发,上面两个结合
        function(){
            $('.box').stop();
            $('.box').toggle(500);
        }
    )
</script>
</html>

4. mouseover / out

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jQuery3.4.1.js"></script>
    <style>
        .out{
             500px;
            height: 500px;
            background-color: lightpink;
        }
        .inner{
            position: absolute;
             200px;
            height: 200px;
            left: 150px;
            top: 150px;
            background-color: purple;
        }
    </style>
</head>
<body>
<div class="out">
    <div class="inner"></div>
</div>
</body>
<script>
    $('.out').mouseover(   //进入父元素打印,进入子元素打印
        function () {
            console.log('enter')
        }
    );
​
    $('.out').mouseout(   //出来父元素打印,出来子元素打印
        function () {
            console.log('out')
        }
    )
</script>
</html>

11.4.15 事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .out{
             500px;
            height: 500px;
            background-color: lightpink;
        }
        .inner{
            position: absolute;
             200px;
            height: 200px;
            left: 150px;
            top: 150px;
            background-color: purple;
        }
    </style>
    <script src="../jQuery3.4.1.js"></script>
</head>
<body>
<div class="out">
    <div class="inner"></div>
</div>
</body>
<script>
    $('.out').click(
        function () {
            alert('out')
        }
    );
    $('.inner').click(    //点击子元素的同时,也相当于点击了父元素
        function (e) {
            alert('inner');
            return false  //阻止事件冒泡1
            // e.stopPropagation()  //阻止事件冒泡2
        }
    )
</script>
</html>

11.4.16 事件委托

# 后来添加的标签,可以拥有之前绑定的事件
​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jQuery3.4.1.js"></script>
</head>
<body>
<div>
    <button>点击1</button>
</div>
</body>
<script>
    $('div').on('click','button',function () {
        alert('点我干嘛')
    });
    var btn = document.createElement('button');
    $(btn).text('点击2').appendTo('div')
</script>
</html>

11.4.17 页面加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jQuery3.4.1.js"></script>
    <script>
        window.onload = function(){     //window.onload要等到所有的文档 音视频都加在完毕才触发.
            $('button').click(          //window.onload 只能绑定一次.多次绑定,只有最后一次生效
                function () {
                    alert('点我干嘛')
                }
            )
        };
        window.onload = function(){
            alert('点我干嘛')
        };
​
        $(document).ready(              //jQuery的方式,只等待文档加载完毕之后就可以执行
            function () {               //在同一个html页面上可以多次使用
                $('button').click(
                    function () {
                        alert('别点我')
                    }
                )
            }
        );
        $(document).ready(
            function () {
                alert('别点了')
            }
        );
​
        //jQuery的简写方式
        $(function () {
            $('button').click(
                function () {
                    alert('就这样吧')
                })
        })
    </script>
</head>
<body>
    <button>点击</button>
</body>
<!--<script>-->
<!--    $('button').click(-->
<!--        function () {-->
<!--            alert('点我干嘛')-->
<!--        }-->
<!--    )-->
<!--</script>-->
</html>

11.4.18 each

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jQuery3.4.1.js"></script>
</head>
<body>
    <ul>
        <li>那女孩对我说</li>
        <li>请先说你好</li>
        <li>明天,你好</li>
    </ul>
</body>
<script>
    $('li').each(
        function (index,val) {    //主动传index:每一项的索引,val:每一项的标签对象
            console.log(index,val)
        }
    )
</script>
</html>