创建新 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);
/*
slice(start[, end])
start:首元素位置为0
end:返回元素的最后位置,如果为负数,则表示偏移从末尾开始
*/
var $slice = $('*').slice(0, 4);
console.log('slice() 方法获取前4个元素:');
console.log($slice);
/*
has(selector)
测试所有 jQuery 集合中的子元素,返回只包含匹配 selector 选择器的子元素的新集合
*/
var $has = $('div').has('img[alt]');
console.log('has() 方法返回匹配 selector 选择器的子元素的新集合:');
console.log($has);
/*
map(callback)
需要转换集合的元素,根据一个集合计算出另一个集合
在集合中的每个元素上调用 callback 函数,然后返回值到一个 jQuery 对象中
函数传递两个参数,第一个是集合中元素的索引,第二个是元素本身,元素本身作为函数的上下文(this)
*/
var $allIds = $('div').map(function(){
return this.id;
});
console.log('map() 方法得到元素的 id 的集合:');
console.log($allIds);
/*
each(iterator)
遍历集合中的所有元素,为每个元素调用 iterator 函数
函数传递两个参数,第一个是集合中元素的索引,第二个是元素本身,元素本身作为函数的上下文(this)
返回的集合是原来的 jQuery 集合
*/
var $imgAlts = $('img').each(function(i){
this.alt = 'This is image[' + i + '] with an id of ' + this.id;
});
console.log('each() 方法修改 img 元素的 alt:');
console.log($imgAlts);
/*
is(selector)
确定集合中是否有元素匹配给定的选择器
有匹配的返回 true,没有返回 false
*/
var hasImage = $('*').is('img');
console.log('is() 方法判断全文元素中是否包含 img 元素:');
console.log(hasImage);
/*
end()
在 jQuery 链式调用中使用该方法,在当前调用链中结束最近的过滤操作,然后返回匹配元素的集合到之前的状态
jQuery 对象维护了一个内部栈来保存针对匹配元素集合的修改
*/
$('img').filter('[title]').hide().end().addClass('my-class');
/*
addBack([selector])
把栈上前一个元素集合的元素添加到当前集合里
*/
$('div').addClass('my-class').find('img').addClass('red-border').addBack().addClass('opaque');
 

jQuery 实战读书笔记之第三章:操作 jQuery 集合的更多相关文章

  1. jQuery 实战读书笔记之第六章:事件本质

    理解浏览器事件模型 understandEventModel.html 代码: <!DOCTYPE HTML> <html> <head> <title> ...

  2. jQuery 实战读书笔记之第五章:使用 jQuery 操作页面

    html 如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...

  3. jQuery 实战读书笔记之第四章:使用特性、属性和数据

    使用属性 /* 每个元素都有一或多个特性,,这些特性的用途是给出相应元素或其内容的附加信息.(出自 JavaScript 高级程序设计) */ /* 特性是固有的 JavaScript 对象 属性指的 ...

  4. 《Android群英传》读书笔记 (2) 第三章 控件架构与自定义控件详解 + 第四章 ListView使用技巧 + 第五章 Scroll分析

    第三章 Android控件架构与自定义控件详解 1.Android控件架构下图是UI界面架构图,每个Activity都有一个Window对象,通常是由PhoneWindow类来实现的.PhoneWin ...

  5. 《深入理解Java虚拟机》读书笔记(第三章)

    垃圾收集器与内存分配策略(第三章) 前言,众所周知,Java是由c++进化而来,c++在内存需自己申请,自己释放,于是就有了Java的动态内存分配.书的第三章开篇,有这样一句话描述的很妙——Java与 ...

  6. Linux内核分析 读书笔记 (第三章)

    第三章 进程管理 3.1 进程 1.进程: 进程就是处于执行期的程序. 进程就是正在执行的程序代码的实时结果. 进程是处于执行期的程序以及相关的资源的总称. 进程包括代码段和其他资源. 2.线程:执行 ...

  7. 《深入理解java虚拟机》读书笔记二——第三章

    第三章 垃圾收集器与内存分配策略 1.判断对象是否已死 引用计数法: 给对象添加一个引用计数器,每当有一个地方引用它时,计数器值就加1,每当引用失效时,计数器值就减1. 任何时刻计数器为0的对象就是不 ...

  8. jQuery 实战读书笔记之第二章:选择元素

    基本选择器 html 代码如下,后面的 js 使用的 html 基本大同小异. <!doctype html> <html> <head> <title> ...

  9. 《深入理解bootstrap》读书笔记:第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

随机推荐

  1. What is required for a successful backup of all files during hoi backup?

    There is a typo in the body of this question. It should be "Hot" instead of "hoi" ...

  2. 你以为border-radius只是圆角吗?【各种角度】

    border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情. radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可 ...

  3. Linux系统443端口被占用无法启动解决办法

    etstat -ano|findstr "443"         //搜索443端口占用情况,并找到进程IDTCP 0.0.0.0:443 0.0.0.0:0 LISTENING ...

  4. linux grep的选项

    grep  -i          关闭大写和小写敏感性 grep      -v    打印全部不包括. . 的行(屏蔽某些条目) grep     -l     打印包括模式的文件名称 grep  ...

  5. JOptionPane的经常使用4种对话框

    JOptionPane类有4个用于显示对话框的静态方法: 消息.选项.确认,输入对话框 showMessageDialog://显示一条消息并等待用户OK showConfirmDialog://显示 ...

  6. 1年内4次架构调整,谈Nice的服务端架构变迁之路

    Nice 本身是一款照片分享社区类型的应用,在分享照片和生活态度的同时可以在照片上贴上如品牌.地点.兴趣等tag. Nice从2013.10月份上线App Store到目前每天2亿PV,服务端架构经过 ...

  7. 禁止 git 自动转换换行符

    开发团队都在 windows 下开发,有IDE管理代码.对我们来说,最好是禁用换行转换符的功能.我用 cygwin 提交代码,提交时总提示自动转换换符.其实都不用提交,仅运行 git status 看 ...

  8. PKCS7 的 attached 和 detached 方式的数字签名

    搜遍了整个网络,都没有详细的说明.只在一个页面上有介绍,还模棱两可的,地址是:http://docs.oracle.com/cd/E19398-01/820-1228/gfnmj/index.html ...

  9. javascript Array(数组)

      迁移时间:2017年5月25日08:05:33 UpdateTime--2017年3月31日16:29:08 一.数组(Array) (一)用法 //js声明数组的两大类方式 // 第一类(通常使 ...

  10. Java环境变量设置辅助工具

    安装完JDK之后,很容易忘了设置系统的环境变.最近发现一个设置JDK的小工具,非常简单,推荐给大家: 下载地址:http://files.cnblogs.com/eastson/JavaPathSet ...