jQuery使用总结
Posted wxzhe
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery使用总结相关的知识，希望对你有一定的参考价值。
jQuery的下载直接可以把官网上的源代码复制粘贴下来，然后保存到本地即可。
jQuery选择器
通过一个例子来说明jQuery的几种选择器的用法：
一个简单的没有任何意义的html代码如下：
测试代码1#根据标签的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>
筛选器
选择器与筛选器的区别：选择器就是定位html文档中要选择的某一类标签，筛选器就是在定位的标签中选择需要的标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <a>111</a> <a>222</a> <a id=‘i1‘>333</a> <a>444</a> <a >555</a> <a id=‘i2‘>666</a> </div> <script src="jquery.js"></script> </body> </html>
筛选器的一些用法如下：
#当前标签的下一个标签：
$("#i1").next()
#当前标签下面所有的标签：
$("#i1").nextAll()
#当前标签下一个标签直到“#i2”之间的标签
$("#i1").nextUntil("#i2")
#与当前标签下一个标签相对的是前一个标签：
$("#i1").prev()
$("#i1").prevAll()
$("#i1").prevUntil()
#当前标签的孩子标签：
$(".c1").children()
#当前标签的父标签
$(‘#i1‘).parent() #仅查询一层，即当前标签的父标签
$(‘#i1‘).parents() #依次向上查询，可以查询到html标签。
$(‘#i1‘).parentsUntil() #
#查询当前标签子标签中的标签：
$("div").find("span")
#查询当前标签的兄弟标签
$("#i1").siblings()
$("#i1").siblings().first()
$("#i1").siblings().last()
样式操作
样式操作主要有以下几个：
addClass #添加样式
removeClass #移除样式
toggleClass #样式若存在就删除，若不存在就添加
上面这三个操作是多种css样式构成的css组合的集合操作，若单独只想添加某标签的背景颜色，可以使用如下：
$(‘t1‘).css(‘样式名称‘, ‘样式值‘)；
文本操作
$(..).text() # 获取文本内容 $(..).text(“<a>1</a>”) # 设置文本内容，内容中的标签不会解析 $(..).html() #获取文本内容 $(..).html("<a>1</a>") #设置内容，但是可以解析 $(..).val() # 获取input，text，等标签中输入的内容。 $(..).val(..) #设置对应标签的内容。
属性操作
# 专门用于做自定义属性 $(..).attr(‘n‘) #标签上的属性，获取属性 $(..).attr(‘n‘,‘v‘) #给属性赋值 $(..).removeAttr(‘n‘) <input type=‘checkbox‘ id=‘i1‘ /> # 专门用于chekbox,radio选中类的操作 $(..).prop(‘checked‘) $(..).prop(‘checked‘, true) index 获取索引位置
文档操作
append：追加到当前标签内容之后
prepend：插入到当前标签内容之前
before：插入到当前标签之前
after：追加到当前标签之后
remove：删除
empty：只是把标签的内容清空
clone：克隆
一些操作的小例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <style> .header{ background-color: #4c796a; color: red; } .content{ min-height: 50px; } .hide{ display: none; } </style> </head> <body style="height: 400px;width: 200px;border: 1px solid #dddddd"> <div class="item"> <div class="header">标题一</div> <div id="i1" class="content">内容一</div> </div> <div class="item"> <div class="header">标题二</div> <div class="content hide">内容二</div> </div> <div class="item"> <div class="header">标题三</div> <div class="content hide">内容三</div> </div> <script> $(".header").click(function () { $(this).next().removeClass("hide"); $(this).parent().siblings().find(".content").addClass("hide"); }) </script> </body> </html>
根据不同的导航按钮，显示不同内容的实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ height: 38px; background-color: #dddddd; line-height: 38px; } .menu-item{ float: left; border-right: 1px; padding: 0 5px; } .active{ background-color: brown; } .content{ height: 100px; border: 1px dashed wheat; } .hide{ display: none; } </style> </head> <body> <div style="width: 700px; margin: 0 auto;"> <div class="menu"> <div class="menu-item active" a="1">菜单一</div> <div class="menu-item" a="2">菜单二</div> <div class="menu-item" a="3">菜单三</div> </div> <div class="content"> <div b="1">内容一</div> <div class="hide" b="2">内容二</div> <div class="hide" b="3">内容三</div> </div> </div> <script src="jquery.js"></script> <script> $(".menu-item").click(function () { $(this).addClass("active").siblings().removeClass("active"); var current_index = $(this).attr("a"); // console.log(current_index); // 根据菜单的索引来对应内容的索引 $(".content").children("[b=‘"+ current_index +"‘]").removeClass("hide").siblings().addClass("hide"); }) </script> </body> </html>
点赞操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position: relative; width: 30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div> <span>1</span> <span>2</span> </div> <script src="jquery.js"></script> <script> $(".item").click(function () { AddItem(this); }); function AddItem(self) { var fontSize = 15; var top = 0; var right = 0; var opacity = 1; var tag = document.createElement("span"); $(tag).text("+1"); $(tag).css("color", "green"); $(tag).css("position", "absolute"); $(tag).css("fontSize", fontSize + "px"); $(tag).css("top", top + ‘px‘); $(tag).css("right", right + "px" ); $(tag).css("opacity", opacity); $(self).append(tag); var obj = setInterval(function () { fontSize = fontSize + 10; top = top - 10; right = right - 10; opacity = opacity - 0.1; $(tag).css(‘fontSize‘,fontSize + "px"); $(tag).css(‘right‘,right + "px"); $(tag).css(‘top‘,top + ‘px‘); $(tag).css(‘opacity‘,opacity); if(opacity < 0){ clearInterval(obj); $(tag).remove(); } }, 40); } </script> </body> </html>
动态添加删除操作：(待完善)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .zhc{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: black; opacity: 0.6; } .modal{ position: fixed; top: 50%; left: 50%; width: 400px; height: 400px; background-color: #dddddd; margin-top: -200px; margin-left: -200px; } </style> </head> <body> <table border="1"> <thead> <tr> <th>主机名</th> <th>端口</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>172.16.100.129</td> <td>80</td> <td class="a1"> <a class="edit">编辑</a> | <a class="delete">删除</a> </td> </tr> <tr> <td>172.16.100.130</td> <td>81</td> <td class="a1"> <a class="edit">编辑</a> | <a class="delete">删除</a> </td> </tr> <tr> <td>172.16.100.131</td> <td>82</td> <td class="a1"> <a class="edit">编辑</a> | <a class="delete">删除</a> </td> </tr> </tbody> </table> <input type="button" onclick="addItem();" value="添加"> <!--遮罩层--> <div class="zhc hide"></div> <div class="modal hide"> <span style="color: #b73434">主机名</span> <input type="text" name="host"> <br> <span style="color: #b73434">端口号</span> <input type="text" name="port"> <br> <input type="button" value="添加"> <input type="button" value="取消"> </div> <script src="jquery.js"></script> <script> function addItem(){ $(".modal,.zhc").removeClass("hide"); } $(".edit").click(function () { $(".modal,.zhc").removeClass("hide"); var tds = $(this).parent().prevAll(); var port = tds[0].innerText; var host = tds[1].innerText; console.log(host, port); $(".modal input[name=‘host‘]").val(host); $(".modal input[name=‘port‘]").val(port); }); $(".modal input[value=‘添加‘]").click(function () { var host = $(".modal input[name=‘host‘]").val(); var port = $(".modal input[name=‘port‘]").val(); console.log(host, port); var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.innerHTML = host; var td2 = document.createElement("td"); td2.innerHTML = port; var td3 = document.createElement("td"); $(td3).addClass("a1"); td3.innerHTML = ‘<a class="edit">编辑</a> | <a class="delete">删除</a>‘; $(tr).append(td1); $(tr).append(td2); $(tr).append(td3); $("table").append(tr); $(".modal,.zhc").addClass("hide"); $(".modal input[type=‘text‘]").val(""); }); $(".modal input[value=‘取消‘]").click(function () { $(".modal,.zhc").addClass("hide"); $(".modal input[type=‘text‘]").val(""); }) </script> </body> </html>
以上是关于jQuery使用总结的主要内容，如果未能解决你的问题，请参考以下文章