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总结一:选择器归 ...
随机推荐
- java计算时间差
比如:现在是2016-03-26 13:31:40 过去是:2016-01-02 11:30:24 我现在要获得两个日期差,差的形式为:XX天XX小时XX分XX秒 方法一: DateFo ...
- 校赛E题递归形式
#include<stdio.h> #include<string.h> using namespace std; typedef long long ll; ][]; ,,, ...
- 解析JSON插入数据库
<?php header("Content-Type:text/html;charset=utf-8"); include_once('./mysql.php'); $fil ...
- maven简单配置
maven-3.3.9下载 Maven是一个项目管理和综合工具.Maven提供了开发人员构建一个完整的生命周期框架.开发团队可以自动完成项目的基础工具建设,Maven使用标准的目录结构和默认构建生命周 ...
- CentOS 下安装xdebug
在CentOS 6.x 的系统中,是集成xdebug 的, yum install PHP-pecl-xdebug 如果是CentOS.5 也可能通过安装安装 epel 来安装 rpm -ivh ht ...
- SSH端口映射
host1:内网主机,承载有网站 host2:外网主机,准备作为代理 方案一: 在host2上执行: # ssh -CnNfgL *::host1_ip: user@host1_ip 方案二:在hos ...
- 流程图制作在云上 https://www.processon.com/
流程图制作在云上 : https://www.processon.com/
- POJ 2421(prim)
http://poj.org/problem?id=2421 这个题和poj1258是一样的,只要在1258的基础上那么几行代码,就可以A,水. 题意:还是n连通问题,和1258不同的就是这个还有几条 ...
- Django CRM __contains与__icontains区别
http://www.yihaomen.com/article/python/199.htm operators = { 'exact': '= %s', 'iexact': 'LIKE %s', ' ...
- ios UIWindow 错误使用导致无法接收motionEnded（摇一摇）函数
今天遇到一个问题,第一次运行程序时,- (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event函数无法调用,第二次就好了 ...