jQuery中表单选择器总结

范范

     在jQuery中，最长使用的就是获取页面的表单元素，这个时候，就需要使用到jquery的表单选择器。

     jQuery中的表单选择器很多，我就简单的解析下jQuery中的表单选择器，如下所示：

1. id选择器
$("#.....")，次选择器，权重比较高，只要写对id，就能直接获取到当前id下的表单元素


备注： 页面id 是单一的，如果页面上定义了两个一样的id，这个时候，id选择器，就会优先获取第一个表单元素，另外的一个是不能获取到的

范范

id选择器，以及bind数据 看如下的列子介绍，就会很好理解

页面内容：

[HTML] 纯文本查看 复制代码

<div id="MsgDiv">
Hello Word!
</div>
<input id="btnShow" type="button" value="显 示">
<input id="btnHide" type="button" value="隐 藏">
<input id="btnChange" type="button" value="修改内容为：">

jQuery：

[JavaScript] 纯文本查看 复制代码

<script>
$("#btnShow").Bind("click",function(event){
$("#MsgDiv").Show();
});
$("#btnHide").Bind("click",function(event){
$("#MsgDiv").Hide();
});
$("#btnShow").Bind("click",function(event){
$("#MsgDiv").Html("Hello Word,too!");
});
</script>

如上例子使用的js方法如下：
1、jq的ID选择器：$("btnShow")
2、事件绑定函数Bind()
3、显示，隐藏函数Show()，Hide()
4、修改元素内部html的函数Html()

范范

2. jQuery的元素选择器  （element）

例：$("a")，选择所有<a>标签
    $("li")，选择所有的<li>标签


如下如所示：

备注： 上面图片所示，就是标示此页面中包含<530>个li标签，1699个<a>标签

范范

3. css类选择器（.class）,根据元素的css类选择例：$(".bgRed"),选择所有css类为bgRed的元素




如上如获取方式，获取到页面，包含css样式‘job-rec-cont’的元素15个
获取到页面，包含样式“pr1”的元素85个

范范

4. 全选（*），选择所有元素    例：$("*")选择页面所有元素



获取所有的表单元素，如图，可以看到，当前页面中总共有4004个元素
下面列出，就是所包含的元素内容有，
html
head
meta
div.job-notice.hide （包含样式‘job-notice’，以及样式‘hide’的div）
等等

范范

5. 同时使用多个选择器，用"，"分割，然后再拼成一个选择器字符串，
实现同时选中这几个选择器匹配的内容


例：$("a,.bgRed")  
备注： 此出为取出当前页面中的a标签，以及样式为‘bgRed’的所有元素




上图所示，取出id为‘slideNav’， 以及id为‘slideBar’的两个元素信息

范范

路过，支持下自己哈

范范

路过支持下自己哈

竹林风

感恩无私的分享与奉献