每天学点JQuery(1)—选择器
2016-03-30 16:01
330 查看
在JQuery库中,$就是JQuery的一个简写形式,例如$(“#foo”)与jQuery(“#foo”)是等价的。
这段代码等价于传统JS中的window.onload方法。
DOM对象与JQquery对象是不同的,每一份DOM都可以表示成一棵树,而JQuery对象则是通过包装DOM对象后产生的对象。在JQuery对象中无法使用DOM对象的任何方法。
可通过[index]或get(index)将JQuery对象转为DOM对象,如:
也可以通过$()将DOM对象包起来转化为JQuery对象
JQuery中的选择器完全继承了CSS风格。利用JQuery选择器,可以非常便捷和快速的找出特定DOM元素,然后为他们添加行为,而无需担心浏览器是否支持这一选择器。
基本选择器:它通过元素id,class和标签名等来查找DOM元素。
层次选择器:通过DOM元素之间的层次关系获取特定的元素,例如后代元素、子元素、相邻元素和同辈元素。
在层次选择器中,第1个和第2个选择器比较常用,而后面两个因为在JQuery中可以也更加简单的方法代替,所以用的比较少。
可以用next()方法代替$(“.div + span”)
可以用nextAll方法代替$(“.div ~ span”)
siblings 方法不管位置,匹配所有同辈元素
过滤选择器:过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,选择器都是以”:”开头,按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤。
1.基本过滤器:
2.内容过滤器:
3.可见性过滤器:
4.属性过滤选择器:
5.子元素过滤选择器:
6.表单对象属性过滤选择器:
表单过滤器:利用这个选择器,能极其方便的获取到表单的某个或某类型的元素
选择器中的一些注意事项:
1.选择器中含有”.”、”#”、”(”或”]”等特殊字符时需要转义”\”
2.选择器中空格的问题
$(document).ready(function(){ //... }); 也可以简写成: $(function(){ });
这段代码等价于传统JS中的window.onload方法。
DOM对象与JQquery对象是不同的,每一份DOM都可以表示成一棵树,而JQuery对象则是通过包装DOM对象后产生的对象。在JQuery对象中无法使用DOM对象的任何方法。
可通过[index]或get(index)将JQuery对象转为DOM对象,如:
var a = $("#a") //JQuery对象 var b = a[0] //DOM对象 var c = a.get(0)//DOM对象
也可以通过$()将DOM对象包起来转化为JQuery对象
var a = document.getElementById("a")//DOM对象 var b = $(a)//JQuery对象
JQuery中的选择器完全继承了CSS风格。利用JQuery选择器,可以非常便捷和快速的找出特定DOM元素,然后为他们添加行为,而无需担心浏览器是否支持这一选择器。
基本选择器:它通过元素id,class和标签名等来查找DOM元素。
$("#test") //选取id为test的元素 $(".test") //选取所有class为test的元素 $("p") //选取所有<p>元素 $("div,span,p.test")//选取所有<div>,<span>和class为test的<p>的一组元素
层次选择器:通过DOM元素之间的层次关系获取特定的元素,例如后代元素、子元素、相邻元素和同辈元素。
1.$("div span") //选取<div>里的元素名是<span>的所有元素 2.$("div > span") //选取<div>元素下元素名是<span>的子元素 例如: <div> <span class="1"> <span class="2">123<span> </span> </div> $("div > span")只会选择class为1的<span>元素,而$("div span")则会选择所有<span>元素 3.$(".div + span")选取class为div的下一个同辈元素<span> //不包含同辈子元素 4.$(".div ~ span")选取class为div的元素后面的所有同辈<span>
在层次选择器中,第1个和第2个选择器比较常用,而后面两个因为在JQuery中可以也更加简单的方法代替,所以用的比较少。
可以用next()方法代替$(“.div + span”)
$(".div").next("span")
可以用nextAll方法代替$(“.div ~ span”)
$(".div").nextAll("span")
siblings 方法不管位置,匹配所有同辈元素
$(".div").siblings("span")
过滤选择器:过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,选择器都是以”:”开头,按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤。
1.基本过滤器:
$("div:first") //选取第一个<div>元素 $("div:last") //选取最后一个<div>元素 $("div:not(:first)") //选取除第一个<div>元素以外的<div>元素 $("div:even") //选取索引为偶数的<div>元素,索引从0开始 $("div:odd") //选取索引为奇数的<div>元素,索引从0开始 $("div:eq(1)") //选取索引为1的<div>元素 $("div:gt(1)") //选取索引大于1的<div>元素 $("div:lt(1)") //选取索引小于1的<div>元素 $(":header") //选取所有标题元素<h1-6> $("div:animated") //选取正在执行动画的的<div>元素 $(":focus") //获取当前获取焦点的元素
2.内容过滤器:
$("div:contains('jquery')")//选取含有文本jquery的<div>元素 $("div:has(selector)")//选取含有某种选择器的<div>元素 $("div:empty")//选取不包含子元素(包含文本元素)的<div>元素 $("div:parent")//选取拥有子元素或文本元素的<div>元素
3.可见性过滤器:
$("div:hidden")//选取不可见的<div>元素 $("div:visible")//选取可见的<div>元素
4.属性过滤选择器:
$("div[id]") //选取拥有属性id的<div>元素 $("div[title=test]") //选取拥有属性title值等于test的<div>元素 $("div[title!=test]") //选取拥有属性title值不等于test的<div>元素 $("div[title^=test]") //选取拥有属性title值以test开始的<div>元素 $("div[title$=test]") //选取拥有属性title值以test结束的<div>元素 $("div[title*=test]") //选取拥有属性title值含有test的<div>元素 $("div[title|="test"]") //选取拥有属性title值等于test或已test为前缀后接连字符-(如test-en)的<div>元素 $("div[title~=test]") //选取拥有属性title值用空格分割有test(如en test)的<div>元素 $("div[id][title=test]") //选取拥有属性id并且title值等于test的<div>元素
5.子元素过滤选择器:
//eq()只匹配一个元素,而nth-child()匹配每个父元素的子元素,而却nth-child()索引值是从1开始的 $("div.one :nth-child(2)") //选取class为one的<div>元素下,索引值为2的元素 $("div.one :nth-child(even)") //选取class为one的<div>元素下,索引值为偶数的元素 $("div.one :nth-child(odd)") //选取class为one的<div>元素下,索引值为奇数的元素 $("div.one :nth-child(3n+1)") //选取class为one的<div>元素下,索引值是(3n+1)的元素,n从1开始 $("div.one :first-child") //选取class为one的<div>元素下第一个子元素 $("div.one :last-child") //选取class为one的<div>元素下最后一个元素 $("div.one :only-child") //选取class为one的<div>元素下,具有唯一子元素的元素(不包含文本元素)
6.表单对象属性过滤选择器:
$("#form1:enabled") //选取id为"form1"的表单内的所有可用元素 $("#form1:disabled") //选取id为"form1"的表单内的所有不可用元素 $("#input:checked") //选取所有被选中的<input>元素 $("#select option:selected") //选取所有被选中的选项元素
表单过滤器:利用这个选择器,能极其方便的获取到表单的某个或某类型的元素
$(":input") //选取所有<input>、<textarea>、<select>、<button>元素 $(":text") //选取所有单行文本框 $(":password") //选取所有密码框 $(":radio") //选取所有单选框 $(":checkbox") //选取所有复选框 $(":submit") //选取所有提交按钮 $(":image") //选取所有图像按钮 $(":reset") //选取所有重置按钮 $(":button") //选取所有按钮 $(":file") //选取所有上传域 $(":hidden") //选取所有不可见元素
选择器中的一些注意事项:
1.选择器中含有”.”、”#”、”(”或”]”等特殊字符时需要转义”\”
<div id="id#b">bb</div> <div id="id[1]">cc</div> 获取: $("#id\\#b") $("#id\\[1\\]")
2.选择器中空格的问题
$(".test:hidden")//选取隐藏的class为hidden的元素 $(".test :hidden")//选取class为test的元素里的隐藏元素
相关文章推荐
- jQuery - 获取并设置 CSS 类
- jquery $.trim()去除字符串空格详解
- jQuery简单的Ajax调用示例
- JSON和JSONP具体是干神马的呢? (含jQuery实例)
- jQuery - 删除元素
- jquery制作图片瀑布流点击按钮加载更多内容
- jQuery - 添加元素
- jquery的ajax提交时“加载中”提示的处理方法
- Jquery判断form表单数据是否变化
- jQuery - 设置内容和属性
- 教你怎么写jQuery的插件
- 黄聪:基于jQuery+JSON的省市区三级地区联动
- jQuery - 获得内容和属性
- jQuery - Chaining
- 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
- jQuery Callback 函数
- jquery上传插件Jquery.uploadify.js-转
- jquery上传插件Jquery.uploadify.js-转
- jQuery 停止动画
- jQuery.extend 函数详解