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...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: 二. ...
随机推荐
- mysql权限设置
想要设定权限,必须通过root用户登录: >> grant all privileges on *.* to root@"%" identified by " ...
- CoreJavaE10V1P3.3 第3章 Java的基本编程结构－3.3 数据类型
3.3 数据类型 这里所说的数据类型是指 Java的8中基本数据类型,是原生就存在的. 不同进制数的字面值表示方法 进制 字面值表示方法 例子 是否默认 JDK版本支持 2进制 0b或0B前缀(每4位 ...
- java四种xml解析区别
1.DOM解析 dom解析是根据树形结构解析,将整个文档加载到内存中,因此对内存的要求较高,所以可以对该文档数据进行多次操作(增,删,改,查). 2.SAX解析 SAX解析是根据事件模型解析,边读取文 ...
- android studio 工程设置项
1.在<工程根目录>\build\generated文件夹中 存在 xxx.jar 这个文件是用来做单元测试用的,但该功能目前还处于实验阶段,不想用可以关了. 去掉勾后,clean一下工程 ...
- android之控件与布局
基本控件:TextViewButtonEditTextImageViewAlertDialog.BubliderProgressDialog 四种基本布局的特殊属性: LinerLayout andr ...
- 持续集成Jenkins+sonarqube部署教程
1 引言 1.1 文档概要 本文主要介绍jenkins,sonar的安装与集成,基于ant,maven构建.用一个例子介绍jenkins的编译打包部署,代码检查.最后集成jenkins.(现阶段只是简 ...
- AppDelegate 里一个基本的跳转方法，用来在rootView崩溃的时候直接调试我自己的页面
将 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)lau ...
- setAction方法 Snackbar 右侧按钮可以被点击并处理一些事件
从数据库同一记录取得的字段所组装成的对象应该是同一个对象,然后由不同的Session从数据库同一条记录上分别取得对象,它们的内存地址是不一样的. 一般来说,常见的数字加密方式都可以分为两类,即对称加密 ...
- MD5的Hash长度扩展攻击
Hash长度扩展攻击 引子 无意中碰到一道题,大概代码是这样的 $flag = "XXXXXXXXXXXXXXXXXXXXXXX"; $secret = "XXXXXXX ...
- NIC Bonding: 2 nic port as 1 interface
The following is concluded from here. Consider we have 2 interfaces: eth0 & eth1 bond the two in ...