jQuery 增删改查
<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>
<script type="text/javascript">
$(function(){
var btn = $("#btn");
var box = $(".box");
//内部增加
//box.append("<i>我是I标签</i>")
//$("<i>我也是I标签</i>").appendTo(box);
//box.prepend("<i>我是I标签</i>");
//$("<i>我也是I标签</i>").prependTo(box);
//外部增加
//box.before("<p>我是P标签</p>");
//$("<p>我也是P标签</p>").insertBefore(box);
//box.after("<p>我是P标签</p>");
//$("<p>我也是P标签</p>").insertAfter(box);
//包裹
/*box.wrap("<div style='background: pink;'></div>"); 为JQ对象中的每一个对象单独添加一个父级
box.unwrap();*/ //移出父级
//$("p").wrap("<div style='border: 1px solid blue;'></div>");
//box.wrapInner("<div style='border: 10px solid aqua;'></div>") ;
//替换
//$("h4").replaceWith("<p>我也是P标签</p>");
//$("<i>我也是I标签</i>").replaceAll("p");
//删除
//box.empty();
box.on("click",function(){
alert("abc");
})
var b=box;
btn.on("click",function(){
//box.remove(); //完全移除，不能恢复事件，属性
box.detach(); // 移除，可以恢复
$("body").append(b);
})
});
</script>
jQuery 遍历
$.each(obj,function(index,value){});
var arr = [1,2,3,4,5,6,7,"a","s","d"];
var obj = {
"ipone8":8999,
"iponeX":9900,
"苹果":4
}
// $.each(arr,function(i,v){
// console.log(i,v);
// })
$.each(obj, function(key,val) {
console.log(key,val);
});
demo jQ切换页面
<body>
<input type="text" id="txt"/>
<button id="sure">确定</button>
<ul class="page"></ul>
<ul class="btn"></ul>
</body>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.page{
width: 500px;
margin: 50px auto;
}
.page>li{
width: 100%;
height: 30px;
margin: 10px 0;
}
.btn{
display: block;
width: 500px;
margin: 50px auto 100px;
}
.btn>li{
width: 28px;
height: 28px;
margin: 0 10px;
text-align: center;
line-height: 28px;
font-size: 16px;
float: left;
border: 1px solid #aaa;
cursor: pointer;
}
.btn>.checked{
background: #d2961e;
color: #fff;
}
</style>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
var txt = $("#txt");
var sure = $("#sure");
var page = $(".page")
var btn = $(".btn");
var num = 10;
showNum();
function showNum(){
page.html("");
btn.html("");
for(var i=1;i<=num;i++){
page.append("<li>"+i+"</li>");
}
for(var i=1;i<=Math.ceil(100/num);i++){
var btns = $("<li>"+i+"</li>");
btn.append(btns);
btns.click(function(){
var index = $(this).index();
$(this).addClass("checked").siblings().removeClass("checked");
page.children().map(function(){
$(this).html((index*num+1)+$(this).index());
//$(this)代表每个li,html代表显示的内容，index代表按钮的索引
//例如，当前按钮是第二个，那么index为1，num为10
//index*num+1=1*10+1=11;
//然后11+当前li的索引值，就是他们的内容；
//例如第一个li，索引值为0，那么11+0=11，就是第二组li的第一个的内容
if($(this).html()>100){
$(this).empty();
}
})
})
if(i==1){
btns.addClass("checked");
}
}
}
sure.click(function(){
num = txt.val();
showNum();
})
})
</script>
