还是得学一下的 jQuery

Mochiler
151 阅读11分钟

1. jQuery概述

1.1 javaScript库

即library，是一个封装好的特定的集合（方法函数）。简单理解就是一个JS文件，里面对我们的原生JS进行了封装。我们可以通过调用它而快速高效的使用一些功能。

比如JQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

1.2 jQuery概念

jQUery是一个快速、简洁的JavaScript库，提倡写得少、做的多。里面封装了JavaScript常用的功能代码，优化了DOM操作、时间处理、动画设计和Ajax交互

学习jQuery本质：学习调用这些函数（方法）。

JQuery出现的目的就是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

  • 优点 ；
  1. 轻量级。核心文件几十kb，不影响页面的加载速度
  2. 跨浏览器兼容
  3. 链式编程、隐式迭代
  4. 对事件、样式、动画支持，大大简化了DOM操作
  5. 支持插件扩展开发，有丰富的第三方插件，例如：属性菜单、日期控件、轮播图等
  6. 免费、开源

2. jQuery的基本使用

2.1 jQuery的下载

官网：jquery.com/ jQuery版本有很多，分为1.x 2.x 3.x
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本

  • 大版本分类：
    1.x版本：能够兼容IE678浏览器
    2.x版本：不能兼容IE678浏览器
    3.x版本：不能兼容IE678浏览器，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

  • 关于压缩版和未压缩版：

    • jquery-x.x.x.min.js:压缩版本(production)，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。

    • jquery-x.x.x.js:未压缩版本(development)，适用于学习与开发环境，源码清晰，易阅读。

选择要使用的版本点击进去，复制页面中的代码，粘贴到空的JS文件里。并根据选择的版本命名。

2.2 jQuery的基本使用

三个步骤：

  • 引入JQuery文件
<script src="jquery-1.12.4.js"></script>
  • 入口函数
  1. 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成。
  2. 相当于原生js中的DOMContentLoaded
  3. 不同于原生JS中的load事件，原生JS中的load事件是等页面文档、外部的js文件、css文件、图片加载完成才执行的内部代码。
//第一种写法
$(document).ready(function() {
	
});

//第二种写法（提倡写法）
$(function() {
	
});
  • 功能实现

2.3 jQuery的顶级对象

  1. $是JQuery的别称，在代码中可以用JQuery代替$，但是通常都只写$。
  2. $是JQuery的顶级对象，相当于原生JS中的window。把元素利用$包装成jQuery对象就可以调用jQuery的方法

2.4 jQuery对象和DOM对象

  1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
var myDiv = document.querySelector('div');//myDiv就是DOM对象
  1. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。本质：通过$把DOM元素进行了包装后产生的对象（伪数组形式存储）
$('div');//$('div')就是一个JQuery对象
  1. jQuery对象只能使用JQuery的方法，DOM对象只能使用原生的JavaScript属性和方法
  2. DOM对象和jQuery对象是可以相互转换的

因为原生JS比jQuery大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法，需要把JQuery对象转换为DOM对象才能使用

  • DOM对象转换为JQuery对象:
 $('video') ;//直接获取视频,得到JQuery对象
 
 var myDiv = document.querySelector('div');//myDiv已经获取为DOM对象   
 //$(myDiv).play() //此时使用转化为JQuery对象，但是jQuery里面没有play方法
  • JQuery对象转换为DOM对象

DOM对象播放视频：

var myDiv = document.querySelector('div');//myDiv已经获取为DOM对象   
myDiv.play();//谷歌里禁用了自动播放，需要在HTML里加上`muted`才可以播放

<video src="" muted></video> <!--谷歌里禁用了自动播放，需要在HTML里加上`muted`才可以播放-->

JQuery对象转换为DOM对象的两种方式

$('div')[index];//index是索引号
$(myDiv)[0].play();//推荐使用

$('div').get(index) //index是索引号
$(myDiv).get(0).play()

3. JQuery 常用的API

