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. h5上传图片
			
    1.如何在H5上传图片 使用FileReader 2.FileReader接口 传图片我们只用到readAsDataURL 3.FileReader接口事件 传图片我们只用到onload 4.如何使用 ...
    
			
    2. 
						
  2. Android自定义标题栏
			
    预览一下效果: 素材: 新建一个布局title_bar.xml,代码如下: <?xml version="1.0" encoding="utf-8"?&g ...
    
			
    3. 
						
  3. BZOJ 4236: JOIOJI
			
    Description 给出一个字符串,只包含3个字母,询问最长的一个子串,3个字母出现次数相同. Sol map. 如果一个子串满足条件,那么它端点处的三个字母的个数两两差值都是一样的,直接存个状态 ...
    
			
    4. 
						
  4. composer 的使用
			
    composer是php包管理工具,非常好用!许多框架,例如zendframework都可以用它来安装. 使用起来其实是很简单的.以下以windowns操作系统为例: 把php添加到系统环境变量.(网 ...
    
			
    5. 
						
  5. Spring+SpringMVC+MyBatis+Maven 服务端XML配置
			
    项目目录结构 spring-mybatis.xml <?xml version="1.0" encoding="UTF-8"?> <beans ...
    
			
    6. 
						
  6. 开始学习C++
			
    这里突然想起来当初学习java和C# 总是会有个demo :  hello  world. 这里我记得我曾经看过一个笑话.说有个程序员,想学习书法,买了笔墨,都准备好了,但是不知道写什么好.最后,他大 ...
    
			
    7. 
						
  7. 解读Unity中的CG编写Shader系列八（镜面反射）
			
    转自http://www.itnose.net/detail/6117378.html 讨论完漫反射之后,接下来肯定就是镜面反射了 在开始镜面反射shader的coding之前,要扩充一下前面提到的知 ...
    
			
    8. 
						
  8. ios NSNotificationCenter 收到通知后的执行线程
			
    https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/Notifications/Articles/Thread ...
    
			
    9. 
						
  9. ios coredata NSManagedObject 的 objectID
			
    要使用这个属性一定要注意先把数据保存下,不然会变化的!就无法通过 - (NSManagedObject*)existingObjectWithID:(NSManagedObjectID*)object ...
    
			
    10. 
						
  10. ffmpeg-20160628-git-bin.7z
			
    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 f ...
    
			
    11.