jQuery之选择器

      博主以前没有系统的学习jQuery只是能看懂jQuery的代码，最近一段时间深感需要系统的学习一下这方面知识，所以将自己的一些学习步骤积累放在博客上以便以后查阅，有什么不足的地方请大家指教。

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities 

       而今天这篇文章就是谈谈jQuery的选择器方面，在W3CSchool上将选择器分为元素选择器，属性选择器和css选择器三类，在网上查阅了一些资料把选择器细分为基本选择器，层次选择器，基本过滤选择器，内容过滤选择器，可见性过滤选择器，属性选择器，子元素过滤选择器，表单对象属性过滤选择器和表单选择器。

首先看看基本选择器：

层次选择器：

基本过滤选择器：

内容过滤选择器：

可见性过滤选择器：

属性选择器：

子元素过滤选择器：

表单对象属性过滤选择器：

$(document).ready(function(){
      //重置表单元素
 $(":reset").click(function(){
 setTimeout(function() {
countChecked();
   $("select").change();
 },0);
 });


 
 //对表单内 可用input 赋值操作.
      $('#btn1').click(function(){
 $("#form1 input:enabled").val("这里变化了！");  
 return false;
 })
 //对表单内 不可用input 赋值操作.
 $('#btn2').click(function(){
 $("#form1 input:disabled").val("这里变化了！");
 return false;
 })
 
     
 //使用:checked选择器，来操作多选框.
$(":checkbox").click(countChecked);


function countChecked() {
 var n = $("input:checked").length;
 $("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>");
}


countChecked();//进入页面就调用.


//使用:selected选择器，来操作下拉列表.
$("select").change(function () {
 var str = "";
 $("select :selected").each(function () {
str += $(this).text() + ",";
 });
 $("div").eq(1).html("<strong>你选中的是："+str+"</strong>");
        }).trigger('change');
// trigger('change') 在这里的意思是：
// select加载后，马上执行onchange.
// 也可以用.change()代替.
  });
  //]]>


  </script>

表单选择器：

$(document).ready(function(){


    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");


    $("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
       .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
.append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
            .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
.append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
            .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
.append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
.append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
.append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
.append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
.append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
.append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
.append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
.css("color", "red")


    $("form").submit(function () { return false; }); // return false;不能提交.

  });