Jquery重点一

1、复选框的全选、全不选、反选、
      //全选
      $("#CheckedAll").click(function(){
          $('[name=items]:checkbox').attr('checked', true);
   });
   //全不选
      $("#CheckedNo").click(function(){
      $('[type=checkbox]:checkbox').attr('checked', false);
   });
   //反选
      $("#CheckedRev").click(function(){
     $('[name=items]:checkbox').each(function(){
    //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
    //$(this).attr("checked", !$(this).attr("checked"));
        //直接使用JS原生代码简单实用
    this.checked=!this.checked;
     });
2、下拉框左右变换
$('#add').click(function() {
//获取选中的选项删除并追加给对方
   $('#select1 option:selected').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function() {
   $('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){
//绑定双击事件
   //获取全部的选项,删除并追加给对方
   $("option:selected",this).appendTo('#select2');
//追加给对方
});
3、表格行变色
$(function(){
   $("tr:odd").addClass("odd");
/* 奇数行添加样式*/
   $("tr:even").addClass("even");
/* 偶数行添加样式*/
})
4、DOM解析
       var $para = $("p");   // 获取<p>节点
    var $li = $("ul li:eq(1)");   // 获取第二个<li>元素节点
       如果要给添加属性则必须是以$开头的对象输出则不要$
    var p_txt = $para.attr("title"); // 输出<p>元素节点属性title
    var ul_txt = $li.attr("title"); // 获取<ul>里的第二个<li>元素节点的属性title
    var li_txt = $li.text();    // 输出第二个<li>元素节点的text
41、创建Dom节点
var $li_1 = $("<li></li>");    // 创建第一个<li>元素
      var $li_2 = $("<li></li>");    // 创建第二个<li>元素
   var $parent = $("ul"); // 获取<ul>节点。<li>的父节点
   $parent.append($li_1);     // 添加到<ul>节点中使之能在网页中显示
   $parent.append($li_2);     // 可以采取链式写法$parent.append($li_1).append($li_2);
4.2、删除节点
$("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后将它从网页中删除。
4.3删除指定节点 $("ul li").remove("li[title!=菠萝]"); //把<li>元素中属性title不等于"菠萝"的<li>元素删除
4.4清空节点内容 $("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后清空此元素里的内容
4.5克隆节点 $("ul li").click(function(){
       $(this).clone().appendTo("ul"); // 复制当前点击的节点并将它追加到<ul>元素
   })
   4.6替换节点
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
4.7包裹节点
$("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来
4.8属性操作
   //设置<p>元素的属性'title'
       $("input:eq(0)").click(function(){
    $("p").attr("title","选择你最喜欢的水果.");
    });
4.9样式操作
   //获取样式
       $("input:eq(0)").click(function(){
    alert( $("p").attr("class") );
   });
       //设置样式
    $("input:eq(1)").click(function(){
    $("p").attr("class","high");
    });
       //追加样式
    $("input:eq(2)").click(function(){
    $("p").addClass("another");
    });
        //删除全部样式
    $("input:eq(3)").click(function(){
    $("p").removeClass();
    });
       //删除指定样式

$("input:eq(4)").click(function(){

$("p").removeClass("high");
    });
       //重复切换样式
    $("input:eq(5)").click(function(){
    $("p").toggleClass("another");
    });
   5、遍历节点
var $p1 = $("p").next();
   alert( $p1.html() ); // 紧邻<p>元素后的同辈元素
   var $ul = $("ul").prev();
   alert( $ul.html() ); // 紧邻<ul>元素前的同辈元素
   var $p2 = $("p").siblings();
   alert( $p2.html() ); // 紧邻<p>元素的唯一同辈元素
6、Bind事件
$(document).bind("click", function (e) {
   $(e.target).closest("li").css("color","red");
})
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
   jQuery是继Prototype之后又一个优秀的JavaScript库它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div>
</div>
第一种:$("#panel h5.head").bind("mouseover",function(){
      $(this).next().show();
});
    $("#panel h5.head").bind("mouseout",function(){
       $(this).next().hide();
})
第二种:$("#panel h5.head").hover(function(){
      $(this).next().show();
},function(){
      $(this).next().hide();
     })
第三种:$("#panel h5.head").toggle(function(){
    $(this).next().show();
},function(){
    $(this).next().hide();
})

7、动画
$("#panel").click(function(){
     $(this).animate({left: "500px"}, 3000);
})
8、层次选择器
    //选择 body内的所有div元素.
       $('#btn1').click(function(){
     $('body div').css("background","#bbffaa");
    })
    //在body内的选择元素名是div 的子元素.
   $('#btn2').click(function(){
     $('body > div').css("background","#bbffaa");
    })
    //选择所有class为one 的下一个div元素.
    $('#btn3').click(function(){
     $('.one + div').css("background","#bbffaa");
    })
    //选择 id为two的元素后面的所有div兄弟元素.
    $('#btn4').click(function(){
      $('#two ~ div').css("background","#bbffaa");
9、表单选择器
var $alltext = $("#form1 :text");
     var $allpassword= $("#form1 :password");
     var $allradio= $("#form1 :radio");
     var $allcheckbox= $("#form1 :checkbox");
   var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
     var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
    var $allselect = $("#form1 select");
    var $alltextarea = $("#form1 textarea");
       var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");

猜你喜欢