概述：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")
$("#id").text("value")
4)、$("#id").click(function(){})
$("#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)
{
}
})
$.get(url, data, function(response, status){})
8)、$("#id").css("attribute","value")
$("#div").hidden(timeout)
$("#id").unbind("click")
$("#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")<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对象
扫一扫
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
