111

一、jQuery简介

1. 特点


    1. 兼容所有浏览器
    
    2. 丰富的DOM选择器
    
    3. 链式表达式
    
    4. Ajax操作支持



2. 语法

    1. jQuery语法
    
    $(选择器).action(操作)
    
    2. 与JS对比

    JS：

        var pEle = document.getElementsByTagName('p')[0]
        
        pEle.style.color = 'red'
        
    jQuery：

        $('p').css('color', 'green')

二、选择器与筛选器

1. 基本选择器

    1. 标签选择器
    
    $('span')
    
    2. 类选择器
    
    $('.c1')
    
    3. id选择器
    
    $('#id')
    
    4. 组合选择器
    
    $('#d1, span');
    
    5. 配合使用
    
    $('div.c1')    // 找到有c1 class类的div标签
    

2. 层级选择器

    1. 后代选择器
    
    $('x y');
    
    2. 儿子选择器
    
    
    $('x > y')
    
    3. 毗邻选择器
    
    $('x + y')
    
    4. 兄弟选择器
    
    $('x ~ y')
    

3. 属性选择器

    1. 找到含有‘username’属性的标签
    
    $('[username]')
    
    2. 找到含有username属性，且值为‘byx’的标签
    
    $('[username="byx"]')
    
    3. 找到在span标签下，username=byx的标签
    
    $('span[username="byx"]')
    
    
4. 基本筛选器

    1. 找第一个(:first)
    
    $('ul li:first')
    
    2. 找最后一个（:last)
    
    $('ul li:last')
    
    3. 匹配索引等于index的那个元素
    
    $('ul li:eq(2)')
    
    4. 匹配索引为偶数的元素，从0开始计数
    
    $('ul li:even')
    
    5. 匹配索引为奇数的元素，从0开始计数
    
    $('ul li:odd')
    
    6. 匹配所有大于给定索引值的元素
    
    $('ul li:gt(3)')
    
    7. 匹配所有小于给定索引值的元素
    
    $('ul li:lt(3)')
    
    8. 移除所有满足not条件的标签
    
    $('div span:not('.c1')')
    
    9. 选取所有包含一个或多个标签在内的标签（从后代元素中找）

    $('div:has('.c1')')
    

5. 表单筛选器

    1. 找到所有的checkbox
    
    $(":checkbox")
    
    2. 找到可用的input标签
    
    <form>
      <input name="email" disabled="disabled" />
      <input name="id" />
    </form>
    
    $("input:enabled")  // 找到可用的input标签
    
    
    3. 找到被选中的option
    
    <select id="s1">
      <option value="beijing">北京市</option>
      <option value="shanghai">上海市</option>
      <option selected value="guangzhou">广州市</option>
      <option value="shenzhen">深圳市</option>
    </select>
    
    $(":selected")  // 找到所有被选中的option
    
    
    4. 注意，在使用checked查找时，会将selected找到，这是一个bug。
    

6. 筛选器方法

    1. 下一个元素
    
    $spanEle.next()
    $spanEle.nextAll()
    $spanEle.nextUntil('#d2')
    
    
    2. 上一个元素
    
    $spanEle.prev()
    $spanEle.prevAll()
    $spanEle.prevUntil('#d2')
    
    
    3. 父亲元素
    
    $("#id").parent()
    $("#id").parent().parent()
    $("#id").parents()  // 查找当前元素的所有的父辈元素
    $("#id").parentsUntil('html') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
    
    
    4. 儿子和兄弟元素
    
    $("#id").children();// 儿子们
    $("#id").siblings();// 兄弟们
    
    
    5. 查找div内部的span
    
    $('div').find('span')
    
    6. 补充

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

三、jQuery操作标签

1. CSS样式操作

    1. 添加指定的CSS类名
    
    $('div').addclass（'bg_red'）
    
    2. 移除指定的CSS类名
    
    $('div').removeClass（'bg_red'）
    
    3. 判断是否有指定类名
    
    $('div').hasClass（'bg_red'）
    
    4. 切换CSS类名，如果有就移除，没有就添加
    
    $('div').toggleClass（'bg_red'）
    
    5. 设置CSS属性
    
    $('p').css('color', 'red')
    
