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. PostgreSQL 空间处理函数

    PostGIS中的常用函数 以下内容包括比较多的尖括号,发布到blogger的时候会显示不正常,内容太多我也无暇一个个手动改代码,因此如有问题就去参考PostGIS官方文档. 首先需要说明一下,这里许 ...

  2. OPENSTACK在RHEL7安装；admin创建虚拟机模板供demo使用

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010026901/article/details/30965601 首先RHEL7安装.导入镜像, ...

  3. java list 排序,建议收藏的排序方法

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code public static void main(String[] args) {    ...

  4. 使用ElasticSearch实现搜索时即时提示与全文搜索功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 大疆ganluinace

    1全部套件 2 贴胶布 3 注意箭头朝向一直 5 安装分部件

  6. secp256k1如何使用

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

  7. leetcode46. Permutations 、47. Permutations II、 剑指offer字符串的排列

    字符串排列和PermutationsII差不多 Permutations第一种解法: 这种方法从0开始遍历,通过visited来存储是否被访问到,level代表每次已经存储了多少个数字 class S ...

  8. nodejs中引用其他js文件中的函数

    基本语句 require('js文件路径'); 使用方法 举个例子,在同一个目录下,有app.fun1.fun2三个js文件. 1. app.js var fun1 = require('./fun1 ...

  9. FreeRTOS队列

    简单来讲队列是任务间通信的方式,队列本身是可以存储消息的,队列的消息可以由一个或者多个任务写入,也可以由一个或者多个任务读出,总之消息队列是任务间通信方式:

  10. QT 按钮的使用技巧

    按钮透明 //    ui->pushButton->setFlat( true );//    ui->pushButton->setStyleSheet( "QP ...