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 16 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 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 中的str_replace 函数总结
2007/04/27 PHP
php adodb连接不同数据库
2009/03/19 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
js charAt的使用示例
2014/02/18 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
深入理解Python中的内置常量
2017/05/20 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
新浪微博实习心得体会
2014/01/27 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
幼儿评语大全
2014/04/30 职场文书
军训口号
2014/06/13 职场文书
双拥工作宣传标语
2014/06/26 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
2015年重阳节主持词
2015/07/04 职场文书
升学宴学生致辞
2015/07/27 职场文书
国庆节主题班会
2015/08/15 职场文书