jQuery

jQuery
  • jquery
    1. 选择:
      元素$("div"),标识:$("#id"),样式:$(".css")
      属性:$("input[attr=value]"),拥有[attr],不等!=,包含*=,开头^=,结尾$=,并列[id][name*="man"]
      表单属性:$("select option:selected"),$("input:enabled")、disabled、checked
      表单:$(":text")、button、file、checkbox、hidden、image、password、radio、submit、reset
      合并:$("div","p"),层级:$("form input"),两级:$("form > :text"),之后+,同辈~ 
    2. 函数:
      加载完执行:$(function(){});等价于$(document).ready(function(){});
      动态更新元素:$("#id").load(url,[data],[callback]);无参时Get需两次encodeURI中文
    3. 事件:
      确认触发:$(":text").keydown(function(event){if(event.keyCode==13){$(":button").trigger("click");}});
      绑定点击:$(":button").bind("click",function(){alert("you clicked!");});
  • jquery.autocomplete:给输入框加入自动提示功能
    1. 简单用法
      var options, a;
      jQuery(function(){
        options = { serviceUrl:'service/autocomplete.ashx' };
        a = $('#query').autocomplete(options);
      });
    2. 其他参数
      var a = $('#query').autocomplete({
          serviceUrl:'service/autocomplete.ashx',
          minChars:2,
          delimiter: /(,|;)\s*/, // regex or character
          maxHeight:400,
          width:300,
          zIndex: 9999,
          deferRequestBy: 0, //miliseconds
          params: { country:'Yes' }, //aditional parameters
          noCache: false, //default is false, set to true to disable caching
          // callback function:
          onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); },
          // local autosugest options:
          lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values
        });
    3. Ajax返回json格式:query查询,suggestions提示,data回调(可选,比如返回关键词命中次数hits)
      {
       query
      :'Li',
       suggestions
      :['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'],
       data
      :['LR','LY','LI','LT']
      }
    4. 提示层的内容及样式:左边显示提示,右边显示分数。
      fnFormatResult:function fnFormatResult(value, data, currentValue){
      var reEscape = new RegExp('(\\' + ['/', '.', '*', '+', '?', '|', '(', ')', '[', ']', '{', '}', '\\'].join('|\\') + ')', 'g');
      var pattern = '(' + currentValue.replace(reEscape, '\\$1') + ')';
      return '<span style="float:left;display:block">' + value.replace(new RegExp(pattern, 'gi'), '<strong >$1<\/strong>')+'</span>' + '<span style="float:right;display:block">' + data + '</span>';
      }
    5. 自动提交搜索
      autoSubmit:true,
      onSelect: function(value, data) {
      //document.forms["showSearch"].submit();
      },
  • jquery.uploadify:上传文件,有进度显示,支持多文件多线程上传
    1. 执行脚本:可自动上传auto:true或点击上传按钮
      $(function() {
           $('#fileInput').uploadify({
                'uploader'  : '<%=artPath%>/flash/uploadify.swf',
                'script'    : '<%=basePath%>/file/ajaxFileUpload.ac',//上传完成后请求路径
                'cancelImg' : '<%=artPath%>/images/cancel.png',
                'fileDataName' : 'file', //struts Action有File file和String fileFileName、fileContentType保存已上传的文件、文件名、文件类型
                'sizeLimit' : 19871202000, //设置单个文件大小限制
                'queueID':'fileQueue',
                'removeCompleted' : false,
                'onComplete': function(event,queueID,fileObj,response,data{
                           if(!response || response == "P00000000"){
                                alert("文件:" + fileObj.name + "上传不成功,请删除后再添加!");
                           }else if(!$("#pid").attr("value")){
                                $("#pid").attr("value", response);
                           }else{
                              $("#pid").attr("value", $("#pid").attr("value") + "," + response);
                           }
                      },
                'auto':false,//自动上传会在选定文件后立即出发,否则通过函数uploadifyUpload();
                'multi':true,//多文件上传会多次请求script指定的路径
           });
      });
    2. 页面元素:文件选择框,上传按钮,保存上传记录id值便于提交后使用
      <input id="fileUploadButton" type="file" name="fileUploadButton" />
      <a class="a2" onclick="javascript:$('#fileUploadButton').uploadifyUpload();">上传</a>
      <input type="hidden" name="pid" id="pid"/>
  • jQuery.zTree:





posted @ 2012-07-09 16:17 xlongwei 阅读(...) 评论(...) 编辑 收藏
xlongwei