JQuery基础三
1、checkbox操作：全选、全不选、反选
<!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>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () {
//全选
$('#btnAll').click(function () { $('div :checkbox').attr('checked', true);
});
//全不选
$('#btnNoAll').click(function () { $('div :checkbox').attr('checked', false);
});
//反选
$('#btnFX').click(function () { $('div :checkbox').each(function (index, ele) {
$(ele).attr('checked', !$(ele).attr('checked'));
});
});
}); </script>
</head>
<body>
<input type="button" name="name" value="全选" id="btnAll" />
<input type="button" name="name" value="全不选" id="btnNoAll" />
<input type="button" name="name" value="反选" id="btnFX" />
<div style="border: 1px solid red; height: 200px;">
<input type="checkbox" name="name" value="1" />忐忑
<input type="checkbox" name="name" value="2" />法海不懂爱
<input type="checkbox" name="name" value="3" />金箍棒
<input type="checkbox" name="name" value="4" />爱情买卖
<input type="checkbox" name="name" value="5" />最炫民族风
</div>
</body>
</html>
2、绑定事件
<!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>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//bind可以注册事件
// $('#btn').bind('click', function () {
// alert('点我了');
// }).bind('mouseover', function () {
// $(this).css('color', 'yellow');
// }); // $('#btn').click(function () { // }); // $('#btn').toggle(function () {
// alert('1');
// }).toggle(function () {
// alert('2');
// }).toggle(function () {
// alert('3');
// });
//鼠标进入和鼠标离开
$('input').hover(function () {
$(this).css('backgroundColor','red');
}, function () {
$(this).css('backgroundColor', '');
});
}); </script>
</head>
<body>
<!-- <input type="button" name="name" value="绑定" id="btn" />-->
<input type="text" name="name" value="" />
</body>
</html>
3、事件冒泡
<!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>
<title></title> <script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { //事件冒泡 $('div').click(function () {
alert($(this).attr('id'));
});
$('p').click(function () {
alert($(this).attr('id'));
});
$('strong').click(function () {
alert($(this).attr('id'));
return false;
});
}); </script>
</head>
<body>
<div id="dv" style=" width:300px; height:200px; background-color:Yellow;"> <p id="p1" style=" width:100px; height:100px; background-color:Blue;">
<strong id="st">加粗</strong>
</p>
</div>
</body>
</html>
<!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>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script> <script type="text/javascript">
$(function () { $('#btn').click({ "name": "小马" }, function (eee) {
alert(eee.data.name);
});
}); </script>
</head>
<body>
<input type="button" name="name" value="按钮" id="btn" />
</body>
</html>
4、让图片飞
<!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>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(document).mousemove(function (e) { $('#im').css('position', 'absolute').css({ "left": e.pageX, "top": e.pageY });
});
}); </script>
</head>
<body>
<img src="2.png" id="im" />
</body>
</html>
5、光标改变
<!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>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { $('div').click(function (e) {
// alert(e.target.id); }); $('div').mousedown(function (e) {
alert(e.which);
});
});
</script>
<style type="text/css"> div
{
width:300px;
height:200px;
background-color:Blue;
cursor:url(cur/dinosau2.ani);
} </style>
</head>
<body>
<div id="dv">
</div>
</body>
</html>
6、折叠菜单
<!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>
<title></title> <style type="text/css"> #u1 li
{
margin-bottom:10px;
background-color:Orange;
font-size:20px;
font-weight:bolder;
cursor:pointer;
}
#u1 li ul
{
list-style-type:none;
margin:0;
padding:0; } #u1 li ul li
{
background-color:pink;
}
</style>
<script src="../Scripts/jquery-1.10.2.js"></script> <script type="text/javascript"> $(function () { $('#u1 li ul li').hide(); $('#u1 li').click(function () {
$('ul li', $(this)).show(500);
$('ul li', $(this).siblings('li')).hide(500);
$('#san').attr('src','音乐的路径');
});
});
</script>
</head>
<body> <bgsound id="san" loop="0" src=""> <div style=" width:200px; height:500px; border:1px solid red;"> <ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
<li>
幼儿园同学
<ul>
<li>鼻涕虫</li>
<li>爱哭鬼</li>
<li>张大胆</li>
</ul>
</li>
<li>小学同学
<ul>
<li>张三丰</li>
<li>张无忌</li>
<li>乔布斯</li>
</ul>
</li>
<li>
初中同学
<ul>
<li>盖茨</li>
<li>种哥</li>
<li>奥巴马</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
7、层的显示和隐藏
<!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>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () {
//显示层
$('#btnShow').click(function () {
$('div').show(500);
});
$('#btnHide').click(function () {
$('div').hide(500);
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示层" id="btnShow" />
<input type="button" name="name" value="隐藏层" id="btnHide" />
<div style=" width:300px; height:200px; background-color:Blue;">
</div>
</body>
</html>
漂亮效果
<!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>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { $('#btnslideDown').click(function () {
$('div').slideDown(500);
});
$('#btnslideUp').click(function () {
$('div').slideUp(500);
});
$('#btnslideToggle').click(function () {
$('div').slideToggle(500);
});
//=======================
$('#btnfadeIn').click(function () {
$('div').fadeIn(1000);
});
$('#btnfadeOut').click(function () {
$('div').fadeOut(1000);
});
$('#btnfadeToggle').click(function () {
$('div').fadeToggle(500);
}); });
</script>
</head>
<body>
<input type="button" name="name" value="slideDown" id="btnslideDown" />
<input type="button" name="name" value="slideUp" id="btnslideUp" />
<input type="button" name="name" value="slideToggle" id="btnslideToggle" />
<input type="button" name="name" value="fadeIn" id="btnfadeIn" />
<input type="button" name="name" value="fadeOut" id="btnfadeOut" />
<input type="button" name="name" value="fadeToggle" id="btnfadeToggle" /> <div style=" width:300px; height:200px; background-color:Green;"> </div>
</body>
</html>
8、TAB显示
div:gt(0)选择器用于匹配所有大于指定索引的元素，将其封装为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>
<title></title>
<style type="text/css">
#dvTab
{
width: 500px; /* border: 1px solid blue;*/
height: 200px;
} #dvTab ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#dvTab ul li
{
text-align: center;
background-color: Yellow;
color: Red;
width: 100px;
font-weight: bolder;
font-size: 14px;
float: left;
border-right: 1px solid blue;
cursor: pointer;
} #dvTab div
{
width: 400px;
height: 200px;
border: 1px solid red;
}
</style>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { $('#dvTab div:gt(0)').hide();
$('#uu1 li').mouseover(function () { var tt = $(this).text();
switch (tt) {
case '新闻': $('#dvNews').show().siblings('div').hide(); break;
case '图片': $('#dvPic').show().siblings('div').hide(); break;
case '深度': $('#dvDeep').show().siblings('div').hide(); break;
case '军事': $('#dvMl').show().siblings('div').hide(); break;
} });
});
</script>
</head>
<body>
<div id="dvTab">
<ul id="uu1">
<li>新闻</li>
<li>图片</li>
<li>深度</li>
<li>军事</li>
</ul>
<div id="dvNews">
新闻新闻新闻
</div>
<div id="dvPic">
图片，图片图片图图片图片图图图片贴图
</div>
<div id="dvDeep">
深度深度深度深度十多年对于
</div>
<div id="dvMl">
军事军事军事军事
</div>
</div>
</body>
</html>
9、图片动画
<!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>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () { $('#btn').click(function () {
$('img').animate({ "left": "55px", "top": "500px", "width": "50px", "height": "50px" }, 3000).animate({ "left": "+=800px", "top": "-=500px" }, 2000);
}); }); </script>
</head>
<body>
<input type="button" name="name" value="飞起来" id="btn" />
<img src="2.png" style=" position:absolute;" />
</body>
</html>
10、cookie保存用户
<!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>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { if ($.cookie('userName')==null ) {
$('span').text('欢迎菜鸟登录');
} else {
$('span').text('欢迎'+$.cookie('userName')+'登录');
} $('#btn').click(function () { $.cookie('userName', $('#txt').val());
});
}); </script>
</head>
<body>
<span>欢迎菜鸟登录</span>
<input type="text" name="name" value="" id="txt" />
<input type="button" name="name" value="记住密码" id="btn" />
</body>
</html>
11、显示高清图片
<!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>
<title></title>
<script src="../Scripts/jquery-1.10.2.js"></script>
<script src="../Scripts/jquery.jqzoom-core.js" type="text/javascript"></script>
<link href="../Scripts/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> $(document).ready(function () {
$('.MYCLASS').jqzoom();
});
</script>
</head>
<body>
<a class="MYCLASS" title="MYTITLE" href="triumph_big1.jpg" target="_blank">
<img title="IMAGE TITLE" src="triumph_thumb1.jpg">
</a>
</body>
</html>
12、通过改变图片位置显示需要显示的资源
<!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>
<title></title> <style type="text/css"> div
{
background-image:url(1.jpg);
width:60px;
height:500px;
border:1px solid red;
background-repeat:no-repeat;/*:repeat-y; /*:repeat-x;/*横向平铺*/
background-position:-215px -170px;
/*此时的层显示图片是平铺*/ }
</style>
</head>
<body>
<div> </div>
</body>
</html>
1、选择器+遍历
$('div').each(function (i){
i就是索引值
this 表示获取遍历每一个dom对象
});
2、选择器+遍历
$('div').each(function (index,domEle){
index就是索引值
domEle 表示获取遍历每一个dom对象
});
3、更适用的遍历方法
1）先获取某个集合对象
2）遍历集合对象的每一个元素
var d=$("div");
$.each(d,function (index,domEle){
d是要遍历的集合
index就是索引值
domEle 表示获取遍历每一个dom对
});
JQuery基础三的更多相关文章
- Web前端基础(16):jQuery基础(三)
1. jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 1.1 显示动画 方式一: $("div&quo ...
- jQuery基础课程
环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
- Bootstrap <基础三十二>模态框（Modal）插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Bootstrap <基础三十一>插件概览
在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...
- Bootstrap <基础三十>Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...
- Bootstrap<基础三> 排版
Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- 【jQuery基础学习】09 jQuery与前端（这章很水）
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
随机推荐
- [LintCode] Maximal Square 最大正方形
Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ret ...
- Eclipse设置注释模板
设置注释模板的入口: Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元 ...
- Linux下安装PHP
从php官网下载好需要php的压缩包,我下的是5.5.37版, 解压:# tar -xvf php-5.5.37.tar.gz 移至解压出的文件夹:# cd php-5.5.37 检查安装环境:# . ...
- jQuery 插件autocomplete
jQuery 插件autocomplete 自动加载 参考: http://www.cnblogs.com/Peter-Zhang/archive/2011/10/22/2221147.html ht ...
- Linux常用命令（持续更新）
lsb_release -a 查看linux操作系统信息 getconf LONG_BIT 查看linux操作系统位数 useradd [-g groupname] username 创建用户,并指定 ...
- 当table中的td内容过多，显示不完全，用省略号表示。
.format{ min-width:100px; max-width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellips ...
- PowerDesigner的使用二
PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今 最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesig ...
- 示例-创建表格-指定行列&删除表格的行和列
<body> <script type="text/javascript"> /* *上面的方法和你麻烦. *既然操作的是表格, *那么最方便的方式就是使用 ...
- 为Docker容器指定自定义网段的固定IP/静态IP地址
第一步:创建自定义网络 备注:这里选取了172.172.0.0网段,也可以指定其他任意空闲的网段 docker network create --subnet=172.172.0.0/16 docke ...
- python中raw_input输入数字问题
如果按照下面方式,则无论你输入什么,都会打印12,因为raw_input接受的输入是按照字符串处理的 num = raw_input('please enter a num:') if num > ...