jQuery实例1
1、选择器：
<body>
<script src="jquery-2.2.4.js"></script>
<div id="n1"></div>
<div class="n2"></div>
<div></div>
<a></a>
<script>
$('#n1').text('ahaii')//id选择器，
$('.n2').text('nancy')//class选择器
$('div').text('xxxooo')//标签选择器，所有div标签的值全设置为xxxooo
$('#n1,.n2,a').text('python')//将id为ni，类标签为n2和所有a标签的值都设置为python
</script>
</body>
菜单实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.menu{
float: left; width: 30%; height: 500px; background-color: antiquewhite;
} .content{
float: left; width: 70%; height: 500px; background-color: blue;
} .title{
background-color: black;
color: white;
height: 50px;
line-height: 50px;
} .hide{
display: none;
} </style> </head>
<body>
<div>
<div class="menu">
<div class="item">
<div class="title" onclick="func(this);">菜单一</div>
<div class="body">
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
</div> <div class="item">
<div class="title" onclick="func(this);">菜单二</div>
<div class="body hide">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
</div> <div class="item">
<div class="title" onclick="func(this);">菜单三</div>
<div class="body hide">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div> </div>
</div> <div class="content"></div> <script src="jquery-2.2.4.js"></script> <script type="text/javascript">
function func(ths){
$(ths).next().removeClass('hide'); //$(ths)获取当前标签，next()方法获取当前标签的下一个标签，removeClass()删除样式
$(ths).parent().siblings().find('.body').addClass('hide'); //先获取父标签item，然后在父标签的兄弟标签中查找body标签
}
// $(function(){
// $('.title').click(function(){
// $(this).parent().siblings().find('.body').addClass('hide');
// $(this).next().removeClass('hide');
// });
// });
</script>
</body>
</html>
Tab菜单选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.head-box{
background-color: #B0E0E6;
border: 1px blueviolet;
height: 40px;
line-height: 40px;
} .head-box a{
border-right: 1px solid burlywood;
padding: 12px;
} .hide{
display: none;
} .current{
/*background-color: red;*/
/*color: white;*/
background-color: white;
color: black;
}
</style>
</head>
<body> <div class="head-box">
<a ahaii="c1" onclick="func(this);" class="current">菜单一</a>
<a ahaii="c2" onclick="func(this);">菜单二</a>
<a ahaii="c3" onclick="func(this);">菜单三</a>
</div> <div class="body-box">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div> <script src="jquery-2.2.4.js"></script>
<script>
function func(ths){
$(ths).addClass('current').siblings().removeClass('current');
var contendID = '#' + $(ths).attr('ahaii'); //取自定义属性‘ahaii’对应的值，即c1
$(contendID).removeClass('hide').siblings().addClass('hide'); //$(contentID)=$(#c1)
}
</script>
</body>
</html>
全选、取消和反选实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<div>
<table border="1px">
<input type="button" value="全选" onclick="selectall();">
<input type="button" value="取消" onclick="removeall();">
<input type="button" value="反选" onclick="reverse();">
<tr>
<td><input type="checkbox"></td>
<td>123</td>
</tr> <tr>
<td><input type="checkbox"></td>
<td>123</td>
</tr> <tr>
<td><input type="checkbox"></td>
<td>123</td>
</tr> </table>
</div> <script src="jquery-2.2.4.js"></script>
<script>
function selectall(){
$('table :checkbox').prop('checked',true); //$('table :checkbox')表示table标签下的所有checkbox，prop更改checked，相当于checked=‘checked’
} function removeall(){
$('table :checkbox').prop('checked',false);
} function reverse(){
$('table :checkbox').each(function(){ //创建包含每个checkbox的列表
var isSelected = $(this).prop('checked'); //$(this)表示每个checkbox，若选中，$(this).prop('checked')值为true
if (isSelected){
$(this).prop('checked',false);
}
else {
$(this).prop('checked',true);
}
}); }
</script>
</body>
</html>
for循环中each()方法的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-2.2.4.js"></script> <script>
var List = [11,22,33,44,55]
$.each(List,function(index,value){
console.log(index,value);
});
</script>
</body>
</html> 输出：
0 11
1 22
2 33
3 44
4 55
toggleClass:
对类的操作，如果存在该类，就删除。如果不存在该类，就添加。
http://www.cnblogs.com/wupeiqi/articles/5369773.html
jQuery实例1的更多相关文章
- jQuery实例——jQuery实现联动下拉列表查询框--转http://www.cnblogs.com/picaso/archive/2012/04/08/2437442.html#undefined
jQuery实例--jQuery实现联动下拉列表查询框 在查询与列表显示的时候经常用到联动列表显示,比如一级选项是国家,二级选项是省,三级是市,这样的联动是联系的实时导出的,比如你不可能选择了四川 ...
- 值得 Web 开发人员学习的20个 jQuery 实例教程
这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
- jQuery使用（十一）：jQuery实例遍历与索引
each() children() index() 一.jQuery实例遍历方法each() jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element. ...
- 基础 jQuery 实例
基础 jQuery 实例 jQuery 原则: 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护: 把所有 jQuery 代码置于事件处理函 ...
- 三种动态加载js的jquery实例代码另附去除js方法
!-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...
- JSON和JSONP （含jQuery实例）（share）
来源:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 说到AJAX就会不可避免的面临两个问 ...
- jQuery实例属性和方法
jQuery.fn = jQuery.prototype = { //添加实例属性和方法 jquery : 版本 constructor : 修正指向问题 init() : 初始化和参数 ...
- JSONP 含jquery 实例
前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...
- 【前端】:jQuery实例
前言: 今天2月最后一天,写一篇jQuery的几个实例,算是之前前端知识的应用.写完这篇博客会做一个登陆界面+后台管理(i try...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: < ...
- :jQuery实例【DEMO】
前言: 今天2月最后一天,写一篇jQuery的几个实例,算是之前前端知识的应用.写完这篇博客会做一个登陆界面+后台管理(i try...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: 二. ...
随机推荐
- perl的列表（List）和数组（Array）
If a scalar is the "singular" in Perl, as we described it at the beginning of Chapter 2, t ...
- HTML学习总结（四）【canvas绘图、WebGL、SVG】
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
- 【Time系列五】个性时钟与秒表升级版
从昨天到现在,一直在研究这个看起来超级简单的时钟.界面非常简洁大方. 虽然是简单,可是这个对齐的问题还是把我整得一塌糊涂.谁叫作者不解释清楚的. 参考:http://bbs.fishc.com/thr ...
- HDU 4520 小Q系列故事——最佳裁判
Time Limit : 500/200ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Problem Description 过 ...
- 关于Trie Tree简单实现
最近突然有兴致hiho一下了,实现了下trie tree,感觉而言,还是挺有意思的,个人觉得这货不光可以用来查单词吧,其实也可以用来替代Hash,反正查找,插入复杂度都挺低的,哈哈,啥都不懂,瞎扯.. ...
- ActiveMQ in Action(7) - Wildcards
关键字: activemq 2．6．7 Wildcards Wildcards用来支持联合的名字分层体系(federated name hierarchies).它不是JMS规范的一部分,而是A ...
- MFC 自定义控件
需要在MFC实现自定义控件功能,网上搜集找的如下方法实现: 以下是步骤说明. 一.自定义一个空白控件 1.先创建一个MFC工程 NEW Project-->MFC-->MFC Appli ...
- 利用rabbit_mq队列消息实现对一组主机进行命令下发
目的: 利用rabbit_mq队列消息实现对一组主机进行命令下发 server: #!/usr/bin/env python3.5 # -*- coding:utf8 -*- import os,sy ...
- Linux监控工具vmstat命令详解
一.前言 很显然从名字中我们就可以知道vmstat是一个查看虚拟内存(Virtual Memory)使用状况的工具,但是怎样通过vmstat来发现系统中的瓶颈呢?在回答这个问题前,还是让我们回 ...
- My97DatePicker -- 一个功能丰富， 而且兼容 ie 6, 7的日期选择组件
easyUI 也提供了 功能强大的日期组件, 可惜在ie 6,7,8下会报错,没有找到 addEventListener , JSON, 可能现在不想再支持低版本ie了 另外avalon也提供了 日 ...