Jquery学习笔记(四)

      对于非class属性，Jquery提供了.attr()和.removeAttr()方法。甚至可以使用它们来分别代替相应的.class()方法--如果我们想给自己找点麻烦的话。

      Jquery的.each()方法类似一个迭代器，它实际上时for循环的一种更简洁的形式。当我们要为选择符匹配的元素集合应用复杂的代码，而是用隐式迭代语法无法胜任时，就可以使用each()方法。

$(document).ready(function(){
	$( 'div.chapter a' ).each(function(index){
	    var $thisLink = $(this);
	    $(this).attr({
		    'rel': 'external',
			'id': 'wikilink-' + index
			'title': 'learn more about' + $thisLink.text() + ' at Wikipedia'
		});
	});
});

 

 

插入元素

Jquery提供两种将元素插入到其他元素前面的方法: .insertBefore()和.before()，.insertAfter()和.after()

他们的区别在于如何将它们与其他方法进行连缀。

$(document).ready(function(){
	$('<a href="#top">back to top</a>').insertAfter('div.chapter p');
	$('<a id="top"></a>').prependTo('body');
});

 

通过.after()也可以完成，只是必须把选择符表达式放在这个方法的前边，而不是后边。

$('div.chapter p').after(' <a href="#top">back to top</a> ')

 

.append(*)用于对元素执行添加操作  .appendTo('**')用于将元素依次插入到**的后边

 

 

包装元素

JQuery中用于将元素包装在其他元素中的方法，被贴切地命名为.wrap()

.wrap('<li id="foot-note-' + (index+1) + '"></li>');

 

复制元素 .clone()  .clone(false) 只会复制段落元素，另外需要记住，.clone()不会复制事件。但是作者提到了可以使用Brandon Aaron的插件方法.cloneWithEvents()。

 

 

一些零碎的东西

&hellip 省略号

在使用了.find()之后有必要使用.end()来结束它

将需要多次使用的JQuery对象保存到变量中，这样可以减少对$()工厂的访问，以提高遍历DOM的效率。

.html()  .text()两者很相似，但是text会编码HTML，即将"<"或是">"替换为相应的HTML实体

.empty()  .remove()前者仅删除子节点，后者不会把匹配的元素从JQuery对象中删除，因而可以再将来再使用这些匹配的元素

 

这儿要加点东西，由于对.remove()的官方说明有点不理解，然后查到了这个东西，现在要稍微理解一点了。

 

JQuery中的remove方法的官方说明是：
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。

于是，问题出现了，元素从DOM对象中删除后，JQuery对象中还存在，应该是副本。
这样当要再建立删除的对象时，DOM中通过JQuery.append新增元素且付给新的index后，JQuery选择器选择的元素集合length会比DOM对象数组的大，这样匹配会出现问题。(似乎问题没有说清楚，呵呵～～)

问题发现，是在做两个日期的差，根据这个日期差的天数N，在页面生成N行DIV，改变天数，要增加或删除DIV，保持日期差和行数的一致。经过一番的尝试失败。终于还是找到实现的方法：
1、先在要删除元素的父元素中使用not(expr)方法从JQuery对象中删除元素；
2、然后再从DOM中删除的该元素；
3、若要删除多个元素，请从元素下标大的元素开始依次删除；
注：第1、2步不可调换先后顺序。

 

var alreadyDayNum=$("#a>.b").length;
var daydisc=dayDisc(date1,date2); /*计算天数差的函数*/
for (var i=alreadyDayNum-1;i>=daydisc;i--){
  $($("#a>.b")[i]).parent().not($("#a>.b")[i]);
  $($("#a>.b")[i]).remove();
}