jQuery 实战读书笔记之第三章:操作 jQuery 集合
创建新 HTML 元素
$('<div>Hello</div>'); /*
创建等价的空 div 元素
*/
$('<div>');
$('<div />');
$('<div></div>'); /*
创建带属性的 图片元素
*/
$('<img>',
{
src: '../images/little.bear.png',
alt: 'Little Bear',
title: 'I woof in your general direction',
click: function(){
alert($(this).attr('title'));
}
}).appendTo('body');
管理 jQuery 集合
/*
jQuery 允许把 jQuery 集合当做 JavaScript 数组进行处理,所以可以用简单的数组索引来读取集合中的元素。
*/
var $imgAlt = $('img[alt]');
console.log('数组长度为:' + $imgAlt.length);
var firstImgAlt = $('img[alt]')[0]; //获取到的是一个原始的 DOM 元素
console.log('返回第一个元素:');
console.log(firstImgAlt); /*
使用 get([index]) 方法
*/
var imageElement = $('img[alt]').get(0); //和上面的用索引读取的代码效用一致
/*
使用负数做索引,就会从集合尾部开始计算。-1 查找倒数第一个元素
*/
var lastImageElement = $('img[alt]').get(-1);
console.log('返回最后一个元素:');
console.log(lastImageElement);
/*
没有索引参数,那么返回的就是 JavaScript 数组
*/
var imageArray = $('img[alt]').get();
console.log(imageArray); /*
想获得一个包含特定元素的 jQuery 对象,而不是原始对象
*/
console.log('获取同一个特定元素(作为 jQuery 对象而不是原始对象)的三种写法的结果:');
var $obj1 = $($('img[alt]').get(2));
console.log($obj1 instanceof jQuery); //判断是否为 jQuery 对象
console.log($obj1);
var $obj2 = $('img[alt]:eq(2)');
console.log($obj2);
var $obj3 = $('img[alt]').eq(2); //推荐使用这种方法,使用 eq() 方法的性能比使用 :eq 筛选器的性能高,返回包含一个或多个元素的 jQuery 集合
console.log($obj3); /*
first() 函数,对比 :first 筛选器
*/
var $firstObj = $('img[alt]').first();
console.log('first() 函数:');
console.log($firstObj); /*
last() 函数,对比 :last 筛选器
*/
var $lastObj = $('img[alt]').last();
console.log('last() 函数:');
console.log($lastObj); /*
作为数组返回 DOM 元素的集合
*/
var allPUL = $('p + ul').toArray(); //返回 ul 标签,且 ul 标签紧邻的兄弟节点为 p 标签
console.log('toArray 返回 DOM 元素数组集合:')
console.log(allPUL); /*
index() 函数,获取索引,索引从 0 开始
*/
var index = $('.levels > li').index($('#li2'));
console.log('#li2 的索引是(以对应的 jQuery 对象作为参数): ' + index);
index = $('.levels > li').index(document.getElementById('li2'));
console.log('#li2 的索引是(以对应的 JavaScript 对象作为参数): ' + index);
index = $('.levels > li').index('#li2');
console.log('#li2 的索引是(以对应的 selector 作为参数): ' + index); //结果为 -1,传 selector 字符串作为参数不可以吗??? index = $('#li3').index();
console.log('无参 index() 方法返回的 #li3 的 index:' + index); index = $('.levels > li[data-level=4]').index();
console.log('无参 index() 方法返回的.leves > li[data-level=4] 的 index:' + index); /*
使用关系获取集合
*/
/*
返回集合中所有元素的祖先,既包含直接父节点也包含更高层的祖先节点,但是不包含文档根节点(document),但选中的祖先节点只会出现一次
*/
var $parents = $('#hibiscus').parents();
console.log('id为 #hibiscus 的所有祖先节点:');
console.log($parents); /*
通过 parents(selector) 对返回的祖先节点进行筛选
*/
$parents = $('#hibiscus').parents('div');
console.log('id为 #hibiscus 的所有祖先节点且节点标签为 div:');
console.log($parents); /*
返回集合中所有元素的直接父节点元素,重复的父节点元素只返回一次
*/
var $parent = $('img, li').parent();
console.log('"img, li" 的父元素:');
console.log($parent); /*
返回集合中所有元素的子元素,参数 selector 可以用于筛选
返回的是直接子元素
*/
var $bodyChildren = $('body').children();
console.log('body 的所有子元素,不包括文本节点:')
console.log($bodyChildren); /*
children() 方法不返回文本节点,要处理文本节点使用 contents() 方法,参数 selector 可以用于筛选
*/
var $bodyContent = $('body').contents();
console.log('body 的所有子元素,包括文本节点:')
console.log($bodyContent); /*
搜索遍历集合中的所有元素的子节点(深度优先算法)
*/
var $set = $('#sample-dom').find('[title]');
console.log('find() 方法深度优先搜索:');
console.log($set); /*
返回集合中的直接兄弟节点
如果是最后一个节点,那么返回的集合长度为0
*/
var $nextImg = $('#hibiscus').next();
console.log('next() 方法返回集合中的直接兄弟节点:');
console.log($nextImg); var $nextAllImg = $('#hibiscus').nextAll();
console.log('nextAll() 方法返回集合中的所有兄弟节点:');
console.log($nextAllImg); /*
返回集合中的前直接兄弟节点
如果是第一个节点,那么返回的集合长度为0
*/
var $prevImg = $('#cozmo').prev();
console.log('prev() 方法返回集合中的前直接兄弟节点:');
console.log($prevImg); /*
返回的集合可以注意下顺序,是从下往上
*/
var $prevAllImg = $('#cozmo').prevAll();
console.log('prevAll() 方法返回集合中的前所有兄弟节点:');
console.log($prevAllImg); /*
返回集合中元素的兄弟节点
*/
var $siblings = $('#cozmo').siblings();
console.log($siblings); /*
集合中添加新元素
add(selector[, context]): selector 参数可以是包含选择器的字符串、HTML 片段、DOM 元素、DOM 元素数组或者 jQuery 对象
*/
$('img[alt]').addClass('red-border').add('img[title]').addClass('opaque'); /*
删除集合元素
使用 not() 方法链式调用选择器来剔除某些元素
not(selector):创建不包含选择器 selecotr 参数匹配元素的新集合,注意这里是把符合条件的筛选去掉了
*/
var $not = $('img[title]').not('[title*="puppy"]'); //等同的单个选择器 img[title]:not([title*='puppy'])
console.log('not 方法:');
console.log($not); /*
not() 方法中传入函数,用于复杂的或者无法用单个选择器表达式描述的情况
符合函数条件的会被筛选掉
*/
var $notWithFunction = $('div').not(function(index){
return $(this).children().length > 2 && index % 2 === 0;
});
console.log('not() 方法中传入函数:');
console.log($notWithFunction); /*
filter(selector) 方法和 not(selector) 方法相反,符合条件的会被筛选出来
*/
var $filtered = $('td').filter(function(){
return this.innerHTML.match(/^\d+$/);
});
console.log('filter() 方法返回只包含纯数字的 td :');
console.log($filtered);
jQuery 实战读书笔记之第三章:操作 jQuery 集合的更多相关文章
- jQuery 实战读书笔记之第六章:事件本质
理解浏览器事件模型 understandEventModel.html 代码: <!DOCTYPE HTML> <html> <head> <title> ...
- jQuery 实战读书笔记之第五章:使用 jQuery 操作页面
html 如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...
- jQuery 实战读书笔记之第四章:使用特性、属性和数据
使用属性 /* 每个元素都有一或多个特性,,这些特性的用途是给出相应元素或其内容的附加信息.(出自 JavaScript 高级程序设计) */ /* 特性是固有的 JavaScript 对象 属性指的 ...
- 《Android群英传》读书笔记 (2) 第三章 控件架构与自定义控件详解 + 第四章 ListView使用技巧 + 第五章 Scroll分析
第三章 Android控件架构与自定义控件详解 1.Android控件架构下图是UI界面架构图,每个Activity都有一个Window对象,通常是由PhoneWindow类来实现的.PhoneWin ...
- 《深入理解Java虚拟机》读书笔记(第三章)
垃圾收集器与内存分配策略(第三章) 前言,众所周知,Java是由c++进化而来,c++在内存需自己申请,自己释放,于是就有了Java的动态内存分配.书的第三章开篇,有这样一句话描述的很妙——Java与 ...
- Linux内核分析 读书笔记 (第三章)
第三章 进程管理 3.1 进程 1.进程: 进程就是处于执行期的程序. 进程就是正在执行的程序代码的实时结果. 进程是处于执行期的程序以及相关的资源的总称. 进程包括代码段和其他资源. 2.线程:执行 ...
- 《深入理解java虚拟机》读书笔记二——第三章
第三章 垃圾收集器与内存分配策略 1.判断对象是否已死 引用计数法: 给对象添加一个引用计数器,每当有一个地方引用它时,计数器值就加1,每当引用失效时,计数器值就减1. 任何时刻计数器为0的对象就是不 ...
- jQuery 实战读书笔记之第二章:选择元素
基本选择器 html 代码如下,后面的 js 使用的 html 基本大同小异. <!doctype html> <html> <head> <title> ...
- 《深入理解bootstrap》读书笔记:第三章 CSS布局
一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...
随机推荐
- Less的安装与配置
Less的安装与配置 Less与Sass 先说一段题外话,很多初学者在选择CSS 预处理语言不免会感到犹豫,作为CSS 的两大预处理语言Less与Sass,各自都有着很广泛的使用群体,我究竟该选哪个好 ...
- unity quaternion vector
做脚印呢 做了曲面细分和decal两种 先用正交camera生成 高度图 采样uv由pos 从world到camera space生成 unity对tessellation的支持限制还是比较大的 只能 ...
- Android EditText 状态切换
不可编辑状态 <EditText android:id="@+id/ed_newPwd" an ...
- 解决SSH窗口关闭,linux上的应用也关闭
最近在应用linux上的服务的时候发现一个问题 使用SSH远程连接启动的应用在SSH关闭的时候也死掉了,网上查了一下原因 大致是说SSH在关闭的时候会发送一个终止的指令给应用,然后就停了 简要的解决办 ...
- g++ 静态库连接顺序的巨坑
在编译最新版本(12.04)的alljoyn的chat示例的时候,想使用bundle daemon,依照在以前的经验修改文件:alljoyn-14.02.00-src/build/linux/x86_ ...
- kvm 虚拟化 SMP(对称多处理器)介绍及配置
一.SMP(对称多处理器)介绍 1)SMP简介 在计算机技术很普及和日益发达的今天,以 Intel.IBM 为代表的一些大公司推动着中央处理器(CPU)技术的飞速发展和更新换代.在如今计算机系统中,多 ...
- margin外边距问题
1 .上下边距会叠加 !DOCTYPE html> <html> <head> <m<etacharset="UTF-8"> < ...
- OpenERP ODOO 千分位设置
转自 :http://www.chinamaker.net/ OpenERP (ODOO)千分位设置在: 设置 > 翻译>语言 1)不同语言可以设置不同的千分位 2)格式选择: Separ ...
- 【DB2】DbVisualizer编译存储过程
之前我一直以为DbVisualizer是不可以编译存储过程的,现在才发现是可以的,编译如下: 只需要在编译的时候注意使用--/与/将存储过程包为起来编辑即可.
- Drupal启动阶段之四:系统变量
Drupal的系统变量是指保存在后台数据库variable表中的一些参数设置,透过variable_get()和variable_set()存取: 先看一看_drupal_bootstrap_vari ...