jQuery(五)

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{width:100px;height:100px;background:red;}
#div2{width:100px;height:100px;background:red;margin-top:20px;}
</style>
<script>
//animate();
//第一个参数:{}运动的值和属性
//第二个参数:时间,调节运动快慢 默认时间400ms
//第三个参数:运动形式,在jQuery中只有两种运动形式(默认:swing(缓冲效果,慢快慢)linear(匀速))
//第四个参数:回调函数
$(function(){	
	$('div').click(function(){
		$(this).animate({width:300,height:300},4000,'linear',function(){alert(123)});
		$('#div2').animate({width:300,height:300},4000,'swing');
		});
});
</script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
//链式运动2种写法
<style>
#div1{width:100px;height:100px;background:red;}
#div2{width:100px;height:100px;background:red;margin-top:20px;}
</style>
<script>
$(function(){	
	$('div').click(function(){
		/*$(this).animate({width:300},2000,'linear',function(){
			$(this).animate({height:300});
			});*/
			$(this).animate({width:300},2000).animate({height:300},2000);
		});
});
</script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
<style>
#div1{width:100px;height:100px;background:red;}
#div2{width:100px;height:100px;background:red;margin-top:20px;}
</style>
<script>
$(function(){	
	$('#div1').click(function(){
			$(this).animate({width: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{width:100px;height:100px;background:red;}
</style>
<script>
$(function(){	
	$('#div1').click(function(){
			$(this).animate({width: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>
posted @ 2017-04-23 17:27  swift-zsw  阅读(137)  评论(0编辑  收藏  举报