web核心 9-jquery 隔行换色复选框的全选全不选

最新推荐文章于 2023-10-23 14:09:15 发布

AdamCafe

最新推荐文章于 2023-10-23 14:09:15 发布

阅读量327

点赞数

分类专栏： web核心文章标签： web核心

本文链接：https://blog.csdn.net/AdamCafe/article/details/90085315

版权

web核心专栏收录该内容

16 篇文章 0 订阅

订阅专栏

内容介绍（jquery）

1.Jquery的选择器

2.Jquery的方法
	 操作标签的文本和value属性值
	 操作标签的样式
	 操作标签的属性
	 对某些标签插入指定标签的方法

jquery(jq)

概述

jquery：是javascript的一套框架
作用：大大简化javascript的代码量 倡导写更少的代码，做更多的事情
框架：对原有javascript的功能代码进行封装，对外提供更加简单的语法方式实现同样的功能，大大提高开发的效率

了解：jquery框架封装javascript的原理

jquery的使用

条件：需要引入jquery框架文件
jquery框架文件就是对javascript功能代码的二次封装简称js库

js库的版本：
1.x：兼容IE6/7/8，使用最为广泛的 企业应用
2.x：不兼容IE6/7/8，很少有人使用
3.x：不兼容IE6/7/8，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的
开发版本：命名为jQuery-x.x.x.js   好处：代码格式好 便于看源码 但是体积大
生产版本：命名为jQuery-x.x.x.min.js  好处：体积小 代码格式不好

快速入门

1 导入js库（jquery-3.3.1.min.js）
2 编写页面加载事件测试是否引入成功

Jquery的页面加载事件：
在这里插入图片描述
js的页面加载事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        onload=function(){
            document.getElementById("bt1").onclick=function(){
                // js
                //var username=document.getElementById("username");
                ///alert(username.value);

                //jq
                //var username=jquery("#username");
                //alert(username.value);
                alert($("#username").value);

                //$("#username")
            }

        }
    </script>
</head>
<body>
        <input type="text" name="username" id="username" value="abcd/1234" />
        <input type="button" value="获取" id="bt1"/>
</body>
</html>

js和jq的页面加载事件区别（面试题）

js页面加载事件：只执行一次,如果有多个是按照页面从上到下的加载顺序后面的覆盖前面的      
jq页面加载事件：有多少个页面加载方法，就执行多少个，执行顺序是按照页面的从上到下的顺序
Ps: jquery3.0以上是随机执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script>
        /*
        * js页面加载的特点：
        *     js的页面加载事件只会执行1个，后面的会覆盖前面的执行
        *
        * */

        onload=function(){
            alert("js1");
        }
        onload=function(){
            alert("js3");
        }
        onload=function(){
            alert("js2");
        }
    </script>-->

    <script src="js/jquery-3.3.1.js"></script>
    <script>
        /*
        * jq的页面加载事件特点：
        *       jq的页面加载事件有几个就会执行几次，执行顺序是依次从上往下加载执行
        *       ps:jquery3.x的版本会随机执行
        *
        * */
	     // jq的页面加载事件
         $(function(){
             alert("jq1");
         })

         $(function(){
             alert("jq2");
         })
        $(function(){
            alert("jq4");
        })
         $(function(){
             alert("jq3");
         })

        $(function(){
            alert("jq5");
        })
    </script>
</head>
<body>

</body>
</html>

js的dom对象和jq的对象进行互转(了解)

js的dom对象有自己的方法和属性   jquery对象也有自己的方法和属性
特点：jquery对象不能使用js的dom对象方法和属性  js的dom对象也不能使用jquery的方法和属性
解决： 只要jquery对象转成js的dom对象 就可以使用js的方法和属性
      只要js的dom对象转成jquery对象 就可以使用jq的方法和属性
