Day09JavaWeb【Jquery】综合案例***

jquery的案例-隔行换色

<!--导入js-->
  <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
  <script type="text/javascript">
    $(function () {
      $("tr:gt(1):even").css("background-color","red");
      $("tr:gt(1):odd").css("background-color","blue");
        });

jquery的案例-全选全不选

<script type="text/javascript">
      $(function () {
        //1:给全选框绑定点击事件
        $("#checkedAllId").click(function () {
          //2：获取全选框的选中状态
                    var flag = $("#checkedAllId").prop("checked");
                    //3:将全选框状态赋值给所有的行选框
          $(".itemSelect").prop("checked",flag);
                });
            });
    </script>

jquery的案例-QQ表情

<script type="text/javascript">
        //this是js对象
        //1:给所有的标表情图片添加点击事件
        $("li img").click(function () {
            //2:将每一张图片，克隆一份添加到请发言的后边
            var newImgEle =  $(this).clone();
            $(".word").append(newImgEle);
            //3:给每一张克隆的图片绑定一个点击事件
            newImgEle.click(function () {
                //点击之后，删除自己
                $(this).remove();
            });
        });
    </script>

jquery小结

》》1：不要死记硬背，只要求能看懂
》》2：需要函数的时候查看文档
》》3：使用的越多就越熟