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>

jQuery（五）的更多相关文章

  1. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  2. jQuery五屏轮播手风琴切换代码

    jQuery五屏轮播手风琴切换代码 在线演示本地下载

  3. jQuery(五)： Deferred

    jQuery(五): Deferred 有啥用 通常来说,js请求数据,无论是异步还是同步,都不会立即获取到结果,通常而言,我们一般是是使用回调函数再执行,而 deferred就是解决jQuery的回 ...

  4. 你不需要jQuery(五)

    什么不用jQuery?因为它让你的网站体积变得臃肿.你的网站并不真的需要jQuery,不需要它带来的额外体积.带宽和加载时间. 用原生JavaScript简单实现jQuery提供的功能和方法 查找.选 ...

  5. jQuery(五)、筛选

    1 过滤 1.eq(index | -index) 获取第N个元素,index为元素索引,-index值基于最后一个元素的位置(从 1 开始) 2.first() 获取第一个元素 3.last() 获 ...

  6. 从零开始学习jQuery(转)

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

  7. Jquery系列教程

    最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...

  8. 从零开始学习jQuery

    转自:http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html 本系列文章导航 从零开始学习jQuery (一) ...

  9. 【转】jQuery教程

    “jQuery风暴” 推荐及配套代码下载 ziqiu.zhang 2011-03-24 00:28 阅读:15339 评论:100   从零开始学习jQuery(剧场版) 你必须知道的javascri ...

  10. vue-cli引入jquery方法

    方法一: 一,在package.json里加入, dependencies:{ ”jquery“:”^2.3.4“ } 二,在webpack.base.conf.js里加入 const webpack ...

随机推荐

  1. 用requests爬取一个招聘网站

    import requestsimport re session = requests.session()第一步:访问登陆页,拿到X_Anti_Forge_Token,X_Anti_Forge_Cod ...

  2. 解决MySQL Workbench导出乱码问题

    1.导出数据 2.默认CSV格式 3.乱码 4.解决 文件->另存为,会发现编码为UTF-8,正是MySQL表的编码方式.我们选择编码方式为ANSI,保存类型为所有,覆盖源文件

  3. 数据挖掘十大算法--K-均值聚类算法

    一.相异度计算  在正式讨论聚类前,我们要先弄清楚一个问题:怎样定量计算两个可比較元素间的相异度.用通俗的话说.相异度就是两个东西区别有多大.比如人类与章鱼的相异度明显大于人类与黑猩猩的相异度,这是能 ...

  4. UVA506-System Dependencies(拓扑序)

    Problem UVA506-System Dependencies Accept:285  Submit:2824 Time Limit: 3000 mSec Problem Description ...

  5. Laravel小项目之第4节 Laravel-通过表单实现新增及操作状态提示功能

    第4节 Laravel-通过表单实现新增及操作状态提示功能 4.1 显示新增表单视图 4.2 通过模型实现新增 4.3 操作状态提示 4.1 显示新增表单视图 修改边栏的链接 \resources\v ...

  6. Linux企业运维人员最常用150个命令汇总 [转]

    近来发现新手学习Linux记不住命令,不会分类.不会筛选重点,胡子眉毛一把抓当然记不住了. 特别整理Linux运维最常用150个命令和大家分享,大家学习命令不用在盲目了,根据分类,然后逐步学习! 命令 ...

  7. Javascript 对象复制

    如果对象只是一个数据集,可采用json化再反json化的方式克隆一个对象,这个过程会丢失对象的方法.效率比较低. 可以采用如下递归的方式复制一个对象. function clone(target) { ...

  8. highcharts中数据列点击事件

    Highcharts.chart('container', { xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul ...

  9. java算法----排序----（1）插入排序

    package log; public class Test4 { /** * java算法---插入排序 * * @param args */ public static void main(Str ...

  10. C# 深浅复制 MemberwiseClone（转载）

    最近拜读了大话设计模式:原型模式,该模式主要应用C# 深浅复制来实现的!关于深浅复制大家可参考MSDN:https://docs.microsoft.com/zh-cn/dotnet/api/syst ...