jquery转换成js的dom对象：    $("元素标签")[0]
js的dom对象转换成jquery对象：$(js的dom对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
        js的代码有自己的一套属性和方法
        jq的代码也有自已的一套属性和方法
        2者之间不能互相调用对方的属性和方法
        解决：将jq对象转换成js的dom对象或者将js的dom对象转换成jq对象 即可以使用对方的属性和方法了
        jq对象转js的dom对象： $(..)[0]
        js的dom对象转换成jq对象： $(dom对象)
    -->




    <script>
        onload=function(){
           var d1=document.getElementById("d1");
           alert($(d1).html());

        }
    </script>

   <script src="js/jquery-3.3.1.js"></script>
    <!--<script>
       $(function(){
           //alert($("#d1")[0].innerHTML);
           //jq的方法
           //alert($("#d1").html());
       })
   </script>-->
</head>
<body>
        <div id="d1">
            <a href="#">点我</a>
        </div>
</body>
</html>

jQuery操作标签的文本和value值方法(掌握）

val() html() text()

val([value]): 获得/设置元素value属性相应的值  
html([value]):获得/设置元素的标签体内容  
text([value]): 获得/设置元素的文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery操作标签的文本和value值方法</title>
    <script src="js/jquery-3.3.1.js"></script>
    <!--<script>
        $(function(){
            // 获取div的标签体内容
            alert($("#d1").html());
            // 设置div的标签体内容
            $("#d1").html("<a href='http://www.baidu.com'>百度</a>");
        })
    </script>-->

    <!--<script>
        $(function(){
            // 获取div的文本内容
            alert($("#d1").text());
            // 设置div的文本内容
            $("#d1").text("<h2>哈哈哈哈</h2>");
        })
    </script>-->


    <script>
        $(function(){
            // 获取input标签的value值
            alert($("#username").val());
            // 设置input标签的value值
            $("#username").val("66666666666666666");
        })
    </script>
</head>
<body>
        <div id="d1">
            <a href="#">传智播客</a>
        </div>
        <hr/>
        <input type="text" name="usernname" id="username" value="abcd/1234">
</body>
</html>

获取div的标签体内容，设置div的标签体内容
在这里插入图片描述
获取div的文本内容，设置div的文本内容

获取input标签的value值，设置input标签的value值

jq的选择器（必掌握）

在这里插入图片描述

目的：使用选择器的目的最终都是为了获取标签

1 基本选择器

ID选择器       $("#id名称")   需要html标签上有id属性
类选择器       $(".class名称") 需要html标签上有class属性
元素选择器     $("标签元素名称")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            $("#bt1").click(function(){
                //让id为one的div背景色变成红色    ID选择器  $("#id名称")  需要html标签上有id属性
                $("#one").css("background-color","red");
            })

            $("#bt2").click(function(){
                //让class为mini的div背景色变成红色  类选择器  $(".class名称") 需要html标签上有class属性
                $(".mini").css("background-color","red");
            })

            $("#bt3").click(function(){
                //让所有div背景色变成红色 元素选择器  $("标签元素名称")
                $("div").css("background-color","red");
            })
        })
    </script>
</head>
<body>
        <div id="one">
            <div class="mini">11111</div>
        </div>

        <div id="two">
            <div class="mini">22222</div>
            <div class="mini">33333</div>
        </div>

        <div id="three">
            <div class="mini">44444</div>
            <div class="mini">55555</div>
            <div class="mini">66666</div>
        </div>

        <span id="four"></span>

        <input type="button" value="让id为one的div背景色变成红色" id="bt1" />
        <input type="button" value="让class为mini的div背景色变成红色" id="bt2" />
        <input type="button" value="让所有div背景色变成红色" id="bt3" />
</body>
</html>

2 层级选择器