P.S:

    JS
        .style.color
        
    jQuery
        .css('color', 'red')
            
P.P.S

    搭骨架用HTML，调样式用CSS，加动态效果用JS，让三种语言各司其职。
    

2. 位置操作

    1. 获取匹配元素在当前窗口的相对偏移或设置元素位置
    
    offset（）
    
    2. 获取匹配元素相对父元素的偏移
    
    position（）
    
    3. 获取匹配元素相对滚动条顶部的偏移，括号内可以传数字进行移动
    
    $(window).scrollTop（）
    
    4. 获取匹配元素相对滚动条左侧的偏移，括号内可以传数字进行移动
    
    $(window).scrollLeft（）
    

3. 尺寸

    1. 文本高
    
    $('p').height（）
    
    2. 文本宽
    
    $('p').width（）
    
    3. 文本+padding高
    
    $('p').innerHeight（）
    
    4. 文本+padding宽
    
    $('p').innerWidth（）
    
    5. 文本+padding+边框高
    
    $('p').outerHeight
    
    6. 文本+padding+边框宽

    $('p').outerweight
    

4. 文本操作

    1. 获取标签内部文本值，可以在括号内传参数设置值。
    
    $('div').text()
    
    2. 获取标签内部的HTML代码，可以在括号内传参数设置值。
    
    $('div').html()
    
    3. 获取标签内用户输入的值，可以在括号内加参数设置值。

    $('div').val()


P.S

    JS
        
        innerText()
        innerHtml()
        value
    

5. 属性操作

    1. 用于id等或自定义属性：
    
        1. 查找第一个匹配到的属性名称
        
        $('p').attr('id')
        
        2. 为匹配到的属性设置一个属性值
        
        $('p').attr('id', 'byx')
        
        3. 为匹配到的属性设置多个值
        
        $('p').attr({'id': 'byx', 'password': '123'})
        
        4. 移除属性
        
        $('p').removeAttr('id')
        
    
    2. 用于checkbox和radio，可以动态识别选择。
    
        1. 获取属性，识别标签是否被选中，返回布尔值。
        
        $('input').first().prop('checked')
        
        2. 修改属性
        
        $('input').first().prop('checked'，false)
        
        3. 移除属性
    
        $('input').first().removeProp('id')
    
    
6. 文档处理

    1. 添加到指定元素内部的后面
    
    $(A).append(B)// 把B追加到A
    $(A).appendTo(B)// 把A追加到B
    
    
    2. 添加到指定元素内部的前面
    
    $(A).prepend(B)// 把B前置到A
    $(A).prependTo(B)// 把A前置到B
    
    
    3. 添加到指定元素外部的后面
    
    $(A).after(B)// 把B放到A的后面
    $(A).insertAfter(B)// 把A放到B的后面
    
    
    4. 添加到指定元素外部的前面
    
    $(A).before(B)// 把B放到A的前面
    $(A).insertBefore(B)// 把A放到B的前面
    
    
    5. 移除和清空元素
    
    remove()// 从DOM中删除所有匹配的元素。
    empty()// 删除匹配的元素集合中所有的子节点。
    
    
    6. 替换
    
    replaceWith()
    replaceAll()
    
    
    7. 克隆

    clone()// 参数
    
    默认不克隆事件，除非在括号中添加True。
    

四、jQuery事件

1. 常用事件

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


2. jQuery绑定事件的语法

    1. 方式一
    
    $(选择器).事件名(
        function() {
            // 事件代码
    })
    
    
    2. 方式二

    $(选择器).on('事件名'，function() {
            // 事件代码
    })
    

