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 ...
随机推荐
- 关于UIImage类的对象两种初始化方法的区别
1.imageNamed: UIImage *image = [UIImage imageNamed:"]; UIImage的类方法 第一次读取图片的时候,先把这个图片放到缓存中,下次再使用 ...
- PHP魔术变量总结
php手册里面的解释 __FUNCTION__ returns only the name of the function 返回的仅仅是函数的名称 __METHOD__ returns t ...
- Android设计模式系列--观察者模式
观察者模式,是一种非常常见的设计模式,在很多系统中随处可见,尤其是涉及到数据状态发生变化需要通知的情况下.本文以AbstractCursor为例子,展开分析.观察者模式,Observer Patter ...
- systemd service
Man page systemd.unit SYSTEMD.UNIT(5) systemd.unit SYSTEMD.UNIT(5) NAME systemd.unit - Unit configur ...
- android开发学习：打电话和发短信
1.新建一个android项目 File--New--Other--android application project 填写application name(就是应用的名字.比方:天天酷跑) 填写 ...
- [MODx] 6. Cache '!' with login package
1. Install login package. 2. Create a Template called 'login': [[!Login? &loginResourceId=`13` / ...
- iOS开发——UI篇OC篇&UITableView多项选择
UITableView多项选择 自定义cell和取到相应的cell就行了 TableViewCell.h #import <UIKit/UIKit.h> @interface TableV ...
- 360开源的类Redis存储系统:Pika
Pika 是 360 DBA 和基础架构组联合开发的类 Redis 存储系统,完全支持 Redis 协议,用户不需要修改任何代码,就可以将服务迁移至 Pika.有维护 Redis 经验的 DBA 维护 ...
- [000]socket通信--server和client实现的简单例子
在C语言中就学过scanf和printf,其实理解socket就跟这两个输入输出差不多,只不过是信息的传输而已. 1.TCP服务器端(server)的默认函数调用顺序: 按照上述的调用顺序,我们可以来 ...
- [C++]对象的销毁机制
销毁时会按照从后向前的顺序销毁,也就是说,越在后面定义的对象会越早销毁.其中的原因就是函数是在栈中保存的,因此,先定义的对象先压栈,所以在退栈时就会后销毁.而如果参数有多个的话,大多数编译器是从右开始 ...