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...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: 二. ...
随机推荐
- 自定义Dialog，从下面弹出
Window window= getWindow(); 只要 打开一个Activity 就有一个窗口存放这个Activity ,手机又很多个窗口,不只是一个窗口 import android.app. ...
- CoreJavaE10V1P3.5 第3章 Java的基本编程结构－3.5 操作符
最基本的操作为赋值操作,= 即赋值操作符 基本的算术操作为加.减.乘.除取模.除取余数,其对应操作符为 +.-.*./.% 算术操作与赋值操作联合衍生为:+=:-=:*=:/=:%=: 由于处理器硬件 ...
- android获取系统版本号
应用场景:1.在界面中显示应用程序的版本号:2.用户启动该应用,后台判断该应用是否是最新版本.上述情景都需要在程序中自动获取到应用的版本号. 思路简介:在Android中,应用程序的版本号是在Andr ...
- CodeForces 546D
Description 两个士兵在玩一个游戏,开始的时候第一个士兵选择一个数n,并把这个数交给第二个士兵,第二个士兵必须选择一个x满足x>1 且n能被x整除,然后将n变为n/x,然后把这个数交给 ...
- vsftp 详解鸟哥版
FTP (File Transfer Protocol) 可说是最古老的协议之一了,主要是用来进行档案的传输,尤其是大型档案的传输使用 FTP 更是方便!不过,值得注意的是,使用 FTP 来传输时,其 ...
- iOS上传AppStore被拒原因及处理方案
1.后台运行GPS 1.1 原文: Performance - 2.5.4 Your app declares support for location in the UIBackgroundMode ...
- Android 使用URLConnection来post数据
/** * @param postUrl * 需要post的地址 * @param map * 存储数据的map * @param handler * 处理message的handler */ pub ...
- Node.js入门 NPM
参考一 Node入门 七天学会NodeJS Node.js v4.2.4 手册 & 文档 Node.js 教程 node.js摸石头系列 从零开始学习node.js What is ...
- （一）html之基本结构
一:HTML基本结构 1.1 HTML文档结构 1.1.1 外层结构 <!DOCTYPE HTML> <html> </html> DOCTYPE元素用于告诉浏览器 ...
- msyql sql语句
参考: http://www.cnblogs.com/aspnethot/articles/1397130.html 修改表字段ALTER TABLE table_name CHANGE old_fi ...