3.1 jQuery 选择器

原生JS获取元素的方式很多，很杂，且兼容性不一致，因此JQuery给我们做了封装，使获取元素统一标准

$("选择器")//里面的选择器直接写CSS选择器，但是要加引号

3.1.1 基本选择器

名称用法描述
全选选择器$('*')匹配所有元素
ID选择器$('#id')获取指定ID的元素
类选择器$('class')获取同一类class的元素
标签选择器$('div')获取同一类标签的所有元素
并集选择器$('div,p,li')使用逗号分隔，获取多个元素，只要符合条件之一即可
交集选择器$('div.redClass')获取class为redClass的div元素
  • 用法和CSS一致。

3.1.2 层级选择器

名称用法描述
子代选择器$('ul>li')使用>号，获取儿子层元素
后代选择器$('ul li')使用空格，代表后代选择器，获取 ul下的所有li元素，包括孙子等
  • 用法和CSS一致。

3.1.3 隐式迭代（重要）

遍历内部 DOM元素（伪数组形式存储）的过程就叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们的调用。

JQuery设置样式

$('div).css('属性','值');

$('div').css('background','pink');//给所有div设置背景颜色为粉色

3.1.4 过滤选择器

名称用法描述
:eq(index)$('li:eq(2)').css('color','red'))获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd$('li:odd').css('color','red')获取到的li元素中，选择索引号为奇数的元素
:even$('li:even').css('color','red')获取到的li元素中，选择索引号为偶数的元素

3.1.5 筛选选择器（方法）

名称用法描述
:first$('li:first')获取第一个li元素
:last$('li:last')获取最后一个li元素
:eq(index)$('li:eq(2)')获取到的li元素中，选择索引号为2的元素，索引号index从0开始
eq(index)$('li').eq(2)相当于$('li:eq(2)')，index从0开始（提倡使用）
:odd$('li:odd')获取到的li元素中，选择索引号为奇数的元素
:even$('li:even')获取到的li元素中，选择索引号为偶数的元素
children(selector)$('ul').children('li')相当于$('ul>li'),子类选择器
find(selector)$('ul').find('li')相当于$('ul li'),后代选择器，可以选里面所有的孩子
sibling(selector)$('#first').sibling('li')查找兄弟节点，不包括自己本身
parent()$('#first').parent()查找亲父亲
next()$('li').next()找下一个兄弟
nextAll()([expr])$('.first').nextAll()查找当前元素之后的所有同辈元素
prev()$('li').prev()找上一个兄弟
prevAll()$('.first').prevAll()查找当前元素之前的所有元素
hasClass(class)$('div').hasClass('protected')检查当前的元素是否含有某个特定 的值，如果有，返回true
        $(function(){
            $(".nav>li").mouseover(function(){
                $(this).children('ul').show();//this表示当前元素 show就是显示元素
            });
            $('.nav>li').mouseout(function(){
                $(this).children('ul').hide();//this表示当前元素 hide隐藏元素
            });
        })

3.1.6 排他思想

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <script>
        $(function(){
            // 1.隐式迭代 给所有按钮都绑定了点击事件
            $('button').click(function(){
                // 2.当前元素变化背景颜色
                $(this).css('background','pink');
                // 3.其余的兄弟去掉背景颜色
                $(this).siblings('button').css('background','')
            })
        })
    </script>
</body>

3.1.7 链式编程

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <script>
        $(function () {
            // 隐式迭代 给所有的按钮都绑定了点击事件
            $('button').click(function () {
                // 让当前元素变为红色
                // $(this).css('color','red');
                // 让其余的兄弟、姐妹元素不变色
                // $(this).siblings().css('color','');
                // 链式编程 节省代码行
                $(this).css('color', 'red').siblings().css('color', '')
            })
        })
    </script>
</body>

3.2 JQuery样式操作

3.2.1 操作css方法

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。

  1. 参数只写属性名，则是返回属性值
