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(){
        //移出时执行
    }
)