Jquery获取元素的形式很多。而且很灵活。
例子代码
<style>
.red{
color:#ff0000;
}
.blue{
color:#0000ff;
}
</style>
<div id=a class="red">Hello a</div>
<div id=b class="blue">Hello b</div>
<div id=c class="red">Hello c</div>
<div id=d class="blue">Hello d</div>
1. 根据ID获取元素, 使用#来告诉jquery以ID获取元素。这里会返回单一元素
如,把<div id=a class="red">拿出来
var obj = $("#a");
alert(obj.html()); <!-- 这里会显示 Hello a -->
var obj = $("#d");
alert(obj.html()); <!-- 这里会显示 Hello d -->
2. 根据使用css类来找元素, 返回的是一个元素数组。直接在元素选择器里把css的名字放进去就行。
如, 把所有使用red类的元素找出来。
var obj = $(".red");
这里会回来2个元素。
<div id=a class="red">Hello a</div>
<div id=c class="red">Hello c</div>
alert(obj[0].html()); <!-- 这里会显示 Hello a -->
alert(obj[1].html()); <!-- 这里会显示 Hello c-->
如果class在整个页面都使用到,而又不想拿太多的元素回来,那这么办呢?
jquery提供了filter(过滤器)。
例子代码:
<style>
.red
{
color: #ff0000;
}
</style>
<div id="a">
<span class="red">Hello World a</span>
<span class="red">Hello World b</span>
</div>
<div id="b">
<span class="red">Hello World c</span>
</div>
这里先介绍其中一种filter。
<script language="javascript">
<!--
在这里,我们在元素选择器里写上 #a .red ,告诉选择器,在id是a的元素里找那些使用css class red的元素。
-->
var obj = $("#a .red");
</script>
以上代码,会找到2个元素。
<span class="red">Hello World a</span>
<span class="red">Hello World b</span>
而
<span class="red">Hello World c</span>是不会在被选择之列。因为它不再<div id="a"></div>里。
分享到:
相关推荐
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
jquery插件jquery-ui-1.8.2.custom.min.js
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
jquery-ui-1.9.2.custom.min.js
jquery-migrate-1.2.1.min.js 可以更好的帮助 jqury-jqprint 兼容性问题
jquery-1.11.0 + jquery-UI-1.10.4
jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...
jquery.editable-select插件
jquery-ui-1.9.2.(免费),适合javascript开发者参考,包含各种美观的用户交互界面
jquery插件jquery-ui-timepicker-addon.j
jquery-ui-1.10.3.min.js
jquery-ui-1.8.16.custom.min.js jquery-ui-1.8.16.custom.min.js jquery-ui-1.8.16.custom.min.js jquery-ui-1.8.16.custom.min.js
jQuery-File-Upload上传插件
jquery.timers-1.2.js 定时器插件
用js封装的功能库,方便开发者使用。 取得页面中的元素。如果不使用JavaScript 库,遍历DOM (Document Object Model ,文档对象...jQuery 为准确地获取需要检查或操纵的文档元素,提供了可靠而富有效率的选择符机制。
* Porting : Jquery barcode plugin * Version : 2.0.1 * * Date : September 05, 2010 * Author : DEMONTE Jean-Baptiste (firejocker) * HOUREZ Jonathan * Contact : jbdemonte @ gmail.com * Managed...
jquery-1.4.2.js jquery-1.4.2.min.js jquery-1.4.2-vsdoc.js 中文版vsdoc jquery-1.4.2-vsdoc_en.js jquery.cookie.js
1、将jquery-1.6.2-vsdoc.js与jquery-1.6.2.js放在同一目录,然后在vs中添加对jquery-1.6.2.js的引用即可; 2、切记:两个文件的文件名不能修改,并且只要引用jquery-1.6.2.js而不要引用jquery-1.6.2-vsdoc.js。
前端项目-jquery-nice-select,一个轻量级jquery插件,用可定制的下拉列表替换本机的select元素。