一、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、节点操作、动画演示、尺寸操作、扩展方法的更多相关文章

  1. 【动画】JQuery实现冒泡排序算法动画演示

    1 前言 冒泡排序是大家最熟悉的算法,也是最简单的排序算法,因其排序过程很象气泡逐渐向上漂浮而得名.为了更好的理解其基本的思想,毛三胖利用JQuery实现了冒泡排序的动画演示,并计划陆续实现其它排序算 ...

  2. 免费的精品: Productivity Power Tools 动画演示

    Productivity Power Tools 是微软官方推出的 Visual Studio 扩展,被用以提高开发人员生产率.它的出现一定程度上弥补和完善了 Visual Studio 自身的不足, ...

  3. Productivity Power Tools 动画演示(转)

    Productivity Power Tools 是微软官方推出的 Visual Studio 扩展,被用以提高开发人员生产率.它的出现一定程度上弥补和完善了 Visual Studio 自身的不足, ...

  4. Productivity Power Tools 动画演示--给力的插件工具

    免费的精品: Productivity Power Tools 动画演示 Productivity Power Tools 是微软官方推出的 Visual Studio 扩展,被用以提高开发人员生产率 ...

  5. Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  6. jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  7. jQuery自学笔记（四）：jQuery DOM节点操作

    获得和设置内容:text( ).html( ) 以及 val( ) text( ) - 设置或返回所选元素的文本内容 html( ) - 设置或返回所选元素的内容(包括 HTML 标记) val( ) ...

  8. js、jquery对节点的操作(增、删)

    js对节点的操作方法 一.获取 1.父节点的获取 某节点的parentNode属性值即为该节点的父节点.示例: var parent = document.getElementById("o ...

  9. Javascript及Jquery获取元素节点以及添加和删除操作

    用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...

随机推荐

  1. Nancy in .Net Core学习笔记 - 视图引擎

    前文中我们介绍了Nancy中的路由,这一篇我们来介绍一下Nancy中的视图引擎. Nancy中如何返回一个视图(View) 在ASP.NET Mvc中,我们使用ViewResult类来返回一个视图.N ...

  2. 一条项目中常用的linux命令引发的经典算法题

    小时候家里定了<读者>的月刊,里面记录一个故事:说有有个偏僻的乡村一日突然来了一个美女,她携着万贯家财子女在当地安家落户,成了当地的乡绅.她让她的子女世世代代的保守这个秘密,直到这个秘密不 ...

  3. Ubuntu18 的超详细常用软件安装

    心血来潮,在笔记本安装了Ubuntu 18 用于日常学习,于是有了下面的安装记录. Gnome-Tweak-Tool gnome-tweak-tool可以打开隐藏的设置,可以详细的对系统进行配置,以及 ...

  4. 【响应式编程的思维艺术】 （1）Rxjs专题学习计划

    目录 一. 响应式编程 二. 学习路径规划 一. 响应式编程 响应式编程,也称为流式编程,对于非前端工程师来说,可能并不是一个陌生的名词,它是函数式编程在软件开发中应用的延伸,如果你对函数式编程还没有 ...

  5. 第32章 事件 - Identity Server 4 中文文档(v1.0.0)

    日志记录是更低级别的"printf"样式 - 事件代表有关IdentityServer中某些操作的更高级别信息.事件是结构化数据,包括事件ID,成功/失败信息,类别和详细信息.这使 ...

  6. JSON字符串反序列化成对象_部分属性值反序列化失败

    简介:本人在开发webapi接口时遇到了:一个复杂的Json字符串在反序列化为对象时报,无法发序列化其中的一个属性对象? 使用方法: InternalRecommendRequestFormModel ...

  7. Android开发——打造简单的Viewpager指示器（小圆点指示器）

    准备工作: 1.两张不同颜色的小圆点图片,可以去阿里巴巴矢量图网站搜索 我把我使用的图片贴出来 2.一个简单的Viewpager的实现 下面是简单的Viewpager实现步骤: 1.布局文件使用Vie ...

  8. break，return和continue三者区别（Java）

    一.break用于完全结束一个循环,跳出循环体. 不管是哪种循环,一旦在循环体中遇到break,系统将完全结束循环,开始执行循环之后的代码. class Demo3 { public static v ...

  9. Elasticsearch系列（4）：基本搜索

    空搜索 搜索API的最基础的形式是没有指定任何查询的空搜索 ,它简单地返回集群中所有索引下的所有文档,如下命令: GET /_search 返回如下结果: 查询结果解释: 1,hits 返回结果中最重 ...

  10. java开发环境配置——Maven

    前篇讲了jdk的安装,这篇讲一下包管理工具Maven,Maven主要是用来统一管理项目引用的jar包,还有用来打包的. Maven官网下载地址:http://maven.apache.org/down ...