jQuery DOM

jQuery 操作 DOM 非常简单。

// $ 字符后加入字符串
var obj = $("<div><p>hello</p></div>")

添加元素

.append() / .appendTo / .prepend() / .prependTo()

$(".inner").append("<p>Test</p>")  // 在 class 为inner 的元素最后中插入 p 元素
$("<p>Test</p>").appendTo(".inner") //  p 元素添加到 class 为 inner 的元素最后

$(".inner").prepend("<p>Test</p>")  // 在 class 为inner 的元素开始中插入 p 元素
$("<p>Test</p>").prependTo(".inner")  // p 元素添加到 class 为 inner 的元素头部

.before([content])

在对象前面插入内容，与对象作为邻居（siblings）

$(".inner").before($(".inner-first"))  // inner-first 类的元素插入到 inner类元素的前面，两者作为兄弟元素。

.after()

将参数中的元素或者DOM结构插入匹配元素后面

$(".inner").after("<p>Test</p>")  // 在 inner 类的元素中后插入<p>Test</p>

.remove()

清楚系列匹配的元素

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

// jQuery
$(".hello").remove();

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

.empty()

和 .remove() 类似，将选中元素的子节点清除

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

// jQuery
$(".hello").empty();

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

html

取得匹配元素系列的第一个元素的HTML内容，如果括号中有参数/函数则替换它。

$("div").html()  // 获得innerHTML
$("div").html("<strong>Hello</strong>") // 修改innerHTML

.text()

取得匹配系列元素的混合内容，包括其后代或文本,form表单除外，form表单使用.val()方法；script标签除外，script标签使用.html()方法。

// html
<div class="demo-box">Demostration box</div>

// jQeury
$(".demo-box").text()  // Demostration box
$(".demo-box").text("<h1>Demo box</h1>")   // <div class="demo-box"><h1>Demo box</h1></div>

.val()

用来处理input的value,取得匹配的系列元素的第一个元素的值或设置每一个匹配的元素的值

$("input").val()
$("input").val('newValue')

.attr()

获取元素特定属性的值/为元素赋值

var title = $("em").attr("title");
$("greatPhoto").attr({
alt:Beijing The Great Wall,
title: By Clark
})

.removeAttr()

为匹配的系列元素中的每一个元素移除一个属性

$("div").removeAttr("id");

.prop()

获取匹配系列元素的第一个元素的属性值，如果属性没有设置值则是返回undefined

// html
<input type="checkbox" checked="checked">

//jQuery
$(input).change(function() {
  var $input = $(this);
  $("p").html(
    ".prop("\check\"):"+$input.prop("checked");
  )
})

.css()

和.attr()类似的方法，获取特定的style特点的属性值

var color = $(this).css("background-color");

var styleProps = $(this).css([
  "width",
  "height"
  "color"
])

$(this).css({
  "backgroud-color" : "yellow",
  "font-size" : "16px"
})

.addClass()

为元素添加类，不覆盖原来的类，不检查重复

$("p").addClass("paraClass anotherClass")
$("ul li").addClass(function(index){
  return "item-"+ index;
})

.removeClass()

移除元素单个/多个/所有class

$("p").removeClass("anotherClass")

.hasClass()

检查元素是否包含某个class，返回true/false

$("thisDiv").hasClass("foo")

.toggleClass()

切换class,有则删除，无则添加

<div class="foo">demo class</div>

// jQuery
$(".foo") .toggleClass("bounce")

// first time
<div class="foo bounce">demo class</div>

// second time
<div class="foo">demo class</div>

.each()

遍历一个jQuery 对象，为每个匹配元素执行一个函数

$("li").each(function(index){
  console.log(index+": "+$(this).text());
})

$.extend()

当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。

如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的

var obj 2 = {
 name: "steve",
age: 56
}
var obj3 = {
  school: "MIT"
}
var obj = $.extend({},obj2,obj3);

.clone()

.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点

$(".hello").clone.appendTo("..goodbye");

.index()

从给定集合中查找特定元素index没参数返回第一个元素index
如果参数是DOM对象或者jQuery对象，则返回参数在集合中的index
如果参数是选择器，返回第一个匹配元素index，没有找到返回-1

var listItem = $("#bar");
console.log("index: " + $("li").index(listItem));

.ready()

当DOM准备就绪时，指定一个函数执行。

$(function() {
  console.log("ready")
})
// above equal to below
$(document).ready(function() {
  console.log("ready")
})

window.load / DOMContentLoaded / jQuery.ready()

window.load
当一个资源及其依赖资源已完成加载时，触发load事件。

jQuery.ready()

A function to execute after the DOM is ready.
Note that although the DOM always becomes ready before the page is fully loaded

DOMContentLoaded
当初始HTML文档被完全加载和解析完成后，事件触发，无需等待图片，样式表，子框架加载完成。DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。

Native DOM and jQuery DOM

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素
HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

jQuery对象是通过jQuery包装DOM对象后产生的对象
jquery对象其实是一个javascript的数组
这个数组对象包含125个方法和4个属性

4个属性分别是:selector,length,jQuery,context

var nativeObj = document.getElementById("thisID");  // native object
var $jQobj = $("#thisID") // jQuery object

native to jQuery

var nativeObj = document.getElementById("thisID"); // native
var $jQobj = $(nativeObj) //jQueryobj

jQuery to native

var $jQobj = $("#thisID") // jQuery object
var nativeObj = $jQobj[0]