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: ...
随机推荐
- [转载] Activiti Tenant Id 字段释疑
TENANT_ID_ : 这个字段表示租户ID.可以应对多租户的设计. 转载自: http://www.cnblogs.com/yg_zhang/p/4201288.html http://www. ...
- Codeforces 859D - Third Month Insanity
题意 有 \(2^n\) 个人要进行比赛,每次 \(2i\) 与 \(2i+1\) 号人进行比赛(\(i\in [0,2^{n-1})\) ).这一轮中赢的人进入下一轮.下一轮比赛的时候把进入这一轮的 ...
- CF933A A Twisty Movement
题意翻译 给定一个序列 A,你可以翻转其中的一个区间内的数,求翻转后的序列的最长不下降子序列的长度.(∣A∣≤2000,1≤ai≤2|A|\le 2000,1\le a_i \le 2∣A∣≤2000 ...
- BZOJ 4540 [Hnoi2016]序列 | 莫队 详细题解
传送门 BZOJ 4540 题解 --怎么说呢--本来想写线段树+矩阵乘法的-- --但是嘛--yali的机房太热了--困--写不出来-- 于是弃疗,写起了莫队.(但是我连莫队都想不出来!) 首先用单 ...
- 【转】树莓派Raspberry Pi - 还原已经装过系统的TF卡
想给树莓派换个系统的话,需要先把已经装过系统的TF卡进行还原,这里使用最简单粗暴无脑的方法: 1,下载安装Win32 Disk Imager(一般已经装过一次系统后,这个东西都有) 2,下载boots ...
- 洛谷 P3975 [TJOI2015]弦论 解题报告
P3975 [TJOI2015]弦论 题目描述 为了提高智商,ZJY开始学习弦论.这一天,她在<String theory>中看到了这样一道问题:对于一个给定的长度为\(n\)的字符串,求 ...
- 【转载】SQL注入原理讲解
这几篇文章讲的都很不错,我看了大概清除了sql注入是怎么一回事,打算细细研究一下这个知识,另写一篇博客: 原文地址:http://www.cnblogs.com/rush/archive/2011/1 ...
- eclipse启动tomcat内存溢出的解决方式
eclipse启动tomcat内存溢出的解决方式 ——IT唐伯虎 摘要:eclipse启动tomcat内存溢出的解决方式. 1.打开Run Configurations 2.在VM arguments ...
- 用yaml来编写配置文件
yaml是一个数据序列化的标准,适用于所有开发语言,最大的特点是可读性好. yaml的一个主要应用方向就是编写配置文件,有非常多的系统和框架采用yaml进行配置. yaml有以下基本规则: 1.大小写 ...
- 关于css中a标签的样式
CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link :visited :hover : ...