jquery_fly

1.$(document).ready(function(){
               //可以在一个页面写两个ready页面，会都加载
               //可简化写成$(function(){
                         });
});
2.jquery元素是个数组<script type="text/javascript" src="jquery.js"></script>
     <script type="text/javascript">
     $(document).ready(function(){
     $("button").click(function(){
          //$("p").hide();
          $(this).hide(1000);
          $("[href]").hide();
     $(this).hide(500,function(){
          alert("OK!");
          });//动画完成之后再执行callback();
     $("button").slideToggle();//缓慢显示或隐藏
     $("[href$='.jpg']").hide();//隐藏以.jpg结尾的地址
          $("p").css("background-color","red");
     $("p").after(" W3School.");
     $(selector).before(content);
     $(selector).prepend(content);
     $("span").prepend("相当于innerHTML!");
     $("p").css({"background-color":"yellow","font-size":"200%"});
     });    
     });

     </script>
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库
$("span").html("相当于innerHTML!");
$(document).ready(function() {
          $("#shopTable").hide();

          $("#span_shops").click(function() {
               $(this).css("background-color", "yellow");
               $("#span_goods").css("background-color", "transparent");
               $("#shopTable").show();
               $("#goodsTable").hide();
               $("#h1").show();

          });
          $("#span_goods").click(function() {
               $(this).css("background-color", "yellow");
               $("#span_shops").css("background-color", "transparent");
               $("#shopTable").hide();
               $("#goodsTable").show();
               $("#h1").hide();

          });
               $(".spans").click(function() {
              
               var param=$(this).attr("id");
               $.ajax({
                    url : "delete_store_shop",
                    type : "POST",
                    data : {
                         "shopId" : param
                    },
                    dataType : "json",
                    success : function(data) {
                         alert("success" + data.shopId);
                         location.reload();
                    }

               });
          });
          $("#mutiDeleteShops").click(function() {
               var param = $("input[class=mutiShopId]");
               var params = new Array();
               for ( var i = 0; i < param.size(); i++) {
                    if (param[i].checked == true) {
                         params[i] = param[i].value;

                    }
               }
               $.each(params, function(i, value) {

                    $.ajax({
                         url : "delete_store_shop",
                         type : "POST",
                         data : {
                              "ShopId" : value
                         },
                         dataType : "json",
                         success : function(data) {
                              location.reload();
                         }

                    });
               });

          });
     });

div :input  表示表单中的所有input对象
div input   表示页面中的所有input对象
               jquery元素和dom元素相互转换
                              var jdiv=$(".has_children");
                              var     jhtml=jdiv.html();
                              alert(jdiv.size());
                              //var div=jdiv.get(0);
                              var div=jdiv[0];
                              var html=div.innerHTML;
                              alert(html==jhtml);//为true
               dom对象转换成jquery对象
                              var div=document.getElementById("button1");
                              alert($(div).attr("type"));
                         dom对象和jquery对象的方法不能相互使用
3.判断多个checkbox是否选择了checked
                    $(".cb").change(function(){
                    if($(this).is(":checked")){
                    alert("你确认同意了！");
                    }
                    });
4.将$的控制权转交给其它JS控件(jquery在之后导入)
                    jQuery.noConflict();
                    $j=jQuery.noConflict();//设置jquery的$变为$j;
          继续使用$为jquery的快捷方式
          <1>          jQuery.noConflict();
                         jQuery(function($){
                         //内部可以继续使用$
                         });
          <2>          jQuery.noConflict();
                         (function($){
                              $(function(){
                                   //内部可以继续使用$
                              });
                         })(jQuery);
          //如果jquery在之前导入,则直接使用jQuery,其它控件使用$,不会冲突.
5.获取之后的元素
          $("p+div")==$("p").next();
          $("p~div")==$("p").nextAll();
          $("p").sibling();//获取所有同辈元素
6.过滤选择器
          $("p:contains('我')");选取文本中包含'我'的p集合     //单引号''可加可不加
          $("p:empty");不包含文本内容和子元素的p集合
          $("div:has(p)")包含p子元素的div集合
          $("div:parent")包含子元素或者文本内容的div集合
          $(":hidden")选取被隐藏的元素集合
          $(":visible")选取未被隐藏的元素集合
          $("table tr:first-child")选取所有table的第一个tr
          $("table tr:first")选取table下所有tr排成一个集合后在集合中选取第一个
          //表单对象选择器
                    $("input:enable/:disable/:checked/:selected");
                    $("input");只选取input元素
                    $(":input")选取input,button,select,textare元素
7.空格间选择器的差距
                    $("div :hidden")选取div中为hidden元素的个数
                    $("div:hidden")选取div为hidden元素的个数
8.在原元素中加入内容
                    $("p").append();在p标签后追加加入文本//在元素内加入
                    $("p").prpend()在p标签前置加入文本//在元素内加入
                    $("p").after()在p标签后加入文本//在元素外加入
                    $("p").before()在p标签前置加入文本//在元素外加入
                    $("#div1 p").appendTo("#div2"); 将div1中的p元素加入到div2中,div1中的p被删除//同下
                                        var     jq=$("#div1 p").remove();//remove内可加选择器
                                        $("#div2").append(jq);
                    $("p").empty();清除p中所有的子节点和文本内容
