jQuery各种选择器、节点、事件，删除、复制、插入元素的使用方法总结

《jQuery全面提速》笔记（2015年12月19日）
 （1）表单域选择器
    :input选择器，  用于选择所有input、textarea、select和button元素, $(":input").each(function(){ });
    :text选择器,    用于选择所有单行文本框（<input type="text" />）$(":text")
    :password选择器,用于选择所有密码框（<input type="password" />）
    :radio选择器，  用于选择所有单选按钮（<input type="radio" />）
    :checkbox选择器 用于选择所有复选框（<input type="checkbox" />）
    :file选择器     用于选择所有文件域（<input type="file" />）
    :image选择器    用于选择所有图像域（<input type="image" />）
    :hidden选择器   用于选择所有不可见元素（css display属性为none），以及隐藏域（<input type="hidden" />）
    :button选择器   用于选择所有按钮（<input type="button" />和<button>..</button>）$(":button")
    :submit选择器   用于选择所有提交按钮（<input type="submit" />）
    :reset选择器    用于选择所有重置按钮（<input type="reset" />）


 （61.2）过滤选择器
    :first选择器，   例如:$("table tr:first").css("color","#999");       ,例如：$("table tr:first").css("background", "#EED"); 设置表格第一行的背景色
    :last选择器      例如:$("tbody tr:last").css("background", "#F90");  ,例如：$("tbody tr:last").css("background", "#F90");  设置表格最后一行的背景色
    :odd选择器       用于选择索引为奇数（从0开始）的所有元素   ,例如：$("tbody tr:odd").css("background", "#9EF"); 设置奇数行的背景色
    :even选择器      选择索引为偶数（从0开始）的所有元素       ,例如：$("tbody tr:even").css("background", "#FE0"); 设置偶数行的背景色
    :eq()选择器      选择索引为给定值的元素(从0开始奇数)       ,例如：$("#tr3 td:eq(3)").html("索引值等于3");  设置id="tr3"行中第4个单元格的内容
    :gt()选择器      选择索引大于给定值的所有元素              ,例如：$("#tr5 td:gt(3)").html("索引值大于3");设置id="tr5"行中，第4至第7个单元格的内容（每行共7个单元格）
    :lt()选择器      选择索引小于给定值的所有元素              ,例如：$("#tr4 td:lt(3)").html("索引值小于3");设置id="tr4"行中，第1至第3个单元格的内容
    :not()选择器                                               ,例如：$("#tr6 td:not(#td63)").css("background", "#3F0");设置id="tr6"行除#td63外所有单元格的背景
    :header选择器                                              ,例如：$(":header").css("color","#999");设置表格第一行的背景色
    :animated选择器      
     siblings()函数用于选取每个匹配元素的所有同辈元素(不包括自己)                                    
  例如：table第一列居中显示  其他列居左显示
    <script>
    $(function(){
        $('table td:first-child').css('text-align','left').siblings().css('text-align','center');
    }) 
   </script>


  例如：利用jquey给table加上鼠标变色功能
