jquery学习笔记（转）

1:下面这个函数只要在DOM载入就绪(获取文档对象就绪的时候)就能被执行，
   而window.onload需要在页面图片文件加载完之后才能执行.
   $(document).ready(function(){//可用jQuery(document).ready(function()代替 或者 $(function()
        // 你的代码
    }); 
2:鼠标点击时的触发
  $("p").click(function(){
       alert("hello world");
    });
补充：
 a:$("p")获取网页中所有标签为p的 <p>我也是一个段落文本,单击我也弹出hello world  .---单击我</p> 
 b:$("#cssrain")获取网页中所有ID为cssrain的<div id="cssrain"></div> <input type="text" id="cssrain" value="测试"/>
 c:$(".cssrain")获取网页中所有class为cssrain的<div class="cssrain"></div>

3:增加或移除元素的css class
 $("a").addClass("test"); 
 $("a").removeClass("test"); 
4:show()和html()用法
 $("a").addClass("test").show().html("cssrain");
5:$(this)和hide()
 $("a").click(function(){
    $(this).hide("slow");//$(this)就是给A注册事件后当前正在操作的哪个对象
    return false;//为什么有return false，加了使链接失效.  <a href="http://www.163.com">单击</a> 
  }); 
6:页面上一个div缓缓隐藏,再点击缓缓展开
 slideToggle(speed, callback)//speed参数取值 ("slow", "normal","fast")
  $(document).ready(function(){
     $("#head").click(function(){
     $("#content").slideToggle("slow",function(){ alert("Hello,cssrain.."); } );
    });
  }); 
7:append和appendTo
$(document).ready(function(){
  $("#head2").click(function(){
     $("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>").appendTo("#ccc");
  });
 $("#head1").click(function(){
    $("#rain").append("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>");
 });
});
8:table滑过变色,隔行变色 hover(over, out)
 $(document).ready(function() {
     $("#orderedlist tbody tr").hover(function() {
     // $("#orderedlist li:last")最后一行 ** $("#orderedlist li:even")偶数行 ** $("#orderedlist li:odd")奇数行
    或者$("#orderedlist").find("li").each(function(i){$(this).hover(function() {});});
  $(this).addClass("blue");
 }, function() {
  $(this).removeClass("blue");
 });
  });
  或者:
   $(document).ready(function(){
        $("#orderedlist tbody tr").mouseover(function(){                  
          $(this).addClass("over");}).mouseout(function(){       
             $(this).removeClass("over");})
   });
9:toggle用法
  a:如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
    $(document).ready(function(){
       $("input").click(function(){
       $("p").toggle(); 
    })
   }); 
  <input type="button"  value="切换"><p>这里本来是 显示的。</p><p style="display: none">这里本来是隐藏的</p>
  b:每次点击时切换要调用的函数
  $(document).ready(function(){
    $("input").toggle(function(){
     $("p").hide('slow');
   },function(){
     $("p").show('fast');
   });
  });
10:parent()和next()用法
next说明:取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素。
         可以用一个可选的表达式进行筛选。 
  //$("p").next(".selected").html() ); 
 //this.parent()是input前面的td * this.parent().parent()获取的是tr * this.parent().parent().parent()获取的是table * this.parent().next()获取的是td相临的td
  $(document).ready(function() {
    $("#btn1").click(function(){
    alert($(this).parent().next().html());
   });
  });
   <table>
     <tr>
      <td><input id="btn1"  class="btn" type="button"  value="test"/></td>
      <td>some text</td>
     </tr>
   </table>   
11:load()用法
$(function() {
 // $("#feeds").load("FAQ1.html")
 $("#feeds").load("c.txt",function() { alert("load is done");}
 );
});
12:animate函数,回顾一下slideToggle
用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象
这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。
$(document).ready(function(){
   $("a").toggle(function(){
     $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
   },function(){
     $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
   });
});
13:tableSorter()函数*/jQ学习第一季/jQ学习第一季/demo16-表格排序
14:跟jquery没关系
   状态栏显示的跟实际跳转的地址不一样(还有人会这么无聊)
    <a onMouseOver='window.status="http://www.cssrain.cn";return true;' onMouseOut='window.status="Done"; return true;'href="http://www.cssrain.cn/article.asp?id=187"target="_blank">Link Text Here</a> 
15:siblings() 得到所有匹配元素集合中各个元素的所有兄弟元素集合。返回匹配元素集合
 //下面的例子中会取得所有跟$('tr.parent')为兄弟元素并且class='.child-'+this.id