9.复制一个新元素
                    $("button:first").clone(true).appendTo("body");//参数为true表示事件也被复制,否则事件无效.
                    $("p").replaceWith("Are you ok?");将所有p元素改成Are you ok?文本 //replaceAll颠倒参数即可
                    $("p").wrap("<h1></h1>");在p外包裹一个元素 wrapAll用一个h1包裹所有符合元素 wrapInner包裹内部
                    $("a").attr({"href":"http://www.163.com","name":"myname"});一次性设置多个属性 //removeAttr删除属性
                    $("a").addClass()/removeClass()/toggleClass()/hasClass();class操作    
                    var jp=$("#div3").html();获取的jp只是文本内容,不算元素
                    var jp2=$("#div3").text();获取的是文本内容，对于子元素和<b>等自动转换
10.获取子元素
                    $("p").children();只获得子元素而不考虑所有后代元素
                    $("p").next();获取所有p元素下一个同辈元素,就算next有条件也只能在下个元素中选择//pre//siblings
                                                       nextAll()//nextUntil("t").css("opacity","0.5")//不包括t  parent()//parents();
                    $("p").find("span");找到p的所有匹配的后代元素
                    $("p").each(function(){
                              //内部处理
                    });
                    $.each(data,function(i,v){
                    //data为数组或者json对象,i为名或序号,v为值
                    });
11.事件绑定
                    $().hover(in,out);
                    event.stopPropagation();停止事件冒泡
                    终止A标签的提交属性
                    $("a").click(function(e){e.preventDefault();e.target.href//目标元素;e.which//鼠标左中右键});
                    //事件处理函数中return false;同时注册冒泡和默认属性
                    只执行一次的事件
                                        $("a").one("click",function(){
                                        return false;
                                        });
12.jquery异步
                    load:
                                        $("#div1").load("m.do?action=getLoad .param",{name:'hello',password:'findMe'},function(responseText,textStatus,XMLHttpRequest){
                                        //responseText 请求返回的内容
                                        //textStatus 请求状态 success/error/timeout/notmodified
                                        //XMLHttpRequest 对象
                                        //只要当请求完成后此回调函数就会触发,同$.ajax的complete回调函数
                                             alert(responseText+""+textStatus+XMLHttpRequest);
                                        });
                                        $.getScript("jquery.js");//动态加载js
                                        $.getJSON("jquery.json",function(data));
                         ajax
                                        $.ajax(
                                        {
                                             url:"m.do?action=getLoad",
                                             type:"POST",
                                             data:     $("#form1").serialize(),//序列化form中的input
                                             //jJson={a:'a1',b:'b1',c:'c3'};
                                             //$.param(jJson);
                                             dataType:'json',//返回类型
                                             global:false,//不受全局ajax方法影响
                                             cache:false,不从缓存中获取信息
                                             ifModified:true//仅当服务端数据改变时获取信息
                                             success:function(data,textStatus){
                                             alert(data);
                                             $("#div1").fadeTo("fast",0.3);
                                             },
                                             error:function(XMLHttpRequest,textStatus,errorThrow){
                                             alert(errorThrow);
                                             alert(XMLHttpRequest.responseText);
                                             $("#div1").html(errorThrow.toString());
                                             },
                                             complete:function(XMLHttpRequest,textStatus){
                                                  alert(3);
                                             }
                                        }
                                     );
                         get/post
                                        $.post(
                                                       "url",params,function(){
                                                       data,textStatus
                                                       },type
                                        );
                         jquery的AJAX自定义载入方法
                                             $("#div1").ajaxStart(function(){
                                             $(this).hide();
                                             });
                                             $("#div1").ajaxStop(function(){
                                             $(this).show();
                                             });
                                             ajaxComplete,ajaxError,ajaxSend,ajaxSuccess
                   
                    JAVA部分
                                             response.setContentType("application/x-json");
                                             response.setHeader("Cache-Control", "no-cache");
                                             response.setCharacterEncoding("UTF-8");
                                             PrintWriter pw = response.getWriter();
                                             //object部分
                                             Fruit f=new Fruit();
                                             f.setAmount(11);
                                             f.setColor("red");
                                             f.setLocation("湖南");
                                             f.setName("apple");
                                             f.setpDate(new Date());
                                             f.setPlace("上海");
                                             JSONObject apple=JSONObject.fromObject(f);
                                             //Array部分
                                             List<Fruit>fruits=new ArrayList<Fruit>();
                                             fruits.add(f);
                                             fruits.add(f2);
                                             JSONArray apples=JSONArray.fromObject(fruits);
                                             pw.println(apple);
                                             return;
13.jquery插件
                         jquery.validate
                                             errorElement:'em'//自定义错误提示标签