jQuery 基本用法汇总

jQuery 是经常使用的类库，它极大的简化了原生JS的操作，屏蔽了浏览器差异。

这里按照一个顺序，总结一下最基本的用法。

一、获取元素

JS里面必不可少的操作就是对某个DOM元素修改样式，首先得拿到元素。

例如下面的html片段：

        <div id='testSelector'>
            <p class="child" title="This is first line">aaa</p>
            <p class="child" title="This is second line">bbb</p>
            <p class="child" title="This is third line">ccc</p>
            <p class="child" title="This is a row">ddd</p>
        </div>

如果需要选出前三个p元素，先想想选择器：

div 的直接子元素中，p类型的元素，元素的class包含child， div > p.child

元素的title属性包含了line的元素，[title*="line"]

那么在原生JS里面和jQuery，可以分别这样写：

            // 1. Select From Pure JS
            var els1 = document.querySelectorAll(selectStr);
            var p1 = els1[0]; //aaa
            var len1 = els1.length; //3

            // 2. Select From JQuery
            var els2 = $(selectStr);
            var p2 =els2[0]; //aaa
            var len2 = els2.length; //3

            var result = (p1 === p2);

二、操作样式

接着上面得内容，获取到一个DOM(Pure JS)和一个jQuery对象之后，就可以修改元素得样式了。

考虑这样一个html片段：

    <style>
        #testCss {
            width: 300px;
            height: 300px;
            background-color: darkorange;
        }
    </style>
    <div id="testCss"></div>

两个最常见的需求：

1. 如何获取一个元素样式中某个属性的值，例如获取背景色

2. 如何修改背景色

实现如下：

            // PureJS
            var el = document.querySelector("#testCss");
            // 1. 直接获取style，这个获取不到css应用上去的style
            var backColor = el.style.backgroundColor; //undefined
            // 2. 获取最终计算样式，这个考虑了css
            backColor = window.getComputedStyle(el, null).backgroundColor; //darkorange
            el.style.backgroundColor = "red";

            // jQuery
            var $el = $('#testCss');
            // jQuery 使用了 window.getComputedStyle，因此考虑了css
            backColor = $el.css('background-color'); //darkorange
            $el.css('background-color', 'red');

总结 jQuery 操作样式：

jQuery中设置样式，属性名是和css一样的，效果是设置到了元素的style上面

注意：属性名和CSS中使用的方式一样

1. 获取属性

$el.css('background-color');

2. 设置属性

$el.css('background-color', 'red');

3. 设置多个属性

            $("p").css(
                {
                    "background-color": "yellow",
                    "font-size": "200%"
                });

引申：使用回调设置值;

            $el.css('background-color', function (index, oldValue) {
                // ...
                return 'red';
            });

三、绑定事件

原生JS里面，我们通过绑定事件，从而得到用户某个行为的时机，例如按下鼠标，mousedown，松开鼠标，mouseup。

在这些时机里面，我们需要响应用户行为，做出反应。

总结一下，原生JS和jQuery是如何挂事件的：

先看PureJS:

            // 1. 绑定点击事件和移除事件
            function clickHandler1() {
                console.log('click');
            }

            el.addEventListener('click', clickHandler1);

            setTimeout(() => {
                el.removeEventListener('click', clickHandler1);
            }, 5000);


            // 2. 不仅需要绑定点击事件，还需要给回调函数传参数
            el.addEventListener('click', (function () {
                var data = 'aaa';
                return function (e) {
                    console.log(`click event is ${e} and data is ${data}`);
                }
            })());

jQuery:

            //jQuery
            function clickHandler2() {
                console.log('click, from jQuery');
            }

            function clickHandlerWithData(e) {
                console.log(`click, from jQuery, data is ${e.data}`);
            }

            var $el = $('#testCss');

            // 1. 直接调click方法，传一个方法来挂事件
            $el.click(clickHandler2);

            // 2. 使用bind方法挂事件
            $el.bind('click', clickHandler2);

            // 3.使用bind方法挂事件，并且传参数
            $el.bind('click', 'bbb', clickHandlerWithData);

            // 4.使用bind方法挂事件，并且一次挂多个事件
            $el.bind({
                click: function () {
                    console.log('click');
                },
                mouseover: function () {
                    console.log('mouseover');
                },
                mouseout: function () {
                    console.log('mouseout');
                }
            });

            // 取消某个click事件回调
            $el.unbind('click', clickHandler2);
            $el.unbind('click', clickHandlerWithData);

            // 取消所有click事件回调，包括所有方式绑定的事件
            $el.unbind('click');

总结如下：

发click事件

$el.click();

绑定click事件

$el.click(clickHandler);

$el.bind('click', clickHandler);

取消绑定click事件

$el.unbind('click');

$el.unbind('click', clickHandler);

四、应用动画

举个例子，在 jQuery 里面连续应用两段动画。

            var $el = $('#testCss');

            $el
                .animate(
                    {
                        left: "+=500px",
                        top: "+=100px"
                    },
                    'slow',
                    function () {
                        console.log('first animation end');
                    })
                .animate(
                    {
                        opacity: '0.3'
                    },
                    'slow',
                    function () {
                        console.log('second animation end');
                    }
                );

动画的基本使用方法：

            $("div").animate({
                left: '250px',
                height: '+=150px',
                width: '+=150px'
            });

这里传入一个最终应用的样式，注意属性名都是需要满足驼峰式的，jQuery 不会立即应用这个样式，而是以一个速度，渐进的方式实现。

1. 关于display，jQuery里面封装了隐藏显示效果，注意加了速度，就是宽度和高度同时变化

            $el.show(3000);
            $el.hide(3000);
            $el.toggle(3000);

2. 关于Opacity，jQuery里面封装了淡入淡出效果

            $el.fadeIn(3000);
            $el.fadeOut(3000);
            $el.fadeToggle(3000);

3. 关于height，jQuery里面封装了滑动效果

            $el.slideDown(3000);
            $el.slideUp(3000);
            $el.slideToggle(3000);

jQuery 基本用法汇总

猜你喜欢