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: ...
随机推荐
- Alpha 冲刺四
团队成员 051601135 岳冠宇 051604103 陈思孝 031602629 刘意晗 031602248 郑智文 031602234 王淇 会议照片 项目燃尽图 项目进展 实现后端聊天接收,搜 ...
- 第十二周（12.01-12.04）----final评论I
1. 约跑App——nice!:作为final发布讲说的第一组,nice团队很不容易.虽然很早就来到了发布场地,为发布做准备.但是准备上还是有些不足.对于摄像头的不稳定,nice没有很好的解决.在演 ...
- JS 中的require 和 import 区别
这两个都是为了JS模块化编程使用. 遵循规范 require 是 AMD规范引入方式 import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法 调用时间 require是运行时调 ...
- OneZero第二周第四次站立会议（2016.3.31）
会议时间:2016年3月30日 13:00~13:20 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论,确定会后修改内容或分配下一步任务. 会议内容: 1.前端,夏.张 ...
- Android GridView数据绑定
java代码构造个泛型数组用于存放item,作为title List<Map<String, Object>> items = new ArrayList< ...
- 【设计模式】—— 状态模式State
前言:[模式总览]——————————by xingoo 模式意图 允许一个对象在内部改变它的状态,并根据不同的状态有不同的操作行为. 例如,水在固体.液体.气体是三种状态,但是展现在我们面前的确实不 ...
- 安装配置ubuntu的web项目（新）
1.下载jre wget -c javadl.oracle.com/webapps/download/AutoDL?BundleId=211989 -O jre-8u101-linux-i586.ta ...
- springboot中定时任务
import java.text.SimpleDateFormat; import java.util.Date; import org.springframework.context.annotat ...
- 【转】汽车CAN总线
概述 CAN(Controller Area Network)总线协议是由 BOSCH 发明的一种基于消息广播模式的串行通信总线,它起初用于实现汽车内ECU之间可靠的通信,后因其简单实用可靠等特点,而 ...
- luogu2375 动物园 (kmp)
首先求出fail数组,如果没有不重叠的限制的话,我们可以在求fail的时候递推出个数cnt[i]=cnt[fail[i]]+1(这个cnt是算上自己本身==自己本身的) 然后如果是要求不重叠的话,就是 ...