JQuery 前端开发笔记 - 数字知识商城-小可爱商城

jQuery 是一个写的更少,但做的更多的轻量级 JavaScript 库

JQuery 常用选择器

ID选择器: 通过使用简单的$(#id)标识前缀,实现快速匹配指定ID的元素对象,具体用法如下.

<body> <div id="1000"> hello lyshark </div> <div id="2000"> hello lyshark </div> <div id="3000"> hello lyshark </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#2000").css("background","red"); //通过ID号选择指定元素 var temp = $("#1000").text(); //获取到文本的内容 document.write("文本内容: " + temp); //打印出这个文本的内容 </script> </body>

标签选择器: 通过使用$("element")标识前缀,匹配页面中所有P标签,并设置成红色.

<body> <div id="1000"> hello lyshark </div> <p id="2000"> hello p</p> <div id="3000"> hello lyshark </div> <p id="4000"> hello p</p> <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").css("background","red"); //通过p标签定位修改所有P标签 </script> </body>

类选择器: 通过使用$("ClassName")标识前缀,匹配页面中所有class="MyClass"的类属性.

<body> <div class="MyClass"> hello lyshark </div> <div class="MyClass"> hello lyshark </div> <div class="lyshark"> hello lyshark </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(".MyClass").css("background","green"); //通过.MyClass找到一类属性并修改 </script> </body>

通配符选择器: 通过使用$("body*")标识前缀,匹配页面中所有开头是div的标签,并设置成绿色.

<body> <div class="MyClass"> hello lyshark </div> <div class="MyClass"> hello lyshark </div> <h1 class="lyshark"> hello lyshark </h1> <div class="lyshark"> hello lyshark </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $("div*").css("background","green"); //修改所有div标签的属性 </script> </body>

组合选择器: 使用组合选择器可以扩大选择器的选择范围,可以通过逗号分隔符分割多个不同的选择器.

<body> <h1 class="MyClass"> hello lyshark </h1> <div class="MyClass"> <div id="MyID1">hello MyID1 </div> <div id="MyID2">hello MyID2 </div> </div> <div id="lyshark"> hello lyshark </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(".MyClass #MyID1 , h1 , #lyshark").css("background","green"); </script> </body>

属性选择器: 根据元素的属性及其值作为过滤条件,来匹配DOM元素,它以中括号作为分界符.

<body> <input type="text" name="Text" value="标签1"> <input type="password" name="Text"> <p id="id1"> hello P </p> <p id="id2" alex="sb"> hello P </p> <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $("input[type='text']").css("color","red"); //修改input,且类型是text的标签 $("p[id='id1']").text("修改id1的标题"); //修改标题,是p标签且id=id1的 $("input[name='Text']").val("修改成我"); //将标签中的value属性修改掉 $("p[alex='sb']").css("background","red"); //也可以自定义查找标签 </script> </body>

后代选择器: 该选择器常用于批量修改,匹配所有的后代,所有选中的DIV标签后代都会应用变化.

<body> <div class="MyClass"> <div class="div1"> hello div div1</div> <div class="div2"> <div class="divA">hello div A</div> <div class="divA">hello div B</div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(".MyClass div").css("background","green"); //修改指定.MyClass下的所有DIV标签 </script> </body>

子代选择器: 子代选择器常用于缩小查询范围,在匹配的父元素下,选择所有匹配的子元素.

<body> <div class="MyClass"> <div class="div1"> hello div div1</div> <div class="divA">hello div A</div> <div class="div2"> <div class="divA">hello div A</div> <div class="divA">hello div B</div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(".MyClass > .div2").css("background","green"); //修改.MyClass类里面的,div2的所有子元素 </script> </body>

相邻选择器: 在所有匹配的元素后选择同级别相邻元素,如下匹配所有跟在.outer后面的所有P标签,并设置成红色.

<body> <div class="outer"> <p class="outer"> hello p1</p> <p class="outer"> hello p2</p> <p class="outer"> hello p3</p> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(".outer + p").css("color","red"); //匹配所有.outer类中,第一个p标签相邻的元素. </script> </body>

兄弟选择器: 兄弟选择器就是在所有匹配的元素后选择同级的所有元素,如下匹配.outer类后面的所有同级DIV标签.

<body> <div class="outer"> hello div1</div> <div class="outer"> hello div2</div> <div class="outer"> hello div3</div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(".outer~div").css("color","red"); //将属于outer类中的所有同级DIV设置成红色. </script> </body>

JQuery 文档操作

Text(): 该函数常用于设置或者是读取标签里面的内容.

<body> <div class="MyDiv"> <div class="MyName"> hello lyshark </div> <div class="MyAge"> age:22 </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var temp = $(".MyDiv .MyName").text(); //查找指定的标签元素内容 document.write("获取到标签的内容: " + temp); $(".MyAge").text("hello world"); //修改指定的标签元素内容 </script> </body>

html(): 该函数常用于设置或者是读取标签内容,但是可以在设置标签内容的同时添加格式属性.

<body> <div class="MyDiv"> <div class="MyName"> hello lyshark </div> <div class="MyAge"> age:22 </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var temp = $(".MyDiv .MyName").html(); //查找指定的标签元素内容 document.write("获取到标签的内容: " + temp); $(".MyAge").html(" hell html "); //修改指定的标签元素内容 </script> </body>

val(): 用于获取或者是设置指定标签的value值.

<body> <div class="MyDiv"> <input type="text" name="MyText1" value="标签1"> <input type="text" name="MyText2" value="标签2"> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var data = $("input[name='MyText1']").val(); //定位并获取文本的value选项 document.write("获取到文本name属性的值: " + data); $("input[name='MyText2']").val("lyshark"); //修改文本的value属性为lyshark </script> </body>

append(): 给指定的标签添加内容,分别可以在开头插入$().prepend,结尾插入$().append等.

<body> <div class="MyDiv"> hello lyshark ---></div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(".MyDiv").append("结尾加入"); //在标签结尾插入新数据 $(".MyDiv").prepend("开头加入"); //在标签开头插入新输入 $(".MyDiv").prepend(" hello "); //开头插入带格式的文本 </script> </body>

appendTo(): 该函数可以实现将外部的标签插入到一个块级标签里面,动态添加元素.

<body> <div class="MyDiv"> <h1 id="Myh1"> hello h1</h1> </div> <p> hello p1</p> <p> hello p2</p> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $("p").appendTo("div"); //将p标签加入到div标签里面 $("p").appendTo("div"); $("div").prependTo("h1") </script> </body>

empty()/remove()：使用empty()可以清空标签中的内容,remove()用于彻底移除标签.

<body> <p class="p1"> hello p1</p> <p class="p2"> hello p2</p> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(".p1").empty(); $(".p2").empty(); //清空标签内的内容. $(".p2").remove(); //彻底移除标签. </script> </body>

before()/after(): 可以实现在指定标签的上方(.before)插入内容,或者下(.after)方插入内容.

<body> <div class="MyDiv"> <div class="div1"> hello div </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(".MyDiv div").before("
		
			before
		
") //在div上方插入内容 $(".MyDiv div").after("
		
			after
		
") //在div下方插入内容 </script> </body>

insertBefore()/insertAfter(): 在每个DIV标签前面(insertBefore)插入新标签,或者在后面(insertAfter)插入.

<body> <div class="MyDiv"> hello div</div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(" hello span ").insertBefore("div"); //在div前面插入span标签 $("
		
			hello h1
		
").insertAfter("div"); //在每个div标签后面插入h1 </script> </body>

replaceWith(): 查找与替换,将所有的类属性是class=".MyDiv"的标签替换成粗体的hello div.

<body> <div class="MyDiv"> hello div1 </div> <div class="MyDiv"> hello div2 </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(".MyDiv").replaceWith(" hello div "); //将所有div标签替换成粗体的hello div </script> </body>

clone: 克隆并追加一个DIV标签,追加到body页面中.

<body> <div class="MyDiv"> hello div1 </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $("body").append($("div").clone()); //克隆并追加到body中. $("body").append($("div").clone()); </script> </body>

JQuery 属性操作

attr(): 可实现获取和设置,指定标签的属性信息.

<body> <div class="MyDiv"> <input type="text" name="MyText1" value="标签1"> <input type="text" name="MyText2" value="标签2"> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var names = $("input[name='MyText2']").attr("name"); //获取MyText2标签的name字段内容 var types = $("input[type='text']").attr("type"); //获取Type标签的type字段内容 document.write("标签name字段内容: " + names + "
"); document.write("标签type字段内容: " + types + "
"); $("input[name='MyText2']").attr("name","lyshark"); //将MyText2标签的name字段修改成lyshark </script> </body>

removeAttr(): 找到指定的字段并可以自定义移除相关字段.

<body> <input type="text" name="MyText" value="标签1"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var data = $("input[name='MyText']").attr("value"); //找到value字段的内容 document.write("当前value值: " + data); $("input[name='MyText']").removeAttr("value"); //移除value字段的内容 </script> </body>

prop(): 设置标签的属性,常用于设置单选框和复选框.

<body> <input type="checkbox" name="check"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var data = $("input[name='check']").prop("checked"); //获取checkbox默认状态 document.write("选择框默认状态:" + data) $("input[name='check']").prop("checked",true); //设置checkbox为选中状态 $("input[name='check']").prop("disabled",true); //设置checkbox为禁用状态 </script> </body>

removeprop：删除由prop设置的属性集,(不明白)

<body> <input type="checkbox" name="check"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $("input[name='check']").prop("disabled",true); $("input[name='check']").removeProp(""); </script> </body>

addClass(): 动态的将一个CSS属性添加到一些标签中.

<head> <style type="text/css"> .mode{ background-color: #17a2b8; } </style> </head> <body> <div class="MyClass"> hello lyshark </div> <div class="MyClass"> hello lyshark </div> <script type="text/javascript"> $(".MyClass").addClass("mode"); //对所有的MyClass标签,添加mode的属性. </script> </body>

removeClass: 动态的将一个CSS属性在标签中删除.

<head> <style type="text/css"> .mode{ background-color: #17a2b8; } </style> </head> <body> <div class="mode"> hello lyshark </div> <div class="mode"> hello lyshark </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $("div").removeClass("mode"); //删除所有div标签中的mode类属性. </script> </body>

toggleClass: 实现了动态的切换类的样式.使标签不可见.

<style type="text/css"> .show{ background-color: #17a2b8; } .hidden{ display: none; } </style> </head> <body> <div class="mode"> hello lyshark </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $("div").toggleClass("hidden"); //切换成隐藏属性 </script> </body>

hasClass(): 该函数用来判断当前的样式,存在返回真,不存在返回假.

<style type="text/css"> .mode{ background: red; } </style> </head> <body> <div class="mode"> hello lyshark </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var data = $("div").hasClass("mode"); document.write(data) </script> </body>

JQuery 样式操作

修改CSS属性:

<body> <div class="MyClass1" style="background-color: rebeccapurple"> hello lyshark</div> <div class="MyClass2" style="font-size: 30px"> hello lyshark</div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(".MyClass1").css("background-color","red"); //修改MyClass1的背景属性 $(".MyClass2").css("font-size","10px"); //修改MyClass2的字体大小 </script> </body>

追加CSS属性:

<body> <div class="MyClass1"> hello lyshark</div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(".MyClass1").css({"background-color":"red","font-size":"20px"}); </script> </body>

过滤筛选器

first()/last(): first()筛选出所有li标签中第一个标签,last()筛选出所有标签中的最后一个标签.

<body> <div class="MyClass"> <ul> <li>首页</li> <li>主机</li> <li>系统</li> </ul> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var data = $("li:first").text(); //找出第一个标签的标签内容 document.write("第一个标签内容是:" + data + "
"); var data = $("li:last").text(); //找出最后一个标签的标签内容 document.write("最后一个标签内容是:" + data + "
"); $("li:last").remove(); //实现移除最后一个标签 $("li:last").append("
		
			添加
		
"); //实现添加一个新标签 </script> </body>

even()/odd(): even()筛选出所有li标签中偶数标签,odd()筛选出所有li标签中基数标签.

<body> <div class="MyClass"> <ul> <li>首页</li> <li>主机</li> <li>系统</li> <li>菜单</li> <li>搞事</li> </ul> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var data = $(".MyClass ul li:even").text(); document.write("基数标签为: " + data + "
"); var count = $(".MyClass ul li:even"); document.write("基数标签个数: " + count.length + "
"); var data = $(".MyClass ul li:odd").text(); document.write("偶数标签为: " + data + "
"); var count = $(".MyClass ul li:odd"); document.write("偶数标签个数: " + count.length); </script> </body>

eq(): 过滤出所有li标签中,索引是2的那个标签.

<body> <div class="MyClass"> <ul> <li>首页</li> <li>主机</li> <li>系统</li> <li>菜单</li> <li>搞事</li> </ul> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var data = $("li:eq(2)").text(); //所有li标签中,索引是2的标签 document.write("索引是2的标签内容是: " + data + "
"); var data = $("li:eq(0)").text(); //所有li标签中,索引是0的标签 document.write("索引是0的标签内容是: " + data + "
"); var data = $(".MyClass ul li").eq(4); //另一种写法,结果相同. document.write("索引是4的标签内容是: " + data.text() + "
"); </script> </body>

gt(): 所有li标签中，索引大于2的标签

<body> <div class="MyClass"> <ul> <li>首页</li> <li>主机</li> <li>系统</li> <li>菜单</li> <li>搞事</li> </ul> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var data = $("li:gt(2)").text(); //所有li标签中,索引大于2的标签 document.write("索引大于2的标签内容是: " + data + "
"); </script> </body>

lt(): 所有li标签中，索引小于3的标签

<body> <div class="MyClass"> <ul> <li>首页</li> <li>主机</li> <li>系统</li> <li>菜单</li> <li>搞事</li> </ul> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var data = $("li:lt(3)").text(); //所有li标签中,索引小于3的标签 document.write("索引小于3的标签内容是: " + data + "
"); </script> </body>

hasclass(): 检测li中的是否含有某个特定的类，有的话返回true

<body> <div class="MyClass"> <ul class="lyshark"> <li>首页</li> <li>主机</li> <li>系统</li> <li>菜单</li> <li>搞事</li> </ul> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var data = $(".MyClass ul").hasClass("lyshark"); document.write(data); </script> </body>

查找筛选器

children(): 获取指定标签的所有子标签,以下在类名为"MyForm"盒子里,找所有div子标签,并将其设置为绿色.

<body> <form class="MyForm"> <div class="Mydiv"> hello lyshark </div> <div class="Mydiv"> hello lyshark </div> <p> hello lyshark </p> </form> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(".MyForm").children(".Mydiv").css("color","green"); </script> </body>

parent(): 获取指定标签的所有父标签,以下代码找所有P标签的父标签,并设置成红色.

<body> <div class="Mydiv"> hello lyshark <p> hello p </p> <p> hello p </p> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var data = $("p").parent().css("color","red"); </script> </body>

next(): 寻找指定标签的下一个标签,以下代码根据第1个Mydiv1为条件寻找下一个div.

<body> <div class="Mydiv1"> <p> hello p </p> </div> <div class="Mydiv2"> <p> hello p </p> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $("div").next().css("background","red"); $(".Mydiv1").next().css("background","red"); </script> </body>

prev(): 寻找指定标签的上一个标签,以下代码根据第2个Mydiv2为条件寻找上一个div.

<body> <div class="Mydiv1"> <p> hello p </p> </div> <div class="Mydiv2"> <p> hello p </p> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(".Mydiv2").prev().css("background","red"); </script> </body>

siblings(): 查找标签的所有兄弟标签,查找所有的同辈标签.

<body> <div class="Mydiv1"> <div class="Min">hello div</div> </div> <div class="Mydiv2"> <div class="Min">hello div</div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(".Mydiv1").siblings().css("background","red"); </script> </body>

find(): 在form标签中找到text,password标签,并将其设置为绿色.

<body> <form class="forms" method="post"> <input type="text" value="用户名"> <input type="password" value="密码"> </form> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $("form").find(":text,:password").css({"color":"red","background":"green"}) </script> </body>

Jquery组合使用： jquery之间的命令是可以组合来使用的,常见的组合如下所示

<div id="profile_block"> 姓名： <a href="https://www.baidu.com">lyshark</a> <br> 年龄： <a href="https://www.baidu.com" title="入园时间：2018-09-28">20年2个月</a> <br> 粉丝： <a href="https://www.blib.cn">999</a> </div> $('#profile_block').find('a').eq(0).text("name"); $('#profile_block').find('a').eq(1).text("name"); $('#profile_block').find('a').eq(1).attr("title","更改指定列"); $("#profile_block").find("a").eq(1).after("
测试： 显示内容");

JQuery 事件处理

注册单次事件: one()方法是bind()方法的特例,由它绑定的事件在执行一次相应后就会失效.

<body> <p id="MyP"> </p> <input type="button" id="MyID" value="添加内容" /> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $("#MyID").one("click",function(){ $("p").append("hello lyshark"); //给P标签添加内容 }); </script> </body>

注册循环事件: bind()作为统一的接口,用来为每个匹配元素绑定事件处理程序.

<body> <input type="button" id="MyID1" value="无参数绑定" /> <input type="button" id="MyID2" value="带参数绑定" /> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $("#MyID1").bind("click",function(){ alert("绑定无参数的事件...") }); $("#MyID2").bind("click",{x:"参数1",y:"参数2"},function(event){ $(this).text(event.data.x + event.data.y); }); </script> </body>

绑定事件：

<html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#MyButton").click(function(){ $("p").slideToggle(); }); }); </script> </head> <body> <p>这是一个段落</p> <button type="button" id="MyButton" class="btn btn-primary">点我隐藏p标签</button> </body> </html>

绑定多个事件:

<body> <input type="button" id="MyID1" value="按钮1" /> <input type="button" id="MyID2" value="按钮2" /> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $("#MyID1,#MyID2").click(function(){ var currentId = $(this).attr("id"); //获取它的ID名称 if(currentId == "MyID1"){ //说明点击了按钮1 alert("您点击了按钮1"); }else if(currentId == "MyID2"){ //说明点击了按钮2 alert("您点击了按钮2"); } }); </script> </body>

表单数据提交:

<body> <div class="MyDIV"> 姓名: <input type="text" id="input1" /> 性别: <input type="text" id="input2" /> 年龄: <input type="text" id="input3" /> <input type="button" id="button1"> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $("#button1").click(function(){ var name = $(".MyDIV #input1").val(); //获取到元素值 var sex = $(".MyDIV #input2").val(); var age = $(".MyDIV #input3").val(); alert("姓名: " + name + "性别: " + sex + "年龄: " + age); }); </script> </body>

回调函数:

<head> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("button").click(function () { $("p").hide(1000,call_back()); }) }); function call_back() { alert("回掉函数使用...") } </script> </head> <body> <button>隐藏</button> <p>hello lyshark</p> </body>

JQuery 开发案例

标签克隆的两种实现方式:

<body> <div> <p> <a onclick="Add(this)">+</a> <input type="text"/> </p> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> function Add(ths) { var p = $(ths).parent().clone(); p.find('a').text('-'); p.find('a').attr('onclick','Remove(this)'); $(ths).parent().parent().append(p); } function Remove(ths) { $(ths).parent().remove(); } </script> </body>

<head> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script> function add(self){ // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加 var $clone_obj=$(self).parent().clone(); $clone_obj.children(":button").val("-").attr("onclick","removed(this)"); $(self).parent().parent().append($clone_obj); } function removed(self){ $(self).parent().remove() } </script> <body> <div class="outer"> <div class="item"> <input type="button" value="+" onclick="add(this);"> <input type="text"> </div> </div> </body>

实现记住密码:

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var strName = localStorage.getItem('keyName'); var strPass = localStorage.getItem('keyPass'); if(strName){ $('#user').val(strName); }if(strPass){ $('#pass').val(strPass); } if(strName!=null && strPass!=null) $('#remember').attr("checked",true); }); function login_click(){ var strName = $('#user').val(); var strPass = $('#pass').val(); if($('#remember').is(':checked')){ localStorage.setItem('keyName',strName); localStorage.setItem('keyPass',strPass); }else{ localStorage.removeItem('keyName',strName); localStorage.removeItem('keyPass'); } window.location.reload(); } </script> <body> <form action="/" method="post" onsubmit="return login_click();"> 账号: <input type="text" id="user" placeholder="用户名" name="username" /><br><br> 密码: <input type="password" id="pass" placeholder="密码" name="password" /><br><br> 记住密码: <input type="checkbox" id="remember"> <input type="submit" value="用户登录"/> </form> </body>

全选全不选与反选:

<head> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <script type="text/javascript"> function CheckAll(){ $('tbody input[type="checkbox"]').prop('checked',true); } function CancleAll(){ $('tbody input[type="checkbox"]').prop('checked',false); } function ReverseAll() { $('tbody input[type="checkbox"]').each(function () { if($(this).prop('checked')){ $(this).prop('checked',false); }else{ $(this).prop('checked',true); } }); } </script> <body> <table id="tab" border="1" cellspacing="0"> <thead> <tr> <th>选择</th><th>用户ID</th><th>用户名称</th><th>用户邮箱</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox"></td> <td name="uid"> 1001</td> <td name="user"> lyshark</td> <td name="email"> lyshark@123.com</td> </tr> <tr> <td> <input type="checkbox"></td> <td name="uid"> 1002</td> <td name="user"> admin</td> <td name="email"> admin@123.com</td> </tr> </tbody> </table> <input type="button" id="but1" value="全选" onclick="CheckAll()" /> <input type="button" id="but1" value="全不选" onclick="CancleAll()" /> <input type="button" id="but1" value="反选" onclick="ReverseAll()" /> </body>

提取选中表格指定字段: 选择框表单,通过选择不同表格读取表格中的数据.

<head> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <script type="text/javascript"> $(document).ready(function(){ $("#but1").click(function(){ var obj = $("#tab"); // 定位到table表格 // 在table中找input下类型为checkbox属性为选中状态的数据 var check = $("table input[type=checkbox]:checked"); check.each(function(){ // 遍历节点 var row = $(this).parent("td").parent("tr"); // 获取选中行 var id = row.find("[name='uid']").html(); // 取出第一行的属性 var name = row.find("[name='user']").html(); alert("选中行的ID: " + id + "名字: " + name) }); }); }); </script> <body> <table id="tab" border="1" cellspacing="0"> <thead> <tr> <th>选择</th><th>用户ID</th><th>用户名称</th><th>用户邮箱</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox"></td> <td name="uid"> 1001</td> <td name="user"> lyshark</td> <td name="email"> lyshark@123.com</td> </tr> <tr> <td> <input type="checkbox"></td> <td name="uid"> 1002</td> <td name="user"> admin</td> <td name="email"> admin@123.com</td> </tr> </tbody> </table> <input type="button" id="but1" value="选择" onclick="check()" /> </body>

表格行号的提取(1): 通过使用Jquery提取出指定表格中,指定行号,以及标签中的数据.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function() { $("#table tbody>tr").click(function() { var trSeq = $(this).parent().find("tr").index($(this)[0]); // 获取到行号 var text = $(this).find("td:eq(0)").text(); // 可以取出当前td标签里面的内容 var input_val = $("#table tbody>tr").eq(trSeq).find("input[name='number']").val(); console.log(text) alert("当前行号为: " + (trSeq + 1) + ",   " + "且其name为number的值为: " + input_val); }); }); </script> <div> <table id="table" border="1" cellspacing="0"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>暂住地</th> </tr> </thead> <tbody> <tr> <td>hello</td> <td>网格</td> <td>男</td> <td>杭州</td> </tr> <tr> <td><input type="text" name="number" value="333456"></td> <td>王2</td> <td>男</td> <td>杭州</td> </tr> </tbody> </table> </div> 表格行号的提取: 通过使用Jquery提取出指定表格中,指定行号,以及标签中的数据. <html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> </head> <body> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script type="text/javascript"> $(function(){ $("#tab").on("click", ":button", function(event){ var id = $(this).closest("tr").find("td").eq(0).text(); var name = $(this).closest("tr").find("td").eq(1).text(); alert("ID:" + id + "Name:" + name); }); }); </script> <table border="1" id="tab"> <thead> <tr><td>编号</td><td>姓名</td><td>操作</td></tr> </thead> <tbody> <tr> <td>1</td> <td>lyshark</td> <td><input type="button" value="删除" /></td> </tr> <tr> <td>2</td> <td>admin</td> <td><input type="button" value="删除" /></td> </tr> </tbody> </table> </body> </html>

表格行号的提取(2): 通过使用Jquery提取出指定表格中,指定行号,以及标签中的数据.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function() { $("#table tbody>tr").click(function() { var trSeq = $(this).parent().find("tr").index($(this)[0]); // 获取到行号 var text = $(this).find("td:eq(0)").text(); // 可以取出当前td标签里面的内容 var input_val = $("#table tbody>tr").eq(trSeq).find("input[name='number']").val(); console.log(text) alert("当前行号为: " + (trSeq + 1) + ",   " + "且其name为number的值为: " + input_val); }); }); </script> <div> <table id="table" border="1" cellspacing="0"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>暂住地</th> </tr> </thead> <tbody> <tr> <td>hello</td> <td>网格</td> <td>男</td> <td>杭州</td> </tr> <tr> <td><input type="text" name="number" value="333456"></td> <td>王2</td> <td>男</td> <td>杭州</td> </tr> </tbody> </table> </div>

返回顶部的实现方式:

<head> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script> window.onscroll=function(){ var current=$(window).scrollTop(); console.log(current) if (current>100) { $(".returnTop").removeClass("hide") } else { $(".returnTop").addClass("hide") } } function returnTop(){ $(window).scrollTop(0) } </script> <style> .returnTop{ height: 60px; width: 100px; background-color: darkgray; position: fixed; right: 0; bottom: 0; color: greenyellow; line-height: 60px; text-align: center; } .hide{ display: none; } </style> </head> <body> <p>hello</p> <p>hello</p> <p>hello</p> <p>请手动添加更多标签来测试.</p> <div class="returnTop hide" onclick="returnTop();">返回顶部</div> </body> </html>

二级联动菜单(纵向)的实现:

<head> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <style> .menu{ height: 500px; width: 10%; background-color: gainsboro; float: left; } .title{ background-color: #425a66; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="con"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title">菜单二</div> <div class="con hide"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="con hide"> <div>111</div> <div>111</div> <div>111</div> </div> </div> </div> </div> <script> $(".item .title").click(function () { $(this).next().removeClass("hide") $(this).parent().siblings().children(".con").addClass("hide"); }) </script> </body>

联动菜单(横向)的实现:

<head> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script> function tab(self){ var index=$(self).attr("item"); $("#"+index).removeClass("hide").siblings().addClass("hide"); $(self).addClass("current").siblings().removeClass("current"); } </script> <style> .tab_outer{ margin: 0px auto; width: 60%; } .menu{ background-color: #cccccc; line-height: 40px; } .menu li{ display: inline-block; } .menu a{ border-right: 1px solid red; padding: 11px; } .content{ background-color: tan; border: 1px solid green; height: 300px; } .hide{ display: none; } .current{ background-color: darkgray; color: yellow; border-top: solid 2px rebeccapurple; } </style> </head> <body> <div class="tab_outer"> <ul class="menu"> <li item="c1" class="current" onclick="tab(this);">菜单一</li> <li item="c2" onclick="tab(this);">菜单二</li> <li item="c3" onclick="tab(this);">菜单三</li> </ul> <div class="content"> <div id="c1">内容一</div> <div id="c2" class="hide">内容二</div> <div id="c3" class="hide">内容三</div> </div> </div> </body>

弹出式模态对话框:

<head> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script> function action1(self){ $(self).parent().siblings().removeClass("hide"); } function action2(self){ //$(self).parent().parent().children(".models,.shade").addClass("hide") $(self).parent().addClass("hide").prev().addClass("hide"); } </script> <style> .back{ background-color: rebeccapurple; height: 2000px; } .shade{ position: fixed; top: 0; bottom: 0; left:0; right: 0; background-color: coral; opacity: 0.4; } .hide{ display: none; } .models{ position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; width: 200px; background-color: gold; } </style> </head> <body> <div class="back"> <input id="ID1" type="button" value="弹出" onclick="action1(this)"> </div> <div class="shade hide"></div> <div class="models hide"> <input type="text"> <input id="ID2" type="button" value="取消" onclick="action2(this)"> </div> </body>

拖动面板的实现:

<head> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script> $(function(){ // 页面加载完成之后自动执行 $('#title').mouseover(function(){ $(this).css('cursor','move'); }).mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; // 原始鼠标横纵坐标位置 var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $(this).bind('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }).mouseup(function(){ $(this).unbind('mousemove'); }); }) </script> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;color: white;">标题</div> <div style="height: 300px;">主体内容</div> </div> </body>

显示隐藏与切换按钮:

<head> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script> $(document).ready(function() { $("#hide").click(function () { $("p").hide(1000); }); $("#show").click(function () { $("p").show(1000); }); //用于切换被选元素的 hide() 与 show() 方法。 $("#toggle").click(function () { $("p").toggle(); }); }) </script> </head> <body> <p>hello</p> <button id="hide">隐藏</button> <button id="show">显示</button> <button id="toggle">切换</button> </body>

页面标签隐藏:

<head> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <body> <button>hide</button> <p>helloworld helloworld helloworld</p> <script> $("button").click(function(){ $("p").hide(1000,function(){ alert($(this).html()) }) }) </script> </body>

图片放大镜的实现:

<head> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script> $(function(){ $(".small_box").mouseover(function(){ $(".float").css("display","block"); $(".big_box").css("display","block") }); $(".small_box").mouseout(function(){ $(".float").css("display","none"); $(".big_box").css("display","none") }); $(".small_box").mousemove(function(e){ var _event=e || window.event; var float_width=$(".float").width(); var float_height=$(".float").height(); console.log(float_height,float_width); var float_height_half=float_height/2; var float_width_half=float_width/2; console.log(float_height_half,float_width_half); var small_box_width=$(".small_box").height(); var small_box_height=$(".small_box").width(); //  鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理 var mouse_left=_event.clientX-float_width_half; var mouse_top=_event.clientY-float_height_half; if(mouse_left<0){ mouse_left=0 }else if (mouse_left>small_box_width-float_width){ mouse_left=small_box_width-float_width } if(mouse_top<0){ mouse_top=0 }else if (mouse_top>small_box_height-float_height){ mouse_top=small_box_height-float_height } $(".float").css("left",mouse_left+"px"); $(".float").css("top",mouse_top+"px") var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width); var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height); console.log(percentX,percentY) $(".big_box img").css("left", -percentX*mouse_left+"px") $(".big_box img").css("top", -percentY*mouse_top+"px") }) }) </script> <style> *{ margin: 0; padding:0; } .outer{ height: 350px; width: 350px; border: dashed 5px cornflowerblue; } .outer .small_box{ position: relative; } .outer .small_box .float{ height: 175px; width: 175px; background-color: darkgray; opacity: 0.4; fill-opacity: 0.4; position: absolute; display: none; } .outer .big_box{ height: 400px; width: 400px; overflow: hidden; position:absolute; left: 360px; top: 0px; z-index: 1; border: 5px solid rebeccapurple; display: none; } .outer .big_box img{ position: absolute; z-index: 5; } </style> </head> <body> <div class="outer"> <div class="small_box"> <div class="float"></div> <img src="small.jpg"> </div> <div class="big_box"> <img src="big.jpg"> </div> </div> </body>

JQuery操作表格的各种办法:

<head> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <style type="text/css"> .on {background-color:#ddd} </style> </head> <body style="text-align:center"><div class="m-1"></div> <h3>jquery操作table的各种方法</h3><div class="m-2"></div> <table id="aijquery" border="1" cellpadding="7" cellspacing="0" align="center"> <tr><td>测试1.1</td><td>测试1.2</td><td>测试1.3</td><td>测试1.4</td><td>测试1.5</td><td>测试1.6</td></tr> <tr><td>测试2.1</td><td>测试2.2</td><td>测试2.3</td><td>测试2.4</td><td>测试2.5</td><td>测试2.6</td></tr> <tr><td>测试3.1</td><td>测试3.2</td><td>测试3.3</td><td>测试3.4</td><td>测试3.5</td><td>测试3.6</td></tr> <tr><td>测试4.1</td><td>测试4.2</td><td>测试4.3</td><td>测试4.4</td><td>测试4.5</td><td>测试4.6</td></tr> <tr><td>测试5.1</td><td>测试5.2</td><td>测试5.3</td><td>测试5.4</td><td>测试5.5</td><td>测试5.6</td></tr> </table><div class="m-2"></div> <button id="huanse">鼠标经过时换色</button> <button id="jiou">奇偶行不同颜色</button> <button id="addtr">插入一行</button> <button id="addtd">插入一列</button><div class="m-1"></div> <button id="hidetr">隐藏/显示第三行</button> <button id="hidetd">隐藏/显示第三列</button> <div class="m-1"></div> <button id="deltr">删除第四行</button> <button id="deltd">删除第五列</button> <button id="deltrt">删除第二行外所有行</button> <button id="deltrd">删除第2到第4行</button> <div class="m-1"></div> <button id="deltrs">只留前三行</button> <button id="deltrf">只留第二到第四行</button> <div class="m-1"></div> <button id="readtd">读取第三行第四列的值</button> <button id="readtdt">读取第三列所有值</button> <button id="readtr">读取第三行所有值</button> <script language="javascript"> //鼠标经过换色 $("#huanse").on("click",function(){ $("#aijquery tr").hover(function(){$(this).children("td").addClass("on");},function(){$(this).children("td").removeClass("on")}); }); //奇偶行不同颜色 $("#jiou").on("click",function(){ //偶数行 奇数行的话 odd改为even $("#aijquery tr:odd").find("td").css("background-color","#e7ffff"); }); //插入一行 $("#addtr").on("click",function(){ //在表格的末尾添加一行 //$("#aijquery").append('newnewnewnewnewnew'); //在表格的开头添加一行 //$("#aijquery").prepend('newnewnewnewnewnew'); //在表格的第二行后面插入一行 $("#aijquery tr").eq(1).after('newnewnewnewnewnew'); }); //插入一列 $("#addtd").on("click",function(){ //在表格的末尾添加一列 //$("#aijquery tr").append('newTD'); //在表格的开头添加一列 //$("#aijquery tr").prepend('newTD'); //在表格的第二列后添加一列 $("#aijquery tr td:nth-child(2)").after('newTD'); }); //隐藏/显示第三行 $("#hidetr").on("click",function(){ $("#aijquery tr").eq(2).toggle(); }); //隐藏/显示第三列 $("#hidetd").on("click",function(){ //第一种方法 //$("#aijquery tr td:nth-child(3)").toggle(); //第二种方法 $("#aijquery tr").each(function(){ //$(this).find("td").eq(2).toggle(); $("td",$(this)).eq(2).toggle(); }); }); //删除第四行 $("#deltr").on("click",function(){ $("#aijquery tr").eq(3).remove(); }); //删除第五列 $("#deltd").on("click",function(){ $("#aijquery tr td:nth-child(5)").remove(); }); //删除第二行外所有行 $("#deltrt").on("click",function(){ $("#aijquery tr:not(:eq(1))").remove(); }); //只留前三行 $("#deltrs").on("click",function(){ $("#aijquery tr:gt(2)").remove(); }); //删除第2到第4行 $("#deltrd").on("click",function(){ $("#aijquery tr").slice(1,4).remove(); }); //只留第二到第四行 $("#deltrf").on("click",function(){ $("#aijquery tr").not($("#aijquery tr").slice(1,4)).remove(); }); //读取第三行第四列的值 $("#readtd").on("click",function(){ var v=$("#aijquery tr:eq(2) td:eq(3)").html(); alert(v); }); //读取第三列所有值 $("#readtdt").on("click",function(){ var arr=[]; $("#aijquery tr").each(function(){ arr.push($(this).find("td").eq(2).html()); }); alert(arr.join(",")); }); //读取第三行所有值 $("#readtr").on("click",function(){ var arr=[]; $("#aijquery tr:eq(2) td").each(function(){ arr.push($(this).html()); }); alert(arr.join(",")); }); </script> </body> </html>