jQuery each、节点操作、动画演示、尺寸操作、扩展方法
一、each
1、方式一:$.each(数组或者自定义对象,function(i,j){console.log(i,j)})
$.each(li,function(i,j){
console.log(i,j)
});
2、方式二:
$('选择器').each(function(){
执行相应的代码;
})
3、each的中的退出循环
return ---->continue
return false --->break
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='https://cdn.bootcss.com/jquery/3.3.1/jquery.js'></script> <body>
<div class='container'>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li> </ul> </div>
<script type="text/javascript">
//each方法一
// let li=['张','李','赵','日'];
// let arr={'张':'三','李':'四','赵':'五','日':'天'};
// $.each(li,function(i,j){
// console.log(i,j);
// })
// $.each(arr,function(i,j){
// console.log(i,j);
// }) // //each方法二
// $('li').each(function(){
// console.log($(this).html()); // }) //each的退出循环
$('li').each(function(){ if ($(this).html()==='222') {
// return; //相当于continue,跳过当前循环
return false; //相当于break,终止循环
}
console.log($(this).html());
}) </script> </body>
</html>
each演示代码
二、节点操作(********)
1、创建标签
$("<p>") ;创建p标签:<p></p>
2、添加节点
(1)内部插入
父节点在最后添加一个子节点 :
$("父节点").append('子节点') ----->$("p").append("<b>Hello</b>");
一个子节点插入到父节点的末尾:
$("子节点").appendTo('定位到父节点') ----->$("p").appendTo("div");
父节点下第一个位置添加一个节点
$("父节点").prepend('子节点') ----->$("p").prepend("<b>Hello</b>");
一个新节点添加的父节点的第一个位置:
$("子节点").prependTo('定位到父节点') ----->$("p").prependTo("#foo");
(2)外部插入
$("").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");
3、删除节点:定位到需要删除的节点后面直接.remove()
$("").empty() ; //清空标签,标签还保留;
$("").remove([expr]);//删除标签,无残留
4、替换节点
$("旧节点").replaceWith('新节点') ----->$("p").replaceWith("<b>Paragraph. </b>");
5、节点克隆(clone)
$("").clone([Even[,deepEven]])
三、动画演示
<!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(){
$("#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>
淡入淡出
四、尺寸操作
$("").height([val|fn]) 内容高度
$("").width([val|fn])内容宽度
$("").innerHeight() 内边框的高度
$("").innerWidth() 内边框的宽度
$("").outerHeight([soptions]) 外边框高度(+border);option=ture 表示包括margin
$("").outerWidth([options]) 外边框宽度(+border);option=ture 表示包括margin
五、扩展方法
扩展方式一:
扩展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 元素集来提供新的方法(通常用来制作插件)
增加两个插件方法:
<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>
jQuery each、节点操作、动画演示、尺寸操作、扩展方法的更多相关文章
- 【动画】JQuery实现冒泡排序算法动画演示
1 前言 冒泡排序是大家最熟悉的算法,也是最简单的排序算法,因其排序过程很象气泡逐渐向上漂浮而得名.为了更好的理解其基本的思想,毛三胖利用JQuery实现了冒泡排序的动画演示,并计划陆续实现其它排序算 ...
- 免费的精品: Productivity Power Tools 动画演示
Productivity Power Tools 是微软官方推出的 Visual Studio 扩展,被用以提高开发人员生产率.它的出现一定程度上弥补和完善了 Visual Studio 自身的不足, ...
- Productivity Power Tools 动画演示(转)
Productivity Power Tools 是微软官方推出的 Visual Studio 扩展,被用以提高开发人员生产率.它的出现一定程度上弥补和完善了 Visual Studio 自身的不足, ...
- Productivity Power Tools 动画演示--给力的插件工具
免费的精品: Productivity Power Tools 动画演示 Productivity Power Tools 是微软官方推出的 Visual Studio 扩展,被用以提高开发人员生产率 ...
- Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
- jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
- jQuery自学笔记(四):jQuery DOM节点操作
获得和设置内容:text( ).html( ) 以及 val( ) text( ) - 设置或返回所选元素的文本内容 html( ) - 设置或返回所选元素的内容(包括 HTML 标记) val( ) ...
- js、jquery对节点的操作(增、删)
js对节点的操作方法 一.获取 1.父节点的获取 某节点的parentNode属性值即为该节点的父节点.示例: var parent = document.getElementById("o ...
- Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
随机推荐
- redhat 6.5安装ansible
安装epel 源: rpm -ivh https://dl.fedoraproject.org/pub/epel/epel-release-latest-6.noarch.rpm 安装ansible ...
- 《深入理解Java虚拟机》-----第2章 Java内存区域与内存溢出异常
2.1 概述 对于从事C.C++程序开发的开发人员来说,在内存管理领域,他们即是拥有最高权力的皇帝又是执行最基础工作的劳动人民——拥有每一个对象的“所有权”,又担负着每一个对象生命开始到终结的维护责任 ...
- 用Maxima画出一些有趣的图
Maxima可以画出Chaos.Duffing .Fern.Lorenz.Rossler .Portraits .Mandelbrot.Staircase.Triangles等有趣的图... Chao ...
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2 新增解压缩工具类ZipHelper
在项目对文件进行解压缩是非常常用的功能,对文件进行压缩存储或传输可以节省流量与空间.压缩文件的格式与方法都比较多,比较常用的国际标准是zip格式.压缩与解压缩的方法也很多,在.NET 2.0开始,在S ...
- Spring Boot 2.x(九):遇到跨域不再慌
什么是跨域 首先,我们需要了解一下一个URL是怎么组成的: // 协议 + 域名(子域名 + 主域名) + 端口号 + 资源地址 http: + // + www.baidu.com + :8080/ ...
- 痞子衡嵌入式:常用的数据差错控制技术(3)- 和校验(Checksum)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式里数据差错控制技术-和校验. 在系列前一篇文章里,痞子衡给大家介绍了比较简单的校验法-奇偶校验,该校验法主要是针对byte传输校验而 ...
- Linux常用命令详解(week1_day1_2)--技术流ken
本节内容 aliasunaliasunamesuhostnamehistorywhichwcwwhowhoamipingkillseqdudffreedate 命令详解 1. alias 设置.’查看 ...
- iOS 循环引用讲解(中)
谈到循环引用,可能是delegate为啥非得用weak修饰,可能是block为啥要被特殊对待,你也可能仅仅想到了一个weakSelf,因为它能解决99%的关于循环引用的事情.下面我以个人的理解谈谈循环 ...
- 改善 C# 的语言习惯(一) - 使用属性而不是可访问的数据成员(整理中)
改善 C# 的语言习惯(一) - 使用属性而不是可访问的数据成员 序 为什么我们的程序运行得棒棒的,还要改呢?Why? 答:我们要让程序运行得更快,执行的效率更高,代码的可读性更强,维护的成本更低.. ...
- WPF 客户端浏览器 添加Loading加载进度
在windows开发界面时,使用浏览器来请求和显示网页内容,是比较常见的. 但是在请求网页内容时,因网速或者前端功能复杂加载较慢,亦或者加载时遇到各种问题,如空白/黑屏/加载不完整/证书问题等. 因此 ...