Jquery

目录

• 1. 查找标签
  • 1.1 基本选择器
  • 1.2 层级选择器
  • 1.3 基本筛选器
  • 1.4 属性选择器
  • 1.5 表单筛选器
• 2. 筛选器方法
• 3. 操作标签
  • 3.1 样式操作
  • 3.2 位置操作
  • 3.3 尺寸
  • 3.4 文本操作
  • 3.5 属性操作
  • 3.6 文档处理
• 4. 事件
  • 4.1 常用事件
  • 4.2 事件绑定
  • 4.3 移除事件
  • 4.4 阻止后续事件执行
  • 4.5 阻止事件冒泡
  • 4.6 页面载入
  • 4.7 事件委托
• 5. 动画效果

1. 查找标签

1.1 基本选择器

// id选择器
var aEle = document.getElementById('a')   // js获取标签
aEle
// <div class=​"div" id=​"a">​…​</div>​

var $aEle=jQuery('#a');     // jq获取标签
// 等同于 var $aEle=$('#a');
$aEle
// k.fn.init [div#a.div]

var aELe = $aEle[0];   // jq对象变js对象
aELe
// <div class=​"div" id=​"a">​…​</div>​

var $a1Ele = $(aEle)   // js对象变jq对象
$a1Ele
// k.fn.init [div#a.div]


// 标签选择器
$('div');
// k.fn.init(2) [div#a.div, div.div1, prevObject: k.fn.init(1)]


// class选择器
$('.div1');
// k.fn.init [div.div1, prevObject: k.fn.init(1)]


// 配合使用
$('div span');   // 找到有span标签的div标签
// k.fn.init [span, prevObject: k.fn.init(1)]
$('div.div');   //找到有div class类的div标签
// k.fn.init [div#a.div, prevObject: k.fn.init(1)]


// 所有元素选择器
$('*');
// k.fn.init(20) [html, head, meta, title, script, body, div#a.div, span, div.div1, ul, li#1, span#span, li, li#3, li, li#5, input, input, select, option, prevObject: k.fn.init(1)]


// 组合选择器
$('#a,sapn');
// k.fn.init [div#a.div, prevObject: k.fn.init(1)]

1.2 层级选择器

// x的所有后代y（子子孙孙）
$('ul li');
// k.fn.init(5) [li#1, li, li#3, li, li#5, prevObject: k.fn.init(1)]

// x的所有儿子y（儿子）
$('ul>li');
// k.fn.init(5) [li#1, li, li#3, li, li#5, prevObject: k.fn.init(1)]

// 找到所有紧挨在x后面的y
$('#1+li');
// k.fn.init [li, prevObject: k.fn.init(1)]
$('#1+li')[0];
// <li>​2​</li>​

// x之后所有的兄弟y,同级后面的
$('#1~li');
// k.fn.init(4) [li, li#3, li, li#5, prevObject: k.fn.init(1)]

1.3 基本筛选器

// 第一个
$('ul li:first');
// k.fn.init [li#1, prevObject: k.fn.init(1)]

// 最后一个
$('ul li:last');
// k.fn.init [li#5, prevObject: k.fn.init(1)]

// 索引等于index的那个元素
$('ul li:eq(2)');
// k.fn.init [li#3, prevObject: k.fn.init(1)]

// 匹配所有索引值为偶数的元素，从 0 开始计数
$('ul li:even');
// k.fn.init(3) [li#1, li#3, li#5, prevObject: k.fn.init(1)]

// 匹配所有索引值为奇数的元素，从 0 开始计数
$('ul li:odd');
// k.fn.init(2) [li, li, prevObject: k.fn.init(1)]

// 匹配所有大于给定索引值的元素
$('ul li:gt(2)');
// k.fn.init(2) [li, li#5, prevObject: k.fn.init(1)]

// 匹配所有小于给定索引值的元素
$('ul li:lt(2)');
// k.fn.init(2) [li#1, li, prevObject: k.fn.init(1)]

// 移除所有满足not条件的标签
$('ul li:not(#1)');
// k.fn.init(4) [li, li#3, li, li#5, prevObject: k.fn.init(1)]

// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('ul li:has(span)');
// k.fn.init [li#1, prevObject: k.fn.init(1)]

1.4 属性选择器

$("input [type='checkbox']");   // 取到checkbox类型的input标签
// k.fn.init [prevObject: k.fn.init(1)]length: 0prevObject: k.fn.init [document]__proto__: Object(0)
$("input [type!='text']");   // 取到类型不是text的input标签
// k.fn.init [prevObject: k.fn.init(1)]

1.5 表单筛选器

// :text | :password | :file | :radio | :checkbox | :submit | :reset | :button

$(':checkbox');   // 找到所有的checkbox
// k.fn.init [input, prevObject: k.fn.init(1)]


// 表单对象属性
:enabled | :disabled | :checked | :selected

$('input:enabled');   // 找到可用的input标签
// k.fn.init(2) [input, input, prevObject: k.fn.init(1)]
$(':checked');
// k.fn.init(2) [input, option, prevObject: k.fn.init(1)]
$('input:checked');   // 坑点
// k.fn.init [input, prevObject: k.fn.init(1)]

