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;不能提交.

});