JQuery入门笔记

JQuery语法

$(selector).action()

常用

$(document).ready(function(){
	// do something  
});

或

$(function() {
	//do something
});

上面两者都是在文档加载完毕后调用的。
可以防止类似下面的错误

• 试图隐藏一个不存在的元素
• 获得未完全加载的图像的大小。

选择器

选择标签：

$("p")

选择id：

$("#SelectedId")

选择类

$(".SelectedClass")

除此之外，还有：

• 选择子标签
• 选择满足条件的标签
• 选取当前标签

JQuery事件

鼠标事件	键盘事件	表单事件	文档窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

$("p").click(function() {
	//do something
});

JQuery效果

显示与隐藏

$("p").show(time, "linear", function() {
	//this is call back function
});
$("p").hide(time, "linear", function() {
	//this is call back function
});

/*
And you can change it by toggle in turn
*/

$("p").toggle(1000, "linear", function() {
	//this is call back function
});

淡入淡出

$("p").fadeIn(3000, callback);
$("p").fadeOut("slow", callback);
$("p").fadeToggle();
$("p").fadeTo(time, opacity, callback);

滑动

slideDown()
slideUp()
slideToggle()

动画

$("p").animate({
	//css style
}, time, callback);

$("p").stop() // stop animation

HTML

捕获/设置内容

$("p").text(); // innerHTML
$("p").html(); // including html content
$("p").val(); // for forms

// set text to another string
$("p").text("Hello, world.")

添加元素

$("p").append(); // add element at the end of the selector
$("p").prepend(); // add ... at the begining
$("p").after(); //add after the selector
$("p").before();

删除元素

$("#div1").remove(".SelectedClass");
$("#div2").empty();

添加/删除类

常用这种方式方便地改变css样式。

$("p, div, h1").addClass("important red");
$("p, div, h1").removeClass("important red");
$("p, div, h1").toggleClass("important red");

css方法

$("p").css("background-color"); //get background-css attr
$("p").css({"background-color": "red"}); // change css style

AJAX

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

$("#div1").load("demo.txt #p1"); // load element p1 in 'demo.txt' to #div1

$.post(url, data={
	"text": text;
}, callback=funtion() {
	// this is callback function
});
// $.get();

$.ajax(settings);