P.S

    JS
    
    XXXEle.on+事件名 = function() {
            // 事件代码
    ｝
    

3. 移除事件

$(选择器).off('事件名'，function() {
        // 事件代码
})


4. 阻止后续事件

    1. 方式一
        
        事件代码后加上return false
        
    2. 方式二
    
        事件代码后加上e.preventDefault();
        

5. 事件冒泡

    1. 定义
    
    子标签事件触发后，会继续触发父标签事件
    
    2. 控制事件冒泡
    
    e.stopPropagation

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>阻止事件冒泡</title>
    </head>
    <body>
    <div>
        <p>
            <span>点我</span>
        </p>
    </div>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $("span").click(function (e) {
            alert("span");
            e.stopPropagation();
        });
    
        $("p").click(function () {
            alert("p");
        });
        $("div").click(function () {
            alert("div");
        })
    </script>
    </body>
    </html>
    
    
6. 事件委托

    1. 定义
    
    将特定的事件，委托给标签内部指定的元素（标签既可以是提前写的，也可以是后期动态创建的）
    
    2. 示例
    
    只要是body内的button按钮，都具有alert事件

    $('body').on('click', 'button', function() {
        alert(123)
    })



7. 示例

    1. hover事件示例
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p>苍茫的天涯是我的哎，绵绵的青山脚下一片海！</p>
    
    <script src="jQuery-3.3.1.js">
    </script>
    <script>
        $('p').hover(
            function () {
                alert('来啦，老弟')
            },
            function () {
                alert('慢走哦～')
            }
        )
    </script>
    </body>
    </html>
    
    
    2. 实时监听input输入值变化示例
    
    <!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>实时监听input输入值变化</title>
    </head>
    <body>
    <input type="text" id="i1">
    
    <script src="jquery-3.2.1.min.js"></script>
    <script>
      /*
      * oninput是HTML5的标准事件
      * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
      * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
      * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
      * 使用jQuery库的话直接使用on同时绑定这两个事件即可。
      * */
      $("#i1").on("input propertychange", function () {
        alert($(this).val());
      })
    </script>
    </body>
    </html>

五、jQuery动画效果

1. 展示与隐藏

    1. 5秒展开图片到原本大小
    
    $('div').show(5000)
    
    2. 5秒缩小图片
    
    $('div').hide(5000)


2. 滑动

    1. 3秒向上卷起图片
    
    $('div').slideUp(3000)
    
    2. 3秒向下展开图片
    
    $('div').slideDown(3000)
    


3. 淡入淡出
    
    1. 4秒图片淡出
    
    $('div').fadeout(4000)
    
    2. 4秒图片淡入
    
    $('div').fadein(4000)
    
    3. 4秒图片淡出到透明度为0.4
    
    $('div').fadeto(4000, 0.4)
    

4. 示例：点赞效果

    <!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>点赞动画示例</title>
      <style>
        div {
          position: relative;
          display: inline-block;
        }
        div>i {
          display: inline-block;
          color: red;
          position: absolute;
          right: -16px;
          top: -5px;
          opacity: 1;
        }
      </style>
    </head>
    <body>
    
    <div id="d1">点赞</div>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
      $("#d1").on("click", function () {
        var newI = document.createElement("i");
        newI.innerText = "+1";
        $(this).append(newI);
        $(this).children("i").animate({
          opacity: 0
        }, 1000)
      })
    </script>
    </body>
    </html>

六、jQuery补充知识点

1. each

    1. 作用
    
        遍历一个jQuery对象，为每个匹配元素执行一个函数，常用来代替for循环。
    
    2. 用法一
    
    创建3个p标签，内部1到3
    
    $.each($('p'), function(index, obj) {
            console.log(index, obj, this)
    })
    
    输出
    
    0    <p>1</p>    <p>1</p>
    1    <p>2</p>    <p>2</p>
    2    <p>3</p>    <p>3</p>
    
    
    3. 用法二
    
    $('p').each(function(index, obj) {
        console.log(index, obj)
    })
            
    输出
            
    0    <p>1</p>    <p>1</p>
    1    <p>2</p>    <p>2</p>
    2    <p>3</p>    <p>3</p>
    
    
    4. 终止循环
    
    return false;


2. .data()

    1. 作用
    
    在标签存储信息，并无法在前端查看到。取值时，键不存在也不会报错
    
    2. 存值
    
    $('p').data('username', 'byx')
    
    3. 取值
    
    $('p').first().data('username')
    
    4. 删除值
    
    $('p').removeData('username')

来源：https://www.cnblogs.com/binyuanxiang/p/11968541.html