jQuery学习笔记

来源：互联网发布：网站数据分析产品编辑：程序博客网时间：2024/05/18 09:49

概述：jQuery 是一个快速、简单的JavaScript library，它简化了HTML文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。jQuery 是为改变你编写JavaScript的方式而设计的。坚持The Write Less, Do More。

官方下载地址：http://code.jquery.com/jquery/(包含各个版本列表)

本文即将从jQuery的选择器、常用函数、操作DOM、操作CSS入手，展开对jQuery的研究。

1、强大的选择器

1)、基本选择器

$("#id") <span style="white-space:pre"></span>获取到单个元素 等同于javascript中的document.getElementById("id")$(".class") <span style="white-space:pre"></span><span style="white-space:pre"></span>获取到一个集合$("tagName") <span style="white-space:pre"></span>获取到一个集合等同于javascript中的document.getElementsByTagName("tagName")

2)、层次选择器

$("#id tagName")获取到这个id所有标签名为tagName的后代 可用$("#id").siblings("tagName")取代$("#id>tagName")获取到这个id直接子类，且标签名为tagName $("#id+tagName")获取后一个兄弟元素，且标签名为tagName 可用$("#id").next("tagName")取代$("#id~tagName")获取所有兄弟元素，且标签名为tagName 可用$("#id")nextAll("tagName")取代$("#id").prev("tagName")前一个兄弟

3)、过滤选择器

(1)、基本过滤

     $("tagName:first")     $("tagName:last")     $("tagName:not(selector)")     $("tagName:even")<span style="white-space:pre"></span>索引值为奇数     $("tagName:odd")<span style="white-space:pre"></span><span style="white-space:pre"></span>索引值为偶数     $("tagName:eq(index)")     $("tagName:gt(index)")<span style="white-space:pre"></span>大于某个索引值     $("tagName:lt(index)")<span style="white-space:pre"></span><span style="white-space:pre"></span>小于某个索引值

注：以上索引值从0开始。

(2)、内容过滤

<span style="white-space:pre"></span>     $("tagName:contains(text)")<span style="white-space:pre"></span>选取内容为text的<span style="white-space:pre"></span>     $("tagName:empty")<span style="white-space:pre"></span>     $("tagName:has(selector)")<span style="white-space:pre"></span>     $("tagName:parent")<span style="white-space:pre"></span>有子元素的<span style="white-space:pre"></span>     $("tagName:hidden")<span style="white-space:pre"></span>选取display:none或者type="hidden" <span style="white-space:pre"></span>     $("tagName:visible")

(3)、属性过滤

<span style="white-space:pre"></span>     $("tagName[attribute]")<span style="white-space:pre"></span>含有某个属性的元素<span style="white-space:pre"></span>     $("tagName[attribute=value]") <span style="white-space:pre"></span>     $("tagName[attribute!=value]")<span style="white-space:pre"></span>     $("tagName[attribute^=value]")<span style="white-space:pre"></span>值以value开始<span style="white-space:pre"></span>     $("tagName[attribute$=value]")<span style="white-space:pre"></span>值以value结束<span style="white-space:pre"></span>     $("tagName[attribute*=value]")<span style="white-space:pre"></span>值包含value

(4)、子元素过滤

<span style="white-space:pre"></span>      $("tagName son:nth-child(index/even/odd/equation)")  注：索引值从1开始。<span style="white-space:pre"></span>      $("tagName son:first-child")<span style="white-space:pre"></span>      $("tagName son:last-child") <span style="white-space:pre"></span>      $("tagName son:only-child")

(5)、表单对象属性过滤

<span style="white-space:pre"></span>      $("#form:enabled")<span style="white-space:pre"></span>      $("#form:disabled")<span style="white-space:pre"></span>      $("#form:checked")<span style="white-space:pre"></span>      $("#form:selected")

4)、表单选择器

    <span style="white-space:pre"><span style="background-color: rgb(240, 240, 240);">$("#form:input")</span></span>

    $("form:text")

...
...
...

