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. python五十四课——datetime模块

    3.datetime模块:理解:datetime可以认为是time模块的补充/扩展datetime模块中有一些常用类:datetime类:记录了日期和时间数据信息date类:记录了日期数据信息time ...

  2. swift class的虚函数表

    class NSObjectBase: NSObject { func Msg_Normal(){ } func Msg_Second(){} func Msg_Third(){} @objc fun ...

  3. About me？

    看到好像每一篇博客都要写这个东西,就跟风写一写吧 写点啥啊 一个来自SD slyz的彩笔,就是天天被锤爆的那种 因为经常表现自己的弱还被一些大佬嘲讽说\(fake\) 啥都不擅长 可能很快就退役了 这 ...

  4. MySQL-proxy代理导致PHP PDO::ATTR_EMULATE_PREPARES的预处理出错，MySQL报General error: 1243错误

    背景: 用的ThinkPHP5的框架.(相比之前的3.2版本,版本5都用了PDO处理数据库) 症状: 报错信息: SQLSTATE[HY000]: General error: 1243 Unknow ...

  5. ORA-600 [Kcbz_check_objd_typ_1] Running a Job (Doc ID 785899.1)

    ORA-600 [Kcbz_check_objd_typ_1] Running a Job (Doc ID 785899.1) To Bottom In this Document   Symptom ...

  6. oracle 查询 磁盘使用率

    SELECT d.tablespace_name "Name",        TO_CHAR(NVL(a.bytes / 1024 / 1024 / 1024, 0), '99, ...

  7. 数据可视化matplotlib、seaborn、pydotplus

    如需转发,请注明出处:小婷儿的python  https://www.cnblogs.com/xxtalhr/p/10486560.html 一.数据可视化 data.mat 链接:https://p ...

  8. java 日期与时间类

    1.Date类:  https://www.cnblogs.com/huangminwen/p/5994927.html 2.DateFormat和SimpleDateFormat (simple简单 ...

  9. Selenium：集成测试报告

    参考内容:虫师:<selenium2自动化测试实战——基于python语言> PS:书中的代码,只能做参考,最好还是自己码一码,不一定照搬就全是对的,实践出真知啊,踩了很多坑的说... 随 ...

  10. Android 让图片等比例缩放的三种方法

    方法一:客户端等比例 前提条件:服务器端需要返回原始图片的“宽和高”或者“宽高缩放比例”,客户端要显示的图片的宽或者高只要其一是固定的(例如:高度为200,宽度未知,或者高度为400宽度未知) 在这种 ...