JQuery
什么JQuery:
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
JQuery的作用:
1. 写更少的代码,做更多的事情: write Less ,Do more
2. 将我们页面的JS代码和HTML页面代码进行分离
JQ入门：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!--导包,引入JQ的文件--> 7 <script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script> 8 9 <script> 10 //js文档加载完成的事件 11 window.onload = function(){ 12 alert("window.onload 111"); 13 } 14 15 window.onload = function(){ 16 alert("window.onload 222"); 17 } 18 19 /*文档加载完成的事件*/ 20 jQuery(document).ready(function(){ 21 alert("jQuery(document).ready(function()"); 22 }); 23 /* 24 jQuery 简写成 $ 25 */ 26 $(document).ready(function(){ 27 alert("$(document).ready(function()"); 28 }); 29 30 /* 31 最简单的写法 32 */ 33 $(function(){ 34 alert("$(function(){"); 35 }); 36 37 </script> 38 </head> 39 <body> 40 </body> 41 </html>
JQ和JS对象之间的转换：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script> 7 <script> 8 function changeJS(){ 9 var div = document.getElementById("div1"); 10 // div.innerHTML = "JS成功修改了内容" 11 //将JS对象转成JQ对象 12 $(div).html("转成JQ对象来修改内容") 13 } 14 15 $(function(){ 16 //给按钮绑定事件 17 $("#btn2").click(function(){ 18 //找到div1 19 // $("#div1").html("JQ方式成功修改了内容"); 20 //将JQ对象转成JS对象来调用 21 var $div = $("#div1"); 22 // var jsDiv = $div.get(0); 23 var jsDiv = $div[0]; 24 jsDiv.innerHTML="jq转成JS对象成功"; 25 }); 26 }); 27 28 29 </script> 30 </head> 31 <body> 32 <input type="button" value="JS修改div内容" onclick="changeJS()" /> 33 <input type="button" value="JQ方式修改div内容" id="btn2" /> 34 <div id="div1"> 35 这里的内容一会要被JS/JQ代码修改掉 36 </div> 37 <div id="div1"> 38 这里的内容一会要被JS/JQ代码修改掉1111 39 </div> 40 </body> 41 </html>
动画效果：
1 $(function(){ 2 //隐藏页面图片 3 $("#btn2").click(function(){ 4 //获得img 5 // $("#img1").hide(10000); 6 // $("#img1").slideUp(500); 7 // $("#img1").fadeOut(5000); 8 $("#img1").animate({ width:"1366px",opacity:"0.2"},5000); 9 }); 10 });
网页定时弹出广告：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> 7 <!-- 8 1. 导入JQ的文件 9 2. 编写JQ的文档加载事件 10 3. 启动定时器 setTimeout("",3000); 11 4. 编写显示广告的函数 12 5. 在显示广告里面再启动一个定时器 13 6. 编写隐藏广告的函数 14 --> 15 <script> 16 //显示广告 17 function showAd(){ 18 $("#img1").slideDown(2000); 19 setTimeout("hideAd()",3000); 20 } 21 22 //隐藏广告 23 function hideAd(){ 24 $("#img1").slideUp(2000); 25 } 26 27 28 $(function(){ 29 setTimeout("showAd()",3000); 30 31 }); 32 </script> 33 </head> 34 <body> 35 <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id="img1" width="100%" style="display:none" /> 36 </body> 37 </html>
JQuery中的选择器
让我们能够更加精确找到我们要操作的元素
-
ID选择器 : #ID的名称
-
类选择器: 以 . 开头 .类名
-
元素选择器: 标签的名称
-
通配符选择器: *
-
选择器,选择器: 选择器1,选择器2
表单选择器：
1 $(function(){ 2 $(":text").css("background-color","yellow"); 3 4 $("#btn1").click(function(){ 5 $("select option:selected").css("background-color","chartreuse"); 6 alert($("option:selected").size()); 7 }); 8 });
层级选择器：
1 <!-- 2 -- 子元素选择器: 选择器1 > 选择器2 3 - 后代选择器: 选择器1 儿孙 4 - 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟 5 - 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟 6 7 --> 8 <script> 9 //文档加载事件,页面初始化的操作 10 $(function(){ 11 //初始化操作: 给按钮绑定事件 12 //找出body下面的子div 13 $("#btn1").click(function(){ 14 $("body > div").css("background-color","palegreen"); 15 }); 16 //找出body下面的所有div 17 $("#btn2").click(function(){ 18 $("body div").css("background-color","palegreen"); 19 }); 20 $("#btn3").click(function(){ 21 $("#one+div").css("background-color","palegreen"); 22 }); 23 $("#btn4").click(function(){ 24 $("#two~div").css("background-color","palegreen"); 25 }); 26 27 }); 28 </script>
过滤器：
1 <script> 2 //文档加载事件,页面初始化的操作 3 $(function(){ 4 5 //初始化操作: 给按钮绑定事件 6 //选出所有div中第一个元素 7 $("#btn1").click(function(){ 8 $("div:first").css("background-color","palegreen"); 9 }); 10 11 //选出所有div中偶数位的div 12 $("#btn2").click(function(){ 13 $("div:even").css("background-color","palegreen"); 14 }); 15 $("#btn3").click(function(){ 16 $("div:odd").css("background-color","palegreen"); 17 }); 18 $("#btn4").click(function(){ 19 $("div:gt(2)").css("background-color","palegreen"); 20 }); 21 22 }); 23 </script>
选择器：
1 <script> 2 //文档加载事件,页面初始化的操作 3 $(function(){ 4 //初始化操作: 给按钮绑定事件 5 $("#btn1").click(function(){ 6 $("#two").css("background-color","palegreen"); 7 }); 8 9 //找出mini类的所有元素 10 $("#btn2").click(function(){ 11 $(".mini").css("background-color","palegreen"); 12 }); 13 $("#btn3").click(function(){ 14 $("div").css("background-color","palegreen"); 15 }); 16 $("#btn4").click(function(){ 17 $("*").css("background-color","palegreen"); 18 19 }); 20 /*选择器分组*/ 21 22 //找出mini类 和 span元素 23 $("#btn5").click(function(){ 24 $(".mini,span").css("background-color","palegreen"); 25 }); 26 }); 27 </script>
属性选贼器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script> 7 8 <script> 9 10 $(function(){ 11 //通过属性选择器去找到 a href 12 // $("a[href]").css("color","red"); //只有一个属性 13 //找出包含 href ,title 14 // $("a[href][title]").css("color","red"); // 多个属性 15 //找出包含herf title 并且 title ='testTitle' 16 $("a[href][title='testTitle']").css("color","deeppink"); //多个属性 ,并且指定值 17 }); 18 19 </script> 20 </head> 21 <body> 22 <a href="#">herf 111</a> 23 <br /> 24 <a href="#" title="testTitle">herf 222</a> 25 </body> 26 </html>
全选和全部选：
1 $(function(){ 2 //绑定点击事件 3 //this 代表的是当前函数的所有者 4 $("#checkAll").click(function(){ 5 //获取当前选中状态 6 // alert(this.checked); 7 //获取所有分类项的checkbox 8 // 选择器[属性名称='属性值'] 9 // $("input[type='checkbox']:gt(0)").prop("checked",this.checked); 10 11 //使用层级选择器来实现 tbody > tr > td > input 12 // $("tbody > tr > td > input").prop("checked",this.checked); //这个可行 13 14 // #tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"] 15 $("input").prop("checked",this.checked); 16 17 }); 18 });
省市联动：JQ遍历
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> 7 <script> 8 /* 9 准备工作 : 准备数据 10 */ 11 var provinces = [ 12 ["深圳市","东莞市","惠州市","广州市"], 13 ["长沙市","岳阳市","株洲市","湘潭市"], 14 ["厦门市","福州市","漳州市","泉州市"] 15 ]; 16 17 /* 18 1. 导入JQ的文件 19 2. 文档加载事件:页面初始化 20 3. 进一步确定事件: change事件 21 4. 函数: 得到当前选中省份 22 5. 得到城市, 遍历城市数据 23 6. 将遍历出来的城市添加到城市的select中 24 */ 25 26 $(function(){ 27 $("#province").change(function(){ 28 // alert(this.value); 29 //得到城市信息 30 var cities = provinces[this.value]; 31 //清空城市select中的option 32 /*var $city = $("#city"); 33 //将JQ对象转成JS对象 34 var citySelect = $city.get(0) 35 citySelect.options.length = 0;*/ 36 37 $("#city").empty(); //采用JQ的方式清空 38 //遍历城市数据 39 $(cities).each(function(i,n){ 40 $("#city").append("<option>"+n+"</option>"); 41 }); 42 }); 43 }); 44 45 46 47 </script> 48 </head> 49 <body> 50 <!--选择省份--> 51 <select id="province"> 52 <option value="-1">--请选择--</option> 53 <option value="0">广东省</option> 54 <option value="1">湖南省</option> 55 <option value="2">福建省</option> 56 </select> 57 <!--选择城市--> 58 <select id="city"> 59 60 </select> 61 </body> 62 </html>
下拉列表左右选择：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!-- 7 步骤: 8 1. 导入JQ的文件 9 2. 文档加载函数 :页面初始化 10 3.确定事件 : 点击事件 onclick 11 4. 事件触发函数 12 1. 移动被选中的那一项到右边 13 --> 14 <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> 15 <script> 16 $(function(){ 17 $("#a1").click(function(){ 18 //找到被选中的那一项 19 //将被选中项添加到右边 20 $("#rightSelect").append($("#leftSelect option:selected")); 21 }); 22 23 //将左边所有商品移动到右边 24 $("#a2").click(function(){ 25 $("#rightSelect").append($("#leftSelect option")); 26 }); 27 }); 28 </script> 29 </head> 30 <body> 31 32 <table border="1px" width="400px"> 33 <tr> 34 <td>分类名称</td> 35 <td><input type="text" value="手机数码"/></td> 36 </tr> 37 <tr> 38 <td>分类描述</td> 39 <td><input type="text" value="这里面都是手机数码"/></td> 40 </tr> 41 <tr> 42 <td>分类商品</td> 43 <td> 44 <!--左边--> 45 <div style="float: left;"> 46 已有商品<br /> 47 <select multiple="multiple" id="leftSelect"> 48 <option>华为</option> 49 <option>小米</option> 50 <option>锤子</option> 51 <option>oppo</option> 52 </select> 53 <br /> 54 <a href="#" id="a1" > >> </a> <br /> 55 <a href="#" id="a2"> >>> </a> 56 </div> 57 <!--右边--> 58 <div style="float: right;"> 59 未有商品<br /> 60 <select multiple="multiple" id="rightSelect"> 61 <option>苹果6</option> 62 <option>肾7</option> 63 <option>诺基亚</option> 64 <option>波导</option> 65 </select> 66 <br /> 67 <a href="#"> << </a> <br /> 68 <a href="#"> <<< </a> 69 </div> 70 </td> 71 </tr> 72 <tr> 73 <td colspan="2"> 74 <input type="submit" value="提交"/> 75 </td> 76 </tr> 77 </table> 78 79 80 </body> 81 </html>