2. 筛选器方法

// 下一个元素
$('#1').next();
// k.fn.init [li, prevObject: k.fn.init(1)]0: lilength: 1prevObject: k.fn.init [li#1]__proto__: Object(0)
// 下面的所有
$('#1').nextAll();
// k.fn.init(4) [li, li#3, li, li#5, prevObject: k.fn.init(1)]
// 下面的所有，到哪里为止
$('#1').nextUntil('#5');
// k.fn.init(3) [li, li#3, li, prevObject: k.fn.init(1)]


// 上一个元素
$('#5').prev();
// k.fn.init [li, prevObject: k.fn.init(1)]0: lilength: 1prevObject: k.fn.init [li#5]__proto__: Object(0)
$('#5').prevAll();
// k.fn.init(4) [li, li#3, li, li#1, prevObject: k.fn.init(1)]
$('#5').prevUntil('#1');
// k.fn.init(3) [li, li#3, li, prevObject: k.fn.init(1)]


// 父亲元素
$("#1").parent();
// k.fn.init [ul, prevObject: k.fn.init(1)]
$("#1").parents();   // 查找当前元素的所有的父辈元素
// k.fn.init(3) [ul, body, html, prevObject: k.fn.init(1)]
$("span").parentsUntil('html');   // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
// k.fn.init(4) [li#1, ul, div#a.div, body, prevObject: k.fn.init(2)]


// 儿子和兄弟元素
$('ul').children();   // 儿子们
// k.fn.init(5) [li#1, li, li#3, li, li#5, prevObject: k.fn.init(1)]
$('ul').siblings();   // 兄弟们
// k.fn.init(5) [div#a.div, div.div1, input, input, select, prevObject: k.fn.init(1)]


// 查找：搜索所有与指定表达式匹配的元素，这个函数是找出正在处理的元素的后代元素的好方法
$('div').find('span');
// k.fn.init [span, prevObject: k.fn.init(2)]
$('div span');   // 等价
// k.fn.init [span, prevObject: k.fn.init(1)]
$('div').find('span')[0];
// <span>​我是span​</span>​
$('div span')[0];
// <span>​我是span​</span>​


// 筛选：筛选出与指定表达式匹配的元素集合  
$('ul').filter('#1');   // 从结果集中过滤出有1样式id的
// k.fn.init [prevObject: k.fn.init(1)]
$('ul#1');    // 等价
// k.fn.init [prevObject: k.fn.init(1)]


// 补充
.first()   // 获取匹配的第一个元素，等同于 :first
.last()   // 获取匹配的最后一个元素,等同于 :last
.not()   // 从匹配元素的集合中删除与指定表达式匹配的元素
.has()   // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq(index)   // 索引值等于指定值的元素,等同于 :eq(index)

3. 操作标签

3.1 样式操作

// 添加类属性值
$('.div').addClass('div1');
// k.fn.init [div#a.div.div1, prevObject: k.fn.init(1)]

// 移除类属性值
$('.div').removeClass('div1');
// k.fn.init [div#a.div, prevObject: k.fn.init(1)]

// 判断样式存不存在
$('.div').hasClass('div');
// true
$('.div').hasClass('div1');
// false

// 切换CSS类名，有就移除，没有就添加
$('.div').toggleClass('div1');
// k.fn.init [div#a.div.div1, prevObject: k.fn.init(1)]0: div#a.div.div1length: 1prevObject: k.fn.init [document]__proto__: Object(0)
$('.div').toggleClass('div1');
// k.fn.init [div#a.div, prevObject: k.fn.init(1)]

// 添加css样式
$('span').css('color','red');   // 将所有span标签的字体设置为红色
// k.fn.init(2) [span, span#span, prevObject: k.fn.init(1)]
// 获取样式的值
$('span').css('color');
// "rgb(255, 0, 0)"
// 添加多个样式
$('span').css({'color':'green','font-size':36});
// k.fn.init(2) [span, span#span, prevObject: k.fn.init(1)]

3.2 位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

// .offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

3.3 尺寸

// 内容的宽高
$('div').height();
// 69
$('div').width();
// 1094

// 内容加padding的宽高
$('div').innerHeight();
// 89
$('div').innerWidth();
// 1124

// 内容加padding加border的宽高
$('div').outerWidth();
// 1126
$('div').outerHeight();
// 91

3.4 文本操作

// 获取value值
$('input').val();   // 获取第一个匹配元素的当前值
// "123"
$('input').val(789);   // 传参就是设置值
// k.fn.init [input, prevObject: k.fn.init(1)]


// HTML代码
$('div').html();   // 获取第一个匹配元素的html内容
/* "
    <h1>123</h1>
" */
$('div').html('<h2>456</h2>');   // 设置所有匹配元素的html内容
// k.fn.init [div.a1, prevObject: k.fn.init(1)]0: div.a1length: 1prevObject: k.fn.init [document]__proto__: Object(0)


// 文本值
$('div').text();   // 获取所有匹配元素的内容
/* "
    123
" */

