jquery小结3

1 层次选择器
   <div class="clsFraA">Left</div>
    <div class="clsFraA" id="divMid">
         <span class="clsFraP" id="Span1">
              <span class="clsFraC" id="Span2"></span>
         </span>
    </div>
    <div class="clsFraA">Right_1</div>
    <div class="clsFraA">Right_2</div>

  <script type="text/javascript">
            $(function(){ //匹配后代元素
              $("#divMid").css("display","block");
              $("div span").css("display","block");
            })
            $(function(){ //匹配子元素
              $("#divMid").css("display","block");
              $("div>span").css("display","block");
            })
            $(function(){ //匹配divMid后的第一个div
              $("#divMid + div").css("display","block");
              $("#divMid").next().css("display","block");
            })
            $(function(){ //匹配divMid后的所有div元素
              $("#divMid ~ div").css("display","block"); 
              $("#divMid").nextAll().css("display","block");
            })
            $(function(){ //匹配divMid的所有相邻的div
              $("#divMid").siblings("div").css("display","block");
            })
    </script>

2 可见性过滤选择器
    <span style="display:none">Hidden</span>
    <div>Visible</div>
    $(function(){ //增加所有可见元素类别
              $("span:hidden").show();
              $("div:visible").addClass("GetFocus");
            })
            $(function(){ //增加所有不可见元素类别
              $("span:hidden").show().addClass("GetFocus");
            })

3 属性过滤选择器
      <div id="divID">ID</div>
    <div title="A">Title A</div>
    <div id="divAB" title="AB">ID
Title AB</div>
    <div title="ABC">Title ABC</div>
      $(function(){ //显示所有含有id属性的元素
              $("div[id]").show(3000);
            })
            $(function(){ //显示所有属性title的值是"A"的元素
              $("div[title='A']").show(3000);
            })
            $(function(){ //显示所有属性title的值不是"A"的元素
              $("div[title!='A']").show(3000);
            })
            $(function(){ //显示所有属性title的值以"A"开始的元素
              $("div[title^='A']").show(3000);
            })
            $(function(){ //显示所有属性title的值以"C"结束的元素
              $("div[title$='C']").show(3000);
            })
            $(function(){ //显示所有属性title的值中含有"B"的元素
              $("div[title*='B']").show(3000);
            })
            $(function(){ //显示所有属性title的值中含有"B"且属性id的值

是"divAB"的元素
              $("div[id='divAB'][title*='B']").show(3000);
            })
4 子元素过滤选择器
  

       
• Item 1-0

       
• Item 1-1

       
• Item 1-2

       
• Item 1-3

    

    

       
• Item 2-0

       
• Item 2-1

       
• Item 2-2

       
• Item 2-3

    

    

       
• Item 3-0

    

       $(function(){ //增加每个父元素下的第2个子元素类别
              $("li:nth-child(2)").addClass("GetFocus");
            })
            $(function(){ //增加每个父元素下的第一个子元素类别
              $("li:first-child").addClass("GetFocus");
            })
            $(function(){ //增加每个父元素下的最后一个子元素类别
              $("li:last-child").addClass("GetFocus");
            })
            $(function(){ //增加每个父元素下只有一个子元素类别
              $("li:only-child").addClass("GetFocus");
            })

5 设置元素的属性attr,比如：
      $("img").attr("title", "hello"); //设置title属性
    也可以在attr中设置function，比如；
  $("img").attr("src", function() { return "Images/img0" + Math.floor

(Math.random() * 2 + 1) + ".jpg" }); //设置src属性

  删除元素：$("img").removeAttr("src");

6 获得HTML及文本的值
    $("#divhidd").html();$("#divhidd").text();

7 外部插入结点：after,before,insertAfter,insertBefore等都比较容易，重点看

clone()
    <script type="text/javascript">
        $(function() {
            $("img").click(function() {
                $(this).clone(true).appendTo("span");
            })
        })
    </script>
      <span><img title="封面" src="Images/img04.jpg" /></span>
   当clone(true)时，将该元素的全部行为也复制，比如这个例子中，可以不断点复制出

来的图片，不断的复制，
而如果$(this).clone()时，则只能点原来的图片

