jquery 是否可显

转载

云端筑梦大师 2024-11-13 11:05:49

文章标签 jquery 是否可显 javascript xhtml ViewUI jQuery 文章分类 jQuery 前端开发

一.区分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")