jquery小结5

1 jquery拖拉插件
      $(function() {
            //以透明度0.35随意拖动
            $("#divDragD").draggable({ opacity: 0.35 });
            //以透明度0.35随意在X轴方向拖动
            $("#divDragX").draggable({ axis: "x", opacity: 0.35 });
            //以透明度0.35随意在父窗口中拖动，拖动后返回原地
            $("#divDragC").draggable(
            { containment: "parent",
                opacity: 0.35,
                revert: true
            });
        })
         其中draggable后跟要拖动的各参数值，具体见jquery ui手册、、
2 droppable放置 ，比如做购物车的拖拉功能
      $(function() {
            //以透明度0.35随意拖动
            $(".divDrag").draggable({ opacity: 0.35 });
            $("#divCart").droppable({
                drop: function() {
                    $(this)
                .addClass("divGet") //改变购物车的CSS
                .append($("<div></div>"))
                .find("#divTip").remove(); //删除原有内容
                }
            })
        })
    <div id="divFrame">
         <div class="divLeft">
              <div class="divTitle">产品</div>
              <div class="divDrag">
                  <img alt="" src="Images-8-2/img03.jpg" />
              </div>
            
         </div>
         <div class="divRight">
              <div class="divTitle">购物车</div>
              <div id="divCart">
                  <div id="divTip">还没有产品</div>
              </div>
         </div>
    
     </div>

3 jquery ui中的datapicker实现分段选择
     即选择开始日期后，结束日期部分的日历选择时，只能在大于开始日期后才选择
     <script type="text/javascript">
    $(function() {
        $("#txtStart").datepicker( //绑定开始日期
{ changeMonth: true, //显示下拉列表月份
    changeYear: true, //显示下拉列表年份
    showWeek: true, //显示日期对应的星期
    firstDay: "1",
    onSelect: function(dateText, inst) {
        //设置结束日期的最小日期
        $('#txtEnd').datepicker('option', 'minDate', new Date(dateText.replace('-', ',')))
    }
})

        $("#txtEnd").datepicker( //绑定结束日期
{ changeMonth: true, //显示下拉列表月份
    changeYear: true, //显示下拉列表年份
    showWeek: true, //显示日期对应的星期
    firstDay: "1",
    onSelect: function(dateText, inst) {
        //设置开始日期的最大日期
        $('#txtStart').datepicker('option', 'maxDate', new Date(dateText.replace('-', ',')))
    }
})
    }) </script>

