1、id 选择器

2、标签选择器

3、类选择器

4、复合选择器

5.层次选择器

JQuery的迭代

 

JQuery选择器

JQuery选择器用于查找满足条件的元素，比如可以用$(“#控件Id”)来根据控件id获得控件的jQuery对象，相当于getElementById：
1、id 选择器   $(“#div1”).html(“<font color=red>hello</font>”)。语法、意义类似于CSS选择器

显示行号 复制代码 ？ 这是一段程序代码。 
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             //显示1个：我是d1
  10.             $("#d1").text("我是d1");
  11.             //显示2个：我的类选择器Div2
  12.             $(".Div2").text("我的类选择器Div2");
  13.             //显示5个，并把前面的覆盖了
  14.             $("div").text("都是我div的");
  15.         })
  16.     </script>
  17. </head>
  18. <body>
  19.     <div id="d1"></div>
  20.     <div id="Div1"></div>
  21.     <div class="Div2"></div>
  22.     <div id="Div3"></div>
  23.     <div class="Div2"></div>
  24. </body>
  25. </html>




.src_container{background-color:#e7e5dc; width:99%; overflow:hidden; margin:12px 0 12px 0 !important; padding:0px 3px 3px 0px}

.src_container .titlebar{ background-color:#d4dfff;  border:1px solid #4f81bd;  border-bottom:0;  padding:3px 24px;  margin:0;  width:auto;  line-height:120%;  overflow:hidden;  text-align:left;  font-size:12px}

.src_container .toolbar{ display:inline;  font-weight:normal;  font-size:100%;  float:right;  cursor:hand;  color:#00f;  text-align:left;  overflow:hidden}

.toolbar span.button{ display:inline;  font-weight:normal;  font-size:100%;  cursor:hand;  color:#00f;  text-align:left;  overflow:hidden;  cursor:pointer;}

.src_container div.clientarea{ background-color:white;  border:1px solid #4f81bd;  margin:0;  width:auto !important;  width:100%;  height:auto;  overflow:auto;  text-align:left;  font-size:12px;  font-family: "Courier New","Consolas","Fixedsys",courier,monospace,serif}

.src_container ol.mainarea{ padding:0 0 0 52px;  margin:0;  background-color:#f7f7ff !important}

.number_show{ padding-left:52px !important;  list-style:decimal outside !important}

.number_show li{ list-style:decimal outside !important;  border-left:1px dotted #4f81bd}

.number_hide{ padding-left:0px !important;  list-style-type:none !important}

.number_hide li{ list-style-type:none !important;  border-left:0px}

ol.mainarea li{ display:list-item !important;  font-size:12px !important;  margin:0 !important;  line-height:18px !important;  padding:0 0 0 0px !important;  background-color:#f7f7ff !important;  color:#4f81bd}

ol.mainarea li pre{color:black; line-height:18px;  padding:0 0 0 12px !important; margin:0em;  background-color:#fff !important}

.linewrap ol.mainarea li pre{white-space:pre-wrap; white-space:-moz-pre-wrapwhite-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word}

ol.mainarea li pre.alt{ background-color:#f7f7ff !important}


2、标签选择器 $("TagName")来获取所有指定标签名的jQuery对象，相


       当于getElementsByTagName：


        $(function() {


            $("#btnClick").click(function() {


                $("p").html("我们都是P");


            });


        });


3、类选择器


JQuery中注册事件监听的写法：click()、leave()、focus()、blur...，自己动手写click函数。


规则： $(who).when({what});      例： $(‘#a’).click(function(){});


 


4、复合选择器：$("p,div,span.menuitem")，同时选择p标签、div标签和拥有menuitem样式的span标签元素（类似于CSS选择器）




 


5.层次选择器：


（1）$("div p")获取div下的所有p元素（后代，子、子的子……）


（2）$("div > p")获取div下的直接p子元素


（3）$(".menuitem + div")获取样式名为menuitem之后的第一个div元素（不常用）


（4）$(".menuitem ~ div")获取样式名为menuitem之后所有的div元素（不常用）


jQuery修改样式：$("#div1").css("background", "red");


获得样式$(“#div1”).css(“background”)；


修改value：$(“#un”).val(“abc”)，


获得value：$(“#un”).val()




$(function() {


            $("#wrap p").css("background-color","red");


        })






类似的获得、设置innerText、innerHTML用text()和html()。val、html、text等是方法，不是属性，jQuery中很少有属性的用法，因为属性写法很难“链式编程”。


JQuery的迭代




如何判断对象是否存在，jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象)，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：




if ($("#btn1").length <= 0) {

                alert("id为btn1的元素不存在！");

            }




												


											
jQuery - 2.jQuery选择器的更多相关文章
	

    
						
  1. JQ001-认识jQuery  和  JQ002-jQuery选择器
		
    JQ001-认识jQuery jQuery环境配置:将jQuery.js文件引入到html页面中即可. 代码如下: <!DOCTYPE html> <html> <hea ...
    
		
    2. 
						
  2. 【Java EE 学习 32 上】【JQuery】【选择器】
		
    一.JQuery简介 1.JQuery是JavaScript库,封装了很多预定义对象和实用函数. 2.JQury的优势: (1)简洁,其宗旨就是写更少的代码做更多的事. (2)文档声明非常全面:htt ...
    
		
    3. 
						
  3. jQuery基础之选择器
		
    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
    
		
    4. 
						
  4. jQuery-认识JQuery，jQuery选择器
		
    认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...
    
		
    5. 
						
  5. jQuery 简单过滤选择器
		
    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
    
		
    6. 
						
  6. JQuery：JQuery语法、选择器、事件处理
		
    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...
    
		
    7. 
						
  7. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
		
      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
    
		
    8. 
						
  8. jQuery基础知识--选择器与效果
		
    $(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...
    
		
    9. 
						
  9. jQuery的筛选选择器
		
    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
    
		
    10. 
						
  10. JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）
		
    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. IntelliJ中的main函数和System.out.println()快捷键
			
    1.在IntelJ中和Eclipse中稍有不同,在Eclipse中,输入main再按Alt+/即可自动补全main函数,但是在IntellJ中则是输入psvm,选中即可 2.在方法体内部有for循环, ...
    
			
    2. 
						
  2. OpenCV进阶之路：一个简化的视频摘要程序
			
    一.前言 视频摘要又称视频浓缩,是对视频内容的一个简单概括,先通过运动目标分析,提取运动目标,然后对各个目标的运动轨迹进行分析,将不同的目标拼接到一个共同的背景场景中,并将它们以某种方式进行组合.视频 ...
    
			
    3. 
						
  3. PHP判断用户操作系统（Android，ipad，iphone，windows）
			
    这段脚本可以运用在:针对不同的操作系统,把用户引导向相应的网站或做相应的处理. <?php // PHP 判断客户端平台(PC.安卓.iPhone.平板) // strpos() 函数返回字符串 ...
    
			
    4. 
						
  4. HDFS原理介绍
			
    HDFS(Hadoop Distributed File System )Hadoop分布式文件系统.是根据google发表的论文翻版的.论文为GFS(Google File System)Googl ...
    
			
    5. 
						
  5. unity3d 特殊文件夹和脚本编译顺序
			
    unity3d 特殊文件夹和脚本编译顺序 转自http://blog.csdn.net/u010019717/article/details/40474631 大多数情况下,您可以选择任何你喜欢的文件 ...
    
			
    6. 
						
  6. [Linux]yum开启rpm包缓存
			
    在CentOS下用yum安装,回发现在/var/cache/yum/下的base.extrs和updates下的packages下都没有发现下载的RPM 原来在/etc/yum.conf下没有设置下载 ...
    
			
    7. 
						
  7. python之集合，函数，装饰器
			
    本节主要内容如下: 1. set集合 2. 函数 -- 自定义函数 -- 内置函数 3. 装饰器 一. set 集合: 一个无序且不重复的序列. tuple算是list和str的杂合(杂交的都有自己的 ...
    
			
    8. 
						
  8. STL:原地归并排序模板（InplaceMergeSort）
			
    原理:就是在归并排序上改进,以时间复杂度换空间复杂度,利用元素反转完成排序 具体过程如下: 具体操作看代码吧,应该没什么难度,主要是reverse要反转三次 typedef int Position; ...
    
			
    9. 
						
  9. codeforces  567D.One-Dimensional Battle Ships  解题报告
			
    题目链接:http://codeforces.com/problemset/problem/567/D 题目意思:给出 1 * n 的 field,编号从左至右依次为 1,2,...,n.问射 m 枪 ...
    
			
    10. 
						
  10. JS判断客户端是手机还是PC的2个代码（转）
			
    转载自:http://www.jb51.net/article/48939.htm Javascript 判断客户端是否为 PC 还是手持设备,有时候项目中需要用到,很方便的检测,源生的哦,方法一共有 ...
    
			
    11.