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实现图片翻页效果
Dec 23 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
详解React 条件渲染
Jul 08 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
我的论坛源代码(五)
2006/10/09 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
JavaScript中this详解
2015/09/01 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
大学生优秀团员事迹材料
2014/01/30 职场文书
小学生获奖感言范文
2014/02/02 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
英语感谢信范文
2015/01/20 职场文书
嘉宾邀请函
2015/01/31 职场文书
给学校的建议书400字
2015/09/14 职场文书
2016父亲节感恩话语
2015/12/09 职场文书