jquery 学习小结4

继续读书记下心得
1 toggle(switch)
  如果是显示，则隐藏；如果是隐藏，则显示
  比如某张图片  $("img").toggle();

2 sligdeToggle()，自动判断以进行高度的增减的动画效果
     $(function() {
            $(".divFrame").click(function() { //div元素点击事件
                //图片高度状态自动切换，并执行一个回调函数
                $("img").slideToggle(3000, function() {
                    $("img").css("border", "solid 1px #ccc");
                })
            })
        })
3 animate动画效果
      $(function() {
            $("input:eq(0)").click(function() { //左移按钮点击事件
                //在3000毫秒内，以动画的形式向左移动52个像素
                $(".divList").animate({ left: "-=52px" }, 3000);
            })
            $("input:eq(1)").click(function() { //右移按钮点击事件
                //在3000毫秒内，以动画的形式向右移动52个像素
                $(".divList").animate({ left: "+=52px" }, 3000);
            })
        })

4 动画队列
      $(function() {
            $("div").click(function() { //div块单击事件
                $(this)
             .animate({ height: 100 }, "slow") //第1列
             .animate({ width: 100 }, "slow") //第2列
             .animate({ height: 50 }, "slow") //第3列
             .animate({ width: 50 }, "slow"); //第4列
            })
        })
5 动画的停止和延时
      $("img").stop(); //停止正在执行的动画
       $("img") .delay(2000) //延时切换图片

