jQuery学习笔记
- $() = $(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(){
- //移出时执行
- }
- )