元素1 元素2    匹配元素1下面的所有元素2(包含子子孙孙)
元素1>元素2    匹配元素1下面的所有元素2（只包含子元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-3.3.1.js"></script>
    <script>
          $(function(){
              $("#bt1").click(function(){
                  //让body下的所有div背景色变成红色   元素1 元素2    匹配元素1下面的所有元素2(包含子子孙孙)
                  $("body div").css("background-color","red");
              })

              $("#bt2").click(function(){
                  //让body下子div背景色变成红色   元素1>元素2    匹配元素1下面的所有元素2（只包含子元素）
                  $("body>div").css("background-color","red");
              })
          })
    </script>
</head>
<body>
        <div id="one">
            <div class="mini">11111</div>
        </div>
        <div id="two">
            <div class="mini">22222</div>
            <div class="mini">33333</div>
        </div>
        <div id="three">
            <div class="mini">44444</div>
            <div class="mini">55555</div>
            <div class="mini">66666</div>
        </div>
        <span id="four"></span>

        <input type="button" value="让body下的所有div背景色变成红色" id="bt1" />
        <input type="button" value="让body下子div背景色变成红色" id="bt2" />
</body>
</html>

3 基本过滤选择器

元素:first     根据过滤获取第一个元素
元素:last      根据过滤获取最后一个元素
元素:even      根据过滤获取偶数索引的元素
元素:odd       根据过滤获取奇数索引的元素
元素:not(元素) 根据过滤获取不包含指定元素的所有元素
元素:eq(索引)  根据过滤获取索引相等的元素 索引从0开始
元素:gt(索引)  根据过滤获取大于索引的元素 索引从0开始
元素:lt(索引)  根据过滤获取小于索引的元素 索引从0开始

:header        根据过滤获取标题 （hn标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            $("#bt1").click(function(){
                //让第一个div元素背景红色     元素:first     根据过滤获取第一个元素
                $("div:first").css("background-color","red");
            })

            $("#bt2").click(function(){
                //让最后一个div元素背景红色     元素:last      根据过滤获取最后一个元素
                $("div:last").css("background-color","red");
            })

            $("#bt3").click(function(){
                //让偶数div元素背景红色     元素:even      根据过滤获取偶数索引的元素
                $("div:even").css("background-color","red");
            })

            $("#bt4").click(function(){
                //让奇数div元素背景红色    元素:odd       根据过滤获取奇数索引的元素
                $("div:odd").css("background-color","red");
            })

            $("#bt5").click(function(){
                //让class不为mini的div元素背景红色  元素:not(元素) 根据过滤获取不包含指定元素的所有元素
                $("div:not(.mini)").css("background-color","red");
            })

            $("#bt6").click(function(){
                //让索引值是3的div元素背景红色  元素:eq(索引)  根据过滤获取索引相等的元素
                $("div:eq(0)").css("background-color","red");
            })

            $("#bt7").click(function(){
                //让索引值大于3的div元素背景红色  元素:gt(索引)  根据过滤获取大于索引的元素
                $("div:gt(3)").css("background-color","red");
            })

            $("#bt8").click(function(){
                //让索引值小于3的div元素背景红色  元素:lt(索引)  根据过滤获取小于索引的元素
                $("div:lt(3)").css("background-color","red");
            })

            $("#bt9").click(function(){
                //让标题背景红色
                $(":header").css("background-color","red");
            })
        })
    </script>
</head>
<body>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>

        <div id="one">
            <div class="mini">11111</div>
        </div>
        <div id="two">
            <div class="mini">22222</div>
            <div class="mini">33333</div>
        </div>
        <div id="three">
            <div class="mini">44444</div>
            <div class="mini">55555</div>
            <div class="mini">66666</div>
        </div>
        <span id="four"></span>

        <input type="button" value="让第一个div元素背景红色" id="bt1" />
        <input type="button" value="让最后一个div元素背景红色" id="bt2" />
        <input type="button" value="让偶数div元素背景红色" id="bt3" />
        <input type="button" value="让奇数div元素背景红色" id="bt4" />
        <input type="button" value="让class不为mini的div元素背景红色" id="bt5" />
        <input type="button" value="让索引值是3的div元素背景红色" id="bt6" />
        <input type="button" value="让索引值大于3的div元素背景红色" id="bt7" />
        <input type="button" value="让索引值小于3的div元素背景红色" id="bt8" />
        <input type="button" value="让标题背景红色" id="bt9" />
