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 尚未实现错误解决办法
Nov 27 Javascript
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
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自定义错误日志
2015/02/13 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python中必要的名词解释
2019/11/20 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
兼职学生的自我评价
2013/11/24 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
房屋租赁协议书
2014/04/10 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS