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...) 一.菜单实例 最开始的界面: 点击菜单三后的界面: 二. ...
随机推荐
- ECMAScript6之Array类型的扩展
数组的扩展 Array.of() 将一组值转换成数组 Array.of(1,2,3,4,5); //[1,2,3,4,5] Array.from() 可将类似数组的对象或者可便利的对象转换成数组,比如 ...
- android studio 将library导出为jar 亲测成功
本人使用的是helloChart这个开源项目,其主要用于图表,来自git 地址为:https://github.com/lecho/hellocharts-android 下载命令为 git clon ...
- .net c#通过Exif获取图片信息(参数)
简介 想要获取图片的信息,例如快门速度.ISO值等等,我们可以通过读取Exif中存储的信息.Exif(Exchangeable Image File)是存储在JPEG格式照片头部的一段信息,相机和手机 ...
- sulime text3
sublime text 3 详细说明--包括快捷键 sublime 插件安装 快捷键 sunlime (需要先安装package control,ctrl+shift+p,输入insall之后安装插 ...
- Java线程小记
线程是程序内部不同的执行分支,实现多线程主要有两种方式:继承自Thread类或实现Runnable接口,其实Thread类也是实现了Runnable接口,基于Java的单继承机制,我们建议使用实现Ru ...
- Gentoo解决Windows系统txt文本中文乱码问题
Linux与Windows系统语言编码区别 在Linux操作系统下,我们有时打开在windows下的txt文件,发现在windows下能正常显示的txt文件出现了中文乱码. 出现这种情况的原因为两种操 ...
- Jsp中out.println()与System.out.println()的区别
第一次上Web实验课时咱写了一个jsp程序: <% System.out.println("Hello The World"); %> 然后放在浏览器下运行,结果是这样 ...
- js获取计算的样式(非行间样式)
function getStyle(obj, attr){ if(obj.currentStyle){ style = obj.currentStyle[attr]; //兼容IE8以下 }else{ ...
- select空间提交form表单传递参数
如下, 到了 <form name="modelForm" action="/portal/defectinfo/toDefectPage?projectname= ...
- JS正则表达式的test()方法检查汉字
汉字的检查: var reg1=/[^\u4e00-\u9fa5]/g; var text="正则表达式1"; var res1=reg1.test(text);//为true表示 ...