jquery学习笔记

今天熟悉了jquery，学习了一些常用的函数，此外有做了两个小demo，两个实例的核心原理类似,下面是随手记录的笔记：

/*
	jquery 学习笔记 
	2014-12-04
	
*/
节点的插入：
append()可以实现连缀：
$("ul").append(li1).append(li2);

在节点的最前端插入（prepend）：
$("ul").prepend(li3);

创建元素可一次性添加属性完毕：
var li1=$("
香蕉
");


节点的删除：
remove() 和 detach() 两者区别：
remove()是彻底删除，删除后的节点再追加过来后，绑定的事件不能恢复，
而detach()删除后的节点会保留在jquery对象中，追加后绑定的事件和数据都还存在：
$("ul li").click(function(){    //为每个li元素绑定了click事件
		alert($(this).html());   
	});
	var $deli=$("ul li:eq(0)").detach();//用detach删除
	var $deli=$("ul li:eq(0)").remove();//用remove删除后，再追加事件不存在
	$deli.appendTo("ul");                //再追加后绑定的事件依然存在


empty() 清空节点（只清空不删除）能清空元素中所有后代节点
	$("ul").empty(); //
中的
元素都被清理掉了


clone() 复制节点：看下面实例：点击后clone()节点，然后插入到ul
	$("ul li").click(function(){   //注意：只有点击“最初”被绑定click事件的li才能克隆，新克隆的li标签没有绑定事件，可用live解决
		$(this).clone().appendTo("ul");
	});



注意此处存在绑定事件live()高低版本的问题
$("ul li").live("click",function(){   //用live()绑定的事件对于新创建或克隆的方法来说依然有效，而用click，bind绑定则不能
	$("
newnewnew
").appendTo("ul"); //用创建节点的方式添加元素
	$(this).clone().appendTo("ul");    //用克隆的方式创建节点
});


节点替换  replaceWith() 和replaceAll()
replaceWith()
$("div").replaceWith("
这里之前是div
");
replaceAll()
$("
现在用replaceAll
").replaceAll("div");


节点包裹wrap()
//元素包裹 wrap(), wrapAll(),wrapInner()
$("ul").wrap("
wwww
");//用div包裹ul

$("strong").wrap(""); //用包裹,单独包裹：每个都有来包裹
wrapAll()
$("strong").wrapAll(""); //打包包裹，所有的 只用一个来包裹
wrapInner()
$("strong").wrapInner("");//包裹的文本元素，效果为: 原本为strong的文本现在被b包裹

属性操作：

设置属性：attr("属性名","属性值");
同时设置多个属性：attr({"class":"classname","title":"titlename","name":"namename"});
获取属性：attr("属性名")
删除属性：removeAttr("title");

节点：
children()方法指获取下属子节点，不获取孙子节点
next()同级相邻下一个
prev()同级相邻上一个
siblings()同级兄弟元素
parent()获取父元素
parents()获取所有父元素（祖先元素）
closest()从本身元素开始向上查找，直到找到最近的一个祖元素。


小插曲：在设置css("属性名","属性值") 时，如果属性值带有“-”如：background-color,font-size,可写为驼峰形式：backgroundColor,fontSize

小插曲：对于超链接提示，标签自带的title属性就是超链接提示。也可自己编写提超链接提示效果
以下是自己编写的tooltip源码：



	
	
	
	
		
提示1
		
提示2
		自带提示
		自带提示
	
	




以下是根据上面代码更改的一个图片跟随放大显示效果:



	
	
	
	


	

	

	

	


		
	
	

 

转载于:https://www.cnblogs.com/chayangge/p/4288672.html