- 浏览: 4897350 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (743)
- JAVA (44)
- JAVA 乔乐共享 (145)
- js (132)
- database (26)
- jQuery (46)
- velocity (16)
- Ubuntu (14)
- Grails (2)
- Groovy (6)
- xml (2)
- Spring (11)
- mysql (24)
- sqlserver (6)
- oracle (9)
- cmd (8)
- CSS (17)
- Linux (2)
- sqlite (4)
- php (11)
- json (2)
- laravel (2)
- html (3)
- 闲聊 (3)
- git (13)
- nodejs (25)
- angularjs (17)
- npm (8)
- bootstrap (4)
- mongodb (5)
- React (32)
- Crack (7)
- b (0)
- ES6 (2)
- webpack (3)
- Babel (1)
- Koa (1)
最新评论
-
taoshengyijiuzt:
感谢大佬!!!
JetBrains最新激活服务器(长期更新ing) -
masuweng:
激活码可以用
JetBrains最新激活服务器(长期更新ing) -
dusdong:
都失效了
JetBrains最新激活服务器(长期更新ing) -
追风筝的孩纸Zz:
dddddddddddddddd
js获取网页屏幕可见区域高度 -
自己811005:
88350bcf69dcfbda7f8a76a589d9054 ...
Js设置前端允许跨域请求后端API:Access-Control-Allow-Credentials
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:
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:
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. |
发表评论
-
Ubuntu VirtualBox 安装win10报错:FATAL: No bootable medium found! System halted.
2017-04-20 13:04 6204点击设置:->Storage存储-&g ... -
win10 webstorm9和10无法使用terminal解决方案
2015-06-07 16:41 15894原因:计算机从win7更新到win10,webstorm9 ... -
String,StringBuffer与StringBuilder的区别
2014-07-21 13:22 1078String StringBuffer Strin ... -
HashMap与HashTable的区别(含源码分析)
2014-07-21 12:58 1244HashMap HashTable Hash ... -
java判断中英文长度并截取部分添加省略号
2014-03-21 15:44 2514public static void main(Strin ... -
JAVA比较两个日期的差值天数
2014-01-17 11:44 6083package com.anxin.ssk.cache; ... -
Eclipse GBK代码转移到UFT-8编码上去,迁移方案
2013-03-18 14:40 5420方法一:(程序法)推荐 //用commons-io.jar ... -
CMD命令一键备份文件目录
2013-01-30 15:43 2235echo 开始备份SSK目录 ::设置临时变量为目标备 ... -
Navicat 中文乱码问题
2012-09-25 16:47 3873解决方法: 1、关闭数据库连接; 2、右击数据库选择“连接 ... -
java写入xml格式数据增强版-可递归进行多层嵌套
2012-08-20 13:30 4585package com.proxy.util; im ... -
Java XMLWriter 快速创建xml文件
2012-08-17 16:23 2277package com.proxy.util; im ... -
Java循环复杂map,foreach
2012-08-17 16:11 9897package com.proxy.util; im ... -
Java超全Json工具类JsonUtil
2012-08-15 17:17 23029import java.io.StringReader; ... -
java占位符像C#{0}那样简单
2012-08-14 16:20 3696import java.text.MessageForma ... -
jQuery判断对象是否显示或隐藏
2012-08-08 17:05 19220// jQuery("#tanchuBg&quo ... -
通过dos命令获得服务器网卡地址-适合Windows和Linux
2012-08-01 17:07 1463/** * 获得服务器网卡地址 * * @ ... -
js正则表达式过去\反斜杠的问题解决方案
2012-06-01 15:22 3067text_keyword_tags = text_keyw ... -
struts+json所含的jar包全集
2012-05-30 14:03 1361Directory of E:\Happy\Deskto ... -
Java新建线程异步调用示例
2012-05-17 11:07 1926new Thread(new Runnable() { ... -
Java替换字符串正则表达式和其3种方法
2012-05-17 11:05 3275public static void main(Strin ...
相关推荐
jQuery作为一个强大的JavaScript库,提供了一系列方法来简化DOM操作,其中“.index()”方法便是用于获取元素索引值的一种有效方式。 首先,我们要了解“.index()”方法的作用,它可以帮助我们获取jQuery对象集合中...
在JavaScript的DOM操作中,jQuery库提供了一系列便捷的方法来帮助开发者高效地操作DOM元素,其中`find`和`children`是两个常用的子元素查询方法。本文将详细解析这两个方法的使用,以及它们在实际开发中的应用场景。...
本文实例讲述了jQuery中Find选择器用法。分享给大家供大家参考,具体如下: find 可以查找指定节点下的节点,它是会递归查找的,即可以查找子节点的子节点 示例如下: function CalculatePrice() { var totalMoney...
### jQuery中find()方法用法实例 #### 知识点概述: jQuery是目前最流行的JavaScript库之一,它极大地简化了JavaScript编程。在jQuery中,`find()`是一个非常有用的方法,用于在匹配元素的后代中查找元素。它的...
- **The jQuery Wrapper:** When you use JQuery to select or create elements, you receive a wrapper object that contains all the matched DOM elements. This wrapper provides a consistent interface for ...
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
We start off with a quick glance through the basics of JQuery, followed by the explanation of JQuery selectors, filters, and DOM element manipulation. After this, you will learn how events and ...
Learning jQuery 3 - Fifth Edition by Adam Boduch English | 29 May 2017 | ASIN: B01N2RKEL3 | 448 Pages | AZW3 | 6.45 MB Create efficient and smart web applications with jQuery 3.0 using this step-by-...
jQuery(elements) jQuery(callback) jQuery 对象访问 each(callback) size() length selector context get() get(index) index(subject) 数据缓存 data(name , [value]) removeData(name) queue(name ,...
jquery jquery下载jquery下载jquery下载
使用函数时,它接受一个参数index,这个参数是当前元素在jQuery集合中的索引。在函数内部,你可以使用this关键字来引用当前的DOM元素。例如,如果你想要选择所有带有class="selected"的段落元素,你可以这样做: ``...
$jQuery.pushStack( elements, [name, arguments] ) arr.toArray( ) Interoperability $jQuery.noConflict( [extreme] ) ver. 04-02-2011 Attributes Attributes str.attr( name ) $.attr( name, val ), .attr( map ...
jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版
标题“jquery高亮图片框 jquery图片展示 jquery效果很好”所指的知识点主要围绕jQuery如何实现高亮图片框以及优雅地展示图片。下面将详细介绍这两个方面,并探讨jQuery库在实现这些功能时的优势。 首先,jQuery高亮...
jquery mobile index php
例如,`$("p").each(function(index, element) {...})`遍历所有段落元素。 3. AJAX:jQuery提供了一套强大的AJAX功能,如`$.ajax()`, `$.get()`, `$.post()`,简化了异步数据请求。例如,`$.get("data.json", ...
**jQuery 是一个高效、简洁且功能丰富的 JavaScript 库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单。在“jQuery例子大全 jQuery demo”这个压缩包中,包含了一系列的示例,旨在帮助用户快速...
而在jQuery中,`get(index)`与`eq(index)`类似,但它会返回DOM元素而不是jQuery对象。如果`index`是一个负数,`get`将从数组末尾开始计数。 `find`函数在jQuery中用于查找匹配给定选择器的后代元素。它接受一个CSS...