$('div').css('width');//200px
  1. 参数是属性名、属性值，用逗号分隔，是设置一组样式，属性必须加引号。值如果是数字可以不用跟单位和引号。
$(this).css('color','red');
  1. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。如果是符合属性一定要采取驼峰命名法，如果不是数字，则一定要加引号
$(this).css({
    'color': 'white',
    'font-size': 20,  
    backgroundColor: 'red',
    //如果是符合属性一定要采取驼峰命名法，如果不是数字，则一定要加引号
})

3.2.2 设置类样式方法

作用等同于以前的classList，可以操作样式，注意操作类里面的参数不要加点。

  1. 添加类
$('div').addClass('current'); //追加，不影响原先类名。
  1. 删除类
$('div').removeClass('current');
  1. 切换类
$('div').toggleClass('current');
  1. 匹配一个类
$('div').hasClass('current');//判断是否包含某个类 如果 包含返回true 否则返回false*/

3.2.3 类操作与className区别

原生JS中的className会覆盖元素原先的类名

jQuery里面类操作只是对指定类进行操作，不影响原先类名

3.3 JQuery效果

指动画效果。

  • 下面的动画效果以一个简易下拉菜单为例。
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            font-size: 16px;
        }

        .nav {
            margin: 100px;
            text-align: center;
        }

        .nav>li {
            float: left;
            width: 100px;
            height: 40px;
            /* border :1px solid #333; */
        }

        .nav li a {
            display: block;
            color: black;
            line-height: 40px;
        }

        .nav li a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            border-left: 1px solid #f7a145;
            border-right: 1px solid #f7a145;
        }

        .nav ul li {
            border-bottom: 1px solid #f7a145;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
    </ul>
</body>

3.3.1 显示隐藏效果

语法规范

show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])
  • 参数都可以省略，无动画直接显示
  • speed：三种预定速度之一的字符串（'slow','normal','fast'）或表示动画时长的毫秒数值（如：1000）
  • easing：（Optional）用来指定切换效果，默认是'swing'，可用参数'linear'
  • fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <!-- 设置了div的样式 -->
    <div></div>
    <script>
        $(function(){
            $('button').eq(1).click(function(){
                $('div').hide('fast',function(){
                    // alert('hello')
                })
            });

            $('button').eq(0).click(function(){
                $('div').show('fast')
            });

            $('button').eq(2).click(function(){
                $('div').toggle('fast')
            });
            // 一般情况下，我们都不加参数，直接显示隐藏就可以了
        })
    </script>
</body>

  • 下拉菜单的显示隐藏
    <script>
        $(function(){
            $(".nav>li").mouseover(function(){
                $(this).children('ul').show();//this表示当前元素 show就是显示元素
            });
            $('.nav>li').mouseout(function(){
                $(this).children('ul').hide();//this表示当前元素 hide隐藏元素
            });
        })
    </script>

3.3.2 滑动效果

语法规范

slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])

  • 参数都可以省略，无动画直接显示

  • speed：三种预定速度之一的字符串（'slow','normal','fast'）或表示动画时长的毫秒数值（如：1000）

  • easing：（Optional）用来指定切换效果，默认是'swing'，可用参数'linear'

  • fn：回调函数，在动画完成时执行的函数，每个元素执行一次

  • 下拉菜单的滑动

    <script>
        $(function(){
            $(".nav>li").mouseover(function(){
                $(this).children('ul').slideDown(500);
            });
            $('.nav>li').mouseout(function(){
                $(this).children('ul').slideUp(500);/
            });
        })
    </script>

3.3.3 事件切换

