day04-jQuery

发布时间:2019-08-15 06:00:04发布者:Mr.Zhang阅读(585)

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="width: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="width: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="width: 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="width: 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!!!

 





本文转自博客园,原文地址:https://www.cnblogs.com/ych961107/p/11342771.html