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 2 3 4 5 6 7 8 9 10 11 12 13

var selectStr = 'div > p.child[title*="line"]';   // 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); // true

　　

　　

二、操作样式

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

考虑这样一个html片段：

?

1 2 3 4 5 6 7 8

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

　　

两个最常见的需求：

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

2. 如何修改背景色

实现如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

// 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. 获取属性

?

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

　　

2. 设置属性

?

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

　　

3. 设置多个属性

?

1 2 3 4 5

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

　　

引申： 使用回调设置值;

?

1 2 3 4

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

　　

三、绑定事件

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

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

 

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

先看PureJS:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// 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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

//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事件

?

1	$el.click();

　

绑定click事件

?

1	$el.click(clickHandler);

　　

?

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

　　

取消绑定click事件

?

1	$el.unbind('click');

　

?

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

　　

　

四、应用动画

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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');         }     );

　　

动画的基本使用方法：

?

1 2 3 4 5

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

　　

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

 

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

?

1 2 3

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

　　

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

?

1 2 3

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

　　

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

 

?

1 2 3

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