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. 剑指Offer 替换空格
			
    题目描述 请实现一个函数,将一个字符串中的空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy.   思路: 替换空格,先遍历一遍记 ...
    
			
    2. 
						
  2. OpenCv高斯，中值，均值，双边滤波
			
    #include "cv.h" #include "highgui.h" #include <iostream> using namespace s ...
    
			
    3. 
						
  3. JavaScript深入浅出1-数据类型
			
    慕课网教程视频地址:Javascript深入浅出 javascript是弱数据类型语言,不需要显式的定义类型,一共有如下六种数据类型 原始类型:number string boolean null u ...
    
			
    4. 
						
  4. Windows 2008R2关闭网络发现
			
    在Windows Server 2008 R2安装完后,默认情况下,在高级共享设置中无法对网络发现的更改进行保存(每次选择"启用网络发现"后保存修改,但重新打开"高级共享 ...
    
			
    5. 
						
  5. 1. dex和Jar反编译对比
			
    Java源码 public class Hello { public int foo(int a,int b) { return (a + b) * (a - b); } public static  ...
    
			
    6. 
						
  6. jquery数组内多维对象
			
    jquery数组内多维对象 var postData=[],obj,list; obj = !!obj ? obj : $('#dist_meici_checkinfo_form'); obj.fin ...
    
			
    7. 
						
  7. espcms自定义表单邮件字段
			
    /include/inc_replace_mailtemplates.php中增加一行就可以了. 如:$replacemail['mailform'][] = array(name => '职位 ...
    
			
    8. 
						
  8. centos查找未挂载磁盘格式化并挂载
			
    查看当前linux服务器分区 df -h 查看当前linux服务器硬盘: fdisk -l /dev/sda   第一块硬盘 /dev/sdb   第二块硬盘 依此类推 以/dev/sdb为新增硬盘为 ...
    
			
    9. 
						
  9. Unity3d NavMesh获得地面高度
			
    UnityPro内置的NavMesh有几个API很有用 NavMesh.SamplePosition 根据给的点进行采样,可传入最大距离,返回true说明采样到了点,否则采样失败(可以用来获得地形高度 ...
    
			
    10. 
						
  10. Unity3D 降低IL2CPP编译可执行文件大小
			
    项目开始使用IL2CPP编译,后果是可执行文件急剧增加. google后发现国外一大神写的方法,原帖在这http://forum.unity3d.com/threads/suggestion-for- ...
    
			
    11.