jQuery in action 3rd - Operating on a jQuery collection

1、创建新 DOM 元素

  $(‘<div>Hello</div>‘);

  $(‘<img>‘, {
    src: ‘images/little.bear.png‘,
    alt: ‘Little Bear‘,
    title: ‘I woof in yor general direction‘,
    click: function() {
      alert($(this).attr(‘title‘));
    }

  }).appendTo(‘body‘);

2、操作 jQuery collection 对象的方法

  get([index])

    

    示例:$(‘img[alt]‘).get(0)

  eq(index)

    

    示例:$(‘img[alt]‘).eq(2)

  first()

    

    示例:$(‘img[alt]‘).first()

  last()

    

    示例:$(‘img[alt]‘).last()

  toArray()

    

    示例:$(‘img[alt]‘).toArray()

  index()

    

    示例:$(#main-menu > li‘).index($(‘#blog-link‘));

  父子、祖先、子孙关系函数

    

  add() 

    

  not()

    

    示例,
    $(‘div‘).not(function(index) {

      // 注意,此处的 this 是一个 DOMElement 对象,而不是 jQuery 对象
      return $(this).children().length > 2;
    });

  filter()

    

    示例,

    $(‘td‘).filter(function() {

      // 注意,此处的 this 是一个 DOMElement 对象,而不是 jQuery 对象
      return this.innerHTML.match(/^\d+$/);
    });

    $(‘img‘).filter(‘[title*="dog"]‘).addClass(‘red-border‘);

  slice()

    

  has()

    

  map()

    

    示例,

    $(‘div‘).map(function() {

      // 注意,此处的 this 是一个 DOMElement 对象,而不是 jQuery 对象
      return this.id;
    });

  each()

    

    示例,

    $(‘img‘).each(function(index) {

      // 注意,此处的 this 是一个 DOMElement 对象,而不是 jQuery 对象
      return this.id;
    });

  is()

    

  end()

    

  addBack()

    

时间: 2024-07-30 17:52:47

jQuery in action 3rd - Operating on a jQuery collection的相关文章

jQuery in action 3rd - Introducing jQuery

2014 年 10 月, jQuery Foundation 的总裁 Dave Methvin 发布了一篇博客(http://blog.jquery.com/2014/10/29/jquery-3-0-the-next-generations/), 宣布了 jQuery 下一个重要版本的计划:jQuery 3. version 1.x 支持老的浏览器 version 2.x 支持现代的新浏览器 jQuery 3 分为两个版本,jQuery Compat 3 是 1.x 的延续版本,jQuery

jQuery in action 3rd - Selecting elements

jQuery(selector) / $(selector) selector 选择器有多种形式,下面是 #ID,.class,element jQuery 支持的 CSS 层级关系选择器 jQuery 支持的 CSS 属性选择器  jQuery 的过滤器 filter 过滤器的写法以冒号 “:filter” 开头,用于过滤 $() 返回对象中的数据,以达到精确查找的目的. 1)位置过滤器 注意,n(索引号) 从 0 开始,与 CSS 中(索引号从 1 开始)的功能不一致. 比如 “:even”

锋利jQuery 学习整理之 第六章 jQuery 与Ajax 的应用

1.Ajax 的XMLHttpRequest 对象 XMLHttpRequest 是Ajax 的核心,它是Ajax 实现的关键---发送异步请求.接受响应及执行回调都是通过它来完成的.XMLHttpRequest最早是在Microsoft Internet Explorer  5.0  ActiveX 组件中被引用的. 2.JQuery 中的Ajax jQuery 对Ajax 进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第二层是load().$.load()和$.post(

jQuery Tools:Web开发必备的 jQuery UI 库

基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡).Tooltip(信息提示).Overlay(遮罩.弹窗).Scrollable(滚动控制).Form Validator(表单验证).Rangeinput(范围选择).Dateinput(日期选择)等众多功能.jQuery Tools 提供了高自定义的API接口,能够帮助开发者非常容易的实现所需要的功能,带给用户更佳的使用体验. 相比 jQuery UI,jQuery Tools 提供

第一百七十七节,jQuery,知问前端--概述及 jQuery UI

jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一.项目介绍 我们重点仿照"知乎"的架构模式来搭建界面和布局,以及大部分前端功能.而"百度 知道"作为辅助功能来确定我们这个项目需要的前端功能. 从以上知名问答站点中,我们可以确认最主要的前端功能:1.弹出对话框:2.前端按钮: 3.折叠菜单:4.选项卡切换:5.滑动块:6.日历:7.自动补全:8 拖放:等一系列前端模块. 二.jQuery UI

jquery源码学习(三)—— jquery.prototype主要属性和方法

上次我们学习了jquery中的主要对象jQuery和一些变量,现在我们开始学习jquery的原型 98行声明了jQuery.fn = jQuery.prototype = {} 285行jQuery.fn.init.prototype = jQuery.fn; 这个对象中定义的的就是jquery的主要方法 98 - 285 行完成了这些任务. 主要定义了如下的变量 1 jQuery.fn = jQuery.prototype = { 2 jquery : core_version, 3 cons

jQuery基础教程-第8章-002Adding jQuery object methods

一.Object method context 1.We have seen that adding global functions requires extending the jQuery object with new methods. Adding instance methods is similar, but we instead extend the jQuery.fn object(The jQuery.fn object is an alias to jQuery.proto

jQuery插件开发精品教程(让你的jQuery更上一个台阶)

刘哇勇的部落格要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发

jQuery Mobile的默认配置项详解,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

学习jQuery Mobile也有一段时间了,越来越上手了,也越来越喜欢他了.我根本就没有理由拒绝他的好.这里我有分享一下我对它的配置项的使用说明一下. 看代码解释: $(document).live("pageinit",function(event){ $.mobile.loadingMessage = "正在加载数据,请稍候......"; $.mobile.pageLoadErrorMessage="很抱歉,系统好像再打小瞌睡......"