前端武器库之jQuery示例
1.全选 反选 取消
相关知识点：
- 选择器
- .prop
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
- .each
jQuery方法内置循环： $('#tb:checkbox').xxxx - $('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)
})
- 三元运算 var v = 条件 ? 真值 : 假值
<body>
<input type="button" value="全选" onclick="checkAll();" />
<input type="button" value="反选" onclick="reverseAll();" />
<input type="button" value="取消" onclick="cancelAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th><th>IP</th><th>PORT</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true);
} // .prop 专门对checked操作
function cancelAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
$(':checkbox').each(function(k){ // .each 循环选中的每一个元素
/* Dom实现
if(this.checked){
this.checked = false;
}else{
this.checked = true;
} */
// this,代指当前循环的每一个元素；三元运算var v = 条件? 真值：假值
var v = $(this).prop('checked')?false:true;
// console.log(k,this);
$(this).prop('checked',v);
})
}
</script>
</body>
2.筛选器示例：左侧菜单点击展开内容
筛选器：
$('#i1').next() // 下一个
$('#i1').prev() //往上找
$('#i1').nextAll() // 下面所有
$('#i1').prevAll()
$('#i1').nextUntil('#ii1') // 下面直到哪里
$('#i1').prevUntil('#ii1')
$('#i1').parent() // 父标签
$('#i1').parents() // 取得一个包含着所有匹配元素的祖先元素的元素集合
$('#i1').parentsUntil() //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li').eq(1) <——> $('li:eq(1)')
first()
last()
hasClass(class)
添加移除样式：
$('#i1').addClass(..) // 添加样式
$('#i1').removeClass(..)// 移除样式
示例：
<head>
<style>
.header{
background-color: royalblue;
}
.content{
min-height: 70px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height:400px;width: 200px;border: 1px solid #dddddd">
<div class="item">
<div class="header">标题一</div>
<div id="i1" class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题二</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题三</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function(){
// 当前点击的标签 $(this)； .next 获取某个标签的下一个标签
// $(this).next().removeClass('hide'); 移除hide属性
// $(this).parent().siblings().find('.content').addClass('hide')
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
// 链式编程
})
</script>
</body>
3.jQuery文本 样式 属性 文档处理操作
- 文本操作：
$(..).text() // 获取文本内容
$(..).text("<a>1</a>") // 设置文本内容 $(..).html() // 获取
$(..).html("<a>1</a>") // 设置 $(..).val() // 获取
$(..).val(..) // 设置
- 样式操作：
addClass
removeClass
toggleClass 比如实现网页开关灯功能
开关灯示例：
<head>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input type='checkbox' id='i2' /> <input id="i1" type="button" value="开关" />
<div class="c1 hide">asdfasdf</div> <script src="jquery-1.12.4.js"></script>
<script>
$('#i1').click(function(){
// if($('.c1').hasClass('hide')){
// $('.c1').removeClass('hide');
// }else{
// $('.c1').addClass('hide');
// }
$('.c1').toggleClass('hide'); // 一句搞定
})
</script>
</body>
- 属性操作：
// 专门用于做自定义属性
$(..).attr('n') // 获取
$(..).attr('n','v') // 设置
$(..).removeAttr('n') // 删除 <input type='checkbox' id='i1' />
// 专门用于chekbox,radio jQuery1、2版本checkbox使用attr的话有bug，所以用prop
$(..).prop('checked')
$(..).prop('checked', true)
- 文档处理：
append // 往后加
prepend // 往前加
after // 紧挨着后面
before // 紧挨着前面 remove // 删除
empty // 只清空内容 clone // 克隆一份数据
3.模态对话框
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.modal{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -250px;
background-color: #eeeeee;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
background-color: black;
z-index: 9;
}
</style>
</head>
<body>
<a onclick="addElement();">添加</a>
<table border="1" id="tb">
<tr>
<td target="hostname">1.1.1.11</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.12</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.13</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text" />
<input name="port" type="text" />
<input name="ip" type="text" />
</div>
<div>
<input type="button" value="取消" onclick="cancelModal();" />
<input type="button" value="确定" onclick="confirmModal();" />
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script> $('.del').click(function () {
$(this).parent().parent().remove();
}); function confirmModal() { var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = "11.11.11.11";
var td2 = document.createElement('td');
td2.innerHTML = "8001"; $(tr).append(td1);
$(tr).append(td2); $('#tb').append(tr); $(".modal,.shadow").addClass('hide');
} function addElement() {
$(".modal,.shadow").removeClass('hide');
}
function cancelModal() {
$(".modal,.shadow").addClass('hide');
$('.modal input[type="text"]').val("");
} $('.edit').click(function(){
$(".modal,.shadow").removeClass('hide');
// this
var tds = $(this).parent().prevAll();
tds.each(function () {
// 获取td的target属性值
var n = $(this).attr('target');
// 获取td中的内容
var text = $(this).text();
var a1 = '.modal input[name="';
var a2 = '"]';
var temp = a1 + n + a2;
$(temp).val(text);
});
// var port = $(tds[0]).text();
// var host = $(tds[1]).text();
//
// $('.modal input[name="hostname"]').val(host);
// $('.modal input[name="port"]').val(port);
// 循环获取tds中内容
// 获取 <td>内容</td> 获取中间的内容
// 赋值给input标签中的value
});
</script>
</body>
4.tab切换菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body>
<div style="width: 700px;margin:0 auto">
<div class="menu">
<div class="menu-item active" a="1">菜单一</div>
<div class="menu-item" a="2">菜单二</div>
<div class="menu-item" a="3">菜单三</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div class="hide" b="2">内容二</div>
<div class="hide" b="3">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var target = $(this).attr('a');
$('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>
上面是通过自定义属性实现的，下面不用自定义属性，用索引也能实现。
index 获取索引位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body>
<div style="width: 700px;margin:0 auto">
<div class="menu">
<div class="menu-item active" >菜单一</div>
<div class="menu-item" >菜单二</div>
<div class="menu-item" >菜单三</div>
</div>
<div class="content">
<div >内容一</div>
<div class="hide" >内容二</div>
<div class="hide">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>
5.点赞及jQuery css操作
Query css处理操作
$('t1').css('样式名称', '样式值')
点赞：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小，位置
点赞示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
width: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
AddFavor(this);
});
function AddFavor(self) {
// DOM对象
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1; var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('position','absolute');
$(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
$(self).append(tag); var obj = setInterval(function () {
fontSize = fontSize + 10;
top = top - 10;
right = right - 10;
opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
if(opacity < 0){
clearInterval(obj);
$(tag).remove();
}
}, 40);
}
</script>
</body>
</html>
6.拖动面板及位置操作
- 位置操作：
$(window).scrollTop() // 获取windows滑轮位置 // 注意是谁的滑轮
$(window).scrollTop(0) // 设置windows滑轮位置
scrollLeft([val]) // 左右滚动滑轮设置 $('#i1').offset() // 获取标签位置
offset().left // 指定标签在html中的坐标位置
offset().top // 指定标签在html中的坐标位置
<!-- position() 指定标签相对父标签(找到relative)标签的坐标-->
<div style='relative'>
<div>
<div id='i1' style='position:absolute;height:80px;border:1px'></div>
</div>
</div>
<script> // 纯高度，边框，外边距，内边距
$('i1').height() // 获取标签的高度 纯高度
$('i1').innerHeight() // 获取自身高度+padding；
$('i1').outerHeight() // 参数：false-->获取自身高度+padding+border；
$('i1').outerHeight(true) // 获取自身高度+padding+border+margin；
</script>
- 拖动面板示例：
注意这里直接使用#title方式不是太好。
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;"></div>
<div style="height: 300px;"></div>
</div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
$(function(){
$('#title').mouseover(function(){
$(this).css('cursor','move');
});
$("#title").mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
var ord_x = _event.clientX;
var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top; $('#title').on('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');
})
});
$("#title").mouseup(function(){
$("#title").off('mousemove');
});
})
</script>
</body>
7.jQuery绑定事件及示例
- 绑定事件知识点：
// DOM： 三种绑定方式
// jQuery：四种
// 第一种：
$('.c1').click()
$('.c1').....
// 第二种：
$('.c1').bind('click',function(){ // 绑定
}) $('.c1').unbind('click',function(){ // 解绑
})
// 第三种：*******有特殊功能，看示例（一开始并没有绑定事件，当点击的时候才给绑定事件）
$('.c').delegate('a', 'click', function(){ // 绑定、委托
}) $('.c').undelegate('a', 'click', function(){ // 解绑
})
// 第四种：上面调用的实际上都是这种
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
- 示例：添加内容，并自动绑定事件
<body>
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" />
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
$('#u1').append(temp);
});
// 第三种绑定方式
$('ul').delegate('li','click',function () {
var v = $(this).text();
alert(v);
})
// 第一种绑定方式
// $('ul li').click(function () {
// var v = $(this).text();
// alert(v);
// })
// 第二种绑定方式
// $('ul li').bind('click',function () {
// var v = $(this).text();
// alert(v);
// })
// 第四种绑定方式
// $('ul li').on('click', function () {
// var v = $(this).text();
// alert(v);
// })
</script>
</body>
8.JQuery事件之阻止事件发生 及示例：表单验证
a标签是不是默认有个onclick事件，如果再给绑定一个onclick事件会怎么样？
默认：先执行绑定事件，在执行a标签的默认事件。
阻止事件发生
return false
# 当页面框架加载完成之后，自动执行
$(function(){
$(...)
})
示例：
<body>
<!--Dom方式：onclick里需要加return-->
<a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a>
<!--jQuery方式：-->
<a id="i1" href="http://www.oldboyedu.com">走你2</a>
<script src="jquery-1.12.4.js"></script>
<script>
// Dom方式：
function ClickOn() {
alert(123);
return true; // true：执行后面操作，dom绑定里需要加return
}
// jQuery方式：
$('#i1').click(function () {
alert(456);
return false; // false：不执行后面操作
})
</script>
</body>
- 示例：表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<!--功能：输入值：运行提交；未输入：不允许提交-->
<form id="f1" action="s5.html" method="POST">
<div><input name="n1" tex = "用户名" type="text" /></div>
<div><input name="n2" tex = "密码" type="password" /></div>
<div><input name="n3" tex = "邮箱" type="text" /></div>
<div><input name="n4" tex = "端口" type="text" /></div>
<div><input name="n5" tex = "IP" type="text" /></div> <input type="submit" value="提交" />
<!--<img src="...">-->
</form>
<script src="jquery-1.12.4.js"></script>
<script>
// // 当页面框架加载完毕后，自动执行，比如加载图片，框加载后，图片还没加载，函数就执行了
// $(function(){
//
// });
$(function(){
// 当页面所有元素完全加载完毕后，执行
$(':submit').click(function () {
$('.error').remove(); // 先清空错误样式
var flag = true; // 创建局部变量
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
var n = $(this).attr('tex');
if(v.length <= 0){
flag = false;
var tag = document.createElement('span');
tag.className = "error";
tag.innerHTML = n + "必填";
$(this).after(tag);
// return false; // 加上false后，第一个不合法，后面不通过
}
});
return flag;
});
});
// $(':submit').click(function () {
// var v = $(this).prev().val();
// if(v.length > 0){
// return true;
// }else{
// alert('请输入内容');
// return false
// }
// })
</script>
</body>
</html>
前端武器库之jQuery示例的更多相关文章
- js前端分页之jQuery
锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...
- 前端学习之jquery/下
前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...
- 前端基础之:JQuery(可编辑版)
前端基础之jquery 一 jQuery是什么? ［1］ jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］ ...
- 第一百七十七节，jQuery，知问前端--概述及 jQuery UI
jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一．项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能 ...
- 前端(5)之jQuery
前端(5)之jQuery jQuery介绍 1.jQuery是一个轻量级的,兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现 ...
- 前端第四篇---前端基础之jQuery
前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...
- 网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
- 在C#后端处理一些结果然传给前端Javascript或是jQuery
在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...
- 知问前端——概述及jQuery UI
知问系统,是一个问答系统.主要功能:即会员提出问题,会员回答问题.目前比较热门的此类网站有:知乎http://www.zhihu.com.百度知道http://zhidao.baidu.com等.这里 ...
随机推荐
- MySQL 索引机制
MySQL 原理篇 MySQL 索引机制 MySQL 体系结构及存储引擎 MySQL 语句执行过程详解 MySQL 执行计划详解 MySQL InnoDB 缓冲池 MySQL InnoDB 事务 My ...
- Java 面向对象_多态
多态图解 代码中体现多态性 父类名称 对象名 = new 子类名称(); or 接口名称 对象名 = new 实现类名称(); // 父类 public class Father { public v ...
- ORA-00001:unique constraint violated解决
转自:https://www.2cto.com/database/201211/172340.html ORA-00001:unique constraint violated解决 今天往数据库中插入 ...
- 小程序npm构建
npm initnpm install --productionnpm i 第三方组件名称 -S --production //重要
- 通过python全局设置id——自动化测试元素定位
背景: 在自动化化测试过程中,不方便准确获取页面的元素,或者在重构过程中方法修改造成元素层级改变,因此通过设置id准备定位. 一.python准备工作: 功能:用自动化的方式进行批量处理. 比如,你想 ...
- 基于SpringBoot的多模块项目引入其他模块时@Autowired无法注入其他模块stereotype注解类对象的问题解决
类似问题: 关于spring boot自动注入出现Consider defining a bean of type 'xxx' in your configuration问题解决方案 排查原因总结如下 ...
- python selectors模块实现 IO多路复用机制的上传下载
import selectorsimport socketimport os,time BASE_DIR = os.path.dirname(os.path.abspath(__file__))''' ...
- java List<String>的初始化 的一个小问题
今天在处理生成excel的时候用到了java的list,但是需要直接赋值固定的几个变量,如果先初始化然后add的方法: List<String> name = new ArrayList( ...
- javascript_08-while 和 do while
while 和 do while for 当循环次数已知 while 先判断再执行 do while 先执行一次再判断 //1-100 之间所有数字的和 //while // var i = 1; / ...
- Redis for C#
ServiceStack.Redis 初识Redis时接触到的.Net-Redis组件是 ServiceStack.Redis,其V3系列的最新版本是:ServiceStack.Redis.3.9.2 ...