jQuery 能做什麼？

jacklove原創: 2018-05-21 16:58:501843瀏覽

本篇對jquery的使用做了相關的總結。

jQuery是一個小巧的，快速的，功能強大的JavaScript庫。它透過一些易用的API簡化了許多事情，例如：DOM操作、事件監聽、動畫、AJAX等等。
jQuery能做的事情，原生JS都能做到，只不過原生JS會更繁瑣，而化繁為簡正是jQuery的目的所在。
write less，do more.

jQuery物件和DOM原生物件有什麼差別？如何轉化？

假設這麼一個HTML片段

d6c02ac93c87e38cc95db2f13e5b094c65281c5ac262bf6d81768915a4a77ac0

我們可以透過jQuery方法或原生DOM方法取得到這個元素節點

$("#btn1");  //jQuesy方法；document.querySelector("#btn1");    //原生DOM方法；

透過這兩種方法獲得的元素物件是兩個完全不一樣的物件。
jQuesy方法取得的稱為jQuesy對象，它是一個類別數組對象，它有它自己的方法，不能使用原生DOM方法；
原生DOM方法取得的稱為DOM原生對象，它也有它自己的方法，不能使用jQuery的方法；

兩種物件之間可以相互轉換

$("#btn1")[0]; //jQuery物件轉為原生DOM對象，用索引取得對應的元素物件；$(document.querySelector("#btn1")); //DOM元素物件以$包裹，就得到jQuery物件；

#jQuery中如何綁定事件？ bind、unbind、delegate、live、on、off都有什麼作用？推薦使用哪一種？使用on綁定事件使用事件代理的寫入？

在jQuery中，我們可以使用on()方法來綁定事件

$("#btn1").on("click",function() {  //最简单的事件绑定；
    console.log("hello world");
}）

其他的事件綁定方法
bind()，該方法在3.0以後的版本已經被棄用，用on()代替；
1.4.3版本，其接受這麼多參數：eventType（事件類型，"click"等）、eventData（傳遞給事件處理函數的資料）、handler（事件處理函數)、preventBubble（一個Boolean，防止預設事件，阻止事件冒泡）
由於其只能綁定在已有元素中，新加入的元素不會綁定事件，不夠靈活，已棄用；

unbind(),該方法可以移除bind()方法綁定的事件，不傳遞參數的情況下，將刪除所有的事件，傳遞參數可以刪除指定的事件和事件處理函數

delegate()方法是1.7版本以前常用的事件代理方法，現已被on()取代。接受這麼幾個參數：
selector：選擇器字串，用於過濾觸發事件的元素
evenType：事件類型，多個用空格隔開
eventData：傳遞給事件處理程序的資料
handler：事件處理程序

live()也是一種事件代理的方法，附加一個事件處理程序到選擇器匹配的所有元素，但是它把事件直接綁定在document上，通過相關參數來決定是否觸發事件
events：事件類型
data：傳遞給事件處理程序的資料
handler：事件處理程序
因為live()是把事件綁定到document上的，導致冒泡鏈過長，以被棄用。

on()是現在綁定事件的常用方法，接受這麼多參數
1.events：一個或多個空格分隔的事件類型和可選的命名空間，或只是命名空間，如"click", "keydown.myPlugin", 或".myPlugin"；
2.selector：一個選擇器字串，用於過濾出被選中的元素中能觸發事件的後代元素。如果選擇器是null 或忽略了該選擇器，那麼被選取的元素總是能觸發事件；
3.data：當一個事件被觸發時，要傳遞給事件處理函數的event.data；
4.handler(eventObject)：當事件被觸發時，執行的函數。若函數只是要執行returnfalse的話，那麼該參數位置可以直接簡寫成false

off()方法可以移除on()方法綁定的事件，不傳遞參數的情況下，將刪除所有的事件，傳遞參數可以刪除指定的事件和事件處理函數

jQuery事件代理寫法
假設HTML片段

<ul id="container">
    <li>content1</li>
    <li>content2</li>
    <li>content3</li></ul>

我們可以使用on()方法，並提供相關參數，就可以完成事件代理

//將事件綁定在父容器上，只有滿足過濾選擇器的的子元素才能觸發事件$("#container").on("click","li ",function() { //do something..})

#jQuery 如何展示/隱藏元素？

