jQuery

jQuery

分享一个学习web开发app，SoloLearn https://www.sololearn.com/，教程通俗易懂，上手快
以下内容都是上面学到的，留作以后参考

$("#start").html("Go")
$(document).ready(function() {
});
等价
$(function(){
}); 

selectors:

Attributes

$("a").attr("href");
$("a").attr("href", "http://www.jquery.com")
$("a").removeAttr("href")

Content

html()
$("#test").html("<div>html</div>")
text()

Value

val()

Adding Content

append()
prepend()
after()
before()

Adding New Elements

var txt = $("<p></p>").text("Hi")

Manipulating CSS

class
addClass("className")
removeClass("className")
toggleClass("className")

CSS Properties
$("p").css("background-color", "blue")
JSON 
$("p").css({"property":"value",...})

Dimension

Element
$("div").width(100)
$("div").height(100)

Element + Padding
innerWidth() 
innerHeight()

Element + Padding + Border
outerWidth()
outerHeight()

Manipulate DOM

Document Object Model
DOM Traversal：DOM 遍历
ancestor 祖先
parent 父
child 子
siblings 兄弟
descendants 子孙

方法：

Remove Elements

$("p").eq(1).remove()
Remove Content
empty() remove child elements

Events

$("selector").event(function)

Mouse Events
	click
	dbclick
	mouseenter
	mouseleave
	mouseover
Keyboard Events
	keydown
	keyup
Form Events
	submit
	change
	focus
	blur     lose focus
Document Events
	ready
	resize
	scroll

on method
$("p").on("click keydown", function(event){});
off method
$("p").off("click")

Event Object

Trigger Events

$("div").trigger("click")

$(this).parent().remove()
在function表示被选中的元素

Effects

hide()
show()
toggle(1000) 1000 milliseconds
toggle(1000, callback_function)

fadeIn()
fadeOut()
fadeToggle()
fadeTo(1500, 0.7)

slideUp()
slideDown()
slideToggle(500, callback_function)

animate()
$("div").animate({width:'+=250px'},1000)
all property names must be camel-cased 小驼峰
stop() To stop animation before