• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery 第二课 操作包装集元素代码

jQuery 第二课 操作包装集元素代码

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jQuery,包装集元素等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
例如:

image

下面介绍对包装集操作的函数。

1. html(),html(text). 第一个函数返回包装集第一个元素内部的html,第二个函数将包装集中的所有元素的内部html设置为text。

2.size()。返回包装集包含的元素。

3.get(),get(n)。第一个函数将包装集合内的HTML元素以javascript数组的形式返回,第二个元素返回第n个HTML元素。

4.index(elem). 返回传入的HTML元素elem在包装集中的位置。如果不在包装集中,则返回-1。

5.add(s),add(elem),add(array). add函数用于向包装集中添加元素。如果是选择器,则添加所有被选中的元素,如果是HTML片段,则根据此片段创建HTML元素并添加此元素;如果是HTML元素或者HTML元素的数组,则直接添加。

6. not(expression),filter(expression). 这两个函数是用来筛选包装集的元素的。expression可以是一个字符串(选择符),或者是html元素或者元素数组。not函数除去符合选择符的元素或者包含在数组中的元素。filter则相反,留下符合选择符的元素或者包含在数组中的元素。

7.slice(begin,end) 这个函数返回的是一个新建的包装集,内容是原包装集从第begin到第end个元素。end省略则表示最大长度。

先来看几个例子。

第一行演示了html和size的用法。按上面的介绍,两个span中的内容都应该会变成5. 第二行演示了not和add的一个用法。最终后四个li和第一个p会变成红色。第三行演示了get的用法,一旦调用get之后,返回值就不是包装元素而是HTML元素,因此可以使用HTML DOM提供的方法设置innerHTML。最后一行还是演示html()的用法,要注意html()返回的是第一个元素的内部内容,但是html(text)会把所有元素的内容都设置成text。 最终的结果如下:

image

9. 这是一大类非常有用的函数,可以根据位置关系筛选元素。

children() 返回包装集内元素的子元素(儿子元素,往下多层的不算)
contents() 返回包装集的内容的包装集,可能有文本节点(这个包装集有些特殊,下面介绍)
next() 包装集元素中不重复的下一个元素。
nextAll() 包装集元素中所有的下一个元素。
parent() 包装集中元素不重复的父元素的包装集
parents() 同上,但是一直向上追溯到文档根元素(不包括根元素)
prev() 类似next(),所有不重复的前一个元素
prevAll() 类型nextAll(),所有前一个元素
siblings() 包装集中所有不重复的兄弟元素。

先看前两个函数的区别,HTML代码还是用上一个例子的,js脚本如下:

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16利用jquery操作select下拉列表框的代码
  • 2017-08-16浅谈jquery中的each方法$.each、this.each、$.fn.each
  • 2017-08-16Jquery和Js获得元素标签名称的方法总结
  • 2017-08-16JQuery Ajax WebService传递参数的简单实例
  • 2017-08-16jquery实现弹出层完美居中效果
  • 2017-08-16jquery的总体架构分析及实现示例详解
  • 2017-08-16Jquery实现图片放大镜效果的思路及代码(自写)
  • 2017-08-16再分享70+免费的jquery 图片滑块效果插件和教程
  • 2017-08-16javascript右下角弹层及自动隐藏(自己编写)
  • 2017-08-16jQuery实现进度条效果代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
    • jQuery.ajax 跨域请求webapi设置headers的解决方案
    • jquery使用jxl插件导出excel示例
    • jQuery插件实现适用于移动端的地址选择器
    • jQuery ajax serialize()方法的使用以及常见问题解决
    • jQuery实现仿腾讯视频列表分页效果的方法
    • jquery数组之存放checkbox全选值示例代码
    • form表单转成json个数数据
    • 使用jQuery实现鼠标点击左右按钮滑动切换
    • jQuery ajax全局函数处理session过期后的ajax跳转问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有