jQuery中透過hide()方法隱藏元素，其接受三個參數：
[duration]：動畫持續多久
[easing]：表示過渡使用哪一種緩動函數，jQuery自身提供"linear" 和"swing"
[complete]：在動畫完成時執行的函數
不添加參數時，其方法等同於直接設定元素的display為none
透過新增參數，該方法可以實現一個漸變的隱藏元素的效果

$(element).hide()
--------
$(element).hide(3000,function() {
    alert("hello world")
})

同樣，jQuery中使用show()方法來展示隱藏的元素，使用方法與hide()相同

jQuery動畫如何使用？

jQuery中通过hide()方法隐藏元素，其接受三个参数
[duration]：动画持续多久
[easing]：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
[complete]：在动画完成时执行的函数
不添加参数时，其方法等同于直接设置元素的display为none
通过添加参数，该方法可以实现一个渐变的隐藏元素的效果

$(element).hide()
--------
$(element).hide(3000,function() {
    alert("hello world")
})

同样，jQuery中使用show()方法来展示隐藏的元素，使用方法与hide()相同
hide()方法会把元素的display变为none，show()方法会还原元素的display
toggle()方法用于切换元素的隐藏/显示，参数与hide()``show()相同，它的机制就是元素如果是隐藏的，就显示该元素，如果元素是显示的，就隐藏该元素，来回切换

fadeIn()/fadeOut用调整元素透明度的方法来显示/隐藏元素，一旦透明度变为0，display将设置为none，接受参数与hide()、show()相同
不设置参数，fadeIn()/fadeOut默认会有渐进显示/隐藏的效果

$(element).fadeIn()
$(element).fadeOut()

fadeTo以动画的形式调整元素到指定的透明度，接受这几个参数：
duration, opacity [, easing ] [, complete ]
opacity为指定变化的透明度
当opacity为0时，fadeTo方法不会使元素display为none

$(element).fadeTo(1000,0.5) //在1s内透明度变化到0.5

fadeToggle会通过改变透明度的方式显示和隐藏元素，如果元素是隐藏的，则显示，显示的，则隐藏，参数与fadeIn()``fadeOut()相同
fadeToggle在元素透明度为0时，会display为none

fadeIn()/fadeOut和show()/hide()的区别：
前者通过调整元素透明度实现元素隐藏和显示，透明度为0时设置display为none。后者通过改变同时元素的width/height/opacity来显示隐藏元素

slideUp()/slideDown()通过上下滑动来实现元素的隐藏/显示，接受参数与show()/hide()相同
slideToggle()通过上下滑动的方式切换元素的隐藏/显示

animate()是自定义动画方法，接受这几个参数
properties：一个CSS属性和值的对象,动画将根据这组对象进行变化
[duration]：动画时间
[easing]：缓动函数
[complete]：完成动画后的回调函数
animate()的本质是通过动画的方式把元素的样式变为指定的样式
animate()可以通过链式调用实现多个动画

$(element).animate({//something})
          .animate({//something})
          .animate({//something})
          .animate({//something})

多个动画可以整合到一个数组中，对数组进行遍历，执行所有动画

var action = [{//action1},
              {//action2},
              {//action3},
              {//action4}]action.forEach(function(action,index) {
    ${element}.animate(action)
})

stop()方法可以停止当前动画，它接受2个参数：
[clearQueue]：一个布尔值，当为true时，当前动画停止，未执行的动画全部删除
[jumpToEnd]：为true时，当前动画将停止，但该元素上的 css属性会被立刻修改成动画的目标值
stop()不添加任何参数时，会立即结束掉元素当前动画（不完成），马上进入下一个动画（如果有的话）

如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

在原生DOM中，我们可以使用innerText操作元素文本，innerHTML操作元素内的HTML
在jQuery中提供了相同功能的方法：html()和text()
当没有传递参数时，获取元素内的innerHTML和innerText；当传递了一个string参数的时候，修改元素的innerHTM和innerText为参数值

<ul id="container">
    <li>content1</li></ul>
$("#container").html() //"<li>content1</li>"$("#container").text() //"content1"

如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

val()方法可以用来获取和设置input的value
当没有传递参数时，获取value的值
传递一个字符串参数时，将value的值改为参数值
attr()可以获取指定属性，也可以设置属性

$(element).attr("id") //获取元素id属性值$(element).attr("id","container") //设置元素id值为container

本篇对jquery的作用进行了相关的讲解，更多相关内容请关注php中文网。

jQuery 能做什麼？

相關文章