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. (2)free详解 (每周一个linux命令系列)

    (2)free详解 (每周一个linux命令系列) linux命令 free详解 引言:今天的命令是用来看内存的free free 换一个套路,我们先看man free中对free的描述: Displ ...

  2. secp256k1如何使用

    https://npm.taobao.org/package/secp256k1 这个即椭圆曲线加密算法算法,随机生成一个私钥然后通过椭圆曲线加密算法算法(ECC)得到一个公钥,且无法反向 然后再使用 ...

  3. 1029 最大公约数和最小公倍数问题（gcd) luogu洛谷

    题目描述 输入22个正整数x_0,y_0(2 \le x_0<100000,2 \le y_0<=1000000)x0​,y0​(2≤x0​<100000,2≤y0​<=100 ...

  4. MySQL 基础一 安装

    1.下载安装包 2.安装MySQL 3.安装操作工具SQLyog 一 下载安装包 地址:百度软件中心MySQL安装包 下载安装操作工具安装包:SQLyog 安装教程地址:http://blog.csd ...

  5. ASP.NET 文件操作类

    1.读取文件 2.写入文件 using System; using System.Collections.Generic; using System.IO; using System.Linq; us ...

  6. Android学习之基础知识四-Activity活动8讲（活动的灵活运用）

    一.判断当前是在哪个活动 1.我们还是接着上一讲的代码,首先创建一个Java类:BaseActivity.java.这个类我们不作为一个活动,也不在AndroidManifest.xml中注册,它只是 ...

  7. mqtt 客户端 基于Python

    这几天一直在搞安全通信,微信小程序,反向代理等等,为了能让自己对整个系统做到把控,主要是需要了解每一个细节的地方,所以今天花了3个小时的时间学习了Python,因为我要用它来做Http和WebSock ...

  8. Redis详解（七）------ AOF 持久化

    上一篇文章我们介绍了Redis的RDB持久化,RDB 持久化存在一个缺点是一定时间内做一次备份,如果redis意外down掉的话,就会丢失最后一次快照后的所有修改(数据有丢失).对于数据完整性要求很严 ...

  9. mac安装CocoaPods遇到的问题及解决办法

    (1)sudo gem install cocoapods Fetching: i18n-0.7.0.gem (100%) Successfully installed i18n-0.7.0 Fetc ...

  10. mysql 添加字段，未响应

    ddl是要请求锁整个表的,肯定是这个表上有DML事务了,也就是有其它会话在删除.修改.插入这个表并且未提交