jQuery文档节点处理，克隆，each循环，动画效果，插件
文档节点处理
//创建一个标签对象
$("<p>") //内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo"); $(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B $(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B //外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo"); $(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面 $(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面 //替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); replaceWith()
replaceAll() //删除 $("").empty() // 清空元素的子元素
$("").remove([expr]) // 删除元素 //复制 $("").clone([Even[,deepEven]])
例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<style>
#d1{
background-color: red;
}
</style>
</head>
<body> <ul>
<li>1</li>
</ul> <p id="p1">p1</p> <div id="d1">
<div>
<span>1</span><span>2</span>
</div>
</div>
<script src="../jquery-3.2.1.min.js"></script>
<script>
// var trEle = document.createElement("tr");
// $(trEle).text(""); var liEle = document.createElement("li");
// $(liEle).text("2");
// $("ul").append(liEle);
// $("ul").append("<li>3</li>");
// $(liEle).appendTo($("ul")); // $(liEle).text("0");
// $("ul").prepend(liEle);
// $(liEle).prependTo("ul"); var $li2 = $("<li>");
$li2.text("2");
$("ul").append($li2); var pEle = document.createElement("p");
// $(pEle).text("p");
// $("#p1").after($(pEle)); $(pEle).text("p0");
// $("#p1").before(pEle);
$(pEle).insertBefore($("#p1")); // $("#d1").remove(); // remove删除d1
$("#d1").empty(); // 清除d1的子节点
</script>
</body>
</html>
克隆例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>克隆</title>
<style>
#b1 {
background-color: deeppink;
padding: 5px;
color: white;
margin: 5px;
}
#b2 {
background-color: dodgerblue;
padding: 5px;
color: white;
margin: 5px;
}
</style>
</head>
<body> <button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button> <script src="jquery-3.2.1.min.js"></script>
<script>
// clone方法不加参数true，克隆标签但不克隆标签带的事件
$("#b1").on("click", function () {
$(this).clone().insertAfter(this);
});
// clone方法加参数true，克隆标签并且克隆标签带的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this);
});
</script>
</body>
</html>
事件
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法：
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
文档加载完绑定事件，并且阻止默认事件发生：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录注册示例</title>
<style>
.error {
color: red;
}
</style>
</head>
<body> <form id="myForm">
<label for="name">姓名</label>
<input type="text" id="name">
<span class="error"></span>
<label for="passwd">密码</label>
<input type="password" id="passwd">
<span class="error"></span>
<input type="submit" id="modal-submit" value="登录">
</form> <script src="jquery-3.2.1.min.js"></script>
<script src="s7validate.js"></script>
<script>
function myValidation() {
// 多次用到的jQuery对象存储到一个变量，避免重复查询文档树
var $myForm = $("#myForm");
$myForm.find(":submit").on("click", function () {
// 定义一个标志位，记录表单填写是否正常
var flag = true;
$myForm.find(":text, :password").each(function () {
var val = $(this).val();
if (val.length <= 0 ){
var labelName = $(this).prev("label").text();
$(this).next("span").text(labelName + "不能为空");
flag = false;
}
});
// 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件
return flag;
});
// input输入框获取焦点后移除之前的错误提示信息
$myForm.find("input[type!='submit']").on("focus", function () {
$(this).next(".error").text("");
})
}
// 文档树就绪后执行
$(document).ready(function () {
myValidation();
});
</script>
</body>
</html>
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
keydown和keyup事件组合示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>键盘事件示例</title>
</head>
<body> <table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Yuan</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>EvaJ</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Gold</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
</tbody>
</table> <input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选"> <script src="jquery-3.2.1.min.js"></script>
<script>
// 全选
$("#b1").on("click", function () {
$(":checkbox").prop("checked", true);
});
// 取消
$("#b2").on("click", function () {
$(":checkbox").prop("checked", false);
});
// 反选
$("#b3").on("click", function () {
$(":checkbox").each(function () {
var flag = $(this).prop("checked");
$(this).prop("checked", !flag);
})
});
// 按住shift键，批量操作
// 定义全局变量
var flag = false;
// 全局事件，监听键盘shift按键是否被按下
$(window).on("keydown", function (e) {
// alert(e.keyCode);
if (e.keyCode === 16){
flag = true;
}
});
// 全局事件,shift按键抬起时将全局变量置为false
$(window).on("keyup", function (e) {
if (e.keyCode === 16){
flag = false;
}
});
// select绑定change事件
$("table select").on("change", function () {
// 是否为批量操作模式
if (flag) {
var selectValue = $(this).val();
// 找到所有被选中的那一行的select，选中指定值
$("input:checked").parent().parent().find("select").val(selectValue);
}
})
</script>
</body>
</html>
事件绑定
方法一：语法: 标签对象.事件(函数)
$("#b1").click(function () {
alert(123);
}); 方法二：.on( events [, selector ],function(){})
$("#b1").on("click",function () {
alert(456);
});
移除事件
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
events： 事件
selector: 选择器（可选的）
function: 事件处理函数
阻止后续事件执行
return false; // 常见阻止表单提交等
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
示例：
表格中每一行的编辑和删除按钮都能触发相应的事件。
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
}$("已经存在的标签").on("事件", "选择器", function(){...}) 为已存在标签内的标签绑定事件，新增的标签也能被绑定上事件
each循环
query支持两种循环方式：
格式：$.each(obj,fn)
<body> <form action="">
<input type="text">
<input type="password">
<input type="submit">
</form> <script src="../jquery-3.2.1.min.js"></script>
<script>
var a = [11,22,33,44,55];
$.each(a,function (i,v) {
console.log(i,v); // i是索引，v是值
if (v === 33){
return false; // 后面的都不执行了，相当于break，如果只有return，相当于continue
}
}); $(":submit").on("click",function () {
if ($(":text").val().length === 0 || $(":password").val().length === 0){
return false; // 此时form表单的提交按钮不会执行提交
}
})
</script>
</body>
格式：$("").each(fn)
$("tr").each(function(){
console.log($(this).html()) // this指当前循环的标签
})
each扩展
/*
function f(){ for(var i=0;i<4;i++){ if (i==2){
return
}
console.log(i)
} }
f(); // 这个例子大家应该不会有问题吧!!!
//----------------------------------------------------------------------- li=[11,22,33,44];
$.each(li,function(i,v){ if (v==33){
return ; // ===试一试 return false会怎样?
}
console.log(v)
}); //------------------------------------------ // 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行 //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,
//希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:
for(var i in obj){ ret=func(i,obj[i]) ;
if(ret==false){
return ;
} }
// 这样就很灵活了:
// <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true
// <2>如果你不想return后下面循环函数继续执行,那么就直接写return false // ---------------------------------------------------------------------
动画效果
显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script> $(document).ready(function() {
$("#hide").click(function () {
$("p").hide(1000);
});
$("#show").click(function () {
$("p").show(1000);
}); //用于切换被选元素的 hide() 与 show() 方法。
$("#toggle").click(function () {
$("p").toggle();
});
}) </script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body> <p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button> </body>
</html>
滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#slideDown").click(function(){
$("#content").slideDown(1000);
});
$("#slideUp").click(function(){
$("#content").slideUp(1000);
});
$("#slideToggle").click(function(){
$("#content").slideToggle(1000);
})
});
</script>
<style> #content{
text-align: center;
background-color: lightblue;
border:solid 1px red;
display: none;
padding: 50px;
}
</style>
</head>
<body> <div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div> <div id="content">helloworld</div> </body>
</html>
淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#in").click(function(){
$("#id1").fadeIn(1000); });
$("#out").click(function(){
$("#id1").fadeOut(1000); });
$("#toggle").click(function(){
$("#id1").fadeToggle(1000); });
$("#fadeto").click(function(){
$("#id1").fadeTo(1000,0.4); });
}); </script> </head>
<body>
<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="fadeto">fadeto</button> <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div> </body>
</html>
回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script> </head>
<body>
<button>hide</button>
<p>helloworld helloworld helloworld</p> <script>
$("button").click(function(){
$("p").hide(1000,function(){
alert($(this).html())
}) })
</script>
</body>
</html>
自定义动画示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞动画示例</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body> <div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
.data()
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
.data(key, value):
描述：在匹配的元素上存储任意相关数据
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据
$("div").removeData("k"); //移除元素上存放k对应的数据
扩展方法 (插件机制)
jQuery.extend(object)
扩展jQuery对象本身。
用来在jQuery命名空间上增加新函数。
在jQuery命名空间上增加两个函数:
<script>
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
}); jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5
</script>
jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
增加两个插件方法：
<body> <input type="checkbox">
<input type="checkbox">
<input type="checkbox"> <script src="jquery.min.js"></script>
<script>
jQuery.fn.extend({
check: function() {
$(this).attr("checked",true);
},
uncheck: function() {
$(this).attr("checked",false);
}
}); $(":checkbox:gt(0)").check()
</script> </body>
单独写在文件中的扩展，为了防止引入过个插件时，出现覆盖现象，使用下面的方法写：
(function(jq){
jq.extend({
funcName:function(){
...
},
});
})(jQuery);
登录验证简单例子
html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body> <form action="">
<div>
<label for="name">姓名</label>
<input id="name" type="text" name="username">
<span class="error"></span>
</div>
<div>
<label for="pwd">姓名</label>
<input id="pwd" type="password" name="password">
<span class="error"></span>
</div>
<div>
<input id="submit" type="submit" value="登录">
</div>
</form>
<script src="../jquery-3.2.1.min.js"></script>
<script src="extend示例.js"></script>
<script>
$.check();
</script>
</body>
</html>
js插件文件
$.extend({
check: function () {
function check() {
var flag = true;
$("form input[type!='submit']").each(function () {
if ($(this).val().length === 0) {
// 此input没有填写数据，需要填写错误提示
var currentLabel = $(this).prev().text();
$(this).next().text(currentLabel + "不能为空");
// 将标识位置为false，阻止后续submit自带的提交事件
flag = false;
// 阻止each循环
return flag;
}
});
return flag;
}
// 清空之前的错误信息
$("form input[type!='submit']").on("focus", function () {
$(this).next().text("");
});
// 给登录按钮绑定事件
$("#submit").on("click", function () {
// 清空之前的错误提示
// $("form .error").text("");
return check();
});
}
});
jQuery文档节点处理，克隆，each循环，动画效果，插件的更多相关文章
- jQuery文档操作之克隆操作
语法: $(selector).clone(); 解释:克隆匹配的DOM元素 $("button").click(function(event) { //1.clone():克隆匹 ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使用 noConflict() 方法为 jQuery 变量规定新 ...
- jQuery 文档操作方法
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- 深入理解DOM节点类型第七篇——文档节点DOCUMENT
× 目录 [1]特征 [2]快捷访问 [3]文档写入 前面的话 文档节点document,隶属于表示浏览器的window对象,它表示网页页面,又被称为根节点.本文将详细介绍文档节点document的内 ...
- jQuery文档加载完毕的几种写法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
- jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
- jQuery文档操作方法对比和src写法
jQuery文档操作方法对比 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- 获取JQuery UI tabs中被选中的tabs的方法
JQuery标签事件处理实例 如果你正在使用JQuery tabs而且想从基本的功能扩展到自定义的功能,这是你最好知道如何处理JQuery的点击事件. 在这篇文章中: 1.回顾如何添加当tab被点击时 ...
- VMware网络连接失败解决方法
假如你碰到了VMware 网络被断开,明明已经分配了适配器,客户端却显示网络断开没有连接. 一. 可用恢复默认的方法重置所有网卡及服务. 如图片操作: 进主工具首页.点击: 虚拟网络编辑器 然后点击下 ...
- 常见sql 写法总结
关于如何获取1对多数据中最大条数据的写法 例子: LEFT JOIN ( SELECT * FROM table AS n1 WHERE n1.ID IN ( SELECT MAX(id) FROM ...
- 无状态会话Bean、有状态会话Bean、CMP与BMP中，哪一种Bean不需要自己书写连接数据库的代码？
无状态会话Bean.有状态会话Bean.CMP与BMP中,哪一种Bean不需要自己书写连接数据库的代码? A.无状态会话Bean B.有状态会话Bean C.CMP D.BMP 解答:C
- 【SR】MAP
MAP:最大后验概率(Maximum a posteriori) 估计方法根据经验数据获得对难以观察的量的点估计.它与最大似然估计中的 Fisher方法有密切关系, 但是它使用了一个增大的优化目标,这 ...
- 尼康D90多点对焦
11点对焦 上市时间 2008 类型 单反数码相机 对焦方式 单区域AF:在选择区域内只对焦于目标可以从11个AF点传感器中的任意一个中选择 动态区域AF:对焦于选择区域的目标上,如果目标离开原来位置 ...
- poj 3249(bfs+dp或者记忆化搜索)
题目链接:http://poj.org/problem?id=3249 思路:dp[i]表示到点i的最大收益,初始化为-inf,然后从入度为0点开始bfs就可以了,一开始一直TLE,然后优化了好久才4 ...
- App Store App申请审核加速
有没有遇到上线后发现很严重的bug这种情况,修复bug后提交审核又是漫长的等待,那样会把人逼疯的. 估计是为了对应这样的情况,Apple提供有一个加速审核的通道: https://developer. ...
- 关于修改react的启动端口
在package.json文件里面,加一个port端口号就ok了
- 基于GTID的主从架构异常处理流程
通常情况下我们主库的binlog只保留7天,如果从库故障超过7天以上的数据没有同步的话,那么主从架构就会异常,需要重新搭建主从架构. 本文就简单说明下如何通过mysqldump主库的数据恢复从库的主从 ...