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 风格的HTML文本转义
Jul 01 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
基于vue.js实现购物车
Jan 15 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 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
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
Python基础语言学习笔记总结(精华)
2017/11/14 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
上海微创软件面试题
2012/06/14 面试题
面向对象设计的原则是什么
2013/02/13 面试题
学生会竞选演讲稿学习部
2014/08/25 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
小学生手册家长意见
2015/06/03 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
python 如何用terminal输入参数
2021/05/25 Python