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. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  2. 如何快速安装visual studio 2017和破解

    https://sm.myapp.com/original/Development/vs_community__1229872941.1512460494-v15.5.0.exe visual stu ...

  3. ES5-ES6-ES7_let关键字声明变量

    let命令的介绍 let是ECMAScript6中新增的关键字,用于声明变量.它的用法类似于var var a = 3 let b = 4 let变量的声明 let 命令的特点不允许在同一作用域下声明 ...

  4. [SDOI2010]捉迷藏

    嘟嘟嘟 k-d tree板儿题. 建完树后对每一个点求一遍最小和最大曼哈顿距离,是曼哈顿,不是欧几里得. #include<cstdio> #include<iostream> ...

  5. Java中关于CountDownLatch的使用

    CyclicBarrier工具类主要是控制多个线程的一起执行,演示程序: import java.util.Random; import java.util.concurrent.CountDownL ...

  6. vue.js 防暴力点击方案

    import lodash from 'lodash' <input v-on:onclick ="doStuff">methods: { doStuff:loadsh ...

  7. !important的用法

    如果写成:a{color:teal !important},IE6和其它高版本浏览器都认识,(IE6虽然不认识!important,但它还是能够认识!important之前的color:teal这个属 ...

  8. php 生成静态页面

    使用ob函数 <?php require_once(dirname(__FILE__).'/include/config.inc.php'); ?> <?php $dosql-> ...

  9. M100 (0)开发

    [SDCC 2015现场]大疆Paul Yang:多旋翼飞行器的未来就是机器人的未来 http://www.csdn.net/article/2015-11-19/2826268 开发官网 https ...

  10. MetaMask/safe-event-emitter

    https://github.com/MetaMask/safe-event-emitter safe-event-emitter An EventEmitter that isolates the ...