hover([over,]out);

  • over: 鼠标移到元素上要触发的函数（相当于mouseenter）

  • out: 鼠标移出元素要触发的函数（相当于mouseleave）

  • 下拉菜单的滑动事件复合写法

    <script>
        $(function () {
            // 事件切换（鼠标经过和离开）的复合写法
            $(".nav>li").hover(function(){
                $(this).children('ul').slideDown(100);//this表示当前元素 show就是显示元素
            },function(){
                $(this).children('ul').slideUp(100);//this表示当前元素 hide隐藏元素
            });
        })
    </script>
  • 下拉菜单的滑动事件切换
    <script>
        $(function () {
            // 事件切换（鼠标经过和离开）的复合写法
            $(".nav>li").hover(function (){
                $(this).children('ul').slideToggle();
            });
        })
    </script>

3.3.4 动画队列及其停止排队的方法

  1. 动画或效果队列 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
  2. 停止排队
stop()
  • stop()方法用于停止动画或效果
  • 注意：stop()写到动画或者效果的前面，相当于停止上一次的动画。
    <script>
        $(function () {
            // 事件切换（鼠标经过和离开）的复合写法
            $(".nav>li").hover(function (){
                $(this).children('ul').stop().slideToggle();
                // 先停止上一次动画，再切换
                // stop必须写到动画的前面
            });
        })
    </script>

3.3.5 淡入淡出效果

fadeIn([speed,[easing],[fn]])
fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])
  1. 渐进方式调整到指定不透明度
fadeTo([speed,opacity,[easing],[fn]])
  • opacity 透明度必须写，取值0~1之间。
  • speed 三种预定速度之一的字符串（'slow','normal','fast'）或表示动画时长的毫秒数值（如：1000）必须写
  • easing：（Optional）用来指定切换效果，默认是'swing'，可用参数'linear'
  • fn：回调函数，在动画完成时执行的函数，每个元素执行一次

3.3.6 自定义动画 animate

animate(params,[speed],[easing],[fn])
  • params: 想要修改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法。其余参数可省略。
  • speed：三种预定速度之一的字符串（'slow','normal','fast'）或表示动画时长的毫秒数值（如：1000）
  • easing：（Optional）用来指定切换效果，默认是'swing'，可用参数'linear'
  • fn：回调函数，在动画完成时执行的函数，每个元素执行一次
    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function () {
            $('button').click(function () {
                $('div').animate({
                    left: 500,  //一定要有定位
                    top:300,
                    opacity:.4,
                    width:50,
                    height:50
                },500)
            })
        })
    </script>
</body>

手风琴案例

鼠标经过li时:

  • 小li改变宽度，同时里面的小图片淡出，大图片淡入
  • 其余兄弟宽度变为小图片宽度，小图片淡入，大图片淡出

3.4 JQuery属性操作

3.4.1 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>里面的type

  1. 获取元素固有属性
element.prop('属性')
  1. 设置固有属性语法
element.prop('属性','属性值')