</body>
</html>

4 属性选择器

$("元素[属性名]")  根据标签元素的属性名来匹配
$("元素[属性名=值]") 根据标签元素的属性名的值来匹配
$("元素[属性名=值][...]") 包含多个属性条件的选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            $("#bt1").click(function(){
                //让有id属性的div标签背景变红色  $("元素[属性名]")  根据标签元素的属性名来匹配
                $("div[id]").css("background-color","red");
            })

            $("#bt2").click(function(){
                //让有id属性且值是two的div标签背景变红色  $("元素[属性名=值]")  根据标签元素的属性名的值来匹配
                $("div[id=two]").css("background-color","red");
            })

            $("#bt3").click(function(){
                //让有title属性值是t3且id属性值是three标签背景变红色  $("元素[属性名=值][...]") 包含多个属性条件的选择器
                $("div[title=t3][id=three]").css("background-color","red");
            })
        })
    </script>
</head>
<body>
        <div id="one" title="t3">
            <div class="mini">11111</div>
        </div>
        <div id="two" title="t3">
            <div class="mini">22222</div>
            <div class="mini">33333</div>
        </div>
        <div id="three" title="t3">
            <div class="mini">44444</div>
            <div class="mini">55555</div>
            <div class="mini">66666</div>
        </div>
        <span id="four"></span>

        <input type="button" id="bt1" value="让有id属性的div标签背景变红色">
        <input type="button" id="bt2" value="让有id属性且值是two的div标签背景变红色">
        <input type="button" id="bt3" value="让有title属性值是t3且id属性值是three标签背景变红色">
</body>
</html>

5 表单属性选择器

元素:enabled  获取所有可用的标签元素
元素:disabled 获取所有不可用的标签元素
元素:checked  获取默认被选中的input标签元素
元素:selected 获取默认被选中的select标签元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            $("#bt1").click(function(){
                $("input:disabled").css("background-color","red");
                //$("form>input:enabled").css("background-color","red");
            })

            $("#bt2").click(function(){
               $("input:disabled").val("77777");
            })

            $("#bt3").click(function(){
               var arr=$("form input");
               for(var i=0;i<arr.length;i++){
                   //alert($(arr[i]).val());
                   alert(arr[i].value)
               }
            })

            $("#bt4").click(function(){
                alert($("input:checked").length);
                var arr=$("input:checked");
                for(var i=0;i<arr.length;i++){
                    alert($(arr[i]).val());
                }
            })

            $("#bt5").click(function(){
                //alert($("select option:selected").text());
                var arr=$("option");
                for(var i=0;i<arr.length;i++){
                    alert($(arr[i]).text());
                }

            })
        })
    </script>
</head>
<body>
     <form action="#">
         <input type="text" name="username" value="55555" />
         <input type="text" name="password" value="66666" disabled="disabled" /><br/>
         <input type="checkbox" name="hobby" value="cy" checked="checked">抽烟
         <input type="checkbox" name="hobby" value="hj" checked="checked">喝酒
         <input type="checkbox" name="hobby" value="tt">烫头
         <br/>
         <select>
             <option>北京</option>
             <option>上海</option>
             <option>广州</option>
             <option selected="selected">深圳</option>
         </select>
     </form>
     <hr/>
     <input type="button" value="让不可用的表单标签背景颜色变红色" id="bt1"/><br/>
     <input type="button" value="获取不可用的表单标签的value值" id="bt2"/><br/>
     <input type="button" value="获取form下的表单标签的value值" id="bt3"/><br/>
     <input type="button" value="获取form下的选中的复选框标签的value值" id="bt4"/><br/>
     <input type="button" value="获取form下的选中的下拉框标签的文本值" id="bt5"/><br/>
