jquery-实用例子
一：jquery实现全选取消反选
3元运算：条件？真值：假值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="selectAll()">
<input type="button" value="取消" onclick="cancelAll()">
<input type="button" value="dom反选" onclick="reverserAll()">
<input type="button" value="jQuery反选" onclick="reverserAll2()">
<input type="button" value="jQuery三元运算实现反选" onclick="reverserAll3()">
<table id="tb" border="1">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>1191</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.2</td>
<td>1192</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.3</td>
<td>1193</td>
</tr>
</table>
<script src="jquery-1.12.3.js"></script>
<script>
function selectAll(){
$("#tb :checkbox").prop("checked",true);//jquery默认自带循环
} function cancelAll(){
$("#tb :checkbox").prop("checked",false);
}
//反选两种方法dom实现和jquery实现
//dom实现
function reverserAll(){
$("#tb :checkbox").each(function(){//each遍历
if (this.checked) //this这里是dom对象
{
this.checked=false;
}else {
this.checked=true;
} }
)
}
function reverserAll2(){
$("#tb :checkbox").each(function() {//each遍历
if($(this).prop("checked"))//$(this)转jquery对象
{
$(this).prop("checked",false);
}else
{
$(this).prop("checked",true);
}
}
)
}
//3元运算实现反选
// 条件？真值：假值 function reverserAll3(){
$("#tb :checkbox").each(
function(){
var v=$(this).prop("checked")?false:true;
$(this).prop("checked",v);
}
)
}
</script>
</body>
</html>
二：jquery实现菜单栏功能
1)找到header标签所在位置
1)在找到header标签加入onclick事件
2)找到下一个标签所在位置content
3)去除当前content的hide类，显示本标栏
4)找到当前header的父标签item
5)找到item所有兄弟标签
6)找到item兄弟标签下面的content
7)在找到content加入hide类，隐藏标题栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
height: 400px;
width: 200px;
border: 1px solid #dddddd;
}
.header{
background-color: black;
color: white;
}
.content{
height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="header">标题1</div>
<div class="content">内容1</div>
</div>
<div class="item">
<div class="header">标题2</div>
<div class="content hide">内容2</div>
</div>
<div class="item">
<div class="header">标题3</div>
<div class="content hide">内容3</div>
</div>
</div> <script src="jquery-1.12.3.js"></script>
<script>
/*
1)找到header标签所在位置
1)在找到header标签加入onclick事件
2)找到下一个标签所在位置content
3)去除当前content的hide类，显示本标栏
4)找到当前header的父标签item
5)找到item所有兄弟标签
6)找到item兄弟标签下面的content
7)在找到content加入hide类，隐藏标题栏
*/ $(".header").click(
function() {
$(this).next().removeClass("hide")
//找到header父级标签的所有兄弟标签的孩子content,并加入hide类
$(this).parent().siblings().find(".content").addClass("hide")
}
)
</script>
</body>
</html>
三：jquery模态编辑1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom:0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.model{
position: fixed;
top:50%;
left: 50%;
margin-left: -250px;
maigin-top: -200px;
background-color: white;
z-index: 10;
height: 200px;
width: 400px; }
</style>
</head>
<body> <a onclick="addElement();" style="color: red">增加</a>
<input type="button" value="+" onclick="addElement();">
<table border="1px">
<tr>
<td target="hostname">1.1.1.1</td>
<td target="port">1182</td>
<td>
<a class="edit">编辑</a>|
<a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.2</td>
<td target="port">1182</td>
<td>
<a class="edit">编辑</a>|
<a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.3</td>
<td target="port">1182</td>
<td>
<a class="edit">编辑</a>|
<a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.4</td>
<td target="port">1182</td>
<td>
<a class="edit">编辑</a>|
<a class="del">删除</a>
</td>
</tr>
</table>
<div class="shadow hide"></div>
<div class="model hide">
<input type="text" name="host">
<input type="text" name="port">
<input type="button" value="取消" onclick="cancelElement();">
</div> <script src="jquery-1.12.3.js"></script>
<script>
function addElement(){
console.log(1)
$(".model,.shadow").removeClass('hide');
} function cancelElement(){
$(".model,.shadow").addClass("hide");
$('.model input[name="host"]').val("");
$('.model input[name="port"]').val("");
} $(".edit").click(
function(){
addElement()
var tds=$(this).parent().prevAll();
var host=$(tds[1]).text();
var port=$(tds[0]).text();
console.log(host,port);
$('.model input[name="host"]').val(host);
$('.model input[name="port"]').val(port); }
)
</script>
</body>
</html>
四：jquery模态编辑-改进版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom:0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.model{
position: fixed;
top:50%;
left: 50%;
margin-left: -250px;
maigin-top: -200px;
background-color: white;
z-index: 10;
height: 200px;
width: 400px; }
</style>
</head>
<body> <a onclick="addElement();" style="color: red">增加</a>
<input type="button" value="+" onclick="addElement();">
<table border="1px">
<tr>
<td target="host">1.1.1.1</td>
<td target="port">1182</td>
<td>
<a class="edit">编辑</a>|
<a class="del">删除</a>
</td>
</tr>
<tr>
<td target="host">1.1.1.2</td>
<td target="port">1182</td>
<td>
<a class="edit">编辑</a>|
<a class="del">删除</a>
</td>
</tr>
<tr>
<td target="host">1.1.1.3</td>
<td target="port">1182</td>
<td>
<a class="edit">编辑</a>|
<a class="del">删除</a>
</td>
</tr>
<tr>
<td target="host">1.1.1.4</td>
<td target="port">1182</td>
<td>
<a class="edit">编辑</a>|
<a class="del">删除</a>
</td>
</tr>
</table>
<div class="shadow hide"></div>
<div class="model hide">
<input type="text" name="host">
<input type="text" name="port">
<input type="button" value="取消" onclick="cancelElement();">
</div> <script src="jquery-1.12.3.js"></script>
<script>
function addElement(){
console.log(1)
$(".model,.shadow").removeClass('hide');
} function cancelElement(){
$(".model,.shadow").addClass("hide");
$('.model input[name="host"]').val("");
$('.model input[name="port"]').val("");
} // $(".edit").click(
// function(){
// addElement()
// var tds=$(this).parent().prevAll();
// var host=$(tds[1]).text();
// var port=$(tds[0]).text();
//
// console.log(host,port);
// $('.model input[name="host"]').val(host);
// $('.model input[name="port"]').val(port);
//
// }
// )
/*上面直接使用tds[0]等存在这个问题，就是如果在增加一列，所有tds及下面的赋值都要修改
处理方法：给每个td绑定个属性，并且这个属性值和model中name属性的值相对应，通过each循环获取并把属性值相等的设置
*/
$(".edit").click(
function(){
addElement();
var tds=$(this).parent().prevAll();
tds.each(
function(){
var v1=$(this).attr("target");
var value=$(this).text();
var a1=".model input[name=";
var a2="]";
//字符串拼接
var tmp=a1+v1+a2;
$(tmp).val(value)
}
)
}
)
</script>
</body>
</html>
五：jquery实现tab页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
width:400px;
height: 38px;
margin: 0 auto;
line-height: 38px;
}
.menu .menu-item{
float: left;
padding: 0 10px;
border-right: 1px solid red;
cursor: pointer;
}
.active{
background-color: rebeccapurple;
} .content{
min-height: 100px;
width: 400px;
border:1px solid #2459a2;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item active" target="1">菜单1</div>
<div class="menu-item " target="2">菜单2</div>
<div class="menu-item "target="3">菜单3</div>
<div style="clear:both"></div>
</div>
<div class="content">
<div class="content-pg" target="1">内容1</div>
<div class="content-pg hide" target="2">内容2</div>
<div class="content-pg hide" target="3">内容3</div>
</div>
<script src="jquery-1.12.3.js"></script>
<script>
$(".menu-item").click(
function(){
//菜单切换
$(this).addClass("active").siblings().removeClass("active");
var target=$(this).attr("target");
console.log($(".content-pg [target='"+target+"']"));
$('.content').children("[target='"+ target+"']").removeClass('hide').siblings().addClass('hide');
}
)
</script>
</body>
</html>
jquery-实用例子的更多相关文章
- Struts1+JQuery的例子
Struts1+JQuery的例子 2014年2月10日 11:25 Struts1+JQuery+JSON/XML的例子 1.Struts+JQuery+XML struts-config.xml如 ...
- jQuery实用工具集
插件描述:jQuery实用工具集,该插件封装了常用功能,如序列化表单值获取地址栏参数window对象操作等 此工具集包含判断浏览器,判断浏览终端,获取地址栏参数,获取随机数,数据校验等常用操作功能 引 ...
- react-router4.x 实用例子(路由过渡动画、代码分割)
react-router4.2.0实用例子 代码分割 官网上面写的代码分割是不支持create-react-app脚手架的,要使用import实现 创建一个bundle.js文件 import { C ...
- jquery autocomplete 简单实用例子
<link href="../../themes/default/css/jquery.ui.all.css" rel="stylesheet" type ...
- jquery jQuery-File-Upload 例子
网上jquery-file-upload的例子 都过于简单,在项目中这个插件经常使用,写个例子供参考. 下面介绍 用插件实现图片异步上传的代码. 1 比要的js一个都不能少,他们之间是有依赖关系的 ...
- jQuery实用的语法总结
1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...
- Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- ajax 源生，jquery封装 例子 相同哈哈
http://hi.baidu.com/7636553/item/bbcf5fc93c8c950aac092f22 ajax使用回调函数的例子(原生代码和jquery代码) 一. ajax代码存在的问 ...
- JQuery实用技巧--学会你也是大神(1)——插件的制作技巧
前 言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架 ...
- jquery dataTables例子
https://datatables.net/examples/styling/bootstrap.html http://datatables.club/example/#styling http: ...
随机推荐
- golang yaml配置文件解析
yaml文件语法 此模块内容转自:http://www.ruanyifeng.com/blog/2016/07/yaml.html 大小写敏感 使用缩进表示层级关系 缩进时不允许使用Tab键,只允许使 ...
- 在VMware Workstation上安装Ubuntu 16.04 Server操作系统
Ubuntu 16.04 Server的下载 http://www.ubuntu.org.cn/download/server 按空格键(Space)选中第一个ssh服务 成功!
- maven搭建springmvc+mybatis项目
上一篇中已经成功使用maven搭建了一个web项目,本篇描述在此基础上怎么搭建一个基于springmvc+mybatis环境的项目. 说了这么久,为什么那么多人都喜欢用maven搭建项目?我们都知道m ...
- 解题：CTSC 2006 歌唱王国
题面 概率生成函数 对于菜鸡博主来说好难啊 其一般形式为$F(x)=\sum\limits_{i=0}^∞[x==i]x_i$,第i项的系数表示离散变量x取值为i的概率 一般的两个性质:$F(1)=1 ...
- [SCOI2014]方伯伯的商场之旅
Description 方伯伯有一天去参加一个商场举办的游戏.商场派了一些工作人员排成一行.每个人面前有几堆石子.说来也巧,位置在 i 的人面前的第 j 堆的石子的数量,刚好是 i 写成 K 进制后的 ...
- java Random.nextInt()方法
转: java Random.nextInt()方法 lic int nextInt(int n) 该方法的作用是生成一个随机的int值,该值介于[0,n)的区间,也就是0到n之间的随机int值,包含 ...
- ELK 日志分析实例
ELK 日志分析实例一.ELK-web日志分析二.ELK-MySQL 慢查询日志分析三.ELK-SSH登陆日志分析四.ELK-vsftpd 日志分析 一.ELK-web日志分析 通过logstash ...
- Apache 的 ab 压测工具快速使用
ab 是一个 httpd 自带的很好用的压力测试工具,它是 apache bench 命令的缩写.ab 命令会创建多个并发访问线程,模拟多个访问者同时对某一 URL 地址进行访问.可以用来测试 apa ...
- Hadoop生态圈-zookeeper本地搭建以及常用命令介绍
Hadoop生态圈-zookeeper本地搭建以及常用命令介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.下载zookeeper软件 下载地址:https://www.ap ...
- [Java] Servlet工作原理之二：Session与Cookie
(未完成) 一.Cookie与Session的使用简介 1 Cookie Cookie 用于记录用户在一段时间内的行为,它有两个版本:Version 0 和 Version 1,分别对应两种响应头 S ...