用法

DOM操作

事件处理

Ajax

动画

DOM 操作

Classes操作

Data操作

Attribute操作

Class 操作

// <div class="demo"></div>
$('.demo').addClass('test');
// <div class="demo test"></div>

http://api.jquery.com/addClass/

// <div class="demo test"></div>
$(element).removeClass('test');
// <div class="demo"></div>

Class 操作

// <div class="demo"></div>
$('div').hasClass('demo'); // return true

http://api.jquery.com/toggleClass/

// <div class="demoiv>
$('div').toggleClass('test');
// <div class="demo test"></div>
$('div').toggleClass('test');
// <div class="demo"></div>

值操作

// <input value="test">
var value = $('div').val(); // 返回test
$('div').val('something else');
// <input vaue="something else">

http://api.jquery.com/val/

// <div>test</div>
var value = $('div').text(); // 返回test
$('div').text('something else');
// <div>something else</div>

节点本身的移除

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

<script>
$(".hello").remove();
</script>

<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

http://api.jquery.com/remove/

有选择移除节点

/*
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>
 */

$("div").remove(':contains('hello')');

/*
<div class="container">
  <div class="goodbye">Goodbye</div>
</div>
 */

http://api.jquery.com/remove/

移除节点属性

// <a title='test'>apple</a>
$('a').removeAttr('title'); 
// <a>apple</a>

http://api.jquery.com/removeAttr/

设置节点属性

<img href="http://www.baidu.com"/>

 

http://api.jquery.com/attr/

$('img').attr(href); => 'http://www.baidu.com'
$('img').attr(href, 'http://www.meituan.com'); =>  <img href="http://www.meituan.com"/>

 

值插入

<div class="container">
  <div class="inner">Hello</div>
</div>

http://api.jquery.com/after

$( ".container" ).after( "<p>Test</p>" );

<div class="container">
  <div class="inner">Hello</div>
  <p>Test</p>
</div>

值插入其它方式

`$(element).before\append\appendTo\insertAfter` 和 `after`的用法是一致的

设置节点的html片段

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

 

http://api.jquery.com/html/

$(".demo-container").html('only text');

<div class="demo-container">test</div>

 

节点间的遍历

<div class="parent">
    <div class="child"></div>
</div>

$('.parent').children().css('color', 'red');

<div class="parent" style="color:red">
    <div class="child" style="color:red"></div>
</div>

$('.child').parent().css('color', 'red');

http://api.jquery.com/category/traversing/tree-traversal/

节点间的遍历

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

var child1 = $('.parent').find('.child1')

http://api.jquery.com/category/traversing/tree-traversal/

节点间的遍历

http://api.jquery.com/category/traversing/tree-traversal/

$(ele).siblings() => 获取兄弟节点

$(ele).prev() => 获取同层级前一节点

$(ele).next() => 获取同层级后一节点

.

.

.

获取节点上的data值

// <input data-test='1' />
// $('input').data('test') => 1
$(element).data(key);


// <input />
// $('input').data('test', '1') => <input data-test='1' />
$(element).data(key, value);

一般把后端传的值挂在与节点上的data

http://api.jquery.com/category/manipulation/

事件处理

事件委托监听

$("#dataTable tbody").on("click", "tr", function(e) {
    // this => e.target
    console.log($(this).text());
});


function notify() {
    console.log('test')
}
$( "button" ).on("click", notify );


function myHandler( event ) {
  alert( event.data.foo );
}
$("p").on( "click", { foo: "bar" }, myHandler );

$(element).on(events [,selector][,data], handler)

http://api.jquery.com/on/

解除事件绑定

function flash() {
  $("div").show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
  $( "body" )
    .on( "click", "#theone", flash )
    .find( "#theone" )
    .text( "Can Click!" );
});
$( "#unbind" ).click(function() {
  $( "body" )
    .off( "click", "#theone", flash )
    .find( "#theone" )
    .text( "Does nothing..." );
});

$(element).off(events [,selector][,handler])

http://api.jquery.com/off/

只监听一次事件的API

$( "#foo" ).one( "click", function() {
  alert( "This will be displayed only once." );
});


// the same as below
$( "#foo" ).on( "click", function( event ) {
  alert( "This will be displayed only once." );
  $( this ).off( event );
});

$(element).one(events [,data],handler)

http://api.jquery.com/one/

同一类型的其它API

// inspect the change in elememt
$(elememt).change(handler(e){ // .. })

// inspect the click in elememt
$(elememt).click(handler(e){ // .. })

$(element).submit()
$(elememt).hover()
...

http://api.jquery.com/category/events/

Ajax

$.ajax({
    method: "POST",
    url: "test.html",
    data: {
        name: "John",
        location: "beijing"
    },
    dataType: 'json', // xml, html, script
    success: function (data, textStatus, XHR) {},
    error: function (err) {},
    complete: function () {},
    timeout: 1000
});

有时候是表单传值，逐个去获取表单的值不方便

$('form').serialize() 

返回一个表单序列字符串，可用于传输

动画

$(element).animate(cssProperties[,option])

option 包括durations(渐变时间)/effect(效果)/complete(完成以后的回调函数) // 栗子

$(element).fadein(duration[,complete])

$(element).fadeout(duration[,complete])

$(element).fadeToggle(duration[,complete])

$(element).slideDown(duration[,complete])

$(element).slideUp(duration[,complete])

$(element).slideToggle(duration[,complete])

$(element).hide()

$(element).show()

FQA

1. `$()`在jQuery中是什么？

1. `$` 是jQuery对象

2. `$` 集成了很多方法，比如遍历数组的$.each()

3. `$()` 是一个jQuery方法。

     - 如果传递进去的是选择器字符串，比如'.className'，则返回的是一个包含匹配className元素的jQuery对象

     - 如果穿进去的是个html字符串，比如$('<p>test</p>')，则返回一个<p>的jQuery节点，但要注意，这个时候尚未插入到DOM里面

2.如果我们有5个div在页面中，怎么用jQuery选中他们？

$("div") 返回的是一个带有五个节点的数组。

3.在jQuery， id 和 class选择器的区别？

4.你怎么去隐藏一个div？

5.$(document).ready()是什么？为什么我们要用它？

等DOM树load完以后，可以马上执行

6.$(document).ready()与window.onload的区别？

1. onload需要等到其它静态资源onload以后才能执行。

2. ready可以在一个页面多处按序被调用，onload只能调用一次

7.怎么获取标签中被选中的项？

$('[name=NameOfSelectedTag] :selected')

8.我们怎么把一个HTML标签加进页面中？

9. 我们怎么获取和设置标签的属性？

10. document.getElementById('myId')和$('#myId')，哪个更高效？