8 wrap和wrapInner
    最喜爱的体育运动：<span>羽毛球</span>

    最爱看哪类型图书：<span>网络、技术</span>

       $(function() {
            $("p").wrap("<b></b>");//所有段落标记字体加粗,在p的标签外面加B
            $("span").wrapInner("<i></i>");//所有段落中的span标记斜体，在SPAN

标签内加I
        })
    
9 遍历元素
   each(callback),callback为一个 function函数，可以接受index序号从0开始，比如
$(function() {
            $("img").each(function(index) {
                //根据形参index设置元素的title属性
                this.title = "第" + index + "幅风景图片，alt内容是" +

this.alt;
            })
        })

10 表格框中，实现全选框的功能
      /**全选复选框单击事件**/
            $("#chkAll").click(function() {
                if (this.checked) {//如果自己被选中
                    $("table tr td input[type=checkbox]").attr("checked",

true);
                }
                else {//如果自己没有被选中
                    $("table tr td input[type=checkbox]").attr("checked",

false);
                }
            })
           
            /**删除按钮单击事件**/
            $("#btnDel").click(function() {
                var intL = $("table tr td input:checked:not

('#chkAll')").length; //获取除全选复选框外的所有选中项
                if (intL != 0) {//如果有选中项
                    $("table tr td input[type=checkbox]:not('#chkAll')").each

(function(index) {//遍历除全选复选框外的行
                        if (this.checked) {//如果选中
                            $("table tr[id=" + this.value + "]").remove(); //

获取选中的值，并删除该值所在的行
                        }
                    })
                }
            })


11 事件冒泡
   比如：
      <script type="text/javascript">
        $(function() {
            var intI = 0; //记录执行次数
            $("body,div,#btnShow").click(function(event) {//点击事件
                intI++; //次数累加
                $(".clsShow")
                .show()//显示
                .html("您好，欢迎来到jQuery世界!")//设置内容
                .append("<div>执行次数 <b>" + intI + "</b> </div>"); //追加文

本
                event.stopPropagation();//阻止冒泡过程
            })
        })
    </script>
        <div class="clsShow"></div>
  当不使用 event.stopPropagation()时，将会出现init=3，触发div,body的相同事件

12  bind事件中同时响应两个事件
     $(".txt").bind({ focus: function() {
            $("#divTip")
            .show()//显示
            .html("执行的是focus事件");//设置文本
            },
            change: function() {
            $("#divTip")
            .show()//显示
            .html("执行的是change事件");//设置文本
            }
            })
13 toggle
    toggle(fn,fn1,fn2,...fn):依次执行fn,fn1,按顺序执行，直到执行到fn

14 one事件
    one为所选的元素仅绑定一次处理函数。one(type,[data],fn)为每一个匹配元素的特

定事件（像click）绑定一个一次性的事件处理函数。
在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事

件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想

取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。
返回值 : jQuery
参数 :
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function) : 绑定到每个匹配元素的事件上面的处理函数
    $(function() {
            function btn_Click() { //自定义事件
                this.value = "010-12345678"
            }
            $("#Button1").one("click", btn_Click); //绑定自定义事件
       则button1只接受点1次

15 trigger()
   比如希望页面加载后，自动完成某些自定义事件，可以使用trigger,如：
     $(function() {
            var oTxt = $("input"); //获取文本框
            oTxt.trigger("select"); //自动选中文本框
            oTxt.bind("btn_Click", function() {//编写文本框自定义事件
                var txt = $(this).val(); //获取自身内容
                $("#divTip").html(txt); //显示在页面中
            })
            oTxt.trigger("btn_Click"); //自动触发自定义事件
        })

16 一个网页选项卡的效果
      <ul id="menu">
<li class="tabFocus">家居</li>

电器

二手

</ul>
<ul id="content">
<li class="conFocus">我是家居的内容</li>

欢迎您来到电器城

二手市场，产品丰富多彩

     </ul>
        $(function() {
            $("#menu li").each(function(index) { //带参数遍历各个选项卡
                $(this).click(function() { //注册每个选卡的单击事件
                    $("#menu li.tabFocus").removeClass("tabFocus"); //移除已选

中的样式
                    $(this).addClass("tabFocus"); //增加当前选中项的样式
                    //显示选项卡对应的内容并隐藏未被选中的内容
                    $("#content li:eq(" + index + ")").show()
                    .siblings().hide();
                });
            });
        })