<!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. Unity3D的ugui之按钮事件

    为Unity3D的按钮添加事件有三种方式,假设我们场景中有一个Canvas对象,Canvas对象中有一个Button对象. 方式一: 创建脚本ClickObject.cs,然后将脚本添加到Canvas ...

  2. 剑指OFFER之从上往下打印二叉树（九度OJ1523）

    题目描述: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 输入: 输入可能包含多个测试样例,输入以EOF结束.对于每个测试案例,输入的第一行一个整数n(1<=n<=1000, : ...

  3. NUMBER_GET_NEXT

    1. SNRO /SNUM创建一个流水号对象 CALL FUNCTION 'NUMBER_RANGE_ENQUEUE' EXPORTING OBJECT = '' EXCEPTIONS FOREIGN ...

  4. C#-创建自定义双击事件

    .NET Compact Framework 不支持按钮的 Windows 窗体 DoubleClick 事件.但是您可以创建一个从 Button 类派生的控件来实现该事件. 创建自定义双击事件 创建 ...

  5. Project Management - 1) Schedule Your Project

    1. 根据项目的理解,列出主要的里程碑. (初始甘特图) 2. 多使用即时贴,甘特图可以贴在墙上以供项目组成员提醒. 3. 切忌过早细化项目日程,这样会让老板或出资人以为项目中几乎没有风险, 他们会把 ...

  6. 用csc命令行手动编译cs文件

    一般初学c#时,用记事本写代码,然后用命令行执行csc命令行可以编译cs文件.方法有两种 1:配置环境,一劳永逸 一般来说在C:\Windows\Microsoft.NET\Framework\v4. ...

  7. Fragment的使用简单介绍【Android】

    Fragment在实际项目开发中使用的越来越多,如今简介一下 布局文件: <LinearLayout xmlns:android="http://schemas.android.com ...

  8. android学习日记06--View视图

    一.android 界面开发 1.三个重要的类:View视图.Canvas画布.Paint画笔2.android 界面开发常用三种视图 View            --只能在主线程中更新,没有缓存 ...

  9. HIDKomponente使用读写Hid设备一瞥

    HIDKomponente 是delphi中使用的第三方Hid控件库,可以检测.控制连接到电脑的Hid设备.一般情况下多为usb设备.HIDKomponente的使用实际上很简单,只是因为第一次使用, ...

  10. myql定义和查看语句

     创建数据库: create database IF NOT EXISTS MY_TEST default charset utf8  COLLATE utf8_general_ci; 查看SQL语句 ...