您的位置：首页 > Web前端 > JQuery
jquery学习笔记

2014-12-04 21:04 190 查看
今天熟悉了jquery，学习了一些常用的函数，此外有做了两个小demo，两个实例的核心原理类似,下面是随手记录的笔记：
/*
jquery 学习笔记
2014-12-04

*/
节点的插入：
append()可以实现连缀：
$("ul").append(li1).append(li2);

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

创建元素可一次性添加属性完毕：
var li1=$("<li class='oli' id='olid'>香蕉</li>");

节点的删除：
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(); //<ul>中的<li>元素都被清理掉了

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

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

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

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

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

属性操作：

设置属性：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

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

</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
</head>
<body>
<p><a href="#" title="这是我的超链接提示11" class="tooltip">提示1</a></p>
<p><a href="#" title="这是我的超链接提示22" class="tooltip">提示2</a></p>
<a href="#" title="这是自带提示">自带提示</a>
<a href="#" title="这是自带提示">自带提示</a>
</body>
<script type="text/javascript">
$(function(){
$(".tooltip").mousemove(function(e){
var tit=$(this).attr("title");  //现获<a>标签的title属性，以备赋当文本节点给div显示
$("<div></div>").appendTo("body").html(tit); //创建提示窗div，并赋值innerHTML
$("div").css({"position":"absolute","background":"red","top":e.pageY+15+"px"}); //设置div提示窗样式，并跟随鼠标
}).mouseout(function(){
$("div").remove();  //鼠标移出删除div提示窗
});
})
</script>
</html>

以下是根据上面代码更改的一个图片跟随放大显示效果:
<DOCTYPE html>
<html>
<head>
<style>
ul{
width: 500px;
margin: 0 auto;
}
li{
list-style-type: none;
float: left;
margin: 10px;
}
img{
width:100px;
height:100px;
}
#img1{
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
</head>
<body>
<div id="d1"></div>
<ul>
<li><a href="1.jpg" class="tooltip"><img src="1.jpg" alt=""></a></li>
<li><a href="2.jpg" class="tooltip"><img src="2.jpg" alt=""></a></li>
<li><a href="3.jpg" class="tooltip"><img src="3.jpg" alt=""></a></li>
<li><a href="4.jpg" class="tooltip"><img src="4.jpg" alt=""></a></li>
</ul>

</body>
<script type="text/javascript">
$(function(){
$("a").mousemove(function(e){
var lianjie=$(this).attr("href");
$("<div><img src='"+this.href+"' id='img1'/></div>").appendTo("body");
$("div").css({"position":"absolute","background":"red","top":e.pageY+15+"px","left":e.pageX+15+"px"});
}).mouseout(function(){
$("div").remove();
});
})
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航