前端攻城狮---jQuery的使用(3)
本章节主要讲解节点的相关操作和事件相关知识点。
节点操作
添加节点
append 在被选元素的结尾插入元素
prepend 在被选元素的开头插入元素
after 在被选元素的后面插入元素
before 在被选元素的前面插入元素
我们这里需要区分一下append和after的区别，那么prepend和before同理
append被添加的对象是一样容器，是一个父亲。
after被添加的对象是一个同创建的对象是兄弟级别的关系，是同级的。
上诉四个方法是用来将被添加的元素到添加到指定元素后面的，那么元素的创建是怎么样的？
节点的创建
html创建元素 var child = "<p>haha</p>";
jQuery创建元素 $("<p></p>")
dom创建元素 document.createElement("p");
然后我们可以再通过添加方法将被创建的元素添加进去。
如下所
// dom创建方法
var box = document.getElementById("box");
var obj_link = document.createElement("a");
box.appendChild(obj_link);
//html创建方法
$("#box").append('<a href="http://www.sina.com.cn" target="_blank">新浪</a>');
//jQuery 创建方法
var $a = $('<a href="http://www.sina.com.cn" target="_blank">新浪</a>');
$("#box").append($a); append/appendTo
append前的参数被添加的元素，后面的参数表示创建需要添加的元素
appendTo同append的效果一样，只不过前面的对象是创建需要添加的元素，后面是被添加的元素
--->$("<a>asdasd</a>").appendTo($("#box"));
dom与jQuery对象的互转
一个dom对象要转成jQuery对象，只需将对象用括号包裹切前面加$------>￥（dom对象）
jQuery对象转dom，只需直接从jQuery类数组中直接获取即可------->$("#div").get(0)/$("#div")[0]
注意：jQuery是没有innerHTML的属性的
节点操作demo---类似于选课功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
select {
height: 200px;
width: 200px;
background-color: skyblue;
font-size: 20px;
}
.btns {
width: 30px;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<h1>可选择课程:</h1>
<select id="src_courses" multiple>
<option value="">大学英语</option>
<option value="">js编程</option>
<option value="">音乐</option>
<option value="">美术</option>
<option value="">舞蹈</option>
<option value="">php</option>
</select>
<div class="btns">
<button>>></button>
<button><<</button>
<button>></button>
<button><</button>
</div>
<select name="" id="tar_courses" multiple></select>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
// 全部右移
$(".btns button:eq(0)").click(function() {
$("#tar_courses").append($("#src_courses option"));
});
// 全部左移
$(".btns button:eq(1)").click(function() {
$("#src_courses").append($("#tar_courses option"));
});
// 选中右移
$(".btns button:eq(2)").click(function() {
$("#tar_courses").append($('#src_courses option:selected'));
});
// 选择左移
$(".btns button:eq(3)").click(function() {
$("#src_courses").append($('#tar_courses option:selected'));
});
});
</script>
</body>
</html>节点的删除
- 通过html清空元素的内容
- empty方法
- remove方法
我们先来看看第一个方法
在jQuery（2）中我们对html（）方法进行讲解，这么把我们先来一个demo看看实际效果
<div>
<p>段落1111</p>
<p>段落2222</p>
</div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
var $value = $("div").html();
console.log($value); </script> 其实这是一串字符串，那么同理我们若是要清空div里面的所有的元素是不是穿个空字符串就可以了。
$("div").html("");就达到了清空div里面元素的效果
方法二
empty表示移除所有子元素
使用方法 $("div").empty();
方法三
移除该元素，并且移除该元素下所有的子元素。
$("div").remove(); 会把div 两个p标签都移除了。
节点复制
clone 表示克隆
clone() clone(false) clone(true)
前面两个表示不克隆事件，最有一个会克隆事件，我们来看看具体的使用。
$("div").append($(".outer").clone(false));
结合节点的添删，再写一个demo
主要流程就是 通过jQuery创建元素的方法，去创建元素，在父元素的最前面去添加元素，用到prepend，然后给删除添加点击事件，去remove因为要连同自己也删掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 600px;
margin: 100px auto;
padding: 20px;
border: 1px solid #000;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
}
ul li {
border-bottom: 1px dashed #ccc;
line-height: 25px;
}
.btn_dele{
float: right;
}
</style>
</head>
<body>
<div id="weibo" class="wrap">
<h2>微博发布</h2>
<textarea name="" id="txt" cols="30" rows="10">
</textarea>
<button>发布</button>
<ul id="content">
</ul>
</div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
if($("#txt").val().trim().length==0){
return;
}
var add_li = $('<li><span></span><button class="btn_dele">删除</button></li>');
add_li.children("span").text($("#txt").val().trim());
$("#content").prepend(add_li);
$("#txt").val("");
add_li.children("button").click(function(){
add_li.remove();
});
});
});
</script>
</body>
</html>width/height方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
padding: 15px;
margin: 10px;
background-color: pink;
border: 10px dashed blue;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
alert($("div").css("width")); //获取宽度 200px
alert($("div").width()); // 200 内容宽 直接获取数字
alert($("div").innerWidth()); // 230 width+左右padding
alert($("div").outerWidth()); // 250 width+左右padding+左右border
alert($("div").outerWidth(true)); // 270 width+左右padding+左右border + 左右margin
alert($(window).width());
alert($(window).height());
// 动态获取页面可视区域宽度和高度
$(window).resize(function() {
/*document.write($(window).width());
document.write($(window).height());*/
alert("ok");
});
});
</script>;
</body>
</html>重点可以看看innerWidth（）和outerWidth（）
其实innerWidth=clientWidth outerWidth（） = offsetWidth
当outerWidth（true）为true的时候，是需要计算margin
window的resize方法可以动态的获取浏览器大小的变化，怎么说呢？就是比如吧浏览器放大缩小，都会触发该监听。
scrollTop（）/scrollLeft（）
scrollTop表示页面滚动的距离，当文档高度大于窗口高度，就会显示滚动条，就能进行上下滚动。
文档高度$(document).height() $(window).hegiht()
什么是文档高度？就是整个页面的实际高度
什么是窗口高度？就是我们看的到的高度
使用文档高度-窗口高度=我们看不到/可以滚动的高度
scrollLeft同理。
offset（）/position（）
offset 表示相对文档的偏移
position 表示相对于最近且有定位的父亲的偏移
返回的数据是一个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.fa {
width: 380px;
height: 380px;
background-color: green;
margin: 100px;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute;
top: 80px;
left: 80px;
}
</style>
</head>
<body>
<div class="fa">
<div class="son"></div>
</div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
//offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
console.log($(".son").offset());// {top:180,left:180}
// 获取元素相对于有定位的父元素的位置
console.log($(".son").position()); // {top:80,left:80}
});
</script>
</body>
</html>jQuery的事件机制
事件机制的发展历程 简单的事件绑定--->bind绑定---->delegate事件绑定----->on事件绑定（推荐）
简单的事件绑定
就是我们常用的 $(".demo").click(function(){ 单击事件 }) $(".demo").mouseenter(function(){ 鼠标移入}) $(".demo").mouseleave(function(){ 鼠标移走 })
缺点：确定就是同一个对象，同一个事件不能绑定多个，否则后面的点击事件会把前面的覆盖掉。
不支持动态添加元素的事件绑定
需要用元素的js，jQuery已经帮我处理好了
document.getElementsByTagName("span")[0].onclick = function() {
alert("1");
}
document.getElementsByTagName("span")[0].onclick = function() {
alert("2");
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<div>
<span>abcdef</span>
<p>00000</p>
<p>zzzzzzzzzz</p>
<p>ssssssssss</p>
<p>tttttttttt</p>
</div>
</div>
<button>点我在div里创建一个新的p元素</button>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("div").append("<p>我是新增的p元素</p>");
});
$("p").click(function() {
alert("I am happy");
});
});
</script>
</body>
</html>bind绑定
可以注册同事注册多个不同的事件，多个不同的事件可以进行同样的处理，也可以进行不同的处理。
//一次注册多个不同的事件，同样的处理
$("span").bind("click mouseenter",function() {
alert("success");
});
//bind一次可以注册多个不同的事件，不同的处理
$("span").bind({
click:function() {
alert("right");
},
mouseenter:function() {
alert("wrong");
}
});delegate绑定
这是一个委托代理机制，可以支持动态添加的元素的事件添加，但是必须要这些元素的父亲注册委托的事件。
下面看看一个demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<div>
<span>abcdef</span>
<p>00000</p>
<p>zzzzzzzzzz</p>
<p>ssssssssss</p>
<p>tttttttttt</p>
</div>
</div>
<button>点我在div里创建一个新的p元素</button>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("div").append("<p>我是新增的p元素</p>");
});
// 给父亲注册委托事件
// 第一个参数 selector 事件最终由谁来执行
// 第二个参数 事件的类型
// 第三个参数 事件处理函数
// 优点 支持动态创建的元素也能有事件
// 缺点 必须注册委托事件
$("#box").delegate("p","click",function() {
alert("haha");
console.log(this);
});
});
</script>
</body>
</html>缺点：必须要注册委托事件
on绑定
on方法是jQuery1.7之后出来的，on可以说是结合了之前绑定方式的有点，它既有委托代理模式，又可以对动态添加的元素添加事件。这面我们来看看这三种事件触发的先后顺序。
$("p").on("click",function() {//自己直接注册事件（1）
alert("嘿嘿");
})
$("div").on("click",function() {//祖先元素注册事件（2）
alert("呵呵");
});
// 委托代理 给自己注册事件（3）
$("div").on("click","p",function() {
alert("哈哈");
});显示的弹框内容是 嘿嘿-----哈哈----呵呵
所以我们可以得出一个结论事件响应的优先级
自己直接注册事件>委托代理 给自己注册事件>祖先元素注册事件
若想给动态添加的元素添加事件，那必须要通过注册委托代理的方式去给动态添加的元素注册事件，我们再上诉demo上再做修改
$("p").on("click",function() {
alert("嘿嘿");
});
$("div").on("click",function() {
alert("呵呵");
});
// 给div注册 真正执行由子元素执行
$("div").on("click","p",function() {
alert("哈哈");
});
// 给按钮直接注册单击事件
$("button").on("click",function() {
$("div").append("<p>我是动态生成的p</p>");
});我们去点击动态添加的p，看看触发了哪些点击事件，显示了哪些弹框？
结果是哈哈------呵呵
也就是说只有通过委托代理注册的方法，才能给动态添加的元素注册点击事件。
那么想要的顺序是
动态添加的元素先执行委托代理给自己注册的事件---再去执行父亲的事件
事件解绑
unbind()表示解绑bind对应的事件
$(selector).unbind() 表示解绑全部事件
$(selector).unbind("click") 表示解绑click事件
undelegate()表示解绑delegate对应的事件
$(selector).undelegate();表示解绑所有事件
$(selector).undelegate("click");表示解绑click事件
off() 表示解绑on对应的事件
$(selector).off(); 表示解绑所有的事件
$(selector).off("click"); 表示解绑click事件
事件触发
如果说现在有这么个需求，单击一个元素后触发另一个点击元素的点击事件。
$("p").on("click",function() {
alert("ok");
});
});
$("button").on("click",function() {
// 触发p元素的单击事件
$("p").click();//方法1
$("p").trigger('click');//方法2
});jQuery的节点，事件绑定等知识点已经讲完，接下来会来讲js对象等高级方法，如有表达错的请谅解，并请提出指出，且修改错误，望能共同进步。
上一篇： 前端攻城狮---jQuery的使用(2)
下一篇： 关于减少脱标流使用的一个小技巧