jquery中获取元素的几种方式小结

1 从集合中通过指定的序号获取元素 
html:

复制代码代码如下:

<div> 
<p>0</p> 
<p>1</p> 
<p>2</p> 
<p>3</p> 
<p>4</p> 
<p>5</p> 
<p>6</p> 
<p>7</p> 
</div>

JS

复制代码代码如下:

<script type="text/javascript"> 
jQuery(function(){ 
$("p").eq(2).css("color","red"); 
$("p").eq(3).css("color","red"); 
}) 
</script>

2 获取指定条件一致和指定范围的元素 
html:

复制代码代码如下:

<div> 
<p>0</p> 
<p>1</p> 
<p class="center">2</p> 
<p class="center">3</p> 
<p>4</p> 
<p>5</p> 
<p>6</p> 
<p>7</p> 
</div>

JS

复制代码代码如下:

<script type="text/javascript"> 
jQuery(function(){ 
$("p").filter(‘.center‘).css("color","red"); 
}) 
$(function(){ 
$("p").slice(5,7).css("color","yellow"); 
}) 
</script>

3 获取与条件表达式一致的元素 
html:

复制代码代码如下:

<div> 
<p>0</p> 
<p>1</p> 
<p class="center">2</p> 
<p class="center">3</p> 
<p>4</p> 
<p class="aa">5</p> 
<p>6</p> 
<p>7</p> 
</div>

js

复制代码代码如下:

<script type="text/javascript"> 
jQuery(function(){ 
$("p").each(function(){ 
switch(true){ 
case $(this).is(".center"): 
$(this).css("color","red"); 
break; 
case $(this).is(".aa"): 
$(this).css("color","yellow"); 
break; 

}) 
}) 
</script>

4 获取元素的上一个元素和下一个元素 
Html:

复制代码代码如下:

<div id="aa"> 
<p>1号</p> 
<p class="yes">2号</p> 
<p>3号</p> 
<p>4号</p> 
<p>5号</p> 
<p class="yes">6号</p> 
<p class="yes">7号</p> 
</div>

js

复制代码代码如下:

//获取元素的下一个元素 
jQuery(function(){ 
$("p").next(".yes").css("color","red"); 
}) 
//获取元素的上一个元素 
jQuery(function(){ 
$("p").prev(".yes").css("color","red"); 
})

5 获取元素的父元素和子元素 
html:

复制代码代码如下:

<div id="aa"> 
<p>1号</p> 
<p class="yes">2号</p> 
<p>3号</p> 
<p>4号</p> 
<p>5号</p> 
<p class="yes">6号</p> 
<p class="yes">7号</p> 
</div>

js

复制代码代码如下:

//获取元素的父元素 
jQuery(function(){ 
$("p").parent().css("color","red"); 
}) 
//获取元素的子元素 
jQuery(function(){ 
$("#aa").children(".yes").css("color","red"); 
})

时间: 2024-10-19 13:39:12

jquery中获取元素的几种方式小结的相关文章

java中获取路径的几种方式

总是忘记, 备份一下,方便下次用. 第一种: File directory = new File("");//参数为空 String courseFile = directory.getCanonicalPath() ;System.out.println(courseFile); 结果:C:\Documents and Settings\Administrator\workspace\projectName获取当前类的所在工程路径; 第二种: File f = new File(th

AngularJS中获取数据源的几种方式

在AngularJS中,可以从$rootScope中获取数据源,也可以把获取数据的逻辑封装在service中,然后注入到app.run函数中,或者注入到controller中.本篇就来整理获取数据的几种方式. ■ 数据源放在$rootScope中 var app = angular.module("app",[]); app.run(function($rootScope){ $rootScope.todos = [ {item:"",done:true}, {it

jQuery中开发插件的两种方式(附Demo)

做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQuery看成一个类,那么就相当于给jQuery类本身添加方法.第二种是对象扩展的方式开发插件,即jQuery对象添加方法. 类扩展的插件 类扩展的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法.典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中.关

jQuery中获取元素的属性方法attr()简单用法

语法结构:$(selector).attr(attribute), //selector为选择器名,attribute为指定要获取的元素的属性名 修改元素属性的$(selector).attr(attribute,value), //selector为选择器名,attribute为指定要获取的元素的属性名 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

5.struts2中Action类中获取ServletAPI的三种方式

**Servlet的API的访问(开发中偶尔会使用到)** 1.在Action类中也可以获取到Servlet一些常用的API,有如下三种方式获取 * 完全解耦合的方式 * 使用接口注入的方式 * 使用ServletActionContext中静态方法直接访问Servlet的API * 需求:提供JSP的表单页面的数据,在Action中使用Servlet的API接收到,然后保存到三个域对象中,最后再显示到JSP的页面上. * 提供JSP注册的页面,演示下面这三种方式: <h3>注册页面</

android中获取打气筒的几种方式

1,简单说明,打气筒就是将我们的xml布局转换为我们的view对象,不扯远了,直接看代码 1 A:从context中获取 2 LayoutInflater inflater1 = LayoutInflater.from(this); 3 B:通过Activitiy直接获取 4 LayoutInflater inflater2 = this.getLayoutInflater(); 5 C:根据SystemService获取资源 6 LayoutInflater inflater3 = (Layo

Java中获取配置文件的四种方式

一,类加载器classLoader 二,getResourcesAsStream方法 三,Properties对象 四,ResouceBundle对象 五,四种方式代码演示 public class LoadProperties { public static void main(String[] args) throws Exception, IOException { //方式一,在项目同级目录下 /*Properties p = new Properties(); p.load(new F

Spring在代码中获取bean的几种方式(转:http://www.dexcoder.com/selfly/article/326)

方法一:在初始化时保存ApplicationContext对象 方法二:通过Spring提供的utils类获取ApplicationContext对象 方法三:继承自抽象类ApplicationObjectSupport 方法四:继承自抽象类WebApplicationObjectSupport 方法五:实现接口ApplicationContextAware 方法六:通过Spring提供的ContextLoader 获取spring中bean的方式总结: 方法一:在初始化时保存Applicati

获取元素的几种方式

1. 通过顶层document节点获取: (1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点.如今,已经出现了如prototype.Mootools等多个JavaScript库,它们提供了更简便的方法:$(id),参数仍然是节点的id.这个方法可以看作是document.getElementById()的另外一种写法,不过$()的功能更为强大,具