day04-jQuery

jQ宗旨：write less do more

jq是js的框架，底层封装了js代码。

jq引入：

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"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <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！！！