jquery对象访问是什么及使用方法介绍


Posted in Javascript onMay 03, 2016

本篇是继上篇jQuery核心函数之后介绍如何访问jQuery对象。

jquery对象访问

each(callback)

jquery对象访问是什么及使用方法介绍

size()

jquery对象访问是什么及使用方法介绍

length

jquery对象访问是什么及使用方法介绍

selector

jquery对象访问是什么及使用方法介绍

context

jquery对象访问是什么及使用方法介绍

get()

jquery对象访问是什么及使用方法介绍

get(index)

jquery对象访问是什么及使用方法介绍

index([subject])

jquery对象访问是什么及使用方法介绍

测试用例

以下是通过代码的方式测试上述jQuery对象访问,供不明白的朋友们参考:

<!DOCTYPE html>
<html>
<head>
  <title>jquery对象访问</title>
  <script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<!--
  jquery对象访问之一each(callback)
-->
<div>
  <span>span1</span>
  <span>span2</span>
  <span>span3</span>
  <span>span4</span>
  <span>span5</span>
</div>
<script type="text/javascript">
  var spanList = $("div span");
  spanList.each(function(){
    // alert(this.innerHTML);  //这个获取的是span元素而不是jQuery对象,这点需要注意。依次输出span1 ... span5
    // alert($(this).html()); //输出结果同上 只是$(this)会将元素转为jQuery对象
    if($(this).html() == "span4")
      return false;      //可以提前使用return 退出循环
  });
</script>
<!--
  jquery对象访问之二size()
-->
<script type="text/javascript">
  // alert($("div span").size());  //输出结果5 size()函数是获取jQuery集合中元素的个数
</script>
<!--
  jquery对象访问之三length
-->
<script type="text/javascript">
  // alert($("div span").length);  //输出结果5 当前匹配的元素个数.同size 返回相同的值
</script>
<!--
  jquery对象访问之四selector
-->
<ul id="ul1"></ul>
<script type="text/javascript">
  $("#ul1")
   .append("<li>" + $("ul").selector + "</li>")
   .append("<li>" + $("ul li").selector + "</li>")
   .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
</script>
<!--
  jquery对象访问之五context
-->
<ul id="ul2"></ul>
<script type="text/javascript">
  $("#ul2")
   .append("<li>" + $("ul").context + "</li>")
   .append("<li>" + $("ul", document.body).context.nodeName + "</li>");
</script>
<!--
  jquery对象访问之六get()
-->
<div id="get">
  <span>get1</span>
  <span>get2</span>
  <span>get3</span>
  <span>get4</span>
</div>
<script type="text/javascript">
  var spans = $("#get span");
  var span1 = spans.get();
  // alert(span1);  // 返回的是span元素的集合
  // alert($(span1).html()); //输出结果get1 将节点元素包装成jQuery对象
</script>
<!--
  jquery对象访问之七get(index)
-->
<div id="get">
  <span>get1</span>
  <span>get2</span>
  <span>get3</span>
  <span>get4</span>
</div>
<script type="text/javascript">
  var spans = $("#get span");
  var span1 = spans.get(0);
  // alert(span1.innerText); //输出结果是get1 通过节点元素
  // alert($(span1).html()); //输出结果同上   将节点元素包装成jQuery对象
</script>
<!--
  jquery对象访问之八index([subject])
-->
<ul id="ul8">
 <li id="foo">foo</li>
 <li id="bar">bar</li>
 <li id="baz">baz</li>
</ul>
<script type="text/javascript">
  alert($('#ul8 li').index(document.getElementById('bar'))); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
  alert($('#ul8 li').index($('#bar'))); //1,传递一个jQuery对象
  alert($('#ul8 li').index($('#ul8 li:gt(0)'))); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
  alert($('#bar').index('#ul8 li'));   //1,传递一个选择器,返回#bar在所有li中的做引位置
  alert($('#bar').index()); //1,不传递参数,返回这个元素在同辈中的索引位置。
</script>
</body>
</html>

运行结果

jquery对象访问是什么及使用方法介绍

总结

本篇是介绍jQuery的对象访问模块。以前没有系统的学习jQuery,现在打算系统的学习下jQuery,顺便贴出供需要的朋友参考。如果哪里不对的地方,欢迎指正,谢谢大家的阅读!

Javascript 相关文章推荐
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
javascript实现倒计时效果
Feb 17 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 #Javascript
javascript的BOM
May 03 #Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 #Javascript
深入浅析Bootstrap列表组组件
May 03 #Javascript
前端jquery部分很精彩
May 03 #Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 #Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 #Javascript
You might like
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
使用python解析xml成对应的html示例分享
2014/04/02 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
股东协议书
2014/04/14 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
教师三严三实心得体会
2014/10/11 职场文书
社区党员干部承诺书
2015/05/04 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android