<!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. 高级C++开发工程师综合测试题（风林火山）

    题目要求:代码要求能够直接编译运行 1.       请实现一个函数:凑14:输入很多个整数(1<=数值<=13),任意两个数相加等于14就可以从数组中删除这两个数,求剩余数(按由小到大排 ...

  2. Reactive native 项目创建失败如何处理

    首先感谢党的英明决策. 一开始我总觉得Awesomeproject这个名字是固定的,和我有同感的同学请举手. 其实我们可以起任意的名字,执行native react init碰到的最大的问题是 npm ...

  3. R语言-Knitr包的详细使用说明

    R语言-Knitr包的详细使用说明 by 扬眉剑 来自数盟[总舵] 群:321311420 1.相关资料 1:自动化报告-谢益辉 https://github.com/yihui/r-ninja/bl ...

  4. iOS7 人机界面设计指南

    iOS7 人机界面设计指南     苹果在WWDC 2013大会上发布了iOS 7,新系统一改5年来的拟物路线,在乔纳森•艾维的主导下,加入了更多的“扁平化”和“极简”现代设计元素. iOS7系统界面 ...

  5. Windows 环境下基于 Redis 的 Celery 任务调度模块的实现

    搭建环境: Windows-x64 10 Celery 3.1.23 Celery-with-redis 3.0 Redis-win32-win64 2.4.5   实现步骤: 1.安装 Redis ...

  6. mybatis-generator-core自动生成do、mapping、dao 代码

    使用mybatis配置映射文件,有点麻烦,容易出错,可以使用jar工具自动生成代码,即高效又方便 一.下载两个jar,并放置在G:\tool\maven\generator目录下(自己定义) myba ...

  7. file_put_contents() failed to open stream: Permission denied 问题解决

    很长时间没有写PHP了,今天突然有个需求要写一个保存文件的功能. function downloadFile( $url , $savePath = '' ) {     $fileName = ge ...

  8. BZOJ 1878: [SDOI2009]HH的项链 离线树状数组

    1878: [SDOI2009]HH的项链 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/p ...

  9. 详解Android Handler的使用

    我们进行Android开发时,Handler可以说是使用非常频繁的一个概念,它的用处不言而喻.本文就详细介绍Handler的基本概念和用法. Handler的基本概念         Handler主 ...

  10. 二、Socket之UDP异步传输文件

    上一篇文章一.Socket之UDP异步传输文件中,实现了文件的基本传输,但是传输过程中的信息是看不到的,这一篇是对上一篇进行了一些改进,并且可以了解传输的信息(加入了Log),还加入了接收或者拒绝接收 ...