jQuery-day03
2017-12-27 本文已影响0人
Rosemarry丶
A.我今天学了什么
1.遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>button</button>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
//$.each();作用：遍历数组、类数组、对象，相当于JavaScript里面的for循环
//$.each(想要遍历的对象，function(索引，值){操作})；
var arr = [1,2,3,4,5,6,7,8,9,'a','s','d','f']
var obj = {
'ipone8':7000,
'iponeX':8899,
'ipone4':500
}
/*for(var i = 0; i < arr.length; i++){
console.log(arr[i])
}*/
/*for(var key in obj){
console.log(key)
console.log(obj[key])
}*/
//JQ方法
/*$.each(arr,function(index,value){
console.log(index,value)
})*/
//当遍历数组的时候，两个参数分别是索引和索引对应的值
//当遍历json的时候，两个参数就分别是：键和值
$.each(obj,function(key,value){
console.log(key,value)
})
</script>
</html>
2.元素添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
margin: 50px auto;
border: 10px solid red;
}
</style>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
var btn = $('#btn');
var box = $('.box');
//1.内部插入元素，添加子元素
//给父标签添加子标签
//box.append('<i>这是一个I标签</i>');
//将子标签添加到父标签
//$('<i>这是第二个I标签</i>').appendTo(box)
//向前添加
//prepend()
/*box.prepend('<i>这是一个I标签</i>');
$('<i>这是第二个I标签</i>').prependTo(box)*/
//外部插入元素，插入内容作为兄弟节点存在 ：before();
//并且before是插入在元素的前面
//box.before('<h1>这是一个before插入的H1标签</h1>')
//insetBefore
//$('<h1>这是一个insetBefore插入的H1标签</h1>').insertBefore(box)
//往后面追加兄弟节点：after()
//box.after('<h1>这是一个after插入的H1标签</h1>')
//$('<h1>这是一个insetAfter插入的H1标签</h1>').insertAfter(box);
//3.包裹
//wrap()为JQ对象中的每一个对象单独添加一个父级
/*box.wrap('<div style="background: aqua;"></div>');
//移除父级unwarp()，括号里面不能传参
box.unwrap();*/
//wrapAll为所有JQ对象添加一个公用的父级元素
//$('p').wrapAll("<div class='father' style='border: 1px solid red;'></div>")
//wrapInner()给子元素重新添加父级，然后自己的位置上升
//box.wrapInner("<div class='father' style='border: 10px solid cyan;'></div>")
//4.替换
//replaceWith()将当前对象替换成指定内容
//$('h4').replaceWith('<i>这是替换后的I</i>')
//replaceAll将所有JQ对象替换成指定元素
//$('<i>这是替换后的I标签</i>').replaceAll('p')
//5.删除
//empty()清空子元素，包括文本，标签，注释等等所有子元素
box.empty()
//remove()移除指定对象，包括对象绑定的事件、属性、全部移除，并且无法恢复
detach()移除指定对象，对象绑定的事件、属性可以恢复
box.on('click',function(){
//给box绑定click事件
alert('s')
})
var b = box;
btn.click(function(){
box.remove();
box.detach()
$('body').append(b)
})
});
</script>
<body>
<button id="btn">button</button>
<div class="box">
<!--我是BOX的注释-->
<p>这是一个P标签</p>
<p>这是一个P标签</p>
<p>这是一个P标签</p>
<h4>这是一个H4标签</h4>
</div>
<div class="box2">
第二个div
</div>
</body>
</html>
