jQuery
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。
一、介绍
jQuery是一个快速、简洁的javascript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化html文档操作、事件处理、动画设计和Ajax交互。
http://jquery.cuishifeng.cn/
集成了JavaScript、DOM、BOM的类库
版本：1.x 2.x 3.x
jQuery与DOM直接相互转换
jQuery对象[0] => DOM对象
DOM对象 => $(DOM对象)
二、查找元素
1.选择器，直接找到某个或某类标签
1 $("#id") //根据ID查找 2 $(".c1") //根据className查找 3 $("a") //根据标签查找 4 $("a,.c2") //组合查找 5 $("#i10 a") //层级查找，子子孙孙 6 $("#i10>a") //层级查找，儿子
2.基本筛选器
1 $("#id10>a:first") //儿子的第一个 2 $("#id10>a:last") //儿子的最后一个 3 $("#id10>a:eq(0)") //0为索引，从0开始
3.属性
1 $("[alex]") //具有alex属性的标签 2 $("[alex=‘123‘]") //alex属性等于123的标签
4.筛选
1 $(this).next() //下一个 2 $(this).prev() //上一个 3 $(this).parent() //父 4 $(this).children() //孩子 5 $("#i1").siblings() //除了自己的所有兄弟 6 $("#i1").find("#i1") //子子孙孙中查找
三、操作元素
1.文本操作
1 $(..).text() //获取文本内容 2 $(..).text("ddd") //设置文本内容 3 $(..).html() 4 $(..).html("...") 5 $(..).val() //获取值 6 $(..).val("...") //设置值
2.样式操作
1 addClass("...") //添加样式 2 removeClass("...") //删除样式 3 toggleClass("...") //判断样式是否存在，存在删除，不存在添加
3.属性操作
1 $(..).attr(参数1) //获取属性 2 $(..).attr(参数1，参数2) //设置属性 3 $(..).removeAttr() //删除属性 4 $(..).prop() //专门用于checkbox、radio
4.文档处理
1 append //向每个匹配的元素内部追加内容 2 prepend //向每个匹配的元素内部前置内容 3 after //在每个匹配的元素之后插入内容 4 before //在每个匹配的元素之前插入内容 5 6 remove //从DOM中删除所有匹配的元素 7 empty //删除匹配的元素集合中所有的子节点 8 9 clone //克隆匹配的DOM元素并且选中这些克隆的副本
5.样式处理
1 $("#t1").css("样式名称", "样式值")
6.位置
1 scrollTop() 2 scrollLeft() 3 $(window).scrollTop() //获取 4 $(window).scrollTop(0) //设置 5 offset().left //指定标签在HTML中的坐标 6 offset().top //指定标签在HTML中的坐标
7.事件
1 //第一种 2 $(".c1").click() 3 4 //第二种 5 $(".c1").bind("click",function(){ 6 7 }) 8 $(".c1").unbind("click",function(){ 9 10 }) 11 12 //此种方法只有当触发事件才绑定 13 $(".c1").delegate("a", "click", function(){ 14 15 }) 16 $(".c1").undelegate("a", "click", function(){ 17 18 }) 19 20 //第三种 21 $(".c1").on("click", function(){ 22 23 }) 24 $(".c1").off("click", function(){ 25 26 })
阻止事件发生：
return false
当页面框架加载完毕后，自动执行
$(function(){
})
8.扩展
$.extend $.方法
$.fn.extend $("i1").方法
1 //自执行函数 2 (function(arg){ 3 var status = 1; 4 //封装变量 5 arg.extend({ 6 "wangsen": function(){ 7 return "sb"; 8 } 9 }); 10 })(jQuery);
9.循环
jQuery方法内置循环
1 $(":checkbox").each(function(){ 2 // k当前索引 3 // this,DOM对象，当前循环的元素$(this) 4 });
10.三元运算
var v = 条件？真值：假值
四、示例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <input id="i1" type="button" value="全选"/> 9 <input id="i2" type="button" value="反选"/> 10 <input id="i3" type="button" value="取消"/> 11 <table border="1"> 12 <thead> 13 <tr> 14 <th>选项</th> 15 <th>IP</th> 16 <th>端口</th> 17 </tr> 18 </thead> 19 <tbody> 20 <tr> 21 <td><input type="checkbox" /></td> 22 <td>1.1.1.1</td> 23 <td>80</td> 24 </tr> 25 <tr> 26 <td><input type="checkbox" /></td> 27 <td>1.1.1.1</td> 28 <td>80</td> 29 </tr> 30 <tr> 31 <td><input type="checkbox" /></td> 32 <td>1.1.1.1</td> 33 <td>80</td> 34 </tr> 35 <tr> 36 <td><input type="checkbox" /></td> 37 <td>1.1.1.1</td> 38 <td>80</td> 39 </tr> 40 <tr> 41 <td><input type="checkbox" /></td> 42 <td>1.1.1.1</td> 43 <td>80</td> 44 </tr> 45 </tbody> 46 </table> 47 <script src="../jquery/jquery-1.12.4.js"></script> 48 <script> 49 $("#i1").click(function () { 50 $(":checkbox").prop("checked", true); 51 }); 52 $("#i2").click(function () { 53 $(":checkbox").each(function () { 54 var v = $(this).prop("checked")?false:true; 55 $(this).prop("checked", v); 56 }); 57 }); 58 $("#i3").click(function () { 59 $(":checkbox").prop("checked", false); 60 }); 61 </script> 62 </body> 63 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .header{ 8 background-color: black; 9 color: white; 10 } 11 .content{ 12 min-height: 50px; 13 } 14 .hide{ 15 display: none; 16 } 17 </style> 18 </head> 19 <body> 20 <div style="height: 400px;width: 200px;border: 1px solid #dddddd"> 21 <div class="item"> 22 <div class="header">标题1</div> 23 <div id="i1" class="content">内容</div> 24 </div> 25 <div class="item"> 26 <div class="header">标题2</div> 27 <div class="content hide">内容</div> 28 </div> 29 <div class="item"> 30 <div class="header">标题3</div> 31 <div class="content hide">内容</div> 32 </div> 33 </div> 34 <script src="../jquery/jquery-1.12.4.js"></script> 35 <script> 36 $(".header").click(function () { 37 $(this).next().removeClass("hide").parent().siblings().find(".content").addClass("hide"); 38 }); 39 </script> 40 </body> 41 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .modal{ 11 position: fixed; 12 top: 50%; 13 left: 50%; 14 width: 500px; 15 height: 400px; 16 margin-top: -250px; 17 margin-left: -250px; 18 background-color: #dddddd; 19 z-index: 10; 20 } 21 .shadow{ 22 position: fixed; 23 top: 0; 24 right: 0; 25 bottom: 0; 26 left: 0; 27 opacity: 0.6; 28 background-color: #000000; 29 z-index: 9; 30 } 31 </style> 32 </head> 33 <body> 34 <a id="a1">添加</a> 35 <table border="1" id="tb"> 36 <tr> 37 <td target="hostname">1.1.1.11</td> 38 <td target="port">80</td> 39 <td> 40 <a class="edit">编辑</a> | <a class="del">删除</a> 41 </td> 42 </tr> 43 <tr> 44 <td target="hostname">1.1.1.12</td> 45 <td target="port">80</td> 46 <td> 47 <a class="edit">编辑</a> | <a class="del">删除</a> 48 </td> 49 </tr> 50 <tr> 51 <td target="hostname">1.1.1.13</td> 52 <td target="port">80</td> 53 <td> 54 <a class="edit">编辑</a> | <a class="del">删除</a> 55 </td> 56 </tr> 57 </table> 58 <div class="modal hide"> 59 <div> 60 <input type="text" name="hostname"/> 61 <input type="text" name="port"/> 62 </div> 63 <div> 64 <input type="button" value="确定"> 65 <input type="button" value="取消"> 66 </div> 67 </div> 68 <div class="shadow hide"></div> 69 <script src="../jquery/jquery-1.12.4.js"></script> 70 <script> 71 $("#a1").click(function () { 72 $(".modal").removeClass("hide"); 73 $(".shadow").removeClass("hide"); 74 }); 75 $(".modal input[value=‘取消‘]").click(function () { 76 $(".modal, .shadow").addClass("hide"); 77 $(".modal input[type=‘text‘]").val(""); 78 }); 79 $(".del").click(function () { 80 $(this).parent().parent().remove(); 81 }); 82 $(".edit").click(function () { 83 var tds = $(this).parent().prevAll(); 84 tds.each(function () { 85 var n = $(this).attr("target"); 86 var text = $(this).text(); 87 var a1 = ‘.modal input[name="‘; 88 var a2 = ‘"]‘; 89 var temp = a1 + n + a2; 90 $(temp).val(text); 91 }); 92 $(".modal").removeClass("hide"); 93 $(".shadow").removeClass("hide"); 94 }); 95 </script> 96 </body> 97 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .menu{ 8 height: 38px; 9 background-color: #dddddd; 10 line-height: 38px; 11 } 12 .menu .menu-item{ 13 float: left; 14 border-right: 1px solid red; 15 padding: 0 5px; 16 cursor: pointer; 17 } 18 .content{ 19 min-height: 100px; 20 border: 1px solid #eeeeee; 21 } 22 .hide{ 23 display: none; 24 } 25 .active{ 26 background-color: brown; 27 } 28 </style> 29 </head> 30 <body> 31 <div style="width: 700px;margin: 0 auto"> 32 <div class="menu"> 33 <div class="menu-item active" a="1">菜单一</div> 34 <div class="menu-item" a="2">菜单二</div> 35 <div class="menu-item" a="3">菜单三</div> 36 </div> 37 <div class="content"> 38 <div b="1">内容一</div> 39 <div class="hide" b="2">内容二</div> 40 <div class="hide" b="3">内容三</div> 41 </div> 42 </div> 43 <script src="../jquery/jquery-1.12.4.js"></script> 44 <script> 45 $(".menu-item").click(function () { 46 $(this).addClass("active").siblings().removeClass("active"); 47 var v = $(this).index(); 48 $(".content").children().eq(v).removeClass("hide").siblings().addClass("hide"); 49 }); 50 </script> 51 </body> 52 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .container{ 8 padding: 50px; 9 border: 1px solid #dddddd; 10 } 11 .item{ 12 width: 30px; 13 position: relative; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="container"> 19 <div class="item"> 20 <span>赞</span> 21 </div> 22 </div> 23 <div class="container"> 24 <div class="item"> 25 <span>赞</span> 26 </div> 27 </div> 28 <div class="container"> 29 <div class="item"> 30 <span>赞</span> 31 </div> 32 </div> 33 <div class="container"> 34 <div class="item"> 35 <span>赞</span> 36 </div> 37 </div> 38 <script src="jquery-1.12.4.js"></script> 39 <script> 40 $(".item").click(function () { 41 addFavor(this); 42 }) 43 function addFavor(self) { 44 // DOM对象 45 var fontSize = 15; 46 var top = 0; 47 var right = 0; 48 var opacity = 1; 49 var tag = document.createElement("span"); 50 $(tag).text("+1"); 51 $(tag).css("color", "green"); 52 $(tag).css("position", "absolute"); 53 $(tag).css("fontSize", fontSize + "px"); 54 $(tag).css("top", top + "px"); 55 $(tag).css("right", right + "px"); 56 $(tag).css("opacity", opacity); 57 $(self).append(tag); 58 59 var obj = setInterval(function () { 60 fontSize += 5; 61 top -= 5; 62 right -= 5; 63 opacity -= 0.1; 64 $(tag).css("fontSize", fontSize + "px"); 65 $(tag).css("top", top + "px"); 66 $(tag).css("right", right + "px"); 67 $(tag).css("opacity", opacity); 68 if(opacity < 0){ 69 clearInterval(obj); 70 $(tag).remove(); 71 } 72 }, 100); 73 74 } 75 </script> 76 </body> 77 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .error{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <form id="f1" action="http://127.0.0.1" method="POST"> 14 <div><input name="n1" type="text"/></div> 15 <div><input name="n2" type="password"/></div> 16 <div><input name="n3" type="text"/></div> 17 <div><input name="n4" type="text"/></div> 18 <div><input name="n5" type="text"/></div> 19 <input type="submit" value="提交"/> 20 </form> 21 <script src="jquery-1.12.4.js"></script> 22 <script> 23 // $(":submit").click(function () { 24 // var v = $(this).prev().val(); 25 // if(v.length > 0){ 26 // return true; 27 // }else{ 28 // alert("请输入内容"); 29 // return false; 30 // } 31 // }); 32 $(":submit").click(function () { 33 $(".error").remove(); 34 35 var flag = true; 36 $("#f1").find("input[type=‘text‘], input[type=‘password‘]").each(function () { 37 var v = $(this).val(); 38 if(v.length <= 0){ 39 flag = false; 40 var tag = document.createElement("span"); 41 tag.className = "error"; 42 tag.innerHTML = "必填"; 43 $(this).after(tag); 44 // return false; 45 } 46 }); 47 return flag; 48 }); 49 </script> 50 </body> 51 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form id="f1" action="https://www.baidu.com" method="GET"> 9 <p>用户名： 10 <input type="text" name="username" placeholder="请输入用户名" require="true" /> 11 </p> 12 <p>密 码： 13 <input type="password" placeholder="请输入密码" name="password" require="true" min-len="6" max-len="18"/> 14 </p> 15 <p>手机号： 16 <input type="text" placeholder="请输入手机号" name="phone" require="true" phone="true" /> 17 </p> 18 <input type="submit" value="登录"/> 19 </form> 20 21 <script src="jquery-1.12.4.js"></script> 22 <script> 23 $(function () { 24 checkValidate(); 25 }); 26 function checkValidate() { 27 $("#f1").find(":submit").click(function () { 28 $("#f1").find("span").remove(); 29 var flag = true; 30 $("#f1").find(":text, :password").each(function () { 31 // this表示input标签，每次执行都是一个标签，如果某个标签的某一项不满足，跳到下一个标签 32 var value = $(this).val(); 33 var require = $(this).attr("require"); 34 if(require){ 35 if(value.length == 0){ 36 var n = $(this).attr("name"); 37 var errorTag = document.createElement("span"); 38 errorTag.innerHTML = n + "输入不能为空"; 39 $(this).after(errorTag); 40 flag = false; 41 return false; 42 } 43 } 44 45 var minLen = $(this).attr("min-len"); 46 if(minLen){ 47 var valueLen = value.length; 48 var minLen = parseInt(minLen); 49 if(valueLen < minLen){ 50 var n = $(this).attr("name"); 51 var errorTag = document.createElement("span"); 52 errorTag.innerHTML = n + "太短了"; 53 $(this).after(errorTag); 54 flag = false; 55 return false; 56 } 57 } 58 59 var maxLen = $(this).attr("max-len"); 60 if(maxLen){ 61 var valueLen = value.length; 62 var maxLen = parseInt(maxLen); 63 if(valueLen > maxLen){ 64 var n = $(this).attr("name"); 65 var errorTag = document.createElement("span"); 66 errorTag.innerHTML = n + "太长了"; 67 $(this).after(errorTag); 68 flag = false; 69 return false; 70 } 71 } 72 73 var phone = $(this).attr("phone"); 74 if(phone){ 75 var re = /^\d{11}$/; 76 if(!re.test(value)){ 77 var n = $(this).attr("name"); 78 var errorTag = document.createElement(‘span‘); 79 errorTag.innerHTML = n + ‘格式错误‘; 80 $(this).after(errorTag); 81 flag = false; 82 return false; 83 } 84 } 85 }); 86 return flag; 87 }); 88 } 89 </script> 90 </body> 91 </html>
以上是关于jQuery的主要内容，如果未能解决你的问题，请参考以下文章
markdown 在WordPress中使用jQuery代码片段