qiaolevip

浏览: 4911651 次
性别:
来自: 上海

最近访客更多访客>>

summyhaha

liunancun

xuweije

hjz

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Jquery Find Elements by index

博客分类：

JAVA 乔乐共享

JAVA 乔乐共享 js jquery

Find Elements by index:

Consider a simple document with the following HTML content:

<html>
<head>
<title>the title</title>
</head>
<body>
   <div>
   <ul>
     <li>list item 1</li>
     <li>list item 2</li>
     <li>list item 3</li>
     <li>list item 4</li>
     <li>list item 5</li>
     <li>list item 6</li>
   </ul>
   </div>
</body>
</html>

Above every list has its own index, and can be located directly by using eq(index) method as below example.
Every child element starts its index from zero, thus, list item 2 would be accessed by using $("li").eq(1) and so on.

Example:

Following is a simple example which adds the color to second list item.

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {
      $("li").eq(2).addClass("selected");
   });

   </script>
   <style>
      .selected { color:red; }
  </style>
</head>
<body>
   <div>
   <ul>
     <li>list item 1</li>
     <li>list item 2</li>
     <li>list item 3</li>
     <li>list item 4</li>
     <li>list item 5</li>
     <li>list item 6</li>
   </ul>
   </div>
</body>
</html>

To understand it in better way you can Try it yourself.

Filtering out Elements:

The filter( selector ) method can be used to filter out all elements from the set of matched elements that do not match the specified selector(s). The selector can be written using any selector syntax.

Example:

Following is a simple example which applies color to the lists associated with middle class:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {
      $("li").filter(".middle").addClass("selected");
   });

   </script>
   <style>
      .selected { color:red; }
  </style>
</head>
<body>
   <div>
   <ul>
     <li class="top">list item 1</li>
     <li class="top">list item 2</li>
     <li class="middle">list item 3</li>
     <li class="middle">list item 4</li>
     <li class="bottom">list item 5</li>
     <li class="bottom">list item 6</li>
   </ul>
   </div>
</body>
</html>

To understand it in better way you can Try it yourself.

Locating Descendent Elements :

The find( selector ) method can be used to locate all the descendent elements of a particular type of elements. Theselector can be written using any selector syntax.

Example:

Following is an example which selects all the <span> elements available inside different <p> elements:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">

   $(document).ready(function() {
      $("p").find("span").addClass("selected");
   });

   </script>
   <style>
      .selected { color:red; }
  </style>
</head>
<body>
   <p>This is 1st paragraph and <span>THIS IS RED</span></p>
   <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
</body>
</html>

To understand it in better way you can Try it yourself.

JQuery DOM Traversing Methods:

Following table lists down useful methods which you can use to filter out various elements from a list of DOM elements:

Selector Description

eq( index )	Reduce the set of matched elements to a single element.
filter( selector )	Removes all elements from the set of matched elements that do not match the specified selector(s).
filter( fn )	Removes all elements from the set of matched elements that do not match the specified function.
is( selector )	Checks the current selection against an expression and returns true, if at least one element of the selection fits the given selector.
map( callback )	Translate a set of elements in the jQuery object into another set of values in a jQuery array (which may, or may not contain elements).
not( selector )	Removes elements matching the specified selector from the set of matched elements.
slice( start, [end] )	Selects a subset of the matched elements.

Following table lists down other useful methods which you can use to locate various elements in a DOM:

Selector Description

add( selector )	Adds more elements, matched by the given selector, to the set of matched elements.
andSelf( )	Add the previous selection to the current selection.
children( [selector])	Get a set of elements containing all of the unique immediate children of each of the matched set of elements.
closest( selector )	Get a set of elements containing the closest parent element that matches the specified selector, the starting element included.
contents( )	Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.
end( )	Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state .
find( selector )	Searches for descendent elements that match the specified selectors.
next( [selector] )	Get a set of elements containing the unique next siblings of each of the given set of elements.
nextAll( [selector] )	Find all sibling elements after the current element.
offsetParent( )	Returns a jQuery collection with the positioned parent of the first matched element.
parent( [selector] )	Get the direct parent of an element. If called on a set of elements, parent returns a set of their unique direct parent elements.
parents( [selector] )	Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).
prev( [selector] )	Get a set of elements containing the unique previous siblings of each of the matched set of elements.
prevAll( [selector] )	Find all sibling elements in front of the current element.
siblings( [selector] )	Get a set of elements containing all of the unique siblings of each of the matched set of elements.

分享到：

Jquery Useful Attribute Methods | Struts+Json实例 Example

2011-12-31 13:50
浏览 2425
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery Find Elements by index

Find Elements by index:

Example:

Filtering out Elements:

Example:

Locating Descendent Elements :

Example:

JQuery DOM Traversing Methods:

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery Find Elements by index

Find Elements by index:

Example:

Filtering out Elements:

Example:

Locating Descendent Elements :

Example:

JQuery DOM Traversing Methods:

评论

发表评论

相关推荐

Ubuntu VirtualBox 安装win10报错：FATAL: No bootable medium found! System halted.

win10 webstorm9和10无法使用terminal解决方案

String,StringBuffer与StringBuilder的区别

HashMap与HashTable的区别(含源码分析)

java判断中英文长度并截取部分添加省略号

JAVA比较两个日期的差值天数

Eclipse GBK代码转移到UFT-8编码上去，迁移方案

CMD命令一键备份文件目录

Navicat 中文乱码问题

java写入xml格式数据增强版-可递归进行多层嵌套

Java XMLWriter 快速创建xml文件

Java循环复杂map，foreach

Java超全Json工具类JsonUtil

java占位符像C#{0}那样简单

jQuery判断对象是否显示或隐藏

通过dos命令获得服务器网卡地址-适合Windows和Linux

js正则表达式过去\反斜杠的问题解决方案

struts+json所含的jar包全集

Java新建线程异步调用示例

Java替换字符串正则表达式和其3种方法

最近访客更多访客>>