2、常用函数
1)、 $(function(){})
$().ready(function(){})
$(document).ready(function(){})

与window.onload = function(){}区别：
(1)、执行时机，jQuery是在建立页面dom结构后就会执行，而dom是在页面dom结构加载完毕，并且建立关联关系后执行。
(2)、jQuery可以在页面中多处使用，而dom只能被使用一次，如果定义多个，那么后面的就会把前面的覆盖掉。

2)、$("#id").html()

不加参数则是获取值，否则是设值

$("#id").html("value")

3)、$("#id").text()

$("#id").text("value")

4)、$("#id").click(function(){})

5)、$("#id").attr("attribute")
$("#id").attr("attribute", "value")
$("#id").attr({attr0 = "value", attr1 = "value",...})

6)、$("#id").val()

$("#ID").val("value")

7)、$.ajax

({
type:"POST",
url:"<%=request.getContextPath()%>/xxx",
data:
{
"name" : $("#id").val()
},
dataType:"json",
success : function(response)
{
}

})

$.post(url, data, function(response, status){})

$.get(url, data, function(response, status){})

8)、$("#id").css("attribute","value")

9)、$("#div").show(timeout)

$("#div").hidden(timeout)

10)、$("#id").bind("click", function(){})

$("#id").unbind("click")

11)、$("#id").focus(function(){})
$("#id").blur(funtion(){})失去焦点

12)、$("ul").delegate("li", "click", function()

{

$(this).hide();

});

给子节点增加事件

3、操作dom

1)、查询

     <span style="white-space:pre"></span>$("#id").children()<span style="white-space:pre"></span>直接子元素<span style="white-space:pre"></span>$("#id").siblings()<span style="white-space:pre"></span>获取所有兄弟<span style="white-space:pre"></span>$("#id").next("tagName")<span style="white-space:pre"></span>后一个兄弟tag<span style="white-space:pre"></span>$("#id").nextAll("tagName")<span style="white-space:pre"></span>后面所有兄弟tag<span style="white-space:pre"></span>$("#id").prev("tag")<span style="white-space:pre"></span>$("#id").prevAll()<span style="white-space:pre"></span>$("#id").find("")<span style="white-space:pre"></span>所有元素

2)、插入

<span style="white-space:pre"></span>$("#id").append("")<span style="white-space:pre"></span>追加子元素<span style="white-space:pre"></span>$("#id").prepend("")<span style="white-space:pre"></span>前置子元素<span style="white-space:pre"></span>$("#id").after("")<span style="white-space:pre"></span>追加兄弟元素<span style="white-space:pre"></span>$("#id").before("")<span style="white-space:pre"></span>前置兄弟元素

3)、删除

<span style="white-space:pre"></span>$("#id").remove()<span style="white-space:pre"></span>$("#id").empty()

4)、复制

$("#id").clone([true/false]).appendTo("#id")

$("#id").clone([true/false]).appendTo("#id")

5)、替换

<span style="white-space:pre"></span>$("#id被替换").replaceWith("")<span style="white-space:pre"></span>$("").replaceAll("被替换")

6)、包裹

<span style="white-space:pre"></span>$("p").wrap("")<span style="white-space:pre"></span>包裹标签<span style="white-space:pre"></span>$("p").wrapInner("")<span style="white-space:pre"></span>包裹标签的文本

4、操作css

     $("#id").attr("class", ".class")     $("#id").addClass(".class")     $("#id").removeClass(".class")     $("#id").removeClass()     $("#id").toggleClass("")     $("#id").hasClass("")     $("#id").isClass("")

5、小技巧
1)、阻止事件向顶层传播，event.stopPropagation()。
2)、阻止表单默认提交，event.preventDefault()。
3)、同一个对象支持方法链。
4)、某些时候，jQuery获取的集合对象，无须一个一个遍历；而使用dom需要遍历。
5)、jQuery对象与dom对象之间的相互转化
$(dom对象)---->jQuery对象
$()[index]、$().get(index)----->dom对象

0 0