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 相关文章推荐
jquery 无限级联菜单案例分享
Mar 26 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
node.js中的require使用详解
Dec 15 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 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
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
python使用电子邮件模块smtplib的方法
2016/08/28 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
python更改已存在excel文件的方法
2018/05/03 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
python如何查看网页代码
2020/06/07 Python
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
C#基础面试题
2016/10/17 面试题
上班睡觉检讨书
2014/01/09 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
个人函授自我鉴定
2014/03/25 职场文书
综合测评自我评价
2015/03/06 职场文书
2015年售票员工作总结
2015/04/29 职场文书
《司马光》教学反思
2016/02/22 职场文书