$('div').text('<h2>456</h2>');   // 设置所有匹配元素的内容
// k.fn.init [div.a1, prevObject: k.fn.init(1)]

3.5 属性操作

// 用于ID等或自定义属性
$('div').attr('name','aa');   // 为所有匹配元素设置一个属性值
// k.fn.init [div.a1, prevObject: k.fn.init(1)]
$('div').attr('name');   // 返回第一个匹配元素的属性值
// "aa"
$('div').removeAttr('name');   // 从每一个匹配的元素中删除一个属性
// k.fn.init [div.a1, prevObject: k.fn.init(1)]
$('div').attr({'name':'aa','like':'eat'});   // 为所有匹配元素设置多个属性值
// k.fn.init [div.a1, prevObject: k.fn.init(1)]


// 用于checkbox和radio
$('input').prop('checked');   // 获取属性
// false
$('input').prop('checked',false);
// k.fn.init [input, prevObject: k.fn.init(1)]
$('input').attr('checked');   // 用attr可能会因为版本问题出现不兼容，所以在处理checkbox和radio的时候尽量使用特定的prop()
// undefined

removeProp()   // 移除属性


/*
attr全称attribute(属性) 
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
*/

3.6 文档处理

var aELe = document.createElement('div');
aELe.innerText = 'asdf'
// "asdf"
aELe.setAttribute('id','rr');
aELe
// <div id=​"rr">​asdf​</div>​

// 添加到指定元素内部的后面
$('.a1').append(aELe);   // 把B追加到A
// k.fn.init [div.a1, prevObject: k.fn.init(1)]
$(A).appendTo(B);   // 把A追加到B


// 添加到指定元素内部的前面
$(A).prepend(B);   // 把B前置到A
$(A).prependTo(B);   // 把A前置到B


// 添加到指定元素外部的后面
$(A).after(B);   // 把B放到A的后面
$('#rr').insertAfter($('#ee'));   // 把A放到B的后面$(A).insertAfter(B)   // 把A放到B的后面
// k.fn.init [div#rr, prevObject: k.fn.init(1)]


// 添加到指定元素外部的前面
$(A).before(B);   // 把B放到A的前面
$(A).insertBefore(B);   // 把A放到B的前面


//移除和清空元素
remove();   // 从DOM中删除所有匹配的元素。
empty();   // 删除匹配的元素集合中所有的子节点


// 替换
replaceWith();
replaceAll();


// 克隆: clone方法不加参数true，表示克隆标签但不克隆标签带的事件,加参数true，克隆标签并且克隆标签带的事件
clone();

4. 事件

4.1 常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

4.2 事件绑定

// .on()绑定的事件处理程序
.on( events [, selector ],function(){})

4.3 移除事件

// .off() 方法移除用
.off( events [, selector ][,function(){}])

4.4 阻止后续事件执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止后续事件</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <style>
        .hid{
            display: none;
        }
    </style>
</head>
<body>
<form>
    <input type="text" value="" id ="id"><span class="hid">不能为空</span>
    <br>
    <input type="submit" value="拜拜！" id="sub">
</form>
<script>
    $("#sub").on("click",function (e) {
           var data= $("#id").val();
           if(!data.trim()){
               $(".hid").removeClass("hid");
               //第一种阻止事件的方法
               // return false   // 常见阻止表单提交等
               //第二种阻止事件的方法
               e.preventDefault()
           }
    })
</script>
</body>
</html>

注意 ：

像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。
使用事件委托的方式绑定hover事件处理函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

</head>
<body>
<div style=" 200px;height: 200px;background-color: red">来玩啊</div>

<script>
    $("div").hover(
        function () {
            alert("很开心为你服务");
        },
        function () {
            alert("大爷，慢走，下次再来")
        }
    )
</script>
</body>
</html>

4.5 阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <style>
        #a{
             500px;
            height: 500px;
            background-color: red;
        }
         #b{
             400px;
            height: 400px;
            background-color: green;
        }
        #c{
             200px;
            height: 200px;
            background-color: black;
        }
    </style>
    <script>
        $(document).ready(function(){

            $("#a").on("click",function () {
                alert("第一")
            });
            $("#b").on("click",function (e) {
                alert("第er")
                   e.stopPropagation()
            });
            $("#c").on("click",function (e) {
                alert("第san");

            });

        })
        // 简写
        //  $(function(){
        //     $("#a").on("click",function () {
        //         alert("第一")
        //     });
        //     $("#b").on("click",function (e) {
        //         alert("第二")
        //            e.stopPropagation()
        //     });
        //     $("#c").on("click",function (e) {
        //         alert("第三");
        //     });
        // })
</script>
</head>
<body>
<div id="a">
    <div id="b">
        <div id="c"></div>
    </div>
</div>
</body>
</html>

4.6 页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度

$(document).ready(function(){
// JS代码
})

// 简写：
$(function(){
// JS代码
})

4.7 事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

</head>
<body>
<button>点我</button>
<script>
    $("body").on("click","button",function () {
        console.log(123)
    })

</script>
</body>
</html>

5. 动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])