• jQuery-表格以及表单


    表单应用:

    1、设置高度:

    $comment.height($comment.height() + 50);

    $comment.animate({height : "+=50"},400);

    2、滚动条高度变化,是利用scrollTop属性;eg:文本域的滚动条

    3、复选框的全选以及全不选以及反选

    全选:

    $("#ChenckAll").click(function(){

       $('[name=items] :checkbox').attr("checked",true);

    })

    反选:

    //each循环

    $("#ChenckAll").click(function(){

          $('[name=items] :checkbox').each(function(){

               this.checked = ! this.checked;

          })

    })

    4、删除以及追加这两个按钮可以在appendTo()中直接完成

    就是说当我将一侧中的元素选取出来添加到另一侧的时候,会导致一侧中的元素消失,会出现在另一侧中

    5、$("#select1").dbclick(function(){

          //当双击鼠标的时候,会获取被点击的选中的项

          var $options = $("option:selected",this);

          $options.appendTo("select2");

    })

    表格应用:

    1、当对象发生改变的时候,我们又需要使用原来的对象,可以使用end()函数

    $('tbody > tr').click(function(){

          $(this).addClass('selected')

                 .sibiling().removeClass('selected')

                 //对象发生了改变

                 .end()

                 //返回到this对象

                 .find(':radio').attr('checked',true);

    })

    2、使用hasClass()判断是否含有某class类

    3、var hasSelected = $(this).hasClass('selected');

    //3元表达式

    $(this)[hasSelected ? "removeClass" : "addClass"]("selected");

    4、

    //当点击分类行的时候,分类的内容会显示或隐藏

    $(function(){

          $('tr .parent').click(function(){

               $(this).toggleClass("selected")

                      .sibiling('.child_' + this.id).toggle();

          })

    })

    //当用户刚进入页面的时候,默认是收缩起来的

    $('tr .parent').click(function(){

               $(this).toggleClass("selected")

                      .sibiling('.child_' + this.id).toggle();

    }).click();

    5、$(function(){

          $("#filterName").keyup(function(){

               $("table tbody tr").hide()

                             .filter(":contains('"+( $(this).val() )+"')").show();   

        }).keyup();  //DOM加载完后,绑定事件完成之后会立即触发

    })

    当输入一个字符的时候,筛选出来的选项在刷新后,字符存在,项不存在,以上代码,会使其保存一致

    6、对当前皮肤换肤:

    function switchSkin(skinName){

          $("#"+skinName).addClass("selected")

          .sibiling().removeClass("selected");

          $("#cssfile").attr("href","css/"+skinName+".css");

          $.cookie("MyCssSkin" , skinName , { path: '/' , expires : 10});

    }

    $(function(){

          var $li = $("#skin li");

          $li.click(function(){

               switchSkin(this.id);

          });

          var cookie_skin = $.cookie("MyCssSkin");

          if(cookie_skin){

               switchSkin(cookie_skin);

          }

    })

    网页换肤功能不仅能正常切换,而且也能保存到Cookie中,用户刷新后,仍然是当前选择的皮肤

  • 相关阅读:
    exit()和_exit()的比较(与前一篇日志行缓冲区有关)
    标准IO缓冲详解全缓冲、行缓冲、不缓冲
    windows与unix/linux下输入回车换行的区别
    strtok()的用法
    头文件的处理
    feof()出现的问题及解决办法
    测试题
    视觉十四讲:第十二讲_八叉树地图
    树莓派4B安装OPENCV4.0
    编译OpenCV以及openc_contrib提示缺少boostdesc_bgm.i文件出错的解决
  • 原文地址:https://www.cnblogs.com/zhanghuiyun/p/5185610.html
Copyright © 2020-2023  润新知