jQuery的下载直接可以把官网上的源代码复制粘贴下来,然后保存到本地即可。
jQuery选择器
通过一个例子来说明jQuery的几种选择器的用法:
一个简单的没有任何意义的html代码如下:
#根据标签的id选择标签:
$("#i1")
#根据标签的class选择标签:
$(".c1")
#根据标签的标签名字选择标签:
$("span")
#选中所有的标签
$("*")
#组合选择器,选择所有的id为i1的标签和class为c1的标签
$("#i1, .c1") #中间用逗号分隔。
层级标签---根据标签间关系来选择,示例如下:
#选择父标签下的子标签
$("body div") #选择body标签的子标签中的所有的div标签,包含子标签的子标签
#选择父标签下的子标签(只父子关系这一层)
$("body >div") #不会再选择,子标签div下的子标签。
#选择当前标签的下一个标签
$("input + div") #选择input标签的下一个标签,"+"后面的div可以省略
#选择当前标签的兄弟标签:
$("input ~ ") #当前标签的兄弟标签,也就是同级标签。
一些位置参数的基本标签:
#匹配选中的第一个标签
$("div:first") #匹配选中div标签的第一个标签
#匹配选中的最后一个标签
$("div:last")
#根据索引匹配标签
$("div:eq(0)") #选中的div标签中,索引为0的标签。
$("div:gt(1)") #选中的div标签中,索引大于1的标签。
$("div:lt(1)") #选中的div标签中,索引小于1的标签。
根据标签的属性选择:
#选中html中具有name属性的标签
$('[name]')
#根据属性的确定值来选择标签
$("[name='wxz']")
#选择指定标签中含有某属性的标签
$("div[name='wxz']")
#匹配所有的单行文本框
$(":text")
以上是jQuery选择器的一部分,更详细的jQuery介绍请参照,jQuery技术文档
一个jQuery选择器的小例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> </head> <body> <form> <input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverse()"> <input type="button" value="取消" onclick="cancelAll()"> </form> <hr> <table border="1"> <thead> <tr> <th>选项</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>10.0.102.204</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>10.0.102.204</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>10.0.102.204</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>10.0.102.204</td> <td>80</td> </tr> </tbody> </table> <script> function checkAll() { $(":checkbox").prop("checked", true); // prop()函数有两个参数,如果只有一个参数则获取这个属性的值,如果有如上两个参数,则个这个属性设定值。 } function cancelAll() { $(":checkbox").prop("checked", false); } function reverse() { $(":checkbox").each(function () { /* 第一种写法 if(this.checked){ this.checked = false; }else { this.checked = true; } */ /* 第二种写法 if($(this).prop("checked")){ $(this).prop("checked", false); }else { $(this).prop("checked", true); } */ // 三元运算符 var v = $(this).prop("checked")?false:true; $(this).prop("checked",v); }) } </script> </body> </html>