/****************************** * jQuery学习笔记 * @author Linvo ******************************/ /*========= 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){ alert("Data Loaded: " + 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){ alert( "Data Saved: " + 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(){ //移出时执行 } from : http://www.qingniaobbs.com/thread-1271-1-1.html