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 import css实例代码
Jul 18 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
详解原生JS回到顶部
Mar 25 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
详解JavaScript中分解数字的三种方法
Jan 05 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
xajax写的留言本
2006/11/25 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
linux下php上传文件注意事项
2016/06/11 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
基于python生成器封装的协程类
2019/03/20 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
python编写简单端口扫描器
2019/09/04 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
简单说说tomcat的配置
2013/05/28 面试题
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
文秘个人求职信范文
2014/04/22 职场文书
六一儿童节标语
2014/10/08 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
Django程序的优化技巧
2021/04/29 Python