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,

         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：
  

  
  

通过 为知笔记 发布