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);

/*
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');