JQuery基础知识（推荐--arvin）

来自：http://blog.youkuaiyun.com/flyingpig4/article/details/5353698

最近学习了一下<锋利的JQuery>，写一些自己的总结:
 
页面及动作初始化操作,使用ready
 function sayhello(){
  alert("hello,world");
  $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]});
  $("tr").click(function(){.html())});
  $("input").click(function(){.html())});
 }
 function sayhello1(){
 //#用于取ID，.class用于取css样式 div用于直接的标签，通常得到一个数祖值
  alert("hello,world");
  //输出相应的文本值，value值,html文档
  alert($("#world").val());
  alert($("#no").text());
  alert($("#no").html());
  
  //改变背景色,利用css格式
  $("#backtd").css("backgroundColor","blue");
  //渐进渐出条
  $("#no").fadeIn("fast");   
  $("#no").fadeOut("slow"); 
  $("#no").click(function(){});
  $("#no").click(sayhello());
  $("#no").slideUp("slow");   
  $("#no").slideDown("slow"); 
  
 }
 function changecolor()
 {
  alert();
  this.backgroundColor="red";
  
 }
 
 $(document).ready(function(){$("#yes").click(sayhello1)});
 
 $(document).ready(function(){$("#mydiv").click(function sayhi()
 {
  alert("waht");
 })});
    $(document).ready(sayhello1);
    $(document).ready(function(){$("a").click(sayhello1)});
   
    
    //用toggle()方法实现隐藏，显示
    $(function(){
  $("#title").toggle(
    function(){
   $("#mydiv").hide()
   },function(){
    $("#mydiv").show();
    }
 )
 });
 //直接调用 toggle()方法显示和隐藏，并且添加css样式
 $(function(){
  $("#title").toggle(
    function(){
     $("#title").addClass("highlight");
   $("#nod").toggle();//直接调用 toggle()方法
   },function(){
   $("#title").removeClass("highlight");
    $("#nod").toggle();
    }
 )
 });
 
 //最为简单的方式
 $('#title').bind("mouseover mouseout",function(){$(#title).toggle("highlight")})
 */
 // 为span元素绑定click事件，防止因为嵌套出现的重复提交
 $(function(){
 $('table').bind("click",function(event){
  alert($("#mydiv").html());
  event.stopPropagation();    //  阻止事件冒泡
 });
 // 为div元素绑定click事件
 $('div').bind("click",function(event){
  alert($("#mydiv").html());
     event.stopPropagation();    //  阻止事件冒泡
     return false；     //click也可以阻止，特别是在<a>标签下可以使用
 });
 // 为body元素绑定click事件
 $("body").bind("click",function(){
  alert($("#mydiv").html());
 });
})
 
    //$("#backtd").click(sayhello);
   // $(document).ready(function({$("#backtr").click(changecolor)});
   
//DOM对象和Jquery对象互相转换
 
  //由DOM转化为Jquery对象,在Jquery对象前加$批为Jquery对象
  var a=document.getElementById("aaa");
  var $a=$(a);
  //由Jquery转化为DOM对象
  var b=$a[0];
  var c=$a.get(0);


 Jquery过滤器
  1.基本选择器
    $(#id)获取id值
    $("element")获取元素集合
    $(.cssStyle)获取为css样式的元素集合
   应用：
    $(#id).css("color","#bbffaa");
  2.层次选择器
  $('body div') 获取body下所有div
  $('div'>tr)获取div下的元素名为tr的子元素
  $('#mydiv'~tr)=$('#mydiv'.nextAll())获取id为mmdiv后的所有同类元素的集合，如果#mydiv为div ,则获取其后所有div值
  $('#mydiv'+tr)=$('#mydiv'.next())获取id为mmdiv后的下一个同类元素的集合，如果#mydiv为div ,则取紧跟其后的div值
  $("#mydiv").silblings("div")获取除#mydiv之外，所有同类div集合，不分先后顺序，
  应用：
  $('body div').css("color","#bbffaa");
  
  3.过滤选择器:注意用冒号隔开
  $("div:first") 获取第一个div
  $("div:last")获取最后一个div
  $("div:not(接选择器，如.css("className"))")
  $("tr:even")获取当前tr是否为偶数，可用其它元素代替
  $("tr:odd")获取当前tr是否为奇，可用其它元素代替
  $("input:eq(int index)")获取当前的索引数的input
  $("input:gt(int index)")获取当前的索引数大于3的input
  $("input:lt(int index)")获取当前的索引数小于3的input
  应用：
  $("div:first").css("color","#bbffaa");
  
  4.内容过滤器：同样用冒号隔开
  $("div:contains(text)"）获取含量有text文本的div
  $("div:empty")获取无子元素的div，包含文本元素
  $("div:has(元素)")获取存在元素的div
  $("div:parent")获取存在子元素的div，包含文本元素
  
  应用：$("div:has(mini)")即存在css样式为mini的div类
   
   
  5:可见性过滤器：
  $('div:visiable')
  $('div:hidden')
  应用:
  $('div:visiable').css("color","#ffaabb");
  
  6.属性过滤选择器：用[]表示为属性过滤器
  $('div[attribute]')选择存在attribute属性的div
  $('div[attribute=value]')选择存在attribute属性等于value的div
  $('div[attribute!=value]')选择存在attribute属性不等于value的div
  $('div[attribute^=value]')选择存在attribute属性前缀等于value的div
  $('div[attribute$=value]')选择存在attribute属性后缀等于value的div
  $('div[attribute*=value]')选择存在attribute属性名字中存在等于value的div
  $('div[select1][select2]')多个选择器一起使用
  
  应用：
  $('div[id]')存在属性为id的div
  $('div[id=test]')存在属性为id且id值为test的div
  
  
  7.子元素过滤器选择：
  $('div:nth-child[index/odd/even/3n+1]')//index从1开始，odd,even为偶数,n从0开始
  $('div:first-child')//第一个孩子
  $('div:last-child')//最后一个孩子
  $('div:only-child')//只存在这个孩子
  
  应用：$('div:table:only-child')
  
  8.表单对象属性：
  $('div:enabled') //获取div下所有可用元素
  $('div:disabled')//获取div下所有不可用元素
  $('#muselect:selected')//获取myselect下的被选中的下拉框元素集合
  $('#myinput:checked')//获取myinput下的被选中的多选框，单选框元素集合
  
  应用：
  $('div input:enabled').val("这里改变了");
  $('#myinput:checked').text();
  $('#myselect:selected').length;
    
    
   


 
 
//Jquery表单操作
 
  1.文本框实现
  
    //也可运用mouseover,mouseout实现
    $(function(){
     $(":input").focus(function(){
        $(this).addClass("focus");
        if($(this).val() ==this.defaultValue){  
                     $(this).val("");           
        } 
        //blur为失去焦点时触发
     }).blur(function(){
       $(this).removeClass("focus");
       if ($(this).val() == '') {
                   $(this).val(this.defaultValue);
                }
     });
       })
   
  2.多选框实现
   //全选
    $('[name=items]:checkbox').attr("checked",true);
   //全不选
    $('[name=items]:checkbox').attr("checked",false);
   //反选
       $('[name=items]:checkbox').each(function(){
        $(this).attr("checked",!$(this).attr("checked"));
        })
      //获取选中值，并输出合值
       var str="选中的值为:/r/n"
       $('[name=items]:checkbox:checked').each(function(){
        str+=$(this).val()+/r/n;
        })
  
  3.下拉选框实现
     var $sel=$('#province options:selected');获取选中对象,注意为Jquery对象
     var $rem=$sel.remove();删除当前选中值
     $rem.appendto('#anoprovince')//添加到另外一个下拉框当中
     或者转换为:$sel.appendto('#anoprovince');
     全部添加则为var $sel=$('#province options');$sel.appendto('anoprovince');
     双击选项直接添加 $('#province').doubleclick(function()$("#province options:selected",this).appendto('#anoprovince');});
     
  4.行数奇偶判断
   $("tr:odd").addClass();
   $("tr:even").addClass();
   $("tbody>tr:odd").addClass();
   $("tbody>tr:even").addClass();
   $("tr:contains('')").addClass();
  5.网页选项卡
   $(function(){
   var $change=$('#mydiv ul li')
    $change.click(){
     $(this).addClass('highlight')
      .silblings.removeClass('highlight');
     var $indexnumber=$change.index(this);
     $('#mydiv2>div').eq($indexnumber).show()
      .silblings.hide();
    }
   })
   
   
   
//Jquery的ajax操作：分为三个层次
  1.$.load()方法
   load(url,[,data],[,callback])
   eg:
    $('#hello').load("test.html");
    $('#hello').load("test.html .para");
    $('#hello').load("test.html .para",{name:"hello",user:"world"},function(responseText,textStatus,XMLHttpRequest){});
    $('#hello').load("test.html .para",{name:"hello",user:"world"},function(responseText,textStatus,XMLHttpRequest){});
  2.$.get()方法
   $.get(url,[,data],[,callback],[,type])
   eg:
    $.('#mydiv').click($.get("test.html",{username:$('#myusername').val(),password:$('#mypassword').val()},function(data,textStatus){
     $("#mydiv").html(data);
    解析XML文档
    $.('#mydiv').click($.get("test.html",{username:$('#myusername').val(),password:$('#mypassword').val()},function(data,textStatus){
     
     var username=$(data).find('comment').attr("username");
     var password=$(data).find('comment comment').text();
     var textHtml="<div class="comment">"+usernmae+"<p class='para'>"+password+"</p></div>";
     $("#mydiv").html(textHtml);
     }))
    解析JSON文档,注意type标识为返回json数据类型
    $.('#mydiv').click(function(){($.get("test.html",{username:$('#myusername').val(),password:$('#mypassword').val()},function(data,textStatus){
     
     var username=data.username;
     var password=data.password;
     var textHtml="<div class="comment">"+usernmae+"<p class='para'>"+password+"</p></div>";
     $("#mydiv").html(textHtml);
     },"json"));
     })
  3.$.post()方法:操作方式与get()方法相同
    post与get异同：1.get的参数通过URL进行传递；2,get会被浏览器缓存，相对而言安全性低;3,get一般存在大小限制，不超过2K
    $.post(url,[,data],[,callback],[,type])
  4.$.getScript()方法
   实现动态加载js文件
   eg:
    function(){
     $("#mybutton").click(){function(){
      $.getScript('test.js');
      }}
     }
    //存在回调函数
    function(){
     $("#mybutton").click(){function(){
      $.getScript('test.js',fucntion(){
       //处理结果
       });
      }}
     }
  5.$.getJson()方法
   实现动态加载Json文件，与加载script文件相同
  6.$.ajax()方法
     要注意相应参数的设置
   
   
   
   
   
   
//Jquery的插件
  1.表单验证插件:添加validation.js文件
    可以有多种方式，如添加js文件后,设置class类型，或者直接判断name，设定验证规则，还可以自己添加验证信息
    并不推荐设置class值来进行判断；
    1）：直接用name进行判断： 
      eg:$(document).ready(function(){
       $("#commentForm").validate({
        rules: {
         username: {
          required: true,
          minlength: 2
         },
         email: {
          required: true,
          email: true
         },
         url:"url",
         comment: "required"
        }
         });
      
        });
    jsp页面：<label for="cusername">姓名</label>
          <em>*</em><input id="cusername" name="username" size="25" />
       2）：输出为中文，直接添加jquery.validate.messages_cn.js类型
         eg:就直接添加js类型，其它与上一致
         
         注意：可在JS文件中修改相应的错误提示message
         3）：自定义验证信息:可自定义错误信息，并设置错误信息的格式,为commentForm添加了验证，包括rules,messages，以及错误样式
          eg:
           $(document).ready(function(){
     $("#commentForm").validate({
      rules: {
       username: {
        required: true,
        minlength: 2
       },
       email: {
        required: true,
        email: true
       },
       url:"url",
       comment: "required"
      },
      messages: {
       username: {
        required: '请输入姓名',
        minlength: '请至少输入两个字符'
       },
       email: {
        required: '请输入电子邮件',
        email: '请检查电子邮件的格式'
       },
       url: '请检查网址的格式',
       comment: '请输入您的评论'
      }, 
      errorElement: "em", //可以用其他标签，记住把样式也对应修改
      success: function(label) {
       //label指向上面那个错误提示信息标签em
       label.text(" ")    //清空错误提示消息
        .addClass("success"); //加上自定义的success类
      }
       });
  2.Jquery表单Form插件
   1) 概念：将表单升级为ajax方式，可直接对表单进行ajax操作，简单的应用如表单提交前创建进行验证，验证方法采用validate.js进行验证;
   2）核心包括ajaxForm()方法和ajaxSubmit()方法;两个方法的应用相似，均可完成下列内容;
    eg:
     $('#myForm').ajaxForm(function(){
      $('#mydiv').html("hello,world").show();
      //return false;返回值为false的时候阻止表单提交；
     })
   3)为ajaxForm()和ajaxSubmit提供参数options，然后作为参数进行传递,也可直接把options的内容传递到ajaxForm当中
    eg: 
     $(document).function.ready(){
      var options={
       target:'#mydiv';服务返回的数据更新id为mydiv的内容
       beforeSubmit:showrequest;//表单提交之前进行的函数处理；
       success:showresponse;//表单提交之后进行的函数处理；
       resetForm:true;//表单成功提交后全部内容清空；
       //dataType:null  返回的数据类型：可以为xml,json,script等等;
       //timeout:3000;  限制请求的时间，不宜过短;
       //clearForm:true;与resetForm相似，但是默认选项也会被清空;
      }
      $('myForm').ajaxForm(options);
     }
     function showrequest(formData,jqForm,options){
      alert("提交前进行的函数操作");
      //jqForm 是一个jQuery对象， 他包装了表单的dom元素.可将其转换为dom方式
      
       var formstring=jqForm[0];
       if(!formstring.name.value||!formstring.password.value)
        {
         return false;
        }
      
      else {
        var querystring=$.param(formData)//转换为url请求参数的格式name=fjfj$password=fd
        alert(querystring);
        for(var i=0 ;i<formData.length;i++)
        {
         if(!formData[i])
         {
          alert("存在空值");
          return false;
         }
        }
        else return true;
       }
     }
     function show showresponse(responseText,statusText){
      alert("提交后进行的函数操作");
      alert('状态: ' + statusText + '/n 返回的内容是: /n' + responseText); 
      $('#output1').html(responseText);
     }
    4)dataType分别为xml,json时的处理方式
     eg:
      //json
       $(document).ready(function(){
        $('#myForm').ajaxForm(){
         target:#mydiv;
         success:processJson;
        }
       });
       function processJson(data)
       {
        
        $('#mydiv').html(data.username+" "+data.password+" "+data.comment);
       }
      //xml
       $(document).ready(function() { 
        $('#xmlForm').ajaxForm({ 
            // 声明 服务器返回数据的类型.
            dataType:  'xml', 
            success:   processXml 
        }); 
    }); 
    
    function processXml(responseXML) { 
        // 'responseXML' 是一个XML的文档 ，从服务器返回的.
        var name = $('name', responseXML).text(); 
        var address = $('address', responseXML).text(); 
        var comment = $('comment', responseXML).text(); 
        $('#xmlOut').html(name +  "   "+address + "  "+comment); 
    }
   
   // html 
    $(document).ready(function() { 
        $('#htmlForm').ajaxForm({ 
            // 用服务器返回的数据 更新 id为 htmlcssrain 的内容.
            target: '#htmlOut', 
            success: function() { 
                $('#htmlOut').fadeIn('slow'); 
            } 
        }); 
    });