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 ...
随机推荐
- Cocos2d-x 重写draw方法绘制直线等图形时被遮挡覆盖问题的一种解决方案
最近在学习过程cocos2dx的过程中需要使用到绘制直线的功能,所以我就采用了引擎中 ccDrawLine 方法,然后重写 draw 方法,在该方法中绘制直线. 但是出现了一个问题,那就是绘制的图形被 ...
- Web 应用的安全性
Web 应用的安全性包括用户认证(Authentication)和用户授权(Authorization)两个部分.用户认证指的是验证某个用户是否为系统中的合法主体,也就是说用户能否访问该系统.用户授权 ...
- docker——Dockerfile创建镜像
写在前面: 继续docker的学习,昨天用docker成功跑了tomcat,但是在centos中镜像跑的容器手动装jdk和tomcat,今天学习用Dockerfile创建镜像,并在上面搭建java环境 ...
- 【C++编程规范】编程需要避免的常见错误
前言 C++有不少陷阱或者容易失误的地方,稍不注意就会导致程序bug. 正文 1.无符号数和有符号数比较 #define只是简单的文本替换,如果替换的是简单数值,默认是int,和unsigned in ...
- mac下烦人的eclipse安装svn插件
eclipse作为一个鸡肋般的java ide,颇有食之无味弃之可惜之感.最近公司统一对电脑做了一些处理,搞的我的eclipse都不能用了.重新安装了一下,各种maven.svn,代码格式什么的依赖神 ...
- 火狐对innerHtml的支持问题
最新的Firefox是支持innerHTML的,但是不支持innerText.解决办法是将innerText换成textContent. $.getJSON("/api/Articles&q ...
- SqlServer按照指定顺序对字段进行排序
最近的一个项目,使用存储过程对报表进行分析,其中有一些名称需要根据指定顺序显示,而其名称对应的编号并不是按照要求的顺序排列的.通过上网查找资料,发现sql 中的charindex函数可以帮助解决这个问 ...
- 新浪旗下的SAE云服务入门
前言: 云服务已经火热很多年了,到了现在已经基本进入稳定期,稍微有实力的公司都会推出免费的云存储,像百度的还几个T,速度也不错.如果不担心数据安全问题,代替平时的U盘还是没有问题.而SAE是新浪在20 ...
- mvc ajax_返回数据
假设cshtml文件中是这样的: <script type="text/javascript"> $(document).ready(function(){ $(&qu ...
- 文件夹添加右键DOS快捷入口
1.自带的方法 win7: 按住shift键然后右键点击文件夹,菜单里会出现“在此处打开命令窗口”一项,其实就相当于在当前位置打开Dos窗口,这个是系统自带的. winxp: 打开“我的电脑”,点击菜 ...