</body>
</html>

jquery操作标签样式（掌握）

设置标签样式：
在这里插入图片描述

css(name,[value]) 获取/设置指定的CSS样式
addClass(value)   给指定的标签添加样式
removeClass(value)  删除指定的样式	 
toggleClass(value) 切换样式，如果没有样式，则添加，如果有样式，则删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            $("#bt1").click(function(){
                //设置标签样式
                $("#d1").css("width","300px");
                $("#d1").css("height","300px");
                $("#d1").css("background-color","red");
                // 获取标签样式
                alert($("#d1").css("width"));
                alert($("#d1").css("height"));
                alert($("#d1").css("background-color"));

            })
        })
    </script>

    <style>
        .sy{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
    <script>
        $(function(){
            $("#bt2").click(function(){
                // 给标签添加指定样式
                $("#d1").addClass("sy");
            })
        })
    </script>

    <script>
        $(function(){
            $("#bt3").click(function(){
                // 给标签删除指定样式
                $("#d1").removeClass("sy");
            })
        })
    </script>

    <script>
        $(function(){
            $("#bt4").click(function(){
                // 给标签切换指定样式
                $("#d1").toggleClass("sy");
            })
        })
    </script>
</head>
<body>
        <div id="d1">
            111111
        </div>
        <input type="button" value="变身" id="bt1"/><br/>
        <input type="button" value="变身2" id="bt2"/><br/>
        <input type="button" value="删除指定样式" id="bt3"/><br/>
        <input type="button" value="切换指定样式" id="bt4"/><br/>


</body>
</html>

jQuery对标签属性进行操作（掌握）

attr()方法或prop()方法
ps：建议1.6以前可以用attr来操作属性 1.6以后可以用prop来操作属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <!--<script>
        $(function(){
            $("#bt1").click(function(){
                // 获取标签属性&#45;&#45;attr("属性名","属性值");
                /*alert($("#imgs").attr("id"));
                alert($("#imgs").attr("src"));
                alert($("#imgs").attr("width"));
                alert($("#imgs").attr("height"));
                alert($("#imgs").attr("alt"));
                alert($("#imgs").attr("title"));*/

                //设置
                $("#imgs").attr("width","1000");
                $("#imgs").attr("height","1000");
                $("#imgs").attr("title","呼噜娃");
            })
        })
    </script>-->


    <script>
        $(function(){
            $("#bt1").click(function(){
                // 获取标签属性--prop("属性名","属性值");
               /* alert($("#imgs").prop("id"));
                alert($("#imgs").prop("src"));
                alert($("#imgs").prop("width"));
                alert($("#imgs").prop("height"));
                alert($("#imgs").prop("alt"));
                alert($("#imgs").prop("title"));*/

                //设置
                /*$("#imgs").prop("width","1000");
                $("#imgs").prop("height","1000");
                $("#imgs").prop("title","呼噜娃");*/
            })
        })
    </script>

    <!--<script>
        $(function(){
            alert($("input[name=hobby]").prop("checked"));
            $("input[name=hobby]").prop("checked",true);
            alert($("input[name=hobby]").prop("checked"));
        })
    </script>-->

    <script>
        $(function(){
            alert($("#o2").prop("selected"));
            $("#o2").prop("selected",true);
        })
    </script>

</head>
<body>
        <img id="imgs" src="img/666.bmp" width="500" height="500" alt="图片正在努力加载中.." title="葫芦娃"/>
        <input id="bt1" type="button" value="获取/设置属性" />
        <hr/>
        <input type="checkbox" name="hobby" value="cy">抽烟
        <input type="checkbox" name="hobby" value="hj">喝酒
        <input type="checkbox" name="hobby" value="tt">烫头
        <hr/>
        <select>
            <option>北京</option>
            <option id="o2">上海</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
</body>
</html>

操作多选框被选中：
在这里插入图片描述
操作复选框被选中：

jquery指定插入标签的方法（掌握）

在这里插入图片描述

append(element) 添加成最后一个子元素，两者之间是父子关系
prepend(element) 添加成第一个子元素，两者之间是父子关系
before(element) 添加到当前元素的前面，两者之间是兄弟关系
after(element) 添加到当前元素的后面，两者之间是兄弟关系
remove() 删除元素
empty() 清空元素的所有子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            $("#bt1").click(function(){
                //$("#ul").append("<li>成都</li>");
                //$("<li>成都</li>").appendTo($("#ul"));

                //$("#ul").prepend("<li>成都</li>");

                //$("#ll").after("<li>成都</li>");
                //$("#ll").before("<li>成都</li>");

                //删除标签
                //$("#ll").remove();
                //清空子元素(自己还存在)
                $("#ul").empty();
            })
        })
    </script>
