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. 使用text存储hash类型的数据   Use text filed to store the hash map
			
    在component表里用text类型的字段存储hash数据 (1)新建字段 ,这是migration的内容 class AddHintsToComponents < ActiveRecord: ...
    
			
    2. 
						
  2. 符瑞艺 160809228_C语言程序设计实验2 选择结构程序设计
			
    实验2- 输入3个数,并按由大到小的顺序输出. 实验要求: 编写一个C程序,输入3个数,并按由大到小的顺序输出. 参考: 源码: #include <stdio.h> int main() ...
    
			
    3. 
						
  3. I2C总线协议的简要说明
			
    为了快速的了解I2C总线协议,此处采用另类的方式进行说明. 倘若你和另外一个人只能通过一个开关加灯泡的装置在不同的两个房间进行交流,以下是很简单能说明的一个模型: 你的房间有一个开关,另外一间房间有一 ...
    
			
    4. 
						
  4. Appium+Robotframework实现Android应用的自动化测试-4：AppiumLibrary介绍和安装
			
    Appium是个好东东,Android,iOS都支持,并且居然RobotFramework也支持Appium了,这就是本文要介绍的AppiumLibrary. 通过前面的文章大家知道可以使用多种语言来 ...
    
			
    5. 
						
  5. wx.ListCtrl简单使用例子
			
    效果图: 示例代码: #! /usr/bin/env python #coding=utf-8 import wx import sys packages = [('jessica alba', 'p ...
    
			
    6. 
						
  6. Unity3d 检查哪些prefab引用了某个UIAtlas
			
    适用情景:策划在用NGUI制作UI prefab时经常会使用一些临时的Atlas,然后再想改就不知道都哪些使用了.现在想修改下使用临时资源的GameObject 使用方式,先选中某个prefab或者某 ...
    
			
    7. 
						
  7. Mac下安装MySQL
			
    2015-07-13 15:10:32 Mac下用homebrew安装软件还是很方便的 brew install mysql 等待一会儿安装完毕后到安装目录: /usr/local/Cellar/my ...
    
			
    8. 
						
  8. C#操作字符串方法总结<转>
			
    staticvoid Main(string[] args) { string s =""; //(1)字符访问(下标访问s[i]) s ="ABCD"; Co ...
    
			
    9. 
						
  9. 表现层的设计（一）——常用的模式、Json与DTO
			
    上几篇博文介绍了 业务逻辑层和数据访问层,我认为写博文的作用主要是向业界的读者交流一种思想,点到为止,至于学习架构设计,通过几篇博文是讲不清楚的,还需要[基础]扎实的情况下,[反复]研究[权威]的书籍 ...
    
			
    10. 
						
  10. 前端easyui的简化调用
			
    easyui近期一直都比较流行,虽然它在效果上被extjs爆了,它的使用难度低,在IE6下表现不错,的确受到了广泛企业程序员的好评. 但是他的API说明还是比较简陋的,刚上手可能还需要摸索一下,为什么 ...
    
			
    11.