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>

View Code

　　扩展方式二:

　　　　扩展 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>

View Code

转载于:https://www.cnblogs.com/angle6-liu/p/10185332.html

jQuery each、节点操作、动画演示、尺寸操作、扩展方法相关推荐

jQuery添加css样式/动画效果
目录 jQuery操作css: css属性: 动画: 停止动画: 尺寸: 父/子/兄弟元素: 父元素: 子元素: 兄弟元素: 过滤: 遍历: jQuery操作css: addClass() - 向被选 ...
免费的精品: Productivity Power Tools 动画演示
Productivity Power Tools 是微软官方推出的 Visual Studio 扩展,被用以提高开发人员生产率.它的出现一定程度上弥补和完善了 Visual Studio 自身的不足, ...
Productivity Power Tools 动画演示(转)
Productivity Power Tools 是微软官方推出的 Visual Studio 扩展,被用以提高开发人员生产率.它的出现一定程度上弥补和完善了 Visual Studio 自身的不足, ...
链表动画演示等比数列 linux视频等
链表动画演示链表动画演示_哔哩哔哩_bilibili [动画演示]链表详解及其底层机制 C语言 [动画演示]链表详解及其底层机制 C语言_哔哩哔哩_bilibili 反转链表算法动画演示反转链表算 ...
JQuery添加扩展方法(理解$.extend(),与$.fn.extend()方法区别)
为什么80%的码农都做不了架构师?>>> 理解$.extend(),与$.fn.extend()方法区别 1.$.extend()方法 $.extend()方法在JQuery中 ...
jQuery（三）—节点操作和元素尺寸
jQuery节点操作和元素尺寸节点操作创建.追加元素 $()直接传入想要创建的节点 var $newli = $("<li>这是一个新的li标签</li>&quo ...
jQuery第二天(操作样式、属性、节点、动画）
02.jQuery操作样式 1. css操作功能:设置或者修改样式,操作的是style属性. 操作单个样式特点:jQ的css方法都是行内样式: //name: 需要设置的样式名称 //value: ...
jQuery DOM 节点操作
DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的"M".页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换. ...
jquery 元素节点操作 - 创建节点、插入节点、删除节点
jquery的节点操作说明前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的. 使用html()操作节点首先编写一个div包含一个 ...

jQuery each、节点操作、动画演示、尺寸操作、扩展方法

jQuery each、节点操作、动画演示、尺寸操作、扩展方法相关推荐

最新文章

热门文章