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 相关文章推荐
onpropertypchange
Jul 01 Javascript
用一段js程序来实现动画功能
Mar 06 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 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
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
Yii2单元测试用法示例
2016/11/12 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
Python函数式编程指南(四):生成器详解
2015/06/24 Python
改进Django中的表单的简单方法
2015/07/17 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
李培根演讲稿
2014/05/22 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
pytorch中的model=model.to(device)使用说明
2021/05/24 Python