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: ...
随机推荐
- php四排序-选择排序
原理: 在一列数字中,选出最小数与第一个位置的数交换.然后在剩下的数当中再找最小的与第二个位置的数交换,如此循环到倒数第二个数和最后一个数比较为止.(以下都是升序排列,即从小到大排列) 举例说明: $ ...
- sqlserver2016必须安装的组件
- 在配置文件里面设置bean 那么在类里面就要提供set方法用以注入
在配置文件里面设置bean 那么在类里面就要提供set方法用以注入
- 初识Java Enum
enum 的全称为 enumeration, 是 JDK 1.5 中引入的新特性,存放在 java.lang 包中. enum是关键字,感觉它跟class.interface是并列的,并且不能跟fi ...
- [学习笔记]凸优化/WQS二分/带权二分
从一个题带入:[八省联考2018]林克卡特树lct——WQS二分 比较详细的: 题解 P4383 [[八省联考2018]林克卡特树lct] 简单总结和补充: 条件 凸函数,限制 方法: 二分斜率,找切 ...
- maven构建SSM项目
对于小型项目来说,使用默认的maven配置项目即可,可是现在分布式项目越来越多,如果巧妙的使用maven部署项目这成了关键. maven的pom.jar.war: 要正确部署得对maven的pom.w ...
- vue中assets文件夹与static文件夹的区别
1.如果这些产品图片文件“万年不变”,放在 /static 目录里,(不需要使用require将这些图片作为模块来引用) var products = [{ img: '/static/img/pro ...
- 单字节编码&双字节编码
单字节编码(WINDOWS-1252.ISO-8859-1.UTF-8) 双字节编码(UTF-16) Windows 记事本默认会将文件保存为单字节的 ANSI(ASCII).如果您选择 " ...
- 20155201 2016-2017-2 《Java程序设计》第五周学习总结
20155201 2016-2017-2 <Java程序设计>第五周学习总结 教材学习内容总结 第八章 异常处理 程序设计本身的错误,建议使用Exception或其子类实例来表现,称错误处 ...
- java学习第03天（运算符、语句）
5.运算符 (1)算数运算符 //算数运算符:+ - * / %(取余) //++ --(自增,就是在原有数据基础上+1,再赋给原有数据) ///int x = 6370; //x = x/1000* ...