JQuery 学习笔记 【转】

/*=========
2009-1-14
=========*/
$() = $(document)
//实现window.onload()效果
$().ready(
function(){
//需要执行的内容
}
);
//获取DOM元素(返回值为jQuery对象)
$("element") //相应元素名的
$(".classname") //class值匹配的
$("element.classname") //相应元素中，class值匹配的
$("#id") //id匹配的
$("element#id") //相应元素中，id匹配的
$("element1 > element2") //元素一 下 的所有元素二（只包括儿子）
$("element1 element2") //元素一 中 的所有元素二（包括子孙等）
$("element1 + element2") //元素一 后 的所有元素二（代码后）
$("element1 ~ element2") //与元素一 并列 的所有元素二（兄弟元素二）
$("#id").html("") //设置 getElementById("id").innerHTML = ""
$("#id").html() //取出 getElementById("id").innerHTML
//动画出现效果
$("#id").show(speed, [callback])
$("#id").slideDown(speed, [callback])
……

/*=========
2009-1-16
=========*/
//在<p>外面包围另一个结构（html代码/元素）
$("p").wrap("<div class='wrap'></div>")
$("p").wrap(document.getElementById('content'))
$("p").append("<b>Hello</b>"); //<p>I would like to say: <b>Hello</b></p>
$("p").prepend("<b>Hello</b>"); //<p><b>Hello</b>I would like to say: </p>
$("p").before("<b>Hello</b>"); //<b>Hello</b><p>I would like to say: </p>
$("p").after("<b>Hello</b>"); //<p>I would like to say: </p><b>Hello</b>
//【删除相应class的p元素】
//<p class="classname">AAA</p> BBB <p>CCC</p>
//BBB <p>CCC</p>
$("p").remove(".classname");
/*=========
2009-1-18
=========*/
//获取具有某属性值的相应元素
$("input[name=qq]") //获取<input name="qq" type="text" />元素
//属性与值关系
= //等于
*= //包含该值
!= //不包含该值
^= //以该值开头
$= //以该值结尾
//为每一个匹配的元素执行该函数
$("element").each(function(){
//需要执行的内容
})
/*=========
2009-1-19
=========*/
/*
jQuery中用post和get方法
（ajax高层抽象方法，对ajax方法进行了封装）
【当JQ中用post方式】
PHP用$_POST接收时，只有n2
PHP用$_GET接收时，只有n1
【当JQ中用get方式】
PHP用$_GET接收，n1 n2都有
PHP用$_POST接收时，都没有
*/
$.post("do.php?n1=a", {n2: "b"},
function(data){
;
}
);
/*=========
2009-1-20
=========*/
//DOM对象 -> jQuery对象
//$(DOM对象)
var v = document.getElementById("id"); //DOM对象 v
var $v = $(v); //jQuery对象 $v
//jQuery对象 -> DOM对象
//jQuery对象.get(0) 或者 jQuery对象[0]
var $v = $("#id"); //jQuery对象 $v
var v = $v.get(0); //DOM对象 v
var v = $v[0]; //DOM对象 v
$("element").get(); //获取指定元素的集合
//jQuery用ajax方法（ajax低层方法）
$.ajax({
type: "POST", //POST时PHP中用$_POST接收，GET反之。
url: "do.php",
data: "n1="+x+"&n2="+y,
success: function(data){ ; }
});
/*=========
2009-1-21
=========*/
//序列表表格内容为请求字符串
//返回值：（例）name=linvo&age=22
$("form").serialize() //序列化整个表单元素内容
$("input[type=text]").serialize() //序列化指定元素内容（例）
$("element").empty(); //移除指定元素下所有元素
/*
CSS设置
*/
$("element").addClass("classname"); //为指定元素添加css样式
$("element").removeClass("classname") //移除指定元素的css样式
$("element").toggleClass("classname") //指定元素的css样式，有则删除，无则添加
$("element").css("attname"); //获取指定元素相应属性的值（attname例：color）
$("element").css("attname","value"); //设置……属性值（例："color","#FF0000"）
$("element").css({ "margin-left": "10px", "background-color": "blue" });
//使用“名/值对”进行批量设置……（例子见自身）
/*=========
2009-1-22
=========*/
$("element1").next(element2) //与指定元素一 紧邻 的指定元素二
$("element1").parent().is(element2) //元素一的父元素在元素二的集合中吗
//模仿鼠标悬停事件
//hover(over,out)
//over:在上方执行 | out：移出时执行
$("element").hover(
function(){
//在上方执行
}, function(){
//移出时执行
}
)