027_jQuery DOM 元素方法

1. get()方法

1.1. 语法

$(selector).get(index)

1.2. 参数

1.3. jQuery中的get()函数是取得当前页面中所有匹配的DOM元素集合。这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象, 而实际上是元素数组)。如果你想要直接操作DOM 对象而不是jQuery对象, 这个函数非常有用。

1.4. 其实get()还有一个用处是可以直接通过下标值访问其下标值对应的dom对象, 还记得get()返回的是一个array<element>吧, 已经是一个array对象了, 然可以像操作数组一样以下标去取值了。

1.5. get()方法的返回值: Array<Element>, 一个DOM数组。

1.6. get(index)方法的返回值: 数组元素。

2. index()方法

2.1. index()方法获得第一个匹配元素相对于其同胞元素的index位置。

2.2. 语法

$(selector).index()

2.3. 获得元素相对于选择器的index位置。该元素可以通过DOM元素或jQuery选择器来指定。

2.4. 语法

$(selector).index(element)

2.5. 参数

3. size()方法

3.1. size()方法返回被jQuery选择器匹配的元素的数量。

3.2. 语法

$(selector).size()

4. toArray()方法

4.1. toArray()方法以数组的形式返回jQuery选择器匹配的元素。

4.2. 语法

$(selector).toArray()

5. 例子

5.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>jQuery DOM 元素方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){  var arr = $('li').get();var item2 = $('li').get(1);var se = $('ul').size();var ul = $('ul');var ulArr = ul.toArray();$('li').click(function(){$(this).css({"background-color": "red"});});});</script></head><body> 列表1:<ul id="first"><li>list1 item 1</li><li>list1 item 2</li><li>list1 item 3</li></ul>列表2:<ul id="second"><li>list2 item 1</li><li>list2 item 2</li><li>list2 item 3</li></ul></body>
</html>

5.2. 效果图

027_jQuery DOM 元素方法相关推荐

jQuery常用的查找Dom元素方法
jQuery常用的查找Dom元素方法废话不多说,先来个总结,然后下面是demo 一. 同级节点之间的检索(检索深度N=0) next()是在兄弟节点中,往后匹配; prev()是在兄弟节点中,往前匹 ...
获取DOM元素方法小结
在开发中不可避免的需要操作DOM,现在就来总结一下原生的获取DOM的API. getElementById() 该方法是最常用的通过元素的id属性来获取DOM元素的API,返回一个DOM元素. < ...
jq添加或删除html元素,jQuery添加删除DOM元素方法详解
本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM ...
JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问 ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
js中Dom元素及获取方法
DOM基础对象 document document.documentElement html部分 document.head document.title document.body body部分 ...
JS获取DOM元素的八种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
22.调用element方法控制dom元素
<!DOCTYPE html><html ng-app="a101"><head lang="en"> <meta c ...
JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性...
带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点获取所以子节点 a) . childNodes b) . children ...

027_jQuery DOM 元素方法

027_jQuery DOM 元素方法相关推荐

最新文章

热门文章