jQuery中get()方法用法实例


Posted in Javascript onDecember 27, 2014

本文实例讲述了jQuery中get()方法用法。分享给大家供大家参考。具体分析如下:

此方法可以返回匹配集合中所有DOM元素的数组或者一个指定索引的DOM元素。
索引值是从0开始的。

说明:从上面的定义可以看出,此方法可以将jQuery对象转换成DOM对象。

语法结构一:

$(selector).get()

没有参数的时候会取得所有匹配的DOM元素的数组。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<title>get()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $($(".zhuanqu").get()).css("color","green");

})

</script>

</head>

<body>

<div>

  <ul>

    <li>ASP专区</li>

    <li class="zhuanqu">jsp专区</li>

    <li>php专区</li>

    <li>ASP.NET专区</li>

  </ul>

  <ul>

    <li>DIV+CSS专区</li>

    <li class="zhuanqu">Jquery专区</li>

    <li class="zhuanqu">javascript专区</li>

    <li>html专区</li>

  </ul>

</div>

</body>

</html>

通过使用$(".zhuanqu").get(),可以取得类名为zhuanqu的li元素的数组。看了实例大家可能就问为什么外面还要套上$(),这是因为通过get()方法获得是DOM对象,需要转化成jQuery对象才能使用CSS()方法。

语法结构二:

$(selector).get(index)

带有参数,取得所有匹配的DOM元素数组中指定的一个匹配的元素。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<title>get()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $($(".zhuanqu").get(0)).css("color","green");

})

</script>

</head>

<body>

<div>

  <ul>

    <li>ASP专区</li>

    <li class="zhuanqu">jsp专区</li>

    <li>php专区</li>

    <li>ASP.NET专区</li>

  </ul>

  <ul>

    <li>DIV+CSS专区</li>

    <li class="zhuanqu">Jquery专区</li>

    <li class="zhuanqu">javascript专区</li>

    <li>html专区</li>

  </ul>

</div>

</body>

</html>

里面的参数是要获取的DOM对象数组中DOM对象的索引,索引是从零开始的。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
jQuery的context属性用法实例
Dec 27 #Javascript
jQuery对象的selector属性用法实例
Dec 27 #Javascript
jQuery对象的length属性用法实例
Dec 27 #Javascript
jQuery中size()方法用法实例
Dec 27 #Javascript
jQuery中each()方法用法实例
Dec 27 #Javascript
jQuery.holdReady()方法用法实例
Dec 27 #Javascript
jQuery中的jQuery()方法用法分析
Dec 27 #Javascript
You might like
php5数字型字符串加解密代码
2008/04/24 PHP
php 表单数据的获取代码
2009/03/10 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
Django实现跨域的2种方法
2019/07/31 Python
Django重设Admin密码过程解析
2020/02/10 Python
浅析python函数式编程
2020/09/26 Python
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
二手书店创业计划书
2014/01/16 职场文书
办公室主任先进事迹
2014/01/18 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
政协会议宣传标语
2014/10/09 职场文书
北京英文导游词
2015/02/12 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
《观察物体》教学反思
2016/02/17 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
Python语言内置数据类型
2022/02/24 Python