4 对话框
    $(function() {
        $("#btnSubmit").bind("click", function() { //检测按钮事件
            if ($("#txtName").val() == "") { //如果文本框为空
                sys_Alert("姓名不能为空！请输入姓名");
            }
        });
        function sys_Alert(content) { //弹出提示信息窗口
        $("#dialog-modal").dialog({
            height: 140,
            modal: true,
            title: '系统提示',
            hide: 'slide',
            buttons: {
                Cancel: function() {
                    $(this).dialog("close");
                }
            },
            open: function(event, ui) {
                $(this).html("");
                $(this).append("" + content + "
");
            }
        });
    }

    function sys_Confirm(content) { //弹出询问信息窗口
        $("#dialog-modal").dialog({
            height: 140,
            modal: true,
            title: '系统提示',
            hide: 'slide',
            buttons: {
                '确定': function() {
                    $("#spnName").remove();
                    $(this).dialog("close");
                },
                '取消': function() {
                    $(this).dialog("close");
                }
            },
            open: function(event, ui) {
                $(this).html("");
                $(this).append("" + content + "
");
            }
        });
    }

5 jquery的工具函数
    1）浏览器检测
           <script type="text/javascript">
        $(function() {
            var strTmp = "您的浏览器名称是：";
            if ($.browser.msie) { //IE浏览器
                strTmp += "IE";
            }
            if ($.browser.mozilla) { //火狐相关浏览器
                strTmp += "Mozilla FireFox";
            }
            strTmp += " 版本号是：" //获取版本号
                   + $.browser.version;
            $("#divTip").html(strTmp);
        })
    </script>
   2） 数组和对象
       each遍历：
       unction() {
            var arrStu = { "张三：": "60", "李四：": "70", "王二：": "80" }
            var strContent = "<li class='title'>姓名：分数</li>";
            $.each(arrStu, function(Name, Value) {
                strContent += "

" + Name + Value + "

";
            })
    3）$.grep() ，比如查找大于5且序号小于8的元素
          var strTmp = "变更前数据：";
            var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
            var arrGet = $.map(arrNum, function(ele, index) {
                if (ele > 5 && index < { //元素值大于5且序号小于8
                    return ele + 1; //元素增加1
                }
            })
            strTmp += arrNum.join();
            strTmp += "<br/><br>变更后数据："
            strTmp += arrGet.join();
    4）$.map() ，可以变更数组中的元素
　　　　　　  var strTmp = "变更前数据：";
            var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
            var arrGet = $.map(arrNum, function(ele, index) {
                if (ele > 5 && index < { //元素值大于5且序号小于8
                    return ele + 1; //元素增加1
                }
            })
            strTmp += arrNum.join();
            strTmp += "<br/><br>变更后数据："
            strTmp += arrGet.join();

　　　5) $.inArray()
           在数组中找某个元素，找到返回索引号，找不到则返回-1,
         $.inArray(value,array),value:要检索的对象
　　　6) $.contains(container,contained)
             检查一个dom节点中是否包含另外一个dom节点，如果container包含contained，则返回true

       7)$.param()对数组序列化
　　　　　　　将对象序列化后可传输的URL
        如：
　　　　    var arrInfo = { id: 101, name: "tao", sex: 0 };
　　　　　　　      var arrNewInfo = $.param(arrInfo);
　　　　　　　变为id=101&name=tao&sex=0
      $.extend()扩展工具函数
　　　　　　比如搞个求两数中的最大值
　　　　  ; (function($) {
            $.extend({
                "MaxNum": function(p1, p2) {
                    return (p1 > p2) ? p1 : p2;
                }
            });
        })(jQuery);
　　　　　　　使用$.MaxNum(5,6);
   
6 性能优化
　　　　
      1)有id,TAG,class三者情况下，用id访问速度最快
　　　2)　优化事件中的冒泡，通过target()方法，获取父元素，并为该元素绑定一个事件，比如：
　　　　<fieldset id="frame" style="width:200px">
          <legend>输入信息</legend>
          <div>姓名：<input id="Text1" type="text"/></div>
          <div>性别：<input id="Text2" type="text" /></div>
          <div>年龄：<input id="Text3" type="text" /></div>
        </fieldset>
　　　   $(function() {
            $("#frame").bind("click", function(e) {
                $objChild = $(e.target);//捕捉触发事件的元素
                $objChild.addClass("txt");//增加子元素的样式
            })
        });
　　　　　 $objChild = $(e.target);获得触发事件的元素，将事件绑定传递到父元素中，通过冒泡
传递到各子元素，使各个子元素也被同样绑定，比逐个input快
　　　　
　　　3)可以通过xxxx.data(name,value),设置缓存数据，包括设置json,移除为
　　　　removeData(name)
      4)减少对dom元素的操作，一次操作多点
          var arrList = ["list0", "list1", "list2", "list3", "list4", "list5"];
            var strList = ""; //初始化字符
            $.each(arrList, function(index) {
                //遍历后累加数组元素
                strList += ("

" + arrList[index] + "

");
            })
            //一次性完成DOM元素的增加
            $("#ulFrame").append(strList);
      5) dom对象与JQUERY对象的类型转换
         dom向jquery转换：
              <div id="div0"></div>
    <div id="div1"></div>
             $(function() {
            //***** DOM对象转成jQuery对象 *****//
            //DOM对象
            var objDom0 = document.getElementById("div0");
            //转成jQuery对象
            var $obj0 = $(objDom0);
            //调用jQuery中的方法设置其中的内容
            $obj0.html("DOM对象转成jQuery对象后设置的内容");

            //***** jQuery对象转成DOM对象 *****//
            //jQuery对象
            var $obj1 = $("#div1");
            //转成DOM对象
            var objDom1 = $obj1.get(0);
            //调用JavaScript中的对象方法设置内容
            objDom1.innerHTML = "jQuery对象转成DOM对象后设置的内容";
        })
     

评论

1 楼 daixu2008 2011-10-20  

代码内的表情很给力！