wrap
<script>
//wrap：包装
//wrapAll：整体包装
//wrapInner：内部包装
//unwrap：删除包装（删除父级，不包括body）
$(function(){
//$('span').wrap('<div>');//给每一个span包装div
//$('span').wrapAll('<div>');//全部span包在一个div里面
$('span').wrapInner('<div>');//每一个span内包装了一个div
$('span').unwrap();
})
</script>
</head>
<body>
<div>
<span>span</span>
</div>
<span>span</span>
<span>span</span>
</body>
add
<script>
$(function(){
var elem=$('div');
var elem2=elem.add('span');
elem.css('color','red');
elem2.css('color','yellow');
})
</script>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
slice
<script>
$(function(){
$('li').slice(1,4).css('background','red');//跟数组的用法差不多，选中ul中第2到第4个li，不包括结束位置
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
数据操作
<script>
$(function(){
//数据串联化，对数据进行解析操作 //console.log($('form').serialize());//a=1&b=2$c=3
console.log($('form').serializeArray());//格式化成数组的json形式，
})
</script>
</head>
<body>
<form>
<input type="text" name="a" value="1">
<input type="text" name="b" value="2">
<input type="text" name="c" value="3">
</form>
</body>
jQuery中的运动animate
<style>
#div1{100px;height:100px;background:red;}
#div2{100px;height:100px;background:red;margin-top:20px;}
</style>
<script>
//animate();
//第一个参数：{}运动的值和属性
//第二个参数：时间,调节运动快慢 默认时间400ms
//第三个参数：运动形式，在jQuery中只有两种运动形式（默认：swing（缓冲效果,慢快慢）linear（匀速））
//第四个参数：回调函数
$(function(){
$('div').click(function(){
$(this).animate({300,height:300},4000,'linear',function(){alert(123)});
$('#div2').animate({300,height:300},4000,'swing');
});
});
</script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
//链式运动2种写法
<style>
#div1{100px;height:100px;background:red;}
#div2{100px;height:100px;background:red;margin-top:20px;}
</style>
<script>
$(function(){
$('div').click(function(){
/*$(this).animate({300},2000,'linear',function(){
$(this).animate({height:300});
});*/
$(this).animate({300},2000).animate({height:300},2000);
});
});
</script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
<style>
#div1{100px;height:100px;background:red;}
#div2{100px;height:100px;background:red;margin-top:20px;}
</style>
<script>
$(function(){
$('#div1').click(function(){
$(this).animate({300},2000).animate({height:300},2000);
});
$('#div2').click(function(){
//$('#div1').stop();//默认只会阻止当前运动
//$('#div1').stop(true);//阻止后续的运动
//$('#div1').stop(true,true);//可以立即停止到目标点
$('#div1').finish();//立即停止到多有指定的目标点
})
});
</script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
<style>
#div1{100px;height:100px;background:red;}
</style>
<script>
$(function(){
$('#div1').click(function(){
$(this).animate({300},2000).delay(1000).animate({height:300},2000);//宽高运动之间延迟一秒
});
});
</script>
</head>
<body>
<div id="div1">div1</div>
</body>
事件委托
<script>
$(function(){
/* $('li').on('click',function(){
this.style.background='red';
})*/
$('ul').delegate('li','click',function(){
this.style.background='red';
$('ul').undelegate();//阻止事件委托
})//事件委托，事件加在ul上面，好处省略了循环操作，对后续添加的节点直接用事件操作，只需添加节点，对提高性能有好处
})
</script>
</head>
<body>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</body>
主动触发
<script>
$(function(){
$('#div1').on('click',function(){
alert(123);
})
$('#div1').on('show',function(){
alert(456);
})
$('#div1').on('show',function(){
alert(789);
})
$('#div1').trigger('click');
$('#div1').trigger('show');
})
</script>
</head>
<body>
<div id="div1">zsw</div>
</body>
事件细节
<script>
$(function(){
$('#div1').on('click',{name:'hello'},function(ev){//函数传参
//alert(ev.data.name);
//alert(ev.target)//当前操作源
alert(ev.type);//当前操作的事件类型
})
})
</script>
</head>
<body>
<div id="div1">zsw</div>
</body>