JQuery
1. JQuery
JQuery:javascript代码库，作用：更少的代码做更多的事情，将js代码和Html分离
JQ开发的步骤：
1. 导入JQ相关的文件
2. 文档加载完成事件：$(function(){}):页面初始化的操作:绑定事件，启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面操作相关的函数
案例：JQ入门
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq入门</title> <script type = "text/javascript" src = "../js/jquery-1.11.0.js" ></script> <script> // js文档加载完成的事件 window.onload = function(){ alert("window.onload 111"); } // 再写一次将会弹出新的内容 // 文档加载完成的事件 jQuery(document).ready(function(){ alert("文档加载完成以后弹出"); }); // 再写一次又会弹出一个，这个也会保留 /* 1. 可以将jQuery简写成$ jQuery(document).ready(function(){ alert("文档加载完成以后弹出"); }); 2. 最简单的写法 $(function(){ alert("文档加载完成以后弹出"); }); */ </script> </head> <body> </body> </html>
案例：JQ与JS之间的转换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type = "text/javascript" src = "../js/jquery-1.11.0.js"></script> <script> function changeJS(){ var div = document.getElementById("div1"); $(div).html("JS成功修改了内容"); // div.innerHTML = "JS成功修改了内容"; } $(function(){ $("#btn2").click(function(){ var $div = $("#div1"); // $("#div1").html("JQ成功修改了内容"); var jsDiv = $div[0]; // var jsDiv = $div.get(0); jsDiv.innerHTML = "JQ成功修改了内容"; }); }); </script> </head> <body> <input type = "button" value = "JS修改div内容" onclick = "changeJS()" /> <input type = "button" value = "JQ修改div内容" id = "btn2" /> <div id = "div1"> 这里的内容会被js/jq的代码修改 </div> </body> </html>
案例：JQ的动画效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ动画效果</title> <script type = "text/javascript" src = "../js/jquery-1.11.0.js"></script> <script> $(function(){ $("#but1").click(function(){ // $("#img1").show("normal"); // $("#img1").slideDown(500); // 向下弹出 // $("#img1").fadeIn(2000); // 淡入 $("#img1").animate({width:"800px", opacity:"1"}, 2000); // 1是完全显示 }); $("#but2").click(function(){ // $("#img1").hide("normal"); // $("#img1").slideUp(500); // $("#img1").fadeOut(2000); // 淡出 $("#img1").animate({width:"100px", opacity:"0.2"}, 2000); }); }); </script> </head> <body> <input type = "button" value = "显示" id = "but1" /> <br /> <input type = "button" value = "隐藏" id = "but2" /> <br /> <img src = "../img/333.png" id = "img1" width = "500px" /> </body> </html>
JQ定时弹出广告
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定时弹出广告</title> <script type = "text/javascript" src = "../js/jquery-1.11.0.js"></script> <script> function showAd(){ $("#img1").slideDown(); setTimeout("hideAd()", 3000); } function hideAd(){ $("#img1").slideUp(); setTimeout("showAd()", 3000); } $(function(){ setTimeout("showAd()", 1000); }); </script> </head> <body> <img src = "../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id = "img1" width = "100%" style = "display: none" /> <img src = "../img/333.png" width = "60%" style = "margin-left: 20%" /> </body> </html>
2. JQ中的选择器
基本选择器：
ID选择器: #ID的名称
类选择器: 以.开头, .类名
元素选择器: 标签的名称
通配符选择器: *
选择器,选择器: 选择器1,选择器2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ的选择器</title> <link rel = "stylesheet" href = "../css/style.css" /> <script type = "text/javascript" src = "../js/jquery-1.11.0.js"></script> <script> $(function(){ // 初始化操作，给按钮绑定事件 $("#but1").click(function(){ $("#two").css("background-color", "red"); }); $("#but2").click(function(){ $(".mini").css("background-color", "pink"); }); $("#but3").click(function(){ $("div").css("background-color", "white"); }); $("#but4").click(function(){ $("*").css("background-color", "palegreen"); }); $("#but5").click(function(){ $(".mini,span").css("background-color", "green"); }); }); </script> </head> <body> <input type = "button" id = "but1" value = "找出ID为two的元素" /> <br /> <input type = "button" id = "but2" value = "找出mini类的所有元素" /> <br /> <input type = "button" id = "but3" value = "找出所有div的元素" /> <br /> <input type = "button" id = "but4" value = "通配符选择器" /> <br /> <input type = "button" id = "but5" value = "选择器分组" /> <br /> <div id = "one"> <div class = "mini"> 1-1 </div> </div> <div id = "two"> <div class = "mini">2-1</div> <div class = "mini">2-2</div> </div> <div id = "three"> <div class = "mini">3-1</div> <div class = "mini">3-2</div> <div class = "mini">3-3</div> </div> <span id = "four">span</span> </body> </html>
层级选择器：
子选择器：选择器1 > 选择器2
后代选择器: 选择器1 儿
相邻兄弟选择器：选择器1 + 选择器2，找出紧挨的一个弟弟
找出所有的弟弟：选择器1 ~ 选择器2，找出所有的弟弟
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层级选择器</title> <link rel = "stylesheet" href = "../css/style.css" /> <script type = "text/javascript" src = "../js/jquery-1.11.0.js"></script> <script> $(function(){ // 初始化操作，给按钮绑定事件 $("#but1").click(function(){ $("body > div").css("background-color", "red"); }); $("#but2").click(function(){ $("body div").css("background-color", "green"); }); $("#but3").click(function(){ $("#two + div").css("background-color", "blue"); }); $("#but4").click(function(){ $("#one ~ div").css("background-color", "white"); }); // 过滤器 $("#but5").click(function(){ $("div:first").css("background-color", "pink"); // div的:后不能有空格 }); $("#but6").click(function(){ $("div:even").css("background-color", "palegreen"); // div的:后不能有空格 }); }); </script> </head> <body> <input type = "button" id = "but1" value = "找出body下的子div" /> <br /> <input type = "button" id = "but2" value = "找出body下的子div" /> <br /> <input type = "button" id = "but3" value = "找出two的相邻弟弟" /> <br /> <input type = "button" id = "but4" value = "找出one的所有弟弟" /> <br /> <input type = "button" id = "but5" value = "过滤出所有div中的第一个元素" /> <br /> <input type = "button" id = "but6" value = "过滤出所有div中的偶数元素" /> <br /> <div id = "one"> <div class = "mini"> 1-1 </div> </div> <div id = "two"> <div class = "mini">2-1</div> <div class = "mini">2-2</div> </div> <div id = "three"> <div class = "mini">3-1</div> <div class = "mini">3-2</div> <div class = "mini">3-3</div> </div> <span id = "four">span</span> </body> </html>
基本过滤器
选择器
:first 找出第一个
:last 找出最后一个
:even 找出的索引为偶数
:odd 找出的索引为奇数
:gt(index) 大于索引
:lt(index) 小于索引
:eq(index) 等于索引
属性选择器
选择器[属性1][属性2 = '属性值']
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>属性选择器</title> <script type = "text/javascript" src = "../js/jquery-1.11.0.js"></script> <script> $(function(){ // 根据属性选择器找到a href 只有一个属性 // $("a[href]").css("color", "red"); // 找出包含href 和 title 多个属性 // $("a[href][title]").css("color", "red"); // 找出包含href title = "textTile" 多个属性并且有值 $("a[href][title = 'textTile']").css("color", "deeppink"); }); </script> </head> <body> <a href = "#">href 111</a> <br /> <a href = "#" title = "textTile">href 222</a> </body> </html>
表单过滤器
:input 找出所有的输入项
:password 找出密码
:text 找出文本
表单对象属性：
找出select中被选中项
option:selected
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单选择器</title> <script type = "text/javascript" src = "../js/jquery-1.11.0.js"></script> <script> $(function(){ $(":text").css("background-color", "#ff0000"); $("#btn1").click(function(){ $("option:selected").css("background-color", "#00ff00") }); }); </script> </head> <body> <form> <input type = "button" value = "input button" /> <br /> <input type = "checkbox" /> <br /> <input type = "file" /> <br /> <input type = "hidden" /> <br /> <input type = "image" /> <br /> <input type = "password" /> <br /> <input type = "radio" /> <br /> <input type = "reset" /> <br /> <input type = "submit" /> <br /> <input type = "text" /> <br /> <select multiple = "multipe"> <option>first</option> <option>second</option> <option>third</option> <option>fourth</option> </select> <br /> <input type = "button" id = "btn1" value = "点我" /> </form> </body> </html>
表格的隔行换色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <script type = "text/javascript" src = "../js/jquery-1.11.0.js"></script> <script> $(function(){ $("tr:gt(0):even").css("background-color", "#cccccc"); $("tr:odd").css("background-color", "#fff38f"); }); </script> </head> <body onload = "init()"> <table border = "1px" width = "600px" id = "tab"> <tr> <td> <input type = "checkbox" id = "check1" onclick = "checkAll()" /> <!-- 默认选中 checked = "checked" --> </td> <td>分类ID</td> <td>分类名称</td> <td>分类商品</td> <td>分类描述</td> <td>操作</td> </tr> <tr> <td> <input type = "checkbox" name = "checkone" /> </td> <td>1</td> <td>手机数码</td> <td>小米华为</td> <td>myeclipse</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> <tr> <td> <input type = "checkbox" name = "checkone" /> </td> <td>2</td> <td>冰箱彩电</td> <td>海尔 TCL</td> <td>支持国产，从我做起</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> <tr> <td> <input type = "checkbox" name = "checkone" /> </td> <td>3</td> <td>箱子名包</td> <td>耐克，阿迪</td> <td>鞋子贵，鞋子好</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> <tr> <td> <input type = "checkbox" name = "checkone" /> </td> <td>4</td> <td>香烟酒水</td> <td>黄山，玉溪</td> <td>吸烟有害健康</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> <tr> <td> <input type = "checkbox" name = "checkone" /> </td> <td>5</td> <td>小小超市</td> <td>java,eclipxe,php</td> <td>在线教育</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> </table> </body> </html>
全选和全不选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选和全不选</title> <script type = "text/javascript" src = "../js/jquery-1.11.0.js"></script> <script> $(function(){ $("#checkAll").click(function(){ // 获取当前的选中状态 if(this.checked){ // $("input[type = 'checkbox']:gt(0)").attr("checked", this.checked); $("tbody > tr > td > input").attr("checked", this.checked); } }) }) </script> </head> <body> <table border = "1px" width = "600px" id = "tab"> <thead> <tr> <td> <input type = "checkbox" id = "checkAll"/> <!-- 默认选中 checked = "checked" --> </td> <td>分类ID</td> <td>分类名称</td> <td>分类商品</td> <td>分类描述</td> <td>操作</td> </tr> </thead> <tbody> <tr> <td> <input type = "checkbox" /> </td> <td>1</td> <td>手机数码</td> <td>小米华为</td> <td>myeclipse</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> <tr> <td> <input type = "checkbox" /> </td> <td>2</td> <td>冰箱彩电</td> <td>海尔 TCL</td> <td>支持国产，从我做起</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> <tr> <td> <input type = "checkbox" /> </td> <td>3</td> <td>箱子名包</td> <td>耐克，阿迪</td> <td>鞋子贵，鞋子好</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> <tr> <td> <input type = "checkbox" /> </td> <td>4</td> <td>香烟酒水</td> <!-- #tab > tbody > tr:nth-child(4) > td:nth-child(3) --> <td>黄山，玉溪</td> <td>吸烟有害健康</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> <tr> <td> <input type = "checkbox" /> </td> <td>5</td> <td>小小超市</td> <td>java,eclipxe,php</td> <td>在线教育</td> <td> <a href = "#">修改</a>|<a href = "#">删除</a> </td> </tr> </tbody> </table> </body> </html>
JQ中的DOM操作:appendChild(JS)
1. append:添加子元素到末尾
2. appendTo:把自己的内容添加到后面的内容中
3. prepend:在子元素的前面添加
4. after: 在自己的后面添加一个元素，同级关系
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ中的DOM操作</title> <script type = "text/javascript" src = "../js/jquery-1.11.0.js"></script> <script> $(function(){ $("#btn1").click(function(){ // $("#div1").append("<font color = 'red' size = '3'>点击一次添加一个</font>"); // $("<font color = 'red' size = '3'>点击一个田间一次</font><br />").appendTo("#div1"); // $("#div1").after("<font color = 'red' size = '3'>点击一次添加一个</font>"); // 与div同级 // $("#div1").prepend("<font color = 'red' size = '3'>点击一次添加一个</font>"); // 在已有内容的前面添加 }); }); </script> </head> <body> <input type = "button" id = "btn1" value = "点我添加内容" /> <br /> <div id = "div1"> hello </div> </body> </html>
JQ的遍历操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ遍历</title> <script type = "text/javascript" src = "../js/jquery-1.11.0.js"></script> <script> var cities = ["深圳市", "东莞市", "惠州市", "广州市"]; // jq遍历操作 $(function(){ $(cities).each(function(i, n){ // i是索引，n是内容 console.log(i + "-----" + n); }) $.each(cities, function(i, n){ console.log(i + "-----" + n); }) }); </script> </head> <body> </body> </html>
JQ的省市联动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市联动</title> <script type = "text/javascript" src = "../js/jquery-1.11.0.js"></script> <script> var provinces = [ ["深圳市", "东莞市", "广州市", "惠州市"], ["长沙市", "岳阳市", "株洲市", "湘潭市"], ["厦门市", "福州市", "潭州市", "泉州市"], ]; /* 1. 导入JQ的文件 2. 文档加载事件:页面初始化 3. 进一步确定事件: change事件 4. 函数: 得到当前选中省份 5. 得到城市, 遍历城市数据 6. 将遍历出来的城市添加到城市的select中 */ $(function(){ $("#province").change(function(){ var cities = provinces[this.value]; $("#city").empty(); // 用jq的方式清空 $(cities).each(function(i, n){ $("#city").append("<option>"+ n +"</option>"); }); }); }); </script> </head> <body> <select id = "province"> <option value = "-1">--请选择--</option> <option value = "0">广东省</option> <option value = "1">海南省</option> <option value = "2">福建省</option> </select> <select id = "city"> </select> </body> </html>
下拉列表左右选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 步骤: 1. 导入JQ的文件 2. 文档加载函数 :页面初始化 3.确定事件 : 点击事件 onclick 4. 事件触发函数 1. 移动被选中的那一项到右边 --> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <script> $(function(){ $("#a1").click(function(){ $("#rightSelect").append($("#leftSelect option:selected")); }); $("#a2").click(function(){ $("#rightSelect").append($("#leftSelect option")); }); }); </script> </head> <body> <table border="1px" width="400px"> <tr> <td>分类名称</td> <td><input type="text" value="手机数码"/></td> </tr> <tr> <td>分类描述</td> <td><input type="text" value="这里面都是手机数码"/></td> </tr> <tr> <td>分类商品</td> <td> <!--左边--> <div style="float: left;"> 已有商品<br /> <select multiple="multiple" id="leftSelect"> <option>华为</option> <option>小米</option> <option>锤子</option> <option>oppo</option> </select> <br /> <a href="#" id="a1" > >> </a> <br /> <a href="#" id="a2"> >>> </a> </div> <!--右边--> <div style="float: right;"> 未有商品<br /> <select multiple="multiple" id="rightSelect"> <option>苹果6</option> <option>oppo</option> <option>诺基亚</option> <option>大哥大</option> </select> <br /> <a href="#"> << </a> <br /> <a href="#"> <<< </a> </div> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="提交"/> </td> </tr> </table> </body> </html>
表单校验
a. trigger 和triggerHandler的区别：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>trigger_triggerHandler</title> <script type = "text/javascript" src = "../js/jquery-1.11.0.js"></script> <script> // trigger: 触发事件，会执行类似浏览器将光标移入到浏览器这种默认行为 // triggerHandler: 仅仅会触发事件对应的函数，光标不会移入 $(function(){ $("#username").focus(function(){ console.log("text focus被触发啦，快来救我"); }); $("#but1").click(function(){ $("#username").trigger("focus"); }); $("#but2").click(function(){ $("#username").triggerHandler("focus"); }); }); </script> </head> <body> <input type = "text" id = "username" /> <br /> <input type = "button" id = "but1" value = "trigger触发一哈focus" /> <input type = "button" id = "but2" value = "triggerHandler触发一哈focus" /> </body> </html>
b. 表单校验
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单校验</title> <link rel = "stylesheet" href = "../css/style.css" /> <!-- 1. 首先给必填项，在尾部添加一个小红点 2. 获取用户输入的信息，做相应的校验 3. 事件：获得焦点，失去焦点，按键抬起 4. 表单提交的事件 JQ方式实现： 1. 导入JQ的文件 2. 文档加载事件：在必填项后面加一个小红点 3. 表单校验确定事件 : blur focus keyup 4. 提交表单submit --> <script src = "../js/jquery-1.11.0.js"></script> <script> $(function(){ // 在必填项的后面加一个小红点 $(".compulsory").after("<font class = 'high'>*</font>"); // 事件绑定 $(".compulsory").blur(function(){ // 获得当前事件触发的对象 var value = $(this).val(); // 清空当前必填项后面的span // $(".formtips").remove(); // 这个不行 $(this).parent().find(".formtips").remove(); // 校验用户名 if($(this).is("#username")){ if(value.length < 6){ $(this).parent().append("<span class = 'formtips onError'>用户名长度不少于6</span>") }else{ $(this).parent().append("<span class = 'formtips onSuccess'>用户名可用</span>"); } } // 校验密码 if($(this).is("#password")){ if(value.length < 3){ $(this).parent().append("<span class = 'formtips onError'>密码的长度不少于3</span>") }else{ $(this).parent().append("<span class = 'formtips onSuccess'>密码可用</span>"); } } }).focus(function(){ $(this).triggerHandler("blur"); }).keyup(function(){ $(this).triggerHandler("blur"); }); $("form").submit(function(){ // 触发校验逻辑 $(".compulsory").trigger("focus"); //触发第一个元素 var length = $(".onError").length if(length > 0){ return false; } return true; }); }); </script> </head> <body> <form action = ../../js/定时器.html> <div>用户名:<input type = "text" class = "compulsory" id = "username" /></div> <div>密码:<input type = "password" class = "compulsory" id = "password" /></div> <div>手机号:<input type = "tel" /></div> <div><input type = "submit" /></div> </form> </body> </html>
3. JSON
JSON格式：
JSON对象: {key1 : value}
JSON数组: [{key1 : value}, {key2 : value}, {key3 : value}]
