jQuery是一个JavaScript库（框架），它通过封装原生的JavaScript函数得到一整套定义好的方法，jQuery已经集成了JavaScript、 CSS、 DOM和Ajax于一体的强大功能。它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。

jQuery的功能：

      1.像 CSS 那样访问和操作 DOM
      2.修改 CSS 控制页面外观
      3.简化 JavaScript 代码操作
      4.事件处理更加容易
      5.各种动画效果使用方便
      6.让 Ajax 技术更加完美   异步加载
      7.基于 jQuery 大量插件
      8.自行扩展功能插件

jQuery的代码风格：

在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象：jQuery对象，所以我们在页面元素选择或执行功能函数的时候可以这么写：

$(function () {});  //执行一个匿名函数

$(‘#box’);  //进行执行的ID元素选择

$(‘#box’).css(‘color’, ‘red’);   //执行功能函数

        由于$本身就是jQuery对象的缩写形式，那么也就是说上面的三段代码也可以写成如下形式：

jQuery(function () {});

jQuery(‘#box’);

jQuery(‘#box’).css(‘color’, ‘red’);

        上述在执行了.css()这个功能函数后，最终返回的还是jQuery对象，因此，jQuery的代码模式可采用的连缀方式，不停的连续调用功能函数。

$('#box').css('color', 'red').css('font-size', '50px'); //连缀

          jQuery中代码注释和JavaScript是保持一致的，有两种最常用的注释：单行使用“//...” ，多行使用“/* ... */” 。

jQuery的入门使用：

        首先我们得引入jQuery库，从官网下载JS文件引入即可分迷你版和正常版

Jquery的描述 jquery示例_css

        大家可根据自己下载的版本进行引入，引入格式如下：

<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>

示例程序1：用 jQuery来给按钮设置样式属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        window.onload=function () {
            // $代表jquery对象的缩写 var v=$('#but')就相当于var v=jQuery('#but')
            // alert($==jQuery);打印true
            var v=$('#but').css('background', 'red').css('heigh','80px').css('width','100px');
        }
    </script>
</head>
<body>
    <button type="button" id="but">点击按钮</button>
</body>
<script type="text/javascript">
      $(document).ready(function () {//页面加载函数，放前面，等待整个HTML文档加载完成之后,操作
                                      //可简写为 $(function(){
      	$('#btn').click(function(){
					alert("Hello JQuery");
		});
      });
    </script>

示例程序2：jQuery对象和原生Dom对象互换

<head>
    <meta charset="UTF-8">
    <title>对象转换</title> 
   <script src="js/jquery.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
       $(function () {
           //原生DOM对象和JQuery的对象进行互相转换
           //原生的转成----Jquery
        var v=document.getElementById("myh1");
        v.style.color="yellow";
        $(v).css('color','green');
           //把JQuery对象转成原生DOM对象
           // get(索引) 通过这个方法,可以把JQuery对象转成原生DOM对象
          var v2= $('#myh2');
          v2. get(0).style.color="red";

           var v3 = $('.myh3');
           v3.get(2).style.color = "red";

         //$('h1').eq(3).css('color','red');用jQuery方式将h1数组中3索引元素颜色变红色，对应最后一行我的练习

       });
    </script>

</head>
<body>
    <h1 id="myh1">asdfasdfasdf</h1><!--打印绿色-->
    <h1 id="myh2">asdfasdfasdf</h1><!--打印红色-->
    <h1 class="myh3">asdfasdfasdf</h1>
    <h1 class="myh3">asdfasdfasdf</h1>
    <h1 class="myh3">asdfasdfasdf</h1><!--打印红色-->
    <h1 class="myh3">我的练习</h1>

</body>

选择器

CSS模式

jQuery模式

描述

标签选择器

div{}

$(‘div’)

获取所有 div 元素的 DOM 对象

ID选择器

#box{}

$(‘#box’)

获取一个 ID 为 box 元素的 DOM 对象

类选择器(class)

.box{}

$(‘.box’)

获取所有 class 为 box 的所有 DOM 对象

 示例程序3：嵌套标签的jQuery写法以及标签遍历

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
      font{
          color: aqua;
      }
    </style>

    <script src="js/jquery.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
       $(function () {
           //嵌套形式写法
           $('font font a').css('font-size', '100px')
       });
    </script>

</head>
<body>
  <font>
      <font>
          <a href="http://www.baidu.com"> 百度一下</a>
      </font>
  </font>

</body>
//用jQuery来进行标签遍历	
  $(function(){
	           var hs=$('h1');
				for(var i=0;i<hs.length;i++){
					//hs[i].style.color="red";
					$(hs[i]).css('color','yellow');
				}
	});

示例程序4：属性选择器 

CSS 模式

jQuery 模式

描述

a[title]

$('a[title]')

获取具有这个属性的 DOM 对象

a[title=num1]

$('a[title=num1]')

获取具有这个属性=这个属性值的 DOM对
象

a[title^=num]

$('a[title^=num]')

获取具有这个属性且开头属性值匹配的
DOM 对象

a[title$=num]

$('a[title$=num]')

获取具有这个属性且结尾属性值匹配的
DOM 对象

a[title*=num]

$('a[title*=num]')

获取具有这个属性且属性值含有一个指定
字串的 DOM 对象

a[title!=num]

$('a[title!=num]')

获取具有这个属性且不等于属性值的
DOM 对象

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
       $(function () {
     $('div[id=div1]').css('color','red');
     // $('font[id=f1]').css('color', 'red');
      $('font[color^=y]').css('color', 'red');
       });
    </script>

</head>
<body>
  <div id="div1">
      我的div1标签
  </div>
      <font id="f1" color="yellow">
         我是font标签
      </font>
</body>
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script src="js/jquery.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
       $(function () {

           //$('ul li a').css()
           $('ul').find('li').find('a').css('color','red');//用find方法调子标签

           //$('div>button').css('background','red');
           $('div').children().css('color', 'red');//所有的子标签
           
           $('ul').next('ul').next('div').children('button').css('font-size', '50px');
       });
    </script>

</head>
<body>
        <ul>
            <li><a href="#">asdfasfda</a></li>
        </ul>
        <ul>
            <li>asfdasdfasdfasdfasd</li>
        </ul>
        <div id="">
            <button type="button">asdfasfda</button>
            <button type="button">asdfasfda</button>
            <button type="button">asdfasfda</button>
            <button type="button">asdfasfda</button>
</div>
</body>
$(function() {
		$('h1').prevA('ul').css('color','red'); 选择我的上一兄弟元素
		$('h1').prevAll('ul').css('color','red'); //选择上面所有的兄弟元素
		$('#hehe').nextUntil('h4').css('color','red'); //遇到nextUntil('h4')里面的写的这个元素,就停止选择
		$('h4').siblings('h2').css('color','green');
	});

 

CSS 操作方法

方法名

描述

css(name)

获取某个元素行内的 CSS 样式

css([name1, name2, name3])

获取某个元素行内多个 CSS 样式 注意返回的是JSON对象 键是属性名值是属性值

css(name, value)

设置某个元素行内的 CSS 样式

css(name, function (index, value) )

设置某个元素行内的 CSS 样式

css({name1 : value1, name2 : value2})

设置某个元素行内多个 CSS 样式

addClass(class)

给某个元素添加一个 CSS 类

addClass(‘class1 class2 class3...’)

给某个元素添加多个 CSS 类

removeClass(class)

删除某个元素的一个 CSS 类

removeClass(‘class1 class2 class3...’)

删除某个元素的多个 CSS 类

toggleClass(class)

来回切换默认样式和指定样式

toggleClass(class1 class2 class3...)

同上

toggleClass(class, switch)

来回切换样式的时候设置切换频率

toggleClass(function () {})

通过匿名函数设置切换的规则

toggleClass(function () {}, switch)

在匿名函数设置时也可以设置频率

toggleClass(function (i, c, s) {}, switch)

在匿名函数设置时传递三个参数

 

 

$('div').css('color'); //获取元素行内 CSS 样式的颜色
$('div').css('color', 'red'); //设置元素行内 CSS 样式颜色为红色

在 CSS 获取上，我们也可以获取多个 CSS 样式，而获取到的是一个对象数组，如果用传统方式进行解析需要使用 for in 遍历。
var box = $('div').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象
for (var i in box) { //逐个遍历出来alert(i + ':' + box[i]);}

var v=$('#myh').css(['color','font-size']);

alert(v.[“font-size”]);// 通过键找值，取出css属性所对应的值
jQuery 提供了一个遍历工具专门来处理这种对象数组，
$.each()方法，这个方法可以轻松的遍历对象数组。
$.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组alert(attr + ':' + value);});
使用$.each()可以遍历原生的 JavaScript 对象数组，如果是 jQuery 对象的数组怎么使用.each()方法呢？
$('div').each(function (index, element) { //index 为索引，element 为元素 DOMalert(index + ':' + element);});
在需要设置多个样式的时候，我们可以传递多个 CSS 样式的键值对即可。
$('div').css({'background-color' : '#ccc','color' : 'red','font-size' : '20px'});
如果想设置某个元素的 CSS 样式的值，但这个值需要计算我们可以传递一个匿名函数。
$('div').css('width', function (index, value) {return (parseInt(value) - 500) + 'px';});
除了行内 CSS 设置，我们也可以直接给元素添加 CSS 类，可以添加单个或多个，并且也可以删除它。
$('div').addClass('red'); //添加一个 CSS 类
$('div').addClass('red bg'); //添加多个 CSS 类
$('div').removeClass('bg'); //删除一个 CSS 类
$('div').removeClass('red bg'); //删除多个 CSS 类我们还可以结合事件来实现 CSS 类的样式切换功能。
$('div').click(function () { //当点击后触发
$(this).toggleClass('red size'); //单个样式多个样式均可});
.toggleClass()方法的第二个参数可以传入一个布尔值， true 表示执行切换到 class 类， false表示执行回默认 class 类(默认的是空 class)，运用这个特性，我们可以设置切换的频率。
var count = 0;$('div').click(function () { 
//每点击两次切换一次 red$(this).toggleClass('red', count++ % 3 == 0);});
默认的 CSS 类切换只能是无样式和指定样式之间的切换，如果想实现样式 1 和样式 2之间的切换还必须自己写一些逻辑。
$('div').click(function () {
$(this).toggleClass('red size'); //一开始切换到样式 2
if ($(this).hasClass('red')) { //判断样式 2 存在后
$(this).removeClass('blue'); //删除样式 1
} else {
$(this).toggleClass('blue'); //添加样式 1，这里也可以 addClass
}
});

 

CSS 方法

方法名

描述

width()

获取某个元素的长度

width(value)

设置某个元素的长度

width(function (index, width) {})

通过匿名函数设置某个元素的长度

height()

获取某个元素的长度

height(value)

设置某个元素的长度

height(function (index, width) {})

通过匿名函数设置某个元素的长度

包裹节点

    jQuery 提供了一系列方法用于包裹节点， 那包裹节点是什么意思呢？

     其实就是使用字符串代码将指定元素的代码包含着的意思。

方法名

描述

wrap(html)

向指定元素包裹一层 html 代码

wrap(element)

向指定元素包裹一层 DOM 对象节点

wrap(function (index) {})

使用匿名函数向指定元素包裹一层自定义内容

unwrap()

移除一层指定元素包裹的内容

wrapAll(html)

用 html 将所有元素包裹到一起

wrapAll(element)

用 DOM 对象将所有元素包裹在一起

wrapInner(html)

向指定元素的子内容包裹一层 html

wrapInner(element)

向指定元素的子内容包裹一层 DOM 对象节点

wrapInner(function (index) {})

用匿名函数向指定元素的子内容包裹一层

$('div').wrap('<strong></strong>'); //在 div 外层包裹一层strong
$('div').wrap('<strong>123</strong>'); //包裹的元素可以带内容
$('div').wrap('<strong><em></em></strong>'); //包裹多个元素
$('div').wrap($('strong').get(0)); //也可以包裹一个原生 DOM
$('div').wrap(document.createElement('strong')); //临时的原生 DOM
$('div').wrap(function (index) { //匿名函数
return '<strong></strong>';});
$('div').unwrap(); //移除一层包裹内容，多个需移除多次
$('div').wrapAll('<strong></strong>'); //所有 div 外面只包一层 strong
$('div').wrapAll($('strong').get(0)); //同上
$('div').wrapInner('<strong></strong>'); //包裹子元素内容
$('div').wrapInner($('strong').get(0)); //DOM 节点
$('div').wrapInner(function () { //匿名函数return '<strong></strong>';});
 
注意：.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体，分别包含一层外层；后者将所有元素作为一个整体作为一个独立体，只包含一层外层。这两种都是在外层包含，而.wrapInner()在内层包含。
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.demo {
				background: #00FFFF;
				width: 200px;
				height: 200px;
			}	
		</style>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			  // $('h1').wrap('<div></div>');
			  //每个h1外面包一个div
			    $('h1').wrap(document.createElement('div')); //给标签外面包裹一个标签
				
				//$('h1').unwrap(); //去掉这个标签的外层包裹
				
				//给所有的h2外面包裹一个div
				  $('h2').wrapAll(document.createElement('div'));
				  
				  $('div').wrapInner('<div></div>')
			});
		</script>
	</head>
	<body>
			<h1>adfadsfa</h1>
			<h1>adfadsfa</h1>
			<h1>adfadsfa</h1>
			<h1>adfadsfa</h1>
			<h2>adfadsfa</h2>
			<h2>adfadsfa</h2>	
			<div id="">
				<h3>adfadsfa</h3>
				<h3>adfadsfa</h3>
			</div>	
	</body>

 

      除了对元素内容进行设置和获取，通过 jQuery 也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。

方法名

描述

attr(key)

获取某个元素 key 属性的属性值

attr(key, value)

设置某个元素 key 属性的属性值

attr({key1:value2, key2:value2...})

设置某个元素多个 key 属性的属性值

attr(key, function (index, value) {})

设置某个元素 key 通过 fn 来设置

removerAttr(属性名称)      根据属性名称移除某个属性 

<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script src="js/jquery.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
       $(function () {
         var v=$('h1').find('font').attr('size');
         alert(v);
           // $('h1').find('font').removeAttr('color');
       });
    </script>

</head>
<body>
<h1>
    <font size="7" color="red" face="arial">标签之间的文本</font>
</h1>
<h2>有一行旧的数据</h2>
<input type="text" id="" value="张三" />
<input type="text" id="" color="red" value="张三" />
</body>
$(function() {
			   //index 你选的元素的索引 value 属性的旧值
			   $('input').css('color',function(index,value){
				 if(index==0){
					 return 'red'; 
				 }else{
					  return 'yellow'; 
				 }
				  
		 });

 

$('div').attr('title'); //获取属性的属性值
$('div').attr('title', '我是域名'); //设置属性及属性值
$('div').attr('title', function () { //通过匿名函数返回属性值return '我是域名';});
$('div').attr('title', function (index, value) { 
//可以接受两个参数return value + (index+1) + '，我是域名';});

//注意：attr()方法里的 function() {}，可以不传参数。可以只传一个参数 index，表示当前元素的索引(从 0 开始)。也可以传递两个参数 index、value，第二个参数表示属性原本的值。

//注意：我们也可以使用 attr()来创建 id 属性，但我们强烈不建议这么做。这样会导致整个页面结构的混乱。 当然也可以创建 class 属性， 但后面会有一个语义更好的方法来代替 attr()方法，所以也不建议使用。
<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.demo {
				background: #00FFFF;
				width: 200px;
				height: 200px;
			}
		

		
		</style>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$('#btn1').click(function(){
					$('div').width('500px').height('500px');
				});
				
				$('#btn2').click(function(){
					$('div').width('100px').height('100px');
				});
				
			});
		</script>
	</head>
	<body>
		<div id="" class="demo">
			
		</div>
		<button type="button" id="btn1">变大</button>
		<button type="button" id="btn2">变小</button>
	</body>
$(function() {
				var v=$('<font color=red>一行文字</font>');
				$('body').append(v);//将v标签添加到body标签中
				$('h2').appendTo('div'); //把一个标签移动到另一个标签内部的后面
				$('h3').prependTo('div');//把一个标签移动到另一个标签内部的前面
			});
<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.demo {
				background: #00FFFF;
				width: 200px;
				height: 200px;
			}
	
		
		</style>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			 //$('div').after('<h4>asdfasfdsdf</h4>');
			 $('h2').insertAfter('div');
			});
		</script>
	</head>
	<body>
		<h2>2222</h2>
		<h3>asdfasdf33333333333333333333</h3>
		<div id="">
			<h1>adfadsfa</h1>
			
		</div>
		
	</body>

html()方法和text()方法 

方法名

描述

html()

获取元素中 HTML 内容

html(value)

设置元素中 HTML 内容

text()

获取元素中文本内容

text(value)

设置原生中文本内容

val()

获取表单中的文本内容

val(value)

设置表单中的文本内容

 

<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//获取标签直接的内容
				var v = $('h1').text();
				var v2=$('h1').html();
				//设置标签之间的内容
               $('h2').text("这是文本数据");
			   $('h2').html($('h2').text()+"<font color='red'>这是文本</font>");
			   var value=$('input').eq(0).val();
			   alert(value);
			  $('input').eq(1).val("李四");
			});
		</script>
	</head>
	<body>
		<h1>
			<font>标签之间的文本</font>
		</h1>
		<h2>有一行旧的数据</h2>
		<input type="text" id="" value="张三" />
		<input type="text" id="" value="张三" />
	</body>

jQuery动画

一．显示、隐藏jQuery 中显示方法为：.show()，隐藏方法为：.hide()。在无参数的时候，只是硬性的显示内容和隐藏内容。
$('.show').click(function () { //显示
  $('#box').show();
});

$('.hide').click(function () { //隐藏
  $('#box').hide();
});

在.show()和.hide()方法可以传递一个参数，这个参数以毫秒(1000 毫秒等于 1 秒钟)来控制速度。并且里面富含了匀速变大变小，以及透明度变换。
$('.show').click(function () {
  $('#box').show(1000); //显示用了 1 秒
});

$('.hide').click(function () {
  $('#box').hide(1000); //隐藏用了 1 秒
});
除了直接使用毫秒来控制速度外，jQuery 还提供了三种预设速度参数字符串：slow、normal 和 fast，分别对应 600 毫秒、400 毫秒和 200 毫秒。

$('.show').click(function () {
$('#box').show('fast'); //200 毫秒
});
<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				height: 300px;
				width: 200px;
				background: #00FFFF;
			}
		</style>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$('button').eq(0).click(function(){
					$('div').show(1000);
				});
				
				$('button').eq(1).click(function(){
					$('div').hide(1000);
				})
				
					$('button').last().click(function(){
					$('div').toggle(1000); //参数动画的执行
				})
					
			  
			});
		</script>
	</head>
	<body>
		 <div id="">
		 	
		 </div>
		 <button type="button">显示</button>
		 <button type="button">隐藏</button>
		 <button type="button">显示隐藏切换</button>
	</body>
<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				height: 300px;
				width: 200px;
				background: #00FFFF;
			}
		</style>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$('button').eq(0).click(function(){
					$('div').slideDown(1000)
				});
				
				$('button').eq(1).click(function(){
					$('div').slideUp();
				})
				
					$('button').last().click(function(){
					$('div').slideToggle(1000); //参数动画的执行
				})
					
			  
			});
		</script>
	</head>
	<body>
		 <div id="">
		 	
		 </div>
		 <button type="button">下拉</button>
		 <button type="button">上卷</button>
		 <button type="button">下拉上卷切换</button>
	</body>

 

<body>
<div class="box">我</div>
<div class="box">爱</div>
<div class="box">你</div>
<button class='showdiv'>显示</button>
<button class='hiddendiv'>隐藏</button>
</body>
逐个显示 和 逐个隐藏
$('.showdiv').click(function(){
    $('.box').first().show(1000,function myshow(){
              //this 当前的对象
            $(this).next().show(1000,myshow);//递归调用 myshow这个函数
    });
});

//逐个隐藏
$('.hiddendiv').click(function(){
    $('.box').last().hide(1000,function myshow(){

   $(this).prev().hide(1000,myshow);

   });
});
<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				height: 300px;
				width: 200px;
				background: #00FFFF;
			}
		</style>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$('button').eq(0).click(function(){
					$('div').fadeOut(1000);
				});
				
				$('button').eq(1).click(function(){
					$('div').fadeIn(1000);
				})
				
					$('button').last().click(function(){
					$('div').fadeToggle(1000); //参数动画的执行
				})
					
			  
			});
		</script>
	</head>
	<body>
		 <div id="">
		 	
		 </div>
		 <button type="button">渐隐</button>
		 <button type="button">渐现</button>
		 <button type="button">渐隐渐现卷切换</button>
	</body>

jQuery事件的绑定操作：

事件对象 event的属性

属性名

描述

type

获取这个事件的事件类型，例如：click

target

event.target 得到的是触发元素的 DOM对象

比如一个子层,在外层里面,给外层绑定了事件

那么你移入到子层,子层也能触发这个事件,那么event.targe获取到的是这个子层对象,因为他是触发事件的对象

currentTarget

currentTarget 得到的是监听元素的DOM对象,等同与 this

e. currentTarget 获取到的是,谁绑定的事件,那就是谁

relatedTarget

获取移入移出目标点,离开或进入的那个 DOM 元素

data

获取事件调用时的额外数据

which

获取鼠标的左中右键(1,2,3)，或获取键盘按键

timeStamp

获取事件触发的时间戳(当前时间的毫秒值)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script src="js/jquery.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
      $(function () {
          //给元素绑定事件，简写
          $('div').click(function (e) {
              //alert(e.target); //触发了事件的那个对象
              //alert(e.currentTarget); //你给谁绑定事件,拿的是绑定了事件的那个对象
             // e.target.style.background="yellow";//外层绑定，子层触发，点击按钮，按钮背景变为黄色
             // e.currentTarget.style.backgroundColor="red";//点击按钮，div背景变为红色
             $(e.target).text(e.timeStamp);//点击按钮的时候。会在按钮中显示当前的时间毫秒值

          });
      });
    </script>

</head>
<body>
<div id="" style="width: 200px;height: 300px;background: #00FFFF;">
    <button type="button">点我呀</button>
    <button type="button">点我呀</button>
    <button type="button">点我呀</button>

</div>
</body>
</html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script src="js/jquery.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
      $(function () {
          //给元素绑定事件
          // $('button').first().bind('click',function () {//给第一个button绑定点击事件
          //     alert("我执行了")
          // });
          // $('button').last().bind('click',function () {//给最后一个button绑定点击事件
          //     alert("我执行了");
          // }).bind('mouseout',function () {//给最后一个按钮元素绑定多个事件，此处为鼠标移开事件
          //    $(this).css('background', 'yellow');//  $(this)这里要用this进行指定，否则对象会变成window
          // })
//给元素解绑事件
         // $('button').last().unbind();//给元素解绑全部绑定的事件

          var v1=function () {
              alert("我是第一个函数执行了");
          }
          var v2 = function () {
              alert("我是第er个函数执行了");
          }
          //给一个元素绑定多个处理函数
          $('button').eq(1).click(v1);
          $('button').eq(1).click(v2);

//解绑其中一个处理函数
          $('button').eq(1).unbind('click', v1);
      });
    </script>

</head>
<body>
    <button type="button">点我呀</button>
    <button type="button">点我呀</button>
    <button type="button">点我呀</button>
</body>
//这个事件只执行一次
			    $('button').last().one('click',function(){
			  				  alert(100);
			  });