`
hwb198229
  • 浏览: 13979 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery学习笔记 第二天

阅读更多
jQuery对象访问:
1 each(calllback) 以每一个匹配的元素作为上下文来执行一个函数。
    --callback   对于每个匹配的元素所要执行的函数
    eg:迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非jQuery对象。

      HTML 代码:
     <img/><img/>jQuery 代码:
     $("img").each(function(i){
     this.src = "test" + i + ".jpg";
     });
    结果:
    [ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
    如果你想得到 jQuery对象,可以使用 $(this) 函数。
2 size()返回jQuery对象中元素的个数
   eg:
   计算文档中所有图片数量
   HTML 代码:
   <img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代码:
   $("img").size();
   结果:
   2
3 同size()
  eg: $("img").length;
4 selector
  返回传给jQuery()的原始选择器
   eg:确定查询的选择器
   jQuery 代码:
  $("ul")
    .append("<li>" + $("ul").selector + "</li>")
    .append("<li>" + $("ul li").selector + "</li>")
    .append("<li>" + $("div#foo ul:not([class])").selector+"</li>");  结果:
   ul
   ul li
   div#foo ul:not([class])

5 context
  返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没指定,那么context指向当前的文档(document)。
   eg:
   检测使用的文档内容
    jQuery 代码:
   $("ul")
     .append("<li>" + $("ul").context + "</li>")
     .append("<li>" + $("ul", document.body).context.nodeName + "</li>");
    结果:
    [object HTMLDocument]  //如果是IE浏览器,则返回[object]
    BODY

6 get()取得所有匹配的DOM元素集合
   eg:
   选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。

   HTML 代码:
   <img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代码:
   $("img").get().reverse();结果:
   [ <img src="test2.jpg"/> <img src="test1.jpg"/> ]

7 get(index)取得其中一个匹配的元素。index表示去得第几个匹配的元素
   eg:取得第 index 个位置上的元素
   HTML 代码:
  <img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代码:
  $("img").get(0);
  结果:
  [ <img src="test1.jpg"/> ]

8 index(subject)
  搜索与参数表示的对象匹配的元素,并返回相应元素的索引值
  --subject 要搜索的对象
  eg:返回ID值为foobar的元素的索引值。
   HTML 代码:
   <div id="foobar"><div></div><div id="foo"></div></div>
  jQuery 代码:
   $("div").index($('#foobar')[0])  // 0
   $("div").index($('#foo')[0])  // 2
   $("div").index($('#foo'))  // -1
 
0
0
分享到:
评论

相关推荐

    jQuery学习笔记第二天的电梯导航案例代码

    本篇将详细探讨jQuery学习笔记中第二天涉及的电梯导航案例,该案例旨在实现一个网页上的楼层跳转功能,通过点击楼层链接,页面会平滑滚动到相应的位置,提升用户体验。 首先,我们要理解电梯导航的基本原理。在网页...

    jQuery笔记第二天的购物车案例代码

    在本篇jQuery笔记中,我们将深入探讨购物车案例的实现,这个案例主要涉及前端开发中的交互设计和数据管理。购物车是电商网站的核心功能之一,它涉及到商品的添加、删除、数量调整等操作,同时也需要实时更新总价。...

    jquery 学习笔记

    《jQuery学习笔记——15天快速入门指南》 jQuery,作为一个强大的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。它以其简洁的API和高效的性能,成为了前端开发者的首选工具之一...

    jquery 15天学习笔记 02 table表格 隔行变色的问题

    在本篇“jQuery 15天学习笔记”的第二部分中,我们将聚焦于如何处理HTML表格,特别是实现隔行变色的效果。隔行变色是一种常见的网页设计技巧,它能提高表格数据的可读性,使用户更容易区分和浏览数据行。 首先,...

    斑码教育大前端笔记-HTML第二天

    在“斑码教育大前端笔记-HTML第二天”的学习资源中,我们主要聚焦于HTML这一核心前端技术。HTML,全称为HyperText Markup Language,是构建网页的基础语言,它定义了网页的结构和内容。HTML5是其最新版本,带来了...

    ajax学习笔记代码

    **第二天:基本使用方法** 1. **创建XMLHttpRequest对象**:在JavaScript中,可以使用`new XMLHttpRequest()`来创建对象。 2. **设置请求参数**:`open(method, url, async)`,方法包括GET和POST,url是请求的地址...

    ajax-day01.rar_达内开发学习笔记

    在“ajax-day01.rar_达内开发学习笔记”这个压缩包中,包含了第一天学习Ajax的基础内容,旨在帮助初学者理解并掌握Ajax的核心概念和使用方法。** **一、Ajax简介** Ajax并不是一种单一的技术,而是一组技术的组合,...

    php笔记-欢迎增加

    本篇PHP笔记涵盖了从基础到进阶的知识点,适合初学者和有一定基础的开发者参考学习。主要内容包括简单的“Hello World”示例、网页内容抓取技巧、编码转换方法、缓存逻辑设计、数据解析方式、Ajax与PHP之间的交互、...

    EduSoho二次开发文档

    在进行EduSoho二次开发前,还需要学习相关的开源框架和类库的使用,例如前端开发文档中提到的jQuery、Sea.js、Arale、Bootstrap等。这些都是常用的前端技术栈,通过这些技术能够更好地控制页面的动态效果和样式。 ...

    CSS3深夜城市背景动画特效.zip

    它不仅可以直接应用,还支持二次修改,这意味着你可以根据自己的项目需求进行定制和调整,以适应不同网页的设计风格。 CSS3是层叠样式表的第三个版本,相较于之前的版本,它引入了许多新的功能和特性,如选择器、...

    Day12:这是我的第十二项任务!

    "Day12-master"可能是一个学习资源或项目文件,包含第十二天学习或开发的所有内容,可能包括笔记、代码示例、练习题或小型项目。这个压缩包可能涵盖JavaScript的某个特定主题,如异步编程、AJAX、Promise或Async/...

    CSS3夜光下的沙漠场景特效.zip

    此特效还可能结合了jQuery库,虽然主要依赖CSS3,但jQuery可以用于简化DOM操作,添加交互功能,如鼠标悬停时改变元素状态等。 在实际项目中,开发者可以依据自己的需求对这些代码进行二次修改,以适应不同的设计...

    傍晚山里大风车场景CSS3特效.zip

    在网页设计和开发中,CSS3(层叠样式表第三版)已经成为不可或缺的一部分,它带来了丰富的视觉效果和更高效的代码组织方式。这个“傍晚山里大风车场景CSS3特效”是一个实例,展示了如何利用CSS3来创建动态、富有情感...

    Week09-Day02

    在本周的第九周第二天的学习内容中,我们主要聚焦于JavaScript这一重要的编程语言。JavaScript,通常简称为JS,是网络开发中的基石,它被广泛应用于网页和应用的动态化与交互性增强。JavaScript允许开发者在用户的...

Global site tag (gtag.js) - Google Analytics