</head>
<body>
        <ul id="ul">
            <li>北京</li>
            <li id="ll">上海</li>
            <li>广州</li>
            <li>深圳</li>
        </ul>

        <input type="button" value="添加" id="bt1"/>
</body>
</html>

案例

复选框的全选
全不选在这里插入图片描述
复选框的反选

在这里插入图片描述

案例1：隔行换色
案例2：复选框的全选全不选操作
案例3：QQ表情发表案例

案例 1 和 2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			$(function(){
			    $("tr:gt(1):even").css("background-color","red");
			    $("tr:gt(1):odd").css("background-color","yellow");
			})
		</script>

		<script>
            $(function(){
                $("#ckbox").click(function(){
                    //this：是dom对象
					$(".ck").prop("checked",$(this).prop("checked"));
				})
            })
		</script>

		<script>
            $(function(){
                $("#bt").click(function(){
                    // click()：让复选框被点击
					$(".ck").click();
                })
            })
		</script>
	</head>
	<body>
		<table id="tab1" border="1" width="800" align="center" >
			<tr>
				<td colspan="5"><input type="button" value="反选" id="bt"></td>
			</tr>

			<tr style="background-color: #999999;">
				<th><input type="checkbox" id="ckbox"></th>
				<th>分类ID</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>

			<tr>
				<td><input type="checkbox" class="ck"></td>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>

			<tr>
				<td><input type="checkbox" class="ck"></td>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑办公类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>

			<tr>
				<td><input type="checkbox" class="ck"></td>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>

			<tr>
				<td><input type="checkbox" class="ck"></td>
				<td>4</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

案例 3
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>QQ表情选择</title>
    <style type="text/css">
    *{margin: 0;padding: 0;list-style: none;}

    .emoji{margin:50px;}
    ul{overflow: hidden;}
    li{float: left;width: 48px;height: 48px;cursor: pointer;}
    .emoji img{ cursor: pointer; }
    </style>

    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            $("ul img").click(function(){
               $(this).clone().appendTo($("p"));
            })
        })
    </script>
</head>
<body>
    <div class="emoji">

        <ul>
            <li><img src="img/01.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/02.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/03.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/04.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/05.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/06.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/07.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/08.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/09.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/10.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/11.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/12.gif" height="22" width="22" alt="" /></li>
        </ul>
       
		

        <p class="word">
            <strong>请发言：</strong>
            <img src="img/12.gif" height="22" width="22" alt="" />
        </p>
    </div>
</body>
</html>

AdamCafe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web核心 9-jquery 隔行换色复选框的全选全不选

内容介绍（jquery）1.Jquery的选择器2.Jquery的方法操作标签的文本和value属性值操作标签的样式操作标签的属性对某些标签插入指定标签的方法jquery(jq)概述jquery：是javascript的一套框架作用：大大简化javascript的代码量倡导写更少的代码，做更多的事情框架：对原有javascript的功能代码进行封装，对外...
复制链接

扫一扫