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. Android学习笔记（一）——新建一个项目
			
    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 1.打开Android Studio时出现以下界面,点击”start a new Android Studio ...
    
			
    2. 
						
  2. tableView 选中cell时，获取到当前cell
			
    // >> 找到当前选中的cell,设置选中时的cell背景色 SideTableViewCell * cell = (SideTableViewCell *)[tableView cel ...
    
			
    3. 
						
  3. Unity3D获取Andorid设备返回键，主页键等功能
			
    在Unity开发中捕捉Android的常用事件其实很简单 在新建的脚本文件中就加入: 比如: // 返回键 if ( Application.platform == RuntimePlatform.A ...
    
			
    4. 
						
  4. 剑指Offer 变态跳台阶
			
    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法.   其实就是斐波那契数列问题. 假设f(n)是n个台阶跳的次数. f(1) = ...
    
			
    5. 
						
  5. TP中手动加载类库
			
    加载第三方类库,包括不符合命名规范和后缀的类库,以及没有使用 命名空间或者空间和路径不一致的类库.可手动加载. // 导入Org类库包 Library/Org/Util/Date.class.php类 ...
    
			
    6. 
						
  6. SNMP常用数据操作
			
    SNMP常用数据操作 snmp编程中常见的数据类型基本上就是integer32/oct_str(字节数组)/counter64/timeticks/dateAndTime这些.很多其它的比如Truth ...
    
			
    7. 
						
  7. CI控制器中设置在其它方法中可用的变量
			
    开发过程中,某些变量可能需要被控制器中的其它方法所调用,这个变量改怎么设置呢? 其实可以用ci的$this->load->vars($array);和$this->load-> ...
    
			
    8. 
						
  8. django的cookie 和session
			
    Cookie 1.获取cookie: request.COOKIES['key'] request.get_signed_cookie(key, default=RAISE_ERROR, salt=' ...
    
			
    9. 
						
  9. igbinary vs serialize vs json_encode
			
    igbinary vs serialize vs json_encode 2010-04-18 @ 23:01:58 · 作者 Volcano · 归类于 php 你可能会感兴趣的内容 关于" ...
    
			
    10. 
						
  10. oracle数据库两表数据比较
			
    本文转自http://blog.sina.com.cn/s/blog_3ff4e1ad0100tdl2.html 1 引言 在程序设计的过程中,往往会遇到两个记录集的比较.如华东电网PMS接口中实现传 ...
    
			
    11.