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...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: 二. ...
随机推荐
- （转）GBDT迭代决策树理解
在网上看到一篇对从代码层面理解gbdt比较好的文章,转载记录一下: GBDT(Gradient Boosting Decision Tree) 又叫 MART(Multiple Additive Re ...
- B树、B-树、B+树、B*树详解
注:本文为个人学习摘录,原文地址:http://www.blogjava.net/supercrsky/articles/185167.html B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿 ...
- Spring in Action --- 第一章 简介
简化java开发 基于POJO的轻量级和最小入侵性编程 通过依赖注入和面向接口实现松耦合 基于切面和管理进行声明式编程 通过切面和模板减少样板式代码 bean的生命周期 Spring对bean进行实例 ...
- AC自动机(AC automation)
字典树+KMP 参考自: http://www.cppblog.com/mythit/archive/2009/04/21/80633.html ; //字典大小 //定义结点 struct node ...
- magento里的session传值
1.$registrationCode = Mage::getSingleton('customer/session' )->setData('login_phone_code', $valid ...
- 利用Paramiko模块远程连接Linux
使用Paramiko模块模拟SSH远程连接到服务器,并执行命令.(支持Tab键补全) 1.安装相关模块: 1)安装 Crypto 模块: 下载源码包解压 安装: sudo python setup.p ...
- 自己通过反射写的一个属性copy类
package com.xxx.beancopier; import java.lang.annotation.Documented; import java.lang.annotation.Elem ...
- mx51的三个framebuffer，mxc_ipuv3_fb.c分析
转载:http://blog.csdn.net/jack_a8/article/details/43309169 mx51支持三个framebuffer:fb0, fb1, fb2 /dev/grap ...
- UIBezierPath与CAShapeLayer结合画扇形
/*让半径等于期望半径的一半 lineWidth等于期望半径 就可以画圆*/ 可以看出layer的走势是从圆边的中间一半在圆外 一半在圆内 因此让半径等于期望半径的一半 lineWidth等于期望半径 ...
- 为OLED屏增加GUI支持
为OLED屏增加GUI支持1:OLED驱动 为OLED屏增加GUI支持2:2D图形库 为OLED屏增加GUI支持3:字库 为OLED屏增加GUI支持4:文本框控件 为OLED屏增加GUI支持5:图片控 ...