day04-jQuery jQ宗旨：write less do more
jq是js的框架，底层封装了js代码。
jq引入：
<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
jQ选择器：推荐第一种：
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <body> <script> function run(){ //alert($("#xi").val()); alert(jQuery("#xi").val()); } </script> <input type="text" value="西游记" id="xi"/><br /> <input type="button" value="获取id为xi的值" onclick="run()" /> </body>
jQ对象和js对象的互转：
JS对象转jq：var jq = $(js对象);
JQ对象转js： var js = jq[0];或者jq.get(0); 因为jQ本质上是一个js数组
jQ页面加载完成时执行的代码：
<script> $(document).ready(function(){ //页面加载完成时需要执行的代码 }) $(function(){ //页面加载完成时需要执行的代码 //推荐这一种 }) </script>
jQ基本选择器：
ID选择器：$("#id");
类选择器：$(".类名");
元素选择器：$("元素名");
jQ数组遍历的两种方式：
1.$(数组).each(function(index){
alert(this+index);
})
2. $.each($(arr)，function（）{});
案例一：重写弹出广告
知识点：jQ动画效果：
jQuery的隐藏和显示相对JS更为动感圆滑。
<style> #d1{ background-color:lightskyblue; width:300px; height:300px; } </style> <script> //展示 function run1(){ //1.选中要显示的元素对象 var v1 =$("#d1"); //滑动效果 //v1.show(2000) v1.slideDown(2000); // v1.fadeIn(2000,function(){ // alert("展示成功！！") // }); } //隐藏 function run2(){ //1.选中要隐藏的元素对象 var v2 = $("#d1"); v2.hide(3000); //v2.slideUp(3000); // v2.fadeOut(3000,function(){ // alert("隐藏成功！！") // }); } //切换显示/隐藏 function run3(){ //1.选中要隐藏的元素对象 var v2 = $("#d1"); //v2.toggle(3000); //v2.slideToggle(3000); v2.fadeToggle(3000,function(){ alert("切换成功！！") }) } </script> <div id="d1"></div> <input type="button" value="显示" onclick="run1()"/> <input type="button" value="隐藏" onclick="run2()"/> <input type="button" value="切换显示/隐藏" onclick="run3()"/> </body>
案例实现显示，隐藏广告：
<body> <img src="../img/3.jpg" width="100%" style="display: none;"/> <script> //页面加载完成时执行 $(function(){ //两秒后弹出广告 setTimeout("show()",2000); }) function show(){ // 选中改图片 var ad =$("img"); //展示（滑动效果）； ad.slideDown(2000,function(){ //两秒后再隐藏 setTimeout("hide()",2000); }); } function hide(){ var ad = $("img"); ad.slideUp(2000); } </script> </body>
一.1层级选择器：
A B 获得A元素内部的所有的B元素。 （子子孙孙）
A>B 获得A元素下面的所有B子元素。 儿子
A+B 获得A元素同级下一个B元素 下面的第一个兄弟
A~B 获得A元素之后的所有B元素 所有的弟弟
<body> <script> $(function(){ //1、获取id为main的span标签 内 所有的div标签 var arr1= $("#main div"); // jq对象 $(arr1).each(function(index){ alert($(this).text()+".."+index); }) //2、获取id为main的span标签 内 子元素div标签 var arr2 =$("#main>div"); $(arr2).each(function(index){ alert($(this).text()+".."+index); }) // 3、获取id为main的span标签 后 第一个div兄弟标签 var arr3 = $("#main+div"); $(arr3).each(function(index){ alert($(this).text()+".."+index); }) //4、获取id为main的span标签 后 所有的div兄弟标签 var arr4 = $("#main~div"); $(arr4).each(function(index){ alert($(this).text()+".."+index); }) }); </script> <span id="main"> <div>111111</div> <div>222222</div> <div>333333</div> <span> <div>44444</div> </span> </span> <div>55555</div> <span> <div>66666</div> </span> <div>77777</div> </body>
一.2 属性选择器：
[属性名] 获得有 指定属性名 的标签对象。
[属性名=值] 获得 指定属性名等于指定值 的标签对象 value = man
[属性名*=值] 获得 指定属性名 含有 指定值 的标签对象 value *= a
[属性值$='.jpg'] 所有的属性名包含以".jpg"结尾的元素。
多个属性选择器可以组合使用 ：[选择器1][选择器2][选择器3]
实例：
<script> $(function(){ //1、获取所有存在type属性的标签 var arr1 = $("[type]"); $(arr1).each(function(index){ alert(this.value+".."+index); }) 2、获取所有type属性为radio的标签 var arr2=$("[type=radio]") $(arr2).each(function(index){ alert(this.value+".."+index); }) 3、获取所有type属性含有o的标签 var arr3 = $("[type*=o]"); $(arr3).each(function(index){ alert(this.value+".."+index); }) //4、获取所有input标签中的单选框，且name为sex的标签 var arr4 = $("input[type=radio][name=sex"); $(arr4).each(function(index){ alert($(this).val()+".."+index); }) }); </script> 用户名：<input type="text" name="uname" value="小刘"/><br /> 密码：<input type="password" name="pwd" value="123"/><br /> 性别： <input type="radio" name="sex" value="man" />男 <input type="radio" name="sex" value="woman" />女<br /> 是否VIP：<input type="radio" name="vip" value="no" />不是 <input type="radio" name="vip" value="yes" />是<br /> </body>
一.3 基本过滤选择器：
:first 第一个
:last 最后一个
:even 偶数，索引从 0 开始计数
:odd 奇数
:not(..) 除了指定内容 1234 : not(12) == > 34
:eq(index) 获取指定索引的元素
:gt(index) 大于index索引的元素
:lt(index) 小于index索引的元素
<html> <!--在获取到一系列标签对象之后，的一些筛选条件。--> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-3.3.1.js" ></script> </head> <body> <script> $(function(){ //1、在所有DIV标签中，获取第一个div //alert($("div:first").html()); //alert($("div:eq(0)").html()); //2、在所有DIV标签中，获取最后一个div //alert($("div:last").html()); //3、在所有DIV标签中，获取所有偶数位的div var arr1 = $("div:even"); $(arr1).each(function(index){ alert($(this).html()+".."+index); }) //4、在所有DIV标签中，获取所有奇数位的div var arr2 = $("div:odd"); $(arr2).each(function(index){ alert($(this).html()+".."+index); }) //5、在所有DIV标签中，获取除了第一位以外所有的div var arr3 = $("div:not(div:first)"); $(arr3).each(function(index){ alert($(this).html()+".."+index); }) //6、在所有DIV标签中，获取索引等于1的div alert($("div:eq(1)").html()); //7、在所有DIV标签中，获取索引大于1的div var arr4 = $("div:gt(1)"); $(arr4).each(function(index){ alert($(this).html()+".."+index); }) //8、在所有DIV标签中，获取索引小于1的div var arr5 = $("div:lt(1)"); $(arr5).each(function(index){ alert($(this).html()+".."+index); }) }) </script> <div>11111111，索引是0</div> <div>22222222，索引是1</div> <div>33333333，索引是2</div> <div>44444444，索引是3</div> <div>55555555，索引是4</div> <div>66666666，索引是5</div> <div>77777777，索引是6</div> <div>88888888，索引是7</div> </body> </html>
一.4表单属性选择器:
:checked 选中 ,是单选，复选 的选中
:selected 选择 ，是下拉列表中的算则。
:enabled 可用
:disabled 不可用。
<script> $(function(){ //获取可用的表单输入项 var arr1 = $("input:enabled"); alert(arr.length); $(arr).each(function(index){ alert($(this).val()+index) }) 获取不可用的表单输入项 var arr2 =$("input:disabled"); $(arr).each(function(){ alert($(this).val()); }) 获取选中的复选框 var arr3=$("[type=checkbox]:checked") alert(arr3.length) $(arr3).each(function(){ alert($(this).val()); }) //获取国家下拉框中，被选中的option var arr4=$("#country>option:selected"); $(arr4).each(function(){ alert($(this).val()); }) }); </script> <h1>不可用的表单输入项</h1> <input type="text" disabled="disabled" /> <input type="button" value="不可用按钮" disabled="disabled" /> <h1>复选框</h1> <input type="checkbox" name="hobby" value="code"/>编程 <input type="checkbox" name="hobby" value="swimming" checked="checked"/>游泳 <input type="checkbox" name="hobby" value="reading" checked="checked"/>阅读 <hr /> <h1>下拉选择框</h1> 城市：<select id="city"> <option value="">请选择</option> <option value="bj">北京</option> <option value="sh">上海</option> </select> <hr /> 国家：<select id="country" multiple="multiple"> <option value="China" selected="selected">中国</option> <option value="America" selected="selected">美国</option> <option value="Russia">俄罗斯</option> <option value="England">英国</option> </select>
案例二：隔行换色：
addClass(“值”) 给元素对象追加样式
removeClass() 将元素对象的class删除
代码实例如下：
1 <style> 2 .sss{ 3 background: lightseagreen; 4 } 5 </style> 6 <script> 7 $(function(){ 8 $("tr:not(0):odd").addClass("sss"); 9 }) 10 </script> 11 <body> 12 <body onload="changeColor()"> 13 <table border="1" cellpadding="0" cellspacing="0" width="80%"> 14 <tr> 15 <th> 16 <input type="button" value="全选" onclick="fun2()"/> 17 <input type="button" value="全不选" onclick="fun3()"/> 18 <input type="button" value="反选" onclick="fun4()"/> 19 </th> 20 <th>序号</th> 21 <th>商品名称</th> 22 <th>商品描述</th> 23 <th>操作</th> 24 </tr> 25 <tr> 26 <td> 27 <input type="checkbox" class="itemSelect"/> 28 </td> 29 <td>1</td> 30 <td>手机数码</td> 31 <td>手机数码商品信息</td> 32 <td> 33 <a href="#">修改</a> 34 <a href="#">删除</a> 35 </td> 36 </tr> 37 <tr> 38 <td> 39 <input type="checkbox" class="itemSelect"/> 40 </td> 41 <td>2</td> 42 <td>电脑办公</td> 43 <td>电脑办公商品信息</td> 44 <td> 45 <a href="#">修改</a> 46 <a href="#">删除</a> 47 </td> 48 </tr> 49 <tr> 50 <td> 51 <input type="checkbox" class="itemSelect"/> 52 </td> 53 <td>3</td> 54 <td>鞋靴箱包</td> 55 <td>鞋靴箱包商品信息</td> 56 <td> 57 <a href="#">修改</a> 58 <a href="#">删除</a> 59 </td> 60 </tr> 61 <tr> 62 <td> 63 <input type="checkbox" class="itemSelect"/> 64 </td> 65 <td>4</td> 66 <td>家居饰品</td> 67 <td>家居饰品商品信息</td> 68 <td> 69 <a href="#">修改</a> 70 <a href="#">删除</a> 71 </td> 72 </tr> 73 </table> 74 75 </body> 76 </html>
案例三：全选，全不选：
知识点1.数组遍历：
<script> var arr =["三国演义","西游记","红楼梦","水浒传"]; //jQ遍历第一种方式： $(arr).each(function(index){ //索引 // alert(index); //元素 //alert(arr[index]); //alert(this); alert("元素为："+this+"，索引为："+index); }); //jQ遍历方式第二种 $.each($(arr),function(index){ alert("元素为："+this+"，索引为："+index); } ); </script>
知识点2：prop（） 和
prop("属性名"); （attr(“属性名”)） 获取某个属性名对应的值 == $(“#bb”).val(); 这两种获取属性的值
prop("属性名",属性值); （attr("属性名",属性值);） 将其属性名设置为某个属性值 == $(“#bb”).val(“值”);
removeProp("属性名"); 这个可能版本会不兼容， == removeProp不兼容可用 后面这个代替 移除改属性 removeAttr(“属性名”);
实现反选 ：案例
1 <script> 2 function quan(){ 3 $(".itemSelect").prop("checked",true); 4 } 5 function bu(){ 6 $(".itemSelect").prop("checked",false); 7 } 8 // function fan(){ 9 // 10 // //获取所有的复选框，将其checked修改为false 11 // var arr1 =$(".itemSelect:checked"); 12 // //获取所有的未选中复选框，将其checked修改为true 13 // var arr2 =$(".itemSelect:not(.itemSelect:checked)"); 14 // arr1.prop("checked",false); 15 // arr2.prop("checked",true); 16 // } 17 //用jQ数组实现反选 18 function fan(){ 19 var arr =$(".itemSelect"); 20 //遍历 21 arr.each(function(){ 22 var temp = $(this).prop("checked"); 23 //取反 24 $(this).prop("checked",!temp); 25 }) 26 } 27 </script> 28 <body> 29 <table border="1" cellpadding="0" cellspacing="0" width="80%"> 30 <tr> 31 <th> 32 <input type="button" value="全选" onclick= "quan()"/> 33 <input type="button" value="全不选" onclick= "bu()"/> 34 <input type="button" value="反选" onclick= "fan()"/> 35 </th> 36 <th>编号</th> 37 <th>姓名</th> 38 </tr> 39 <tr> 40 <td> 41 <input type="checkbox" class="itemSelect" /> 42 </td> 43 <td>1</td> 44 <td>唐三藏</td> 45 </tr> 46 <tr> 47 <td> 48 <input type="checkbox" class="itemSelect" /> 49 </td> 50 <td>2</td> 51 <td>悟空</td> 52 </tr> 53 <tr> 54 <td> 55 <input type="checkbox" class="itemSelect" /> 56 </td> 57 <td>3</td> 58 <td>八戒</td> 59 </tr> 60 <tr> 61 <td> 62 <input type="checkbox" class="itemSelect" /> 63 </td> 64 <td>4</td> 65 <td>沙和尚</td> 66 </tr> 67 </table> 68 </body>
案例四：省市二级联动：
jQ中的事件实现方式：
<input type="text" id="uname" value="黄蓉" /><br /> <input type="button" value="点击获取输入框的value值" id="aaa"/> <input type="button" value="点击设置输入框的value值" id="bbb"/> <script> $(function(){ //jQ中的事件获取格式 $("#aaa").click(function(){ alert($("#uname").val()); }) //jQ中的事件获取格式 $("#bbb").click(function(){ $("#uname").val("郭靖"); }) })
jQ中追加元素的两种方式；
<ul id="rank"> <li>Php</li> <li>Android</li> <li>Ios</li> </ul> <hr /> <input type="button" value="列表尾部追加Java" id="aaa"/> <input type="button" value="列表头部追加Java" id="bbb"/> <script> $(function(){ //尾部追加 $("#aaa").click(function(){ //往哪儿追加 var ul = $("#rank"); //追加什么 var li = "<li>JAVA</li>"; //追加什么动作（方法） //ul.append(li); $(li).appendTo(ul); }) //头部追加 $("#bbb").click(function(){ //往哪儿追加 var ul = $("#rank"); //追加什么 var li = "<li>JAVA</li>"; //追加什么动作（方法） //ul.prepend(li); $(li).prependTo(ul); }) }) </script>
省市联动代码案例实现：
追加思路：先获取往哪儿追加的值，再获取追加什么，再初始化往哪儿追加的内容体，如果是数组就遍历，得出值，然后用相应的追加方法追加。
// 定义二维数组,存储城市信息 var cities = new Array(); cities[0] = new Array("海淀区","昌平区","朝阳区"); cities[1] = new Array("郑州市","商丘市","开封市","洛阳市","平顶山市"); cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市"); cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市"); cities[4] = new Array("南京市","苏州市","扬州市","宿迁市"); </script> </head> <body> <select id="province" onchange= "changeCity(this.value)" style="150px"> <option value="">----请-选-择-省----</option> <option value="0">北京</option> <option value="1">河南省</option> <option value="2">山东省</option> <option value="3">河北省</option> <option value="4">江苏省</option> </select> <select id="city" style="150px"> <option value="">----请-选-择-市----</option> </select> <script> function changeCity(val){ //根据var获取省份对应的下标 var arr = cities[val]; //往哪儿加 var city =$("#city"); //恢复到初始 city.html("<option value=''>---请-选-择-市---</option>"); $(arr).each(function(){ //加什么？ var temp ="<option value=''>"+this+"</option>"; //追加的方法 city.append(temp); }) } </script>
案例五：列表左右选择
这种下拉列表：主要应用下拉列表的选取和所有的方法做题。
案例实现：
<body> <select id="leftSelectId" multiple="multiple" style=" 100px;height: 200px;"> <option>左1</option> <option>左2</option> <option>左3</option> <option>左4</option> <option>左5</option> </select> <input type="button" value="》" id="a"/> <input type="button" value="》》" id="b"/> <input type="button" value="《" id="c" /> <input type="button" value="《《" id="d"/> <select id="rightSelectId" multiple="multiple" style=" 100px;height: 200px;"> <option>右1</option> <option>右2</option> <option>右3</option> <option>右4</option> <option>右5</option> </select> <hr /> <script> $(function(){ //1.将左边选中的追加到右边末尾 $("#a").click(function(){ //往哪儿追加 var right = $("#rightSelectId"); //追加什么？ var leftcont = $("#leftSelectId option:selected"); //追加方法 right.append(leftcont); }) //1.将左边所有的追加到右边末尾 $("#b").click(function(){ //往哪儿追加 var right = $("#rightSelectId"); //追加什么？ var leftcont = $("#leftSelectId option"); //追加方法 right.append(leftcont); }) //1.将右边选中的追加到左边末尾 $("#c").click(function(){ //往哪儿追加 var left = $("#leftSelectId"); //追加什么？ var rightcont = $("#rightSelectId option:selected"); //追加方法 left.append(rightcont); }) //1.将右边所有的追加到左边末尾 $("#d").click(function(){ //往哪儿追加 var left = $("#leftSelectId"); //追加什么？ var rightcont = $("#rightSelectId option"); //追加方法 left.append(rightcont); }) }) </script> </body>
！！！！！！！好累！！！！！！！！！！！！！！！！！！继续坚持！！！！！！！！！！！！！！！！！！！！！！！
jQ 就是啰嗦点 但是难度还好 加油就ok！！！