<!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. 楔子（xiē zǐ）

    戏曲.小说的引子.一般放在篇首,用以点明.补充正文,或者说引出正文或是为正文做铺垫.指旧小说的引子,通常放在小说故事开始之前,起引出或补充正文的作用.这不过是个楔子,下面还有正文.——<儒林外史 ...

  2. MySql实现远程连接

    MySql实现远程连接 1.进入mysql,创建一个新用户root,密码为root: 格式:grant 权限 on 数据库名.表名 to 用户@登录主机 identified by "用户密 ...

  3. XMIND

    XMind 是一款非常实用的商业思维导图软件,应用全球最先进的Eclipse RCP 软件架构,全力打造易用.高效的可视化思维软件,强调软件的可扩展.跨平台.稳定性和性能,致力于使用先进的软件技术帮助 ...

  4. linux mail命令用法

    在Linux系统下mail命令的测试 1. 最简单的一个例子: mail -s test admin@aispider.com 这条命令的结果是发一封标题为test的空信给后面的邮箱,如果你有mta并 ...

  5. 作为平台的Windows PowerShell（一）

    除了作为一种脚本语言外,Windows PowerShell被多种应用程序使用.这是因为Windows PowerShell引擎可以被托管在一个应用程序内部.这篇博文和下一篇博文将会处理在C#应用程序 ...

  6. 2014 ACM/ICPC 鞍山赛区现场赛 D&amp;I 解题报告

    鞍山现场赛结束了呢-- 我们出的是D+E+I三道题-- 吾辈AC掉的是D和I两道,趁着还记得.先在这里写一写我写的两道水题D&I的解题报告吧^_^. D题的意思呢是说星云内有一堆排成一条直线的 ...

  7. 一个方便的shell命令，查看软件安装目录

    查看软件安装路径:whereis phpfind / -name nginx.configfind 查找 / 从根目录 -name 文件查找

  8. LVS DR模型

    1,环境 VMWare10, CentOS6.3 2,LVS DR网络规划 所有机器都只需要一张网卡,给Director的eth0网卡起个别名eth0:1即VIP的值:给RealServer的lo网卡 ...

  9. [Web] What Is JSONP?

    JSONP—or JSON with padding—is a sneaky technique that web developers came up with to work around the ...

  10. ADO.Net的小知识（连接数据库）二

    上次提到数据库连接有两种形式断开式连接和打开式连接,断开式连接我已经讲解了,下面我来给大家讲解一下打开式连接 (1)引入命名空间:using System.Data.SqlClient; 该语句用于导 ...