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 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
jquery 表单进行客户端验证demo
Aug 24 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 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
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
php实现求相对时间函数
2015/06/15 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
JavaScript实现禁止后退的方法
2006/12/27 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
Python操作Jira库常用方法解析
2020/04/10 Python
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
自我评价个人范文
2013/12/16 职场文书
精彩广告词大全
2014/03/19 职场文书
机械机修工岗位职责
2014/08/03 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
介绍信模板
2015/01/31 职场文书
校运会宣传稿大全
2015/07/23 职场文书
编写python程序的90条建议
2021/04/14 Python
python脚本框架webpy模板赋值实现
2021/11/20 Python
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