6 ajax加载用法
   使用load方法比如
   $("#divtips").load("c.html);
  load方法中可以加载另外一个页面的某个类别的元素，比如
     $("#divtips").load("c.html.divcontent);
  
   getJSON方法的使用，比如：
           $.getJSON("UserInfo.json", function(data) {
                    $("#divTip").empty(); //先清空标记中的内容
                    var strHTML = ""; //初始化保存内容变量
                    $.each(data, function(InfoIndex, Info) { //遍历获取的数据
                        strHTML += "姓名：" + Info["name"] + "<br>";
                       })
                  })
7 getScript的使用
    可以在jquery中加载另外一个JS，比如
   $.getScript("xxxx.js");
8 异步加载XML文档
           $.get("UserInfo.xml", function(data) {
                    $("#divTip").empty(); //先清空标记中的内容
                    var strHTML = ""; //初始化保存内容变量
                    $(data).find("User").each(function() { //遍历获取的数据
                        var $strUser = $(this);
                    ............................
9 向服务端传送数据
   .get以及使用.post，比如 .post的例子
       $.post("User_Info.aspx",
                { name: encodeURI($("#txtName").val()),
                   sex: encodeURI($("#selSex").val())
                },
                function(data) {
                    $("#divTip")
               
                    .html(data); //显示服务器返回的数据
                })
              
         当使用中文时，要用encodeUri
10 序列化表单
    serialize()
   将所选择的dom元素转成能随ajax传递的字符串，即序列化所选的dom元素
11 $.ajax()方法
     可以代替其他$.get,$.post,$.getJSON等
  可以设置$.ajaxSetup()设置全局的ajax选项，方便一次过设置
         $.ajaxSetup({ //设置全局性的Ajax选项
                type: "GET",
                url: "xxx.xml",
                dataType: "xml"
            })
12 ajax的ajaxstart和ajaxstop等事件
        //元素绑定全局ajaxStart事件
            $("#divMsg").ajaxStart(function() {
                $(this).show(); //显示元素
            })
            //元素绑定全局ajaxStop事件
            $("#divMsg").ajaxStop(function() {
                $(this).html("已成功获取数据。").hide();
            })
13 jquery validate插件例子
     $(function() {
            $("#frmV").validate(
              {
                  /*自定义验证规则*/
                  rules: {
                      username: { required: true, minlength: 6 },
                      email: { required: true, email: true }
                  },
                  /*错误提示位置*/
                  errorPlacement: function(error, element) {
                      error.appendTo(element.siblings("span"));
                  }
              }
            );
        })
        用户名：

              <input id="username" name="username"
                     type="text" class="txt" />
              <font color="red">*</font>

              <span></span>

14 自动完成插件autocomplete
   下载地址:http://jquery.bassistance.de/autocomplete/jquery.autocomplete.zip
      $(function() {
            var arrUserName = ["xxx","yy".....];
            $("#txtSearch").autocomplete(arrUserName, {
                minChars: 0, //双击空白文本框时显示全部提示数据
                formatItem: function(data, i, total) {
                return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
                },
                formatMatch: function(data, i, total) {
                    return data[0];
                },
                formatResult: function(data) {
                    return data[0];
                }
            }).result(SearchCallback); //选中匹配数据中的某项数据时，调用插件的result()方法
            //自定义返回匹配结果函数
            function SearchCallback(event, data, formatted) {
                $("#divData").html("您的选择是：" + (!data ? "空" : formatted));
            }
            //点击"查一下"按钮后，触发插件的search()方法
            $("#btnSearch").click(function() {
                $("#txtSearch").search();
            });

15 jquery 插件开发
   1)封装方法插件
    通过jquery选择器获取对象，并为对象添加方法，然后将方法打包，封装为一个插件
   2） 封闭函数插件
       可以直接给jquery添加静态方法，并且将函数置于jquery命名空间中，比如
$.ajax()等

    插件以jquery.XXXX.js命名，如果是对象级别的插件，所有方法都依附于jquery.fn
主体对象；如果是类别级别的，依附于jquery对象，结尾都必须用分号结束；
对象级别的插件时，用jquery.fn.extend()扩展；针对类别的话，用jquery.extend()
扩展

  3对象级别的例子：
      ; (function($) {
    $.fn.extend({
        "focusColor": function(li_col) {
            var def_col = "#ccc"; //默认获取焦点的色值
            var lst_col = "#fff"; //默认丢失焦点的色值

            //如果设置的颜色不为空，使用设置的颜色，否则为默认色
            li_col = (li_col == undefined) ? def_col : li_col;

            $(this).find("li").each(function() { //遍历表项<li>中的全部元素
                $(this).mouseover(function() { //获取鼠标焦点事件
                    $(this).css("background-color", li_col); //使用设置的颜色
                }).mouseout(function() { //鼠标焦点移出事件
                    $(this).css("background-color", "#fff"); //恢复原来的颜色
                })
            })
            return $(this); //返回jQuery对象，保持链式操作
        }
    });
})(jQuery);
   调用例子：
         <div class="divContent">
              <ul id="u1">
                 

<span>张三</span><span>男</span>

                 

<span>李四</span><span>女</span>

                 

<span>王五</span><span>男</span>

              </ul>
         </div>
      <script type="text/javascript">
        $(function() {
            $("#u1").focusColor("blue");//调用自定义的插件
        })
    </script>
   4） 类级别的元素：
       ; (function($) {
    $.extend({
        "addNum": function(p1, p2) {
            //如果传入的数字不为空，使用传入的数字，否则为0
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            var intResult = parseInt(p1) + parseInt(p2);
            return intResult;
        },
        "subNum": function(p1, p2) {
            //如果传入的数字不为空，使用传入的数字，否则为0
            var intResult = 0;
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            if (p1 > p2) { //如果传入的参数前者大于后者
                intResult = parseInt(p1) - parseInt(p2);
            }
            return intResult;
        }
    });
})(jQuery);

   使用时：
       $(function() {
            $("#Button1").click(function() {
                $("#Text3").val(
                $.addNum($("#Text1").val(),
                         $("#Text2").val()));
            }); //调用自定义的插件计算两数之和

16 upload上传组件
   uploadify:
  下载地址：http://www.uploadify.com/download
$("#uploadify").uploadify({
        'uploader': 'Images/uploadify.swf',
        'script': 'Deal/UploadFile.ashx',
        'cancelImg': 'Images/cancel.png',
        'folder': 'Uploads/',
        'queueID': 'fileQueue',
        'buttonImg': 'Images/uploadify.jpg',
        'auto': true,
        'multi': true,
        'fileExt': '*.jpg;*.jpeg;*.gif;*.png;*.doc;*.docx;*.xls;*.xlsx;*.pdf;*.txt',
        'onComplete': function(event, queueID, fileObj, response, data) {
            $('ul').append(SetFileContent(fileObj));
          
        }
    })
})
function SetFileContent(objFile) { //根据上传对象返回预览的图片
    var sLi = "";
    sLi += "<li>";
    sLi += "<img src='" + objFile.filePath + "' width='100' height='100'>";
    sLi += "<input type='hidden' value='" + objFile.filePath + "'>";
    sLi += "
";
    sLi += "<a href='javascript:void(0)'>删除</a>";
    sLi += "</li>";
    return sLi;
}
 

评论

3 楼 Java小K 2011-10-14  

这玩意功能好强大，，我要学习下了

2 楼 gonghg 2011-10-14  

感谢楼主

1 楼 greatghoul 2011-10-14  

如果这位大哥能够注意点排版，那的确算是片好文