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 ...
随机推荐
- [支付]银联支付（对jdk有要求，最好直接使用jdk7）
数据打包发送到银联服务端,银联返回一个html页面,打开这个页面会自动跳转到银联的支付界面,支付完成后会有前台通知和后台通知,需要注意的是后台通知地址的ip必须是公网ip(广域网ip).这个时候需要配 ...
- spring3.2.2+mybatis3.2.3+c3p0项目整合
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 如何使用Linux通用后门(转zafe)
特别提示:仅用于安全测试和教学,禁止非法用途. 标题党了,呵呵 其实就是个ssh后门,基本可以不用看内核版本,很简单,为照顾新手! ********************************** ...
- Ledongli
Ledongli.rar
- springMVC整合xStream
一. 简单介绍: xStream能够轻易的将Java对象转换成xml.JSON.本篇博客将使用springMVC整合利用xStream转换xml. 关于xStream使用的博文:http://blog ...
- flash builder 4.7 debug via usb device iPhone 4s - device not found
http://forums.adobe.com/message/4865192 Please provide more info on the above issue: 1.What is the m ...
- emplace_back与push_back的区别
std::vector::emplace_back C++ Containers library std::vector template< class... Args &g ...
- 说说log4cplus
<C++ primer 第五版>已经翻了一段时间了,每天早上的班车上看一个小时.书是好书,可惜很多知识还是停留在表面上.每天除了翻书,一是也找到不合适的方法进一步深入,晚上看到新闻联播的老 ...
- USB HID usage table
This usage table lets usbhidctl decode the HID data correctly for the APC RS/XS1000's. This work was ...
- python--介绍
语言类型介绍 编译与解释理解: 打个比方:假如你打算阅读一本外文书,而你不知道这门外语,那么你可以找一名翻译,给他足够的时间让他从头到尾把整本书翻译好,然后把书的母语版交给你阅读:或者,你也立刻让这名 ...