跟我学jQuery(三) 无所不能的选择器1
跟我学jQuery教程目录:
- 跟我学jQuery(一) 前言
- 跟我学jQuery(二) 初识jQuery
- 跟我学jQuery(三) 无所不能的选择器1
- 跟我学jQuery(四) 无所不能的选择器2
- 跟我学jQuery(五) 给页面添砖加瓦1
一.区分DOM和jQuery包装集
在jQuery中要想获取一个对象,都要从一个美元符号和一段圆括号开始:$(),有这样一个函数我们就可以通过(css,XPath,id)来获取对象.
以往我们通过javascript来获取对象有如下几种取法,但取出来的是一些DOM对象
var obj1 = document.getElementById("txtName"); //获取一个指定id为txtName的DOM对象var obj2 = document.getElementsByName("chkItem"); //获取name为chkItem的一组元素var obj3 = document.getElementsByTagName("a");//获取标签元素为a的一组元素
获取的对象多是DOM对象,而DOM对象大家也知道其方法和属性是非常有限的.
而在jQuery中我们要获取上述的对象是非常简单的
var obj1 = $("#txtName"); //获取ID为txtName的对象var obj2 = $("input:checkbox[@name='chkItem]"); //获取name为chkitem的一组复选框var obj3 = $(".bgRed"); //获取class为bgReg的元素var obj4 = $("a");//获取所有的a元素
当然在jQuery里获取对象不止是这些,还有更多,我们下面就会讲到,现在问题来了?有人会问,用普通的JavaScript和jQuery获取的对象是一样的吗?
答案:不是,JavaScript返回的是DOM对象,jQuery返回的是jQuery包装集,封装了更多的属性和方法
有人说我能不能用DOM对象去使用jQuery的方法呢?可以但必须要把这个DOM对象封装成jQuery包装集
var obj1 = document.getElementById("txtName"); //这里是一个DOM对象var obj2 = $(obj1);//把DOM对象通过$()工厂函数转换成jQuery包装集了
有人会说我怎么区分这2个对象呀,如果你是VS2008的使用者,通过智能感应就可以检测出来
一看obj1提示出来的信息就知道是DOM的属性,我们在测试一下obj2 发现方法明显多出了很多,而且是DOM里面没有的
接下来我们要进行的是如何把一个jQuery的包装集转换成DOM对象呢?
由于jQuery包装集是一个集合,要访问单个元素就需要用到索引
var obj4 = $("a")[0];//获取所有的a元素一个元素
这里要注意的是通过索引返回来的对象就变成DOM对象了.区分了两者的概念对我们学习就会起到一个突进的作用,俗点说用jQuery就不要再去想JavaScript了.
二.jQuery选择器
在DOM里面我们要选择元素用getElementById,getElementByName进行选择,在jQuery中用一个$()工厂函数进行选择元素,取值的方式有几十种,而且灵活多变,有人会问$这个符号代表的是啥意思呀!$就是jQuery的简写
var obj1 = $("a");var onj2 = jQuery("a");//两者的含义是一模一样的,简写形式而已
三.彻底掌握jQuery选择器
既然标题叫无所不能的选择器,我就彻底的来演示一遍.在讲解各种选择器的各种表达式之前,我要先引入2个jQuery方法,也就是上一讲很多人不明白的2个函数
addClass(样式表名) 说明:给指定的jQuery包装集添加一个指定的样式
removeClass(样式表名) 说明:删除指定的jQuery包装集的样式,例子可以看上一讲的例子
现在我要模仿<<jQuery实战>>这本书里面的一个选择模拟器[哈哈!支持国产],当我在指定的一个文本框中输入选择表达式,然后把选中的元素样式改变.
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><style type="text/css"> .myDiv { font-size:14px; color:Black; border-color:Black; border-width:1px; border-style:solid; } .changeDiv { font-size:18px; color:Blue; border-color:Red; border-width:1px; border-style:solid; }</style><script language="javascript" type="text/javascript" src="jquery-1[1].3.2-vsdoc2.js"></script>
<script language="javascript" type="text/javascript">
function ChangeCss() {
var strSel = $("#txtSelect").val(); //val()获得第一个匹配元素的当前值
$("*").removeClass("changeDiv"); //删除页面中所有classic为changeDiv的样式,*代表的是这个页面元素
$(strSel).removeClass("myDiv").addClass("changeDiv"); //删除最初样式,添加新样式
$("#showSelect").html("代码为:$(\"" + strSel + "\")");//给指定的jQuery添加内容
}
</script>
</head>
<body>
<form id="form1">
<p>请输入选择表达式(注意:ID选择就填写#id名,为了出现效果每次最好刷新一下页面):<input id="txtSelect" type="text" /><input id="btOk" type="button" value="确定" onclick="ChangeCss();" /></p>
<p id="showSelect"></p>
<span>span元素</span>
<div class="myDiv" id="testDiv1">
我ID是testDiv1,是一个DIV元素,class为myDiv
</div>
<div class="myDiv" id="testDiv2">
我ID是testDiv3,是一个DIV元素,class为myDiv
</div>
<div id="testDiv3">
我ID是testDiv3,是一个DIV元素,没有class
</div>
<div id="testDiv4">
<p>
我ID是testDiv4,是一个DIV元素,没有class
</p>
</div>
<div id="testDiv5">
我ID是testDiv5,是一个DIV元素,没有class
</div>
<h1>标题1</h1>
<p>段落1</p>
<h2>标题2</h2>
<p>段落2</p>
<input id="Checkbox1" type="checkbox" checked="checked" />运动员
<input id="Checkbox2" type="checkbox" />歌唱家
<input id="Checkbox3" type="checkbox" />舞蹈家
<input id="Checkbox4" type="checkbox" checked="checked" />科学家
<input id="Checkbox5" type="checkbox" />工人
<div style="background-color:Yellow; width:300px; height:100px">
</div>
</form>
</body>
</html>
根据jQuery的API帮助文档选择器大致可以分为以下几种
1.基本选择器
选择表达式 | 说明 | 举例 |
#id | 根据给定的ID匹配一个元素用# | $("#testDiv2") 获取ID为testDiv2的元素 |
.class | 根据给定的类匹配元素(也就是取class的值)用. | $(".myDiv") 获取class为myDiv的一组元素 |
element | 根据给定的元素名匹配所有元素,直接写上元素名例如(p,a,input,div等) | $("div") 获取所有的div元素 |
selector1,selector2,selectorN | 将每一个选择器匹配到的元素合并后一起返回,选择器可以是id,class,element用,隔开 |
$("#testDiv2,p")
$("p,span,div.myDiv") 获取所有的p,span和class为myDiv的元素 |
* | 选择所有的元素 | $("*") |
2.简单选择器
选择表达式 | 说明 | 举例 |
:first | 匹配找到的第一个元素 | $("div:first") |
:last | 匹配找到的最后一个元素 | $("div:last") |
:eq(index) | 匹配一个给定索引值的元素,当然要存在才可以找得到,索引从0开始 | $("div:eq(1)") |
:gt(index) | 匹配所有大于给定索引值的元素 | $("div:gt(0)") 查找第1个以后的元素 |
:lt(index) | 匹配所有小于给定索引值的元素 | $("div:lt(2)") 查找第一行和第二行的元素 |
:even | 匹配所有索引值为偶数的元素,从 0 开始计数 |
$("div:even") 查找第1,3,5个div |
:odd | 匹配所有索引值为奇数的元素,从 0 开始计数 |
$("div:odd") 查找第2,4个div |
:not(selector) |
去除所有与给定选择器匹配的元素 selector为表达式,可以是属性里面的一个值 |
$("input:not(:checked)") 查找所有未选中的input 元素[注 :checked为自定义筛选选择器,后面会讲到] |
:header | 匹配如 h1, h2, h3之类的标题元素 |
$(":header").css("background", "#EEE"); 添加样式 |
:animated | 匹配所有正在执行动画效果的元素 | 暂无例子 |
3.内容选择器
选择表达式 | 说明 | 举例 |
:contains(text) | 匹配包含给定文本的元素,只要里面出现即可 |
$("p:contains('段落')") 找带有段落字样的p元素 |
:empty | 匹配所有不包含子元素或者文本的空元素 | $("div:empty") |
:has(selector) | 匹配含有选择器所匹配的元素的元素 | $("div:has('p')") |
:parent | 匹配含有子元素或者文本的元素 | $("div:parent") |
上面的第二,三类的选择器例子多加了一个标签元素比如$("p:contains('段落')"),这样做是缩小了选择范围,当然也可以直接这样写$(":contains('段落')")
12点半了,准备睡觉了,明天还得上课,先写3个类型的选择器,大家利用上面的选择模拟器尝试去用一下,熟能生巧,代码我就不提供下载了,大家直接COPY上面HTML,放入一个jQuery的js即可(未完待续)
转载于:https://www.cnblogs.com/yoowo/archive/2009/05/22/1486720.html
跟我学jQuery(三) 无所不能的选择器1相关推荐
- 跟我学jQuery(二) 初识jQuery
跟我学jQuery教程目录: 跟我学jQuery(一) 前言 跟我学jQuery(二) 初识jQuery 跟我学jQuery(三) 无所不能的选择器1 跟我学jQuery(四) ...
- Java程序员从笨鸟到菜鸟之(八十六)跟我学jquery(二)大话jquery选择器
本篇博客我将带大家来学习一下jQuery的第一个比较重要的知识点,这个知识点对学习jquery的同学来说是必须掌握的,因为他是所有操作的基础,这个知识点就是jquery的对象选择器,我们利用jquer ...
- jQuery(三)常规选择器
第三章.常规选择器 jQuery最核心的组成部分就是:选择器引擎.它继承了css的语法,可以对DOM元素的标签名.属性名.状态等进行快速准确的选择,并且不必担心浏览器的兼容性.jQuery选择器实 ...
- 第三章:JQuery基础---核心函数选择器、工具方法
一:是什么?以及作用 定义:有特定语法规则(css选择器)的字符串 作用:用来查找某个/些DOM元素: $(selector) 二:基本选择器(最基本最常用的选择器) id选择器:#id ...
- 为什么要学jquery
为什么要学jquery 使用javascript开发过程中,有许多的缺点: 查找元素的方法单一,麻烦. 遍历数组很麻烦,通常要嵌套一大堆的for循环. 有兼容性问题. 想要实现简单的动画效果,也很麻烦 ...
- 跟我一起学jQuery——第二集(未完待续..)
<锋利的JQuery>第二版阅读笔记-第二章 跟我一起学jQuery--第二集 代码风格 jQuery选择器 接下来,就要开始正式学习jQuery的各种使用了.但是没有规矩不成方圆,所以我 ...
- 跟我一起学jQuery——第一集
<锋利的JQuery>第二版阅读笔记-第一章 跟我一起学jQuery--第一集 jQuery对象和DOM对象 jQuery的优势与特点 Hello World! jQuery对象和DOM对 ...
- jQuery入门基本语法选择器
文章目录 一.了解什么是jQuery&为什么要学jQuery? 二.jQuery的基本语法? 三.jQuery如何使用? 四.jQuery的选择器? 五.推荐使用开发工具:HBuilder X ...
- jQuery框架学习第二天:jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
最新文章
- Scala之部分应用函数
- bootstrap-datepicker 日期格式设置
- WIN7 64位系统安装JDK并配置环境变量
- http超文本传输协议
- 20w7珠led驱动电源电路图_LED驱动电源:用TL431做的几个恒流电路分享!
- OpenCV实战5: LBP级联分类器实现人脸检测
- offer该怎么选:大公司or小公司?高薪or期权?
- linux windows下重启oracle
- 布线问题 nyoj38
- java除法运算有小数_Java 整数间的除法运算如何保留所有小数位?
- 时域和频域的关系(转载)
- 石墨烯 量子计算机,《Nature Nanotech.》又是石墨烯,这次对量子计算机下手了!...
- 计算机控制技术廖道争答案,2017年三峡大学电气与新能源学院专业目录及考试科目...
- 双目摄像头相关参数介绍
- 四六级考试中的计算机类文章,四六级英语考试进入机考时代
- leach c matlab,其实是MATLAB的LEACH协议
- 指狗为马,还可骑乘?小鹏快收了你的神通吧...
- 用友NCC产品API使用指南
- windwos使用代理软件的问题
- 初级摄影全程训练教程