<body>
    <a href="http://baidu.com" title="我很棒！">跳转到百度</a>
    <input type="checkbox" name="" id="" checked>
    <script>
        $(function(){
            // 1. element.prop('属性名'); 获取元素固有属性
            console.log($('a').prop('href'));
            //2.设置固有属性
            $('a').prop('title','好好学习的人都超级棒的！');
            
            $('input').change(function(){
                console.log($(this).prop('checked'));//true
            })
    </script>
</body>

3.4.2 设置或获取元素自定义属性值 attr()

用户给自己添加属性，我们称之为自定义属性。比如给div添加index='1'。

  1. 获取属性语法
element.attr('属性') //类似原生的getAttribute()
  1. 设置属性语法
element.attr('属性'，'属性值');

该方法也可以获取H5自定义属性

<body>
    <div index="1" data-indexs="3">我是自定义属性的div</div>
    <script>
        $(function(){
            // console.log($('div').prop('index'));//undefine 这样不能获取自定义属性
            // 1. 获取元素自定义属性 attr()
            console.log($('div').attr('index'));
            // 2. 修改自定义属性
           $('div').attr('index','4');
           
            //    获取H5自定义属性
            console.log($('div').attr('data-index'));
            //    修改H5自定义属性
            $('div').attr('data-index', '8');
        })
    </script>
</body>

3.4.3 数据缓存 data()

data()方法可以在指定元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放过的数据都将被移除。（这个里面的数据是存放在元素的缓存里，写入以后也并不会在DOM里看到，但是可以获取）

  1. 附加数据语法
data('name','value')//向被选元素附加数据
  1. 获取数据语法
data('name') //向被选元素获取数据

同时还可以读取HTML5自定义属性data-index，得到的是数字型

<body>
    <div index="1" data-index="3">我是自定义属性的div</div>
    <span>123</span>
    <script>
        $(function () {
            //    H5自定义属性
            console.log($('div').attr('data-index'));//3 字符串型
            //    修改H5自定义属性
            $('div').attr('data-index', '8');//DOM里面变成8

            // 3.数据缓存data（） 这个里面的数据是存放在元素的内存里
            $('span').data('uname','andy');
            console.log($('span').data('uname'));//andy
            // //不用写data- 返回的是数字型
            console.log($('div').data('index'));//6
        })
    </script>
</body>

3.5 JQuery 内容文本值

主要针对元素的内容还有表单的值操作

  1. 普通元素内容html()(相当于原生innerHTML)
html();//获取元素内容

html('内容');//设置元素内容
  1. 普通元素文本内容 text()(相当于原生innerText)
text();//获取元素内容

text('内容');//设置元素内容
  1. 表单的值val()(相当于原生value)

...

<body>
    <div>
        <span>我是内容</span>
        <input type="text" value="请输入内容">
    </div>
    <script>
        // 1.获取 设置元素内容 html()
        console.log($('div').html());
        $('div').html('123');
        // 2. 获取 设置元素文本内容 text()
        console.log($('div').text());
        $('div').text('123');
        // 3.获取设置表单值val()
        console.log($('input').val());
        $('input').val('123');
    </script>
</body>

3.6 jQuery 元素操作

主要是遍历、创建、添加、删除元素操作

3.6.1 遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同的操作，就需要用到遍历。

语法1：

$('div').each(function(index.domEle)(xxx;))
  • each()方法遍历匹配的每一个元素，主要用DOM处理
  • 里面的回调函数有2个参数：index是每个元素的索引号；demEle是每个DOM元素对象，不是jQuery对象
  • 想要使用jQuery方法，需要给这个dom元素转换为jQuery对象 $(doEle)
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        // 1.each()方法遍历元素
        var sum = 0;
        var arr = ['red', 'green', 'blue'];
        $('div').each(function (i, domEle) {
            // 索引号，可以自己指定索引号名称
            console.log(i);
            // domEle是dom元素对象
            console.log(domEle);
            // domEle.css('color');dom对象没有css方法
            $(domEle).css('color', arr[i]);
            sum += parseInt($(domEle).text())
        })
    </script>
</body>

语法2：

$.each(obj,function(index,ele){
    //可以遍历任何对象
})
  • $.each()方法** **。主要用于处理数据。比如数组，对象
  • 里面的函数有两个参数：index是每个元素的索引号，ele遍历内容
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var arr = ['red', 'green', 'blue'];
        // 2.$each()方法遍历元素 主要用遍历数据，处理数据
        $.each($('div'), function (i, ele) {
            console.log(i);
            console.log(ele);
        })

        $.each(arr,function(i,ele){
            console.log(i);
            console.log(ele);
        })

        $.each({
            name: 'andy',
            age:18,
        },function(i,ele){
            console.log(i);//属性名
            console.log(ele);//属性值
        })
    </script>
</body>

3.6.2 创建元素、添加元素、删除元素

创建元素：

$('<li></li>');

添加元素：

  1. 内部添加
element.append('内容');

把内容放入匹配元素内部最后面，类似原生appendChild


element.prepend('内容')

把内容放入匹配元素内部最前面


  1. 外部添加
element.after('内容');

把内容放入目标元素后面


element.before('内容');

把内容放入目标元素前面

  • 内部添加元素，生成之后，他们是父子关系
  • 外部添加元素，生成之后，他们是兄弟关系

删除元素：

element.remove('内容');//删除匹配元素本身
//下面方法的结果一样
element.empty();//删除匹配的元素集合中所有的子节点
element.html('');//清空匹配的元素内容

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">原先的div</div>

    <script>
        $(function(){
            //1.创建元素
            var li=$('<li>新的li</li>');
            // 2. 添加元素

            // 2.1 内部添加
            $('ul').append(li);//放到匹配元素内容的最后面
            // $('ul').prepend(li);//放到内容的最前面

            // 2.2 外部添加
            var div=$('<div>新的div</div>');
            // $('.test').after(div);//放到目标元素后面
            $('.test').before(div);

            // 3.删除元素
            // $('ul').remove();//删除匹配的元素
            // $('ul').empty();//删除匹配的元素里面的子节点
            $('ul').empty('');//删除匹配的元素里面的子节点
        })
    </script>
</body>

3.7 jQuery尺寸、位置操作

3.7.1 jQuery尺寸

语法用法
width()/height()取得匹配元素宽度和高度值，只算width/height
innerWidth()/innerHeight()取得匹配元素宽度和高度值 包含padding
outerWidth()/outerHeight()取得匹配元素宽度和高度值 包含padding、border
outerWidth(true)/outerHeight(true)取得匹配元素宽度和高度值 包含padding、border、margin
  • 以上参数为空，则是获取相应值，返回的是数字型
  • 如果参数为数字，则是修改相应值
  • 参数可以不用写单位

3.7.2 jQuery 位置

位置主要有三个: offset(), position(), scrollTop()/scrollLeft()

  1. offset()
$('.son').offset()
  • offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
  • 该方法有两个属性left，top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离
  • 可以设置元素的偏移：offset({top:10,left:30});
  1. position()
$('.son').position()
  • position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
  • 这个方法只能获取不能设置偏移
  1. scrollTop/scrollLeft()设置或获取元素被卷去的头部和左侧
  • scrollTop()方法设置或返回元素被卷去的头部

4 jQuery 事件

4.1 jQuery 事件注册

单个事件注册

语法：

element.事件(function(){})//原生js写法

$('div').click(function(){ 事件处理程序 })

其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、热size、scroll等

4.2 jQuery事件处理

4.2.1 事件处理on() 绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数 语法：

element.on(events,[selector],fn)
  • events: 一个或多个用空格分隔的事件类型
  • selector：元素的子元素选择器
  • fn：回调函数，即绑定在元素身上的侦听函数
$('div').on({
    mouseenter:function() {
        $(this).css('background','pink');
    },
    click:function() {
        $(this).css('background','blue');
    },
    mouseleave:function(){
        $(this).css('background','green')
    }
})
  1. 可以绑定多个事件，多个处理事件处理程序
$('div').on('mouseenter mouseleave',function(){
    $(this).toggleClass('current');
})
  1. 可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把元素委派给父亲。
$('ul').on('click','li',function(){
    alert('123')
})

在这之前有bind()、live()、delegate()等方法来处理事件绑定或者事件委派，最新版本用on替代它们

  1. 动态创建的元素，click()没有办法绑定事件，on()可以给未来动态生成的元素绑定事件

4.2.2 事件处理off() 解绑事件

off()方法可以通过移除on()方法添加的事件处理程序

$('div').off();// 这个解除了div身上的所有事件
$('div').off('click');// 这个解除了div身上的所有点击事件
$('div').off('click','li')

如果有的事件只想触发一次，可以使用one()来绑定事件。

4.2.3 自动触发事件 trigger()

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

element.click()

element.trigger('type')

element.triggerHandler('type');//不会触发元素的默认行为

<body>
    <div></div>
    <input type="text">
    <script>
        $(function(){
            $('div').on('click',function(){
                alert(11);
            });

            // 自动触发事件
            // 1. 元素.事件()
            // $('div').click();
            // 2.元素.trigger('事件');
            // $('div').trigger('click');
            $('input').trigger('focus');//有光标
            // 3.元素.triggerHandler('事件');
            $('div').triggerHandler('click')
            $('input').on('focus',function(){
                $(this).val('hello~')
            })
            // $('input').triggerHandler('focus');//没有光标
        })
    </script>
</body>

4.3 jQuery 事件对象

事件被触发就会有事件对象的产生

elemen.on(events,[selector],function(event){})
  • 阻止默认行为：event.preventDefault() 或者 return false
  • 阻止冒泡：event.stopPropagation()
<body>
    <div></div>
    <input type="text">
    <script>
        $(function(){
            $(document).on('click',function(){
                console.log('document');
            })
            $('div').on('click',function(event){
                console.log('div');
                event.stopPropagation();//阻止冒泡
            });
        })
    </script>
</body>

5 jQuery 的其它方法

5.1 jQuery拷贝对象

如果想要把某个对象拷贝（合并）给另外一个对象使用，可以使用$.extend()方法

$.extend([deep],target,object1,[objectN])
  • deep: 如果设为true为深拷贝，默认false浅拷贝
  • target：要拷贝的目标对象
  • object1：待拷贝到第一个对象的对象
  • objectN：待拷贝到第N个对象的对象
  • 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响拷贝对象
  • 深拷贝就是前面加true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象。
<body>
    <script>
        var targetObj = {
            id: 0,
            msg: {
                sex: '男'
            }
        }

        var obj = {
            id: 1,
            name: 'name',
            msg: {
                age: 18
            }
        }

        // $.extend(targetObj,obj);
        // console.log(targetObj);//obj会覆盖targetObj原来的数据
        // // 1. 浅拷贝是把原来对象中的复杂数据类型的地址拷贝给目标对象
        // targetObj.msg.age=20;
        // console.log(targetObj)
        // console.log(obj);
        // 2. 深拷贝把里面的数据完全复制一份给目标对象，里面如果有不冲突的属性，会合并到一起。
        $.extend(true, targetObj, obj);
        console.log(targetObj);//obj会覆盖targetObj原来的数据
        targetObj.msg.age = 20;
        console.log(targetObj)
        console.log(obj);//对原来的数据没有影响
    </script>
</body>

5.2 多库共存

jQuery使用$作为表示符，随着jQuery的流行，其他js库也会用$作为标识符，这样一起使用会引起冲突。

多库共存：让jQuery和其他js库不存在冲突，可以同时存在，这就叫做多库共存。

解决方案：

  1. 把里面的$符号统一改成jQuery。比如jQuery('div')。
  2. jQuery变量规定新的名称(让jQuery释放对$的控制权，让用户自己决定)
var xx=jQuery.noConflict();//此时 xx相当于$
console.log(xx('元素选择器'))

5.3 jQuery 插件

jQuery的功能比较有限，想要更复杂的特效效果，可以借助于JQuery插件完成

注意：这些插件也是依赖于jQuery来完成的，所以必须先引入jQuery文件，因此也称为jQuery插件

jQuery插件常用的网站：

  1. jQuery插件库：www.jq22.con/
  2. jQuery之家：www.htmleaf.com/

jQuery插件使用步骤：

  1. 引入相关文件。（jQuery文件和插件文件）
  2. 复制相关html、css、js（调用插件）

图片懒加载：

图片使用延迟加载可提高网页下载速度，它也能帮助减轻服务器负载。

只显示用户看到的位置的图片。当我们页面滑动到可视区，再显示图片。

懒加载插件必须写到所有图片下面

全屏滚动（fullpages.js）

github: github.com/alvarotrigo…

中文翻译网站：www.dowebok.com/demo/2014/7…


bootstrap JS插件： v3.bootcss.com

也是依赖于jQuery开发的，因此里面的js插件使用也必须引入jQuery文件。

avatar
文章
阅读
粉丝