<style type="text/css">
.trhover{ background-color: #c2e0fc;    cursor: pointer; }
</style>
$(function () { 
            $("table tr:gt(0)").hover(function () { //tr:gt(0)表示不选第一行，因为第一行往往是标题
                $(this).addClass("trhover");
            }, function () {
                $(this).removeClass("trhover");
            });
});


 （61.3）内容过滤选择器
    :contains()选择器，   用于选择包含文本的所有内容       ,例如：$("td:contains(基本)").css("background-color", "#F00"); 设置包含“基本”的单元格的背景色
    :has()选择器          用于选择含有给定子元素的元素     ,例如：$("td:has(p)").css("background-color","#F96");  设置以p为子元素的单元格的背景色
    :empty选择器，        用于选择不包含子元素或文本的所有空元素   ,例如：$("#tr2 td:empty").css("background-color", "#CF3"); 设置tr2行中所有空单元格的背景色
    :parent选择器         用于选择包含子元素或文本的元素           ,例如：$("#tr3 td:parent").css("background", "#FC0");  设置tr3行中所有非空单元格的背景色
 （4）ch4章，jQuery文档操作（2015-12-23）


   内部插入：
   $("").append()方法,插入到元素末尾     $("selector").append("text");
   $("").appendTo()方法,插入到元素末尾   $("text").appendTo($("selector"));
   $("").prepend()方法，插入开头 $("selector").prepend("text");  selector:目标容器， text:要插入的内容  h3:标签元素
   $("").prependTo()方法，开头   $("text").prependTo($("selector"));  selector:目标容器， text:要插入的内容
   $("").html()方法，  
   $("").text()方法，


   外部插入：
   .after()方法，在元素之后， 写法：$("selector").after("text");在selector后面插入 text
   .insertAfter()方法，       反过来写
   .before()方法,             $("selector").before("text");  selector:目标容器， text:要插入的内容
   .insertBefore()方法，      反过来写


   删除元素：
   .remove()方法，删除某个内容  $("selector").remove("text");或者 $("text").remove(); selector:目标容器， text:要删除的内容  
   .detach()方法，
   .empty()方法， 从目标元素中删除所有嵌套的节点和文本    $("#selector1,#selector2,#selector3").empty(); 
                  例如：$("tr").remove(":has(:checkbox:checked)");
                      $("table").empty();删除表中的所有行


   替换元素：
   .replaceWidth()方法， $("A").replaceWidth(""B); B 替换 A  
   .replaceAll()方法，   $("A").replaceAll(""B); A 替换 B 


   复制元素
   .clone()方法, $("#demo1").clone().appendTo("selector");
                 $("li").clone().text("").appendTo("selector");


   包装元素
   .wrap()方法，    在目标元素的外部周围内部插入 $(".selector").wrap("text");
   .wrapAll()方法， 在目标元素的外部周围插入     $("selector").wrapAll("text"); 
   .wrapInner()方法，在目标元素内部的周围插入结构，  $("selector").wrapIneer("text");


   属性操作：
   .attr()方法，获取元素的属性；
   .removeAttr(),删除一个属性
   .val(),    $("select option:selected").val();   获取列表框的值
              $("select").val();                   获取列表框的值
              $("input:checkbox:chencked").val();  获取一个选中的复选框的值
              $("input:radio[name-bar]:checked").val();   获取一个单选按钮组的值
              $("select option:selected").text();   获取一个单选按钮组的值
  
   设置和切换CSS类
   .addClass()方法，   $("p:last").addClass("selected highlight");
                       $("p:first").removeClass("myClass").addClass("yourClass");
   .hasClass()方法，检查是否存在，
   .removeClass()方法，删除一个或多个类
   .toggleClass()方法， 添加或删除一个类


   设置或获取元素的大小
   innerHeight()方法， 用于获取匹配元素的内部高度，
   innerWidth()方法，内部高度
   outerHeight()方法，外部高度
   outerWidth()方法，外部宽度


 （61.5）第五章事件处理 (2015-12-26)
    接触事件处理 05\unbind.html页面 例子
   .unbind()方法， 此方法讲先前附件的事件处理程序从元素上移除并返回jQuery对象  $("#div1").unbind("click",fn);
   .die()方法，  从元素上移除先前用.live()方法附加的事件处理程序 $("#div1").live("click"); $("#div1").die("click",fn);
   .indelegate()方法， 移除所有事件， $("#div1").indelegate("click");
   .bind()，绑定事件
   .live()绑定事件
   .delegate()绑定事件


   触发事件处理程序
   .trigger()方法， 附加匹配元素给时间类型的所有事件处理程序和行为  .trigger(eventType,extraParameters)
 （6）创建Ajax应用， 加载JSON数据
  json是JavaScript object notation的缩写，以及JavaScript对象表示方法，
  jQuery提供了对json数据集的支持。使用jQuery命名空间下的getJSON方法可以通过GET请求从拂去其加载 json数据


  jQuery.getJSON(url[,data][,callback(data,textStatus)])
  参数url是一个字符串，用于指定要请求的url地址；
  data是字符串或映射，给出通过请求发送到服务器的数据；
  callback:是请求成功是执行的回调函数，其参数data表示服务器返回的数据，  参数textStatus表示相应文本状态。
  $.getJSON方法是$.ajax()方法的一种简略形式，他的作用等价于：
  $.ajax({
    url:url,
    dataType:"json",
    data:data,
    success:success
  });
 下面的代码使用于请求上述json文件，并指定了在请求成功是执行的回调函数。
在这个回调函数中读取json文件的数据，然后将其插入页面中。
$(document).ready(function () {
$("table").append("<tr><th>类别ID</th><th>类别名称</th><th>说明</th></tr>");
$("table").find("tr").css("background-color", "#DDD");
$.getJSON("empjson.asp", function(data) {
$.each(data, function(i, item) {
var tr = "<tr><td>" + item.categoryId + "</td><td>" + item.categoryName + "</td><td>" + item.description + "</td></tr>";
$("table").append(tr);
});
$("tr").find("td:first").attr("align", "center");
});
});




  $.getScript("ajax/text.js",function(){
  alert("脚本已加载并运行");
  });
  $.getScript方法是$.get()方法的一种简略形式，他的作用等价于：
  $.ajax({
    url:url,
    dataType:"script",   
    success:success
  });
  $.get("ajax/text.html",function(){
    $("div#result").html(data);
    alert("脚本已加载并运行");
  });
dataType为可选参数，是字符串，用于指定从服务器获取的数据类型，可以是："xml"、"html"、"script"、"json"或"text"