javascript 第28节 jQuery事件、迭代、样式
<!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事件、迭代、样式的更多相关文章
- javascript 第26节 jQuery对象
<html> <head> <title>jQuery</title> <!--导入jquery库--> <script type=& ...
- javascript 第27节 jQuery选择器
下面的html需要以下2个文件: 1.style.css div,span,p { width:140px; height:140px; margin:5px; background:#aaa; bo ...
- jQuery事件和JavaScript事件
1.JavaScript事件: 属性 当以下情况发生时,出现此事件 FF N IE onabort 图像加载被中断 1 3 4 onblur 元素失去焦点 1 2 3 onchange 用户改变域的内 ...
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...
- jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
- 【Python全栈-JavaScript】jQuery事件
jQuery事件 一.页面载入 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向 w ...
- javascript事件委托和jquery事件委托
元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...
- Javascript和jquery事件-鼠标移入移出事件
javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...
- JQuery操作样式以及JQuery事件机制
1.操作样式 1.1 css的操作 功能:设置或者修改样式,操作的是style属性 操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...
随机推荐
- [二]Json-lib的用法
1.Json字符串 PrintWriter out=response.getWriter(); // String resultJson="{\"name\":\&quo ...
- ASP.NET 学习的总结
应用程序域 使用.Net建立的可执行程序*.exe,并没有直接承载到进程当中,而是承载到应用程序域(AppDomain)当中.应用程序域是.Net引入的一个新概念,它比进程所占用的资源要少,可以被看做 ...
- PostgreSQL的prepare 和 execute 动作背后
我给PostgreSQL的源代码加入了调试信息以后,会有如下表现: 我执行Prepare: postgres=# prepare s(; PREPARE postgres=# 背后的反应: ** In ...
- ThinkPHP CURD方法盘点：page方法
page方法也是模型的连贯操作方法之一,是完全为分页查询而诞生的一个人性化操作方法. 用法 我们在前面已经了解了关于limit方法用于分页查询的情况,而page方法则是更人性化的进行分页查询的方法,例 ...
- 12.1 文档相关 Webbrowser 该文档已被修改，是否保存修改结果
附件:http://files.cnblogs.com/xe2011/Webbrowser_Document_IsModified.rar 该文档已被修改,是否保存修改结果?是:保存修改结果 ...
- ORACLE 毫秒与日期的相互转换
毫秒转换为日期 SELECT TO_CHAR(1406538765000 / (1000 * 60 * 60 * 24) + TO_DATE('1970-01-01 08:00:00', 'YYYY- ...
- STL之Map的运用
Map是c++的一个标准容器,她提供了非常好一对一的关系,在一些程序中建立一个map能够起到事半功倍的效果,总结了一些map基本简单有用的操作! 1. map最主要的构造函数: map<s ...
- [置顶] MySQL Cluster初步学习资料整理--安装部署新特性性能测试等
1.1 mysql-cluster简介 简单的说,MySQLCluster实际上是在无共享存储设备的情况下实现的一种完全分布式数据库系统,其主要通过NDBCluster(简称NDB)存储引擎来实现. ...
- 文件I/O（不带缓冲）之read函数
调用read函数从打开文件中读数据. #include <unistd.h> ssize_t read( int filedes, void *buf, size_t nbytest ); ...
- 无法找到AdbWinApi.dll问题解决 .
无法找到AdbWinApi.dll问题解决: 1. 现象: 在运行程序时,显示“无法启动此程序,因为丢失AdbWinApi.dll”.2. 解决方法: 到SDK的platform-tools和 ...