$(function() {
 $('tr.parent')
  .css("cursor","pointer")
  .attr("title","点击这里展开/关闭")
  .click(function(){
   $(this).siblings('.child-'+this.id).toggle();
});
16:jquery的八种选择器
 a:基本选择器(3种): $("标签名"),$("#id名"),$(".class名")
 b:组选择器: $("div,#test1,p,.test2,#test3") 
 c:后代选择器:$("div .test")
 d:子选择器:$("div>.test") 子选择器只能选择第一代子代.不处理深层嵌套
       $("div>.test") 
      <div><p class="test"></p></div>对这里的p段落标签有效.但对 
      <div><p><p class="test"></p></p></div>对这里的p段落标签无效,这里要用$("div .test) 
 e:临近选择器: 选取下一个兄弟节点.如:$("div +#test"),id为test的的节点必须是div的下一个兄弟节点. 
   <div></div><p id="test"></p>在$("div + #test")中能取到p段落节点 <div></div><p></p><p id="test"></p>则不能取到 
 f:属性选择器: 
   $("mix[@attr]"):选取所有该mix且具有attr属性的节点 
   $("mix[@attr=a_value"]):选取所有该mix且具有attr属性并满足属性值为a_value的节点 
   $("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的 
   $("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的 
   $("mix[@attr*=a_value"]):attr属性的属性值中包含a_value 
 g:进一步选择器:
   这个名称是我自己起的,其实选择器组合都有进一步的意思,你明白后面所介绍的知识即可. 
   具有限定子节点选择器:$("mix1[mix2]"):返回包含mix2的mix1节点.如:$("div[a]"):包含a标签的div. 
   这个和$("div a")不相同.后者表示div中的a标签,返回的是a标签对象,前者返回的是div标签对象 
   冒号限定结点选择器:$("mix:condition"):mix标签,并且满足限定条件. 
   E:root:类型为E,并且是文档的根元素 
   E:nth-child(n):是其父元素的第n个类型为E的子元素 ,基数从1开始 
   E:first-child:是其父元素的第1个类型为E的子元素 
   E:last-child:是其父元素的最后一个类型为E的子元素 
   E:only-child:且是其父元素的唯一一个类型为E的子元素 
   E:empty:没有子元素（包括text节点）的类型为E的元素 
   E:enabled 
   E:disabled:类型为E,允许或被禁止的用户界面元素 
   E:checked:类型为E,处于选中状态的用户界面元素（例如单选按钮或复选框） 
   E:visible:选择所有可见元素(display值为block或visible,visibility值为visible元素,不包括hide域) 
   E:hidden:选择所有隐藏元素(非Hide域,且display值为block或visible,visibility值为visible的元素) 
   E:not(s):类型为E,不匹配选择器s 
   E:eq(n),E:gt(n),E:lt(n):元素限定 
   E:first:相当于E:eq(0) 
   E:last:最后一个匹配的元素 
   E:even:从匹配的元素集中取序数为偶数的元素 
   E:odd:从匹配的元素集中取序数为奇数的元素 
   E:parent:选择包含子元素（包含text节点）的所有元素 
   E:contains('test'):选择所有含有指定文本的元素 
 表单选择器: 
   E:input:选择表单元素(input,select,textarea,button) 
   E:text:选择所有文本域(type="text") 
   E:password:选择所有密码域(type="password") 
   E:radio:选择所有单选按钮(type="radio") 
   E:checkbox:选择所有复选框(type="checkbox") 
   E:submit:选择所有提交按钮(type="submit") 
   E:image:选择所有图像域 (type="image") 
   E:reset:选择所有清除域(type="reset") 
   E:button:选择所有按钮(type="button") 
  当然包括E:hidden 
 H:$(".bmo",".dmo")
  <div class="dmo"><span class="ado"><div class="bmo">aaa</div></span></div>
8.xPath路径查询:

先介绍下xPath的语法: 
/:选取根节点 
//:选取文档中所有符合条件的节点,不管该节点位于何处 
.:选取当前节点 
..:选取单前节点的父节点 
@:选取属性,这个在之前说过了(属性选择器) 
nodename:选取节点下的所有节点 
jQuery中的应用: 
根节点是很少用到的,常用的如下面的例子: 
$("div/p")相当于$("div>p") 
$("div//p")相当于$("div p") 
$("//div/../p"):所有div节点的父节点下的p标签 
还有相对路径的写法以及支持的Axis选择器,还不是会应用,不介绍了...已经一大堆了

$的其他用法:

$(html节点):根据提供的原始HTML标记字符串,动态创建由jQuery对象包装的DOM元素.如: 
$("<div><p>Hello</p></div>").appendTo("#body");//把<div><p>Hello</p></div>添加到body元素中 
$(document):网页文档对象 
$(document.body):网页body对象,和$("body")是一样的 
$(函数):DOM载入后就执行该函数.所以$(document).ready()可以写做$() 
$(选择器部分,选择器来源):这个举例说明 
$("input:radio",document.forms[0]):在文档的第一个表单中,搜索所有单选按钮 
$("div",xml.responseXML):查询指定XML文档中的所有div元素 
选择器来源可以是:作为上下文的DOM元素,文档或jQuery对象 
还有两个:$.extend(prop)和$.noConflict()是和插件以及和其他库兼容的使用,以后再写

   
17:jQuery学习笔记24--单选框/复选框.
     $(function(){
        $("#form1").submit(function(){
           if($("#form1 input:checked")){
               alert($("#form1 input:checked").val());
       }
         return false; //不提交
       });
     });
    
  $(document).ready(function(){
   $(".btn").click(function(){
       $("#divPosType input:checked").each(function(){
       //   alert(this.value);
          alert($(this).val());
       }
     )
   });
  });
  $(document).ready(function(){
   $("#test").click(function(){
      $("input[@type=checkbox]").each(function(i){
       // 此时，this 是 dom里的对象，而不是jQuery里的 $(this)
         if(this.checked) alert(this.value); 
                                    });
        });
   }); 
  $(document).ready(function(){
      $("#test").click(function(){
        $("input[@type=checkbox]").not("[@checked]").each(function(i){
                 alert(this.value);
       });
      });
   }); 
18:end()，eq,gt,lt()
$(document).ready(function(){
   $("input").click(function(){   /    
    alert($("#css").find("#rain").end().html());
 });
});
可以end()结束的方法有，add()，children()，eq()，filter()，find()，gt()，next(),not(),parent(),parents(),siblings()
$(document).ready(function(){
  //第2个 p :  alert("eq="+ $("p").eq(1).text()); alert( $("p:eq(1)").text());
  //第3个p之后的p注:会把所有满足条件的p都合并起来  alert("gt="+  $("p:gt(2)").text());//alert( $("p").gt(2).text());
  //第2个p以及之前的p  即第1个p和第2个p alert("lt="+  $("p:lt(2)").text()); });
19:filter(),not()
一个新的挑战是从一组类似或相同的元素中只选择某一个特定的元素。
jQuery提供了filter()和not()来做这个。filter()能够将元素精简到只剩下满足过滤条件的那些，not()恰恰相反，他移除了所有满足条件的。
$(document).ready(function() {
   alert($("p").filter(".selected").html());
   alert($("p").not(".selected").html());
});
19:split()
<span class="sale">Out Sale: ￥160<br />Deal Price: ￥120</span>
$(document).ready(function(){
 $("input[@value=btn1]").click(function(){
  //以￥分割
  alert($("span.sale").text().split("￥")[2]+"||"+$("span.sale").text().split("￥")[1]+"||"+$("span.sale").text().split("￥")[0]);
  });
});
注:但用AJAX取回动态数据进行筛选的时候，必须同时指定标签类型和ID，才能正常进行筛选，要不然在Firefox下会出错。
  错误的：var stext = $(data).filter('#content').html();
  正确的：var stext = $(data).filter('div#content').html();
20:is(':visible') $("input").is(':first') $("input").is(':last')
$("input").is(':visible')是指可见的input元素.
如果可见就调用$("input").slideUp();使之隐藏.
else则是不可见的元素 调用$("input").slideDown();使之显示.
21:attr()
    attr(name)   //获取属性的值
    attr(name,value)   //设置属性的值
    attr(namefn)      //设置属性的函数值
 $(document).ready(function() {
        $("#formstylecontrols select").change(function(){        
                $("p").css($(this).attr("id"),$(this).val()); 
                //这里用了一个技巧：把select的ID和要设置的CSS属性值一致 , 就可以一个语句实现三个select的功能
        });
 });
22:iframe
 1.在父窗口中操作 选中IFRAME中的所有单选钮
    $(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
 2.在IFRAME中操作 选中父窗口中的所有单选钮
    $(window.parent.document).find("input[@type='radio']").attr("checked","true");
23:表格元素编辑.
  $(function(){  
        $(".fillform tr").click(function(){ 
              $(this).find("td").each(function(i){ 
              $("form>input").eq(i).val($(this).text());
     } );})
    //鼠标形状： 手型。
     $(".fillform tr").mouseover(function(){$(this).css("cursor","hand")});
  });
24:$.get异步获取
 $(function(){
  $.get("bbb.html",function(rt){
        $("#main").html(rt);
        $("#bbb").click(function(){
        alert('cssrain!!!');
       })
    })
 })
25:Li循环滚动
 function scroll_news(){
    $(function(){
      $('#dvmq li').eq(0).fadeOut('slow',function(){        
         //   alert($(this).clone().html());
         //克隆:不用克隆的话，remove()就没了。
            $(this).clone().appendTo($(this).parent()).fadeIn('slow');
            $(this).remove();
        });
     });
 }
 setInterval('scroll_news()',1000);
26:简单的申缩效果--见简单菜单伸缩.htm
 ******************* 
 $(document).ready(function(){
     $("dd:not(:first)").hide();
        $("dt a").click(function(){
            $("dd:visible").slideUp("slow");
            $(this).parent().next().slideDown("slow");
            return false;
        });
    });
 *********************
    $(document).ready(function(){
     $("dd:not(:first)").hide(); //隐藏  dd不是第一个的. E:first:相当于E:eq(0)        
        $("dt a").click(function(){
          if( $(this).parent().next().is(':visible') ){
           }else{
             $("dd:visible").slideUp("fast");
             $(this).parent().next().slideDown("fast");
           }
            return false;
        });
    });
27：editplace实时编辑 见editplace实时编辑.html
28: jQuery(function(){ }); ==jQuery(document).ready(function(){ }); 
    (function(){ })(jQuery)；用于存放开发插件的代码，执行其中代码时DOM不一定存在
     (function(){do someting})();//这个你就理解为定义一个匿名函数并立即执行带参数的话就这样：(function(形参){do someting})(实参);  jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
    闭包的好处：
      不增加额外的全局变量，
      执行过程中所有变量都是在匿名函数内部。
 jQuery.fn.extend(object);给jQuery对象添加方法。
    见实例滚屏效果.htm
29:复选框全选，反选，取消选择
  $(function() { 
 //全选
 $("#selectall").click(function() { 
  $("input[@name='shareuser']").each(function() { 
  $(this).attr("checked", true); 
    }); 
 }); 
 //反选
 $("#fanall").click(function() { 
 /*$("input[@name='shareuser']").each(function() {  
    if($(this).attr("checked")) {
       $(this).attr("checked", false); 
     } else  {
       $(this).attr("checked", true); 
      }
 });*/ 
  $('input[name="checkbox"]').each(function(){
     $(this).attr("checked",!$(this).attr("checked"));
   });
 }); 
 //取消全部
 $("#deselectall").click(function() { 
  $("input[@name='shareuser']").each(function() { 
   $(this).attr("checked", false); 
  }); 
 }); 
 //alert
 $("#alertall").click(function() { 
  $("input[@name='shareuser']").each(function() { 
     if($(this).attr("checked")){
        alert($(this).val());
      }
  }); 
 }); 
}); 
30: 表单focus和blur样式
 $(document).ready(function(){
    if ($.browser.msie){//判断是不是IE
        $("input[@type='text'], input[@type='password'], textarea").focus(function(){
        $(this).addClass("ie_focus")}).blur(function(){
           $(this).removeClass("ie_focus");
           });
        }
    })
31:集合处理功能
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})       
//实现表格的隔行换色效果
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为三个不同的p元素单击事件分别设定不同的处理 
32:判断浏览器
 $(function() { 
 if($.browser.msie) {
   $( function() { alert("this is msie"); }); 
 }else if($.browser.safari){
   $( function() { alert("this is safari!"); }); 
 }else if($.browser.mozilla){
   $( function() { alert("this is mozilla!"); }); 
 }else if($.browser.opera){
   $( function() { alert("this is opera"); }); 
 }else{
   $( function() { alert("i don't konw!"); }); 
 }
}); 
33:jQuery的冲突问题 　　
　　很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，
 如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
　　使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。
 之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。
    如：
   jQuery.noConflict(); 
    // 开始使用jQuery
    jQuery("div   p").hide();
    // 使用其他库的 $() 
    $("content").style.display = 'none'; 
 下面更牛:
 $(function() { 
       var cssrain=jQuery.noConflict(true); //将变量$的控制权让渡给其他库。这样可以确保jQuery不会与其他库的$对象发生冲突。
       alert(cssrain("div").html());//正常  //alert($("div").html());//报错
    }); 
34:index
35:迭代函数
 $(function() {
       $.each( ["#455","#aaa","#ddd"], function(i, n){
       $("#c"+i).css("background",n); 
       }); 
    });
36:在JQuery中，AJAX有三种实现方式：$.ajax() , $.post , $.get()。 
首先我们看$.get():
 $.get("test.jsp",
   { name: "cssrain", time: "2008/01/21" },     //要传递的数据 
   function(data){
     alert("返回的数据: " + data);
 }
 )

然后看$.post():
跟$.get()格式一样.
 $.post("test.jsp",
   { name: "cssrain", time: "2008/01/21" },    //要传递的数据 
   function(data){
       alert("返回的数据: " + data);
 }
 )

上面2种方式的区别应该就是 请求方式不同(一个get  一个post).

最后我们看$.ajax():
 $.ajax({ 
  url:'Accept.jsp', 
  type:'post', //数据发送方式 
  dataType:'html', //接受数据格式 (这里有很多,常用的有html,xml,js,json)
  data:'text='+$("#name").val()+'&date='+new Date(),  //要传递的数据 
    error: function(){  //失败
          alert('Error loading document');
      },
  success: function(msg){ //成功
  alert( "Data Saved: " + msg );
  }
 });
*********************************************************************************************************
$.ajax({
    url:'Accept.jsp',
    type:'post', //数据发送方式 
    dataType: 'xml',  // 注意这里是xml哦 ，不是html ...( html比较简单,所以我拿xml做下例子,解释下 )
    data:'text='+$("#name").val()+'&date='+new Date(),  //要传递的数据 
    timeout: 2000,    //设置本地超时 .( 毫秒)
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
   $(xml).find("student").each(function(){
    var item_text = $(this).text();
  //   alert($("name" , xml).text());  //选择器注意下  写法
    $('<li></li>').html(item_text).appendTo('ol');
    });
    }
 /*
   success: function(xml){
        $(xml).find("student").each(function(i){
            var id=$(this).children("id");   //取对象
            var id_value=$(this).children("id").text();  //取文本 或者 $("id" , xml).text(); 
            alert(id_value);//这里就是ID的值了。
            alert($(this).attr("email")); //这里能显示student下的email属性。
            $('<li></li>').html(id_value).appendTo('ol');
        });
    }
 */
});

String text=request.getParameter("text"); //获取传来的参数
response.setContentType("text/xml");   //注意，由于你是以xml形式传递过来的，所以这里必须写。
out.print("<?xml version=/"1.0/" encoding=/"UTF-8/"?>");
out.print("<student>");
out.print("<name>"+text+"</name>");
out.print("</student>");

注:serialize()函数的使用，prototype中也有.--作用是将参数连接起来
37:下拉框,单选框,多选框整理
 1,下拉框:
var cc1  = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $('.formc select[@name="country"]').val();  //得到下拉菜单的选中项的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option
稍微解释一下:
1.select[@name='country'] option[@selected] 表示具有name 属性，
并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素；
可以看出有@开头的就表示后面跟的是属性。

2,单选框:
$("input[@type=radio][@checked]").val();  //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

3,复选框:
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
  alert($(this).val());
  });

$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾
38:下拉选择框
$(document).ready(function (){ 
 $('#select1').change(function (){ 
 $.ajax({ 
  url:'cssrain.jsp', 
  type:'post', //数据发送方式 
  dataType:'xml', //接受数据格式 
  data:'id=1&text='+$("select[@id='select1'] option[@selected]").text()+'&date='+new Date(),  //要传递的数据 
  error:function(json){
      alert( "not lived!");
    },
    success: function(xml){
        $("#select2").html('');//清空2号下拉框   
    $(xml).find("name").each(function(){ 
    var id=$(this).attr("id"); //获取返回的ID 
    var name=$(this).text(); //获取返回的NAME
      $('<option value='+id+'>'+name+'</option>').appendTo('#select2'); //添加下拉框
      $("#select2").attr('disabled','') //2号下拉框可用
          });
    }
 }); 
 });
}); 

39:event.preventDefault(); //  阻止默认的行为 ,这个例子把超链接 阻止了,当然此时也可以用 return false;

转自：sutku的专栏