<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Event</title>

<style type="text/css">

*{margin:0;padding:0;}

body {

	font-size: 13px;

	line-height: 130%;

 }

#panel1,#panel2,#panel3,#panel4 {

	width: 300px;

	border: 1px solid #0050D0;

	margin-top:20px;

	margin-left:30px; }

	.head { padding: 5px;

	background: #96E555;

	cursor: pointer

 }

.content {

	padding: 10px;

	text-indent: 2em;

	border-top: 1px solid #0050D0;

	display:block;

	display:none;

 }

.s1 {

	font-size : 30px;

	font-weight : bold;

	color : red;

	font-family :华文行楷,黑体;

	margin-top : 20px;

	border-bottom : 2px solid red;

	padding-bottom : 15px;

}

.title {

	margin : 20px;

	font-size : 16px;

	color : red;

	font-weight : bold;

}

.content2 {

	color : black;

	font-weight : normal;

	border : 1px solid red;

	padding : 10px;

	margin : 10px;

	line-height : 20px;

	font-size : 13px;

	background-color : pink;

}

</style>

<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript">

   $(function() {

	 //隐藏 显示

	   $("#panel1 .head").click(function () {

		   //alert("Hello");

		   if($(this).next().is(":hidden")) {

				 $(this).next().show();

		   } else {

				  $(this).next().hide();

		   }

	   });

	  //链式编程

	   $("#panel2 .head").mouseover(function() {

				$(this).next().show();

		}).mouseout(function() {

				$(this).next().hide();

		});

/*

		 $("#panel2 .head").mouseout(function() {

				$(this).next().hide();

		})

*/

	  $("input:eq(1)").click(function() {

			$("input:eq(0)").bind("click", function() { alert("Hello")});

	  });

	   $("input:eq(2)").click(function() {

			$("input:eq(0)").unbind("click");

	  });

	   $("input:eq(3)").click(function() {

			$("input:eq(1)").trigger("click");

	  });

	})

</script>

</head>

<body>

<div class="s1">jQuery中的事件处理</div>

<div id="panel1">

	<h5 class="head">什么是jQuery?</h5>

	<div class="content">

		jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

	</div>

</div>

<div id="panel2">

	<h5 class="head">什么是jQuery?</h5>

	<div class="content">

		jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

	</div>

</div>

<div class="title">

<div class="content2">

	<input type="button" value="按钮1"/>

	<input type="button" value="给按钮1添加事件"/>

	<input type="button" value="删除按钮1事件"/>

	<input type="button" value="触发按钮2事件"/>

</div>

</div>

</body>

</html>

rs:

2.知识

3.迭代

<html>

<head>

	<title>jQuery</title>

	<style type="text/css">

	  .sty1{

			border:1px solid green;

			background-color:pink;

			width:100px;

			height:80px;

			text-align:center;

			line-height:80px;

			color:green;

	  }

	   .sty2 {

			border:1px solid blue;

			background-color:pink;

			width:200px;

			height:100px;

			text-align:center;

			line-height:80px;

			color:blue;

		}

	</style>

	<!--导入jquery库-->

	<script type="text/javascript" src="jquery-1.7.2.js"></script>

	<script type="text/javascript">

		$(function () {

			$("input:eq(0)").click(function() {

				var $li = $("ul li");

				for(var i = 0; i < $li.size(); i++ ) {

					  // alert($li[i].innerHTML);

					  alert($li.get(i).innerHTML);//document对象

				}

			});

			$("input:eq(1)").click(function() {

				var $li = $("ul li");

				 $li.each( function () {//迭代

					 alert( $(this).text());//this 表示集合中的元素  DOM

				 })

			});

			$("input:eq(2)").click(function() {

				var index = $("li").index($("#as"));

				alert(index);

			});

			$("input:eq(3)").click(function() {

				$("#show").addClass("sty1");

			});

			$("input:eq(4)").click(function() {

				$("#show").removeClass("sty1");

			});

			$("input:eq(5)").click(function() {

				$("#show").removeClass("sty1");

			   $("#show").addClass("sty2");

			});

		})

	</script>

	</head>

	<body>

	<div >jQuery对象</div>

		1. 对象</br>

		<ul>

			<li>苹果</li>

			<li id="as">草莓</li>

			<li>香蕉</li>

			<li>西瓜</li>

			<li>菠萝</li>

		</ul>

		<input type="button" value="迭代1" />

		<input type="button" value="迭代2" />

		<input type="button" value="索引" /></br>

		2. 样式</br>

		<span id="show">span的元素</span><br/>

		<input type="button" value="添加样式" />

		<input type="button" value="删除样式" />

		<input type="button" value="改变样式" />

</body>

</html>

rs:

javascript 第28节 jQuery事件、迭代、样式的更多相关文章

  1. javascript 第26节 jQuery对象

    <html> <head> <title>jQuery</title> <!--导入jquery库--> <script type=& ...

  2. javascript 第27节 jQuery选择器

    下面的html需要以下2个文件: 1.style.css div,span,p { width:140px; height:140px; margin:5px; background:#aaa; bo ...

  3. jQuery事件和JavaScript事件

    1.JavaScript事件: 属性 当以下情况发生时,出现此事件 FF N IE onabort 图像加载被中断 1 3 4 onblur 元素失去焦点 1 2 3 onchange 用户改变域的内 ...

  4. JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

    http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

  5. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  6. 【Python全栈-JavaScript】jQuery事件

    jQuery事件 一.页面载入 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向 w ...

  7. javascript事件委托和jquery事件委托

    元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...

  8. Javascript和jquery事件-鼠标移入移出事件

    javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...

  9. JQuery操作样式以及JQuery事件机制

    1.操作样式     1.1 css的操作     功能:设置或者修改样式,操作的是style属性 操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...

随机推荐

  1. Android Error

    [2016-03-27 13:00:51 - XWeChat] Dx warning: Ignoring InnerClasses attribute for an anonymous inner c ...

  2. ios常用动画

    // // CoreAnimationEffect.h // CoreAnimationEffect // // Created by VincentXue on 13-1-19. // Copyri ...

  3. 通过VMName获取VM IP

    PS3.0下通过测试,PS2.0下没有 networkAdapters 这个属性: $vmname = "22012r2" $v = get-vm |where {$_.name ...

  4. -join 和 -split 用法

    具体可参考 PowerShell_ISE的帮助文件: -Join(一元联接运算符): 一元联接运算符 (-join <string[]>) 的优先级高于逗号.因此,如果向一元联接运算符提交 ...

  5. nginx,FastCGI启动语句

    /etc/init.d/nginx restart spawn-fcgi -a 127.0.0.1 -p 9000 -C 10 -u www-data -f /usr/bin/php-cgi

  6. Codeforces Round #200 (Div. 1)D. Water Tree dfs序

    D. Water Tree Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/343/problem/ ...

  7. 第二周：01 ICP迭代交互

    本周主要任务01:利用PCL库函数,ICP融合两个角度的点云 任务时间:2014年9月8日-2014年9月14日 任务完成情况:可以使用键盘交互,显示每次ICP迭代结果 任务涉及基本方法: 1.PCL ...

  8. Android下得到APK包含信息

    很多情况下,我们需要通过APK文件来得到它的一些信息. (此时此APK不一定被安装了) 0. 基础知识:可以通过android.content.Context的方法 getPackageManager ...

  9. android115 自定义控件

    布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...

  10. window.top、window.parent

    iframe和frameset中可能会用到window.parent.window.top 其中window.parent是相对于打开子页面的当前js所在页面的层级: 例如:a页面中包含一个ifram ...