jQuery - 2.jQuery选择器
JQuery选择器
JQuery选择器用于查找满足条件的元素，比如可以用$(“#控件Id”)来根据控件id获得控件的jQuery对象，相当于getElementById：
1、id 选择器 $(“#div1”).html(“<font color=red>hello</font>”)。语法、意义类似于CSS选择器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {//显示1个：我是d1
$("#d1").text("我是d1");//显示2个：我的类选择器Div2
$(".Div2").text("我的类选择器Div2");//显示5个，并把前面的覆盖了
$("div").text("都是我div的");})
</script>
</head>
<body>
<div id="d1"></div>
<div id="Div1"></div>
<div class="Div2"></div>
<div id="Div3"></div>
<div class="Div2"></div>
</body>
</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选择器的更多相关文章
- JQ001-认识jQuery 和 JQ002-jQuery选择器
JQ001-认识jQuery jQuery环境配置:将jQuery.js文件引入到html页面中即可. 代码如下: <!DOCTYPE html> <html> <hea ...
- 【Java EE 学习 32 上】【JQuery】【选择器】
一.JQuery简介 1.JQuery是JavaScript库,封装了很多预定义对象和实用函数. 2.JQury的优势: (1)简洁,其宗旨就是写更少的代码做更多的事. (2)文档声明非常全面:htt ...
- jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
- jQuery-认识JQuery，jQuery选择器
认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...
- jQuery 简单过滤选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
- JQuery：JQuery语法、选择器、事件处理
JQuery语法: 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- jQuery基础知识--选择器与效果
$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...
- jQuery的筛选选择器
基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
- JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
随机推荐
- Android学习笔记（十六）——数据库操作（上）
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! Android 为了让我们能够更加方便地管理数据库,专门提供了一个 SQLiteOpenHelper帮助类, ...
- 解压版MySQL安装说明
一.复制my.ini到MySQL解压的目录 例如:E:\MySQL 二.修改my.ini第39~40行 basedir = "E:\\MySQL" datadir = " ...
- php 简单说明IoC (php 实例+注释)
简单说明IoC <?php //Ioc ———— 设计方式 //控制反转 Inversion of Control //依赖关系的转移 //依赖抽象而非实践 //用于解决高层应用依赖 底层组件, ...
- Android碎片（Fragment）简述
碎片(Fragment)是一种可以嵌入活动当中的UI片段,它能让程序更加合理和充分地利用大屏幕的空间,因此碎片在平板上的应用非常广泛. 你可以将碎片理解成一个迷你型的活动,水平同样可能包含布局,同样都 ...
- BZOJ 1922: [Sdoi2010]大陆争霸
Description 一个无向图,到一个点之前需要先到其他点,求从第一个点到第 \(n\) 点最短时间. Sol 拓扑+Dijkstra. 跑Dijkstra的时候加上拓扑序... 用两个数组表示 ...
- BZOJ 3270: 博物馆
Sol 期望DP+高斯消元. 根据本题题意列出期望方程\[E(i,j)=(1-p_i)(1-p_j)E(u,v)+(1-p_i)p_jE(u,j)+p_i(1-p_j)E(i,v)+p_ip_jE(i ...
- PHP--获取响应头(Response Header)方法
方法一: $baiduUrl = "http://www.baidu.com/link"; file_get_contents($baiduUrl); $responseInf ...
- sublime text 2 配置php调试环境
准备工作: 计算机中已经正确安装了php. 1.设置windows php环境变量->用户变量 Path变量值
- 转： UAC 问题
打开VS2005.VS2008.VS2010工程,查看工程文件夹中的Properties文件夹下是否有app.manifest这个文件:如 没有,按如下方式创建:鼠标右击工程在菜单中选择“属性”,点击 ...
- React JS快速入门教程
翻译至官方文档<Tutorial>http://facebook.github.io/react/docs/tutorial.html 转载请注明出处:http://blog.csdn.n ...