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: ...
随机推荐
- node.js处理url常用方法
处理非阻塞I/O /* *回调函数的方法 异步 */ /* function f(cb){ fs.readFile('./4',(err,data)=>{ cb(data.toString()) ...
- 三星a9上测试egret与pixi.js的渲染性能
for (let i = 0; i < 500; i++) { let shape = new egret.Shape(); shape.graphics.beginFill(0xff0000) ...
- InputStream流无法重复读取的解决办法
前言:今天工作的需要需要读取aws云上S3桶里面的PDF数据,第一步能够正常的获取PDF文件的InputStream流,然后,我为了测试使用了IOUtils.toString(is)将流System. ...
- Java之HashMap用法
源码: package test_demo; import java.util.HashMap; import java.util.Iterator; import java.util.Map; im ...
- Python day7之mysql
写在前面: 由于毕业论文撰写和答辩耽搁了几个月,但是在这几个月没有放弃学习Python,就是没有时间写博客.进行我们主要对数据库mysql的操作指令集的学习. 一.mysql术语 Mysql是最流行的 ...
- 关于找List的中间Node
初始值 slow = fast = head; 如果使用 fast && fast->next && fast->next->next 作为快慢指针循 ...
- 前端学习 -- Css -- 浮动
块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流. 使用float来使元素浮动,从而脱离文档流 可选值: none,默认值,元素 ...
- java执行shell脚本并输出执行情况
1.脚本test.sh,置于/Users/hdwang目录下 #!/bin/sh cd /Users/hdwang echo ls:`ls` ;i<=;i++)); do + ); sleep ...
- DynamicSegmentTree
最近尝试了一下动态开点线段树,英文直译就是Dynamic Open Point Segment Tree,太SB了. 就跟之前的主席树写法差不多. if(!x || x == y) { x = ++t ...
- HTTP 返回的状态码 != 200 ，浏览器不会将返回的内容缓存到本地磁盘上
今天无意发现的,以前处理HTTP State = 404或403之类的,都是直接返回 HTTP 200 OK,然后加一个缓存设置,例如: Cache-Control: max-age=3600 最近修 ...