一、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. 『高次同余方程 Baby Step Giant Step算法』

    高次同余方程 一般来说,高次同余方程分\(a^x \equiv b(mod\ p)\)和\(x^a \equiv b(mod\ p)\)两种,其中后者的难度较大,本片博客仅将介绍第一类方程的解决方法. ...

  2. SpringBoot+MyBatis+MySQL读写分离

    1.  引言 读写分离要做的事情就是对于一条SQL该选择哪个数据库去执行,至于谁来做选择数据库这件事儿,无非两个,要么中间件帮我们做,要么程序自己做.因此,一般来讲,读写分离有两种实现方式.第一种是依 ...

  3. CompletableFuture基本用法

    异步计算 所谓异步调用其实就是实现一个可无需等待被调用函数的返回值而让操作继续运行的方法.在 Java 语言中,简单的讲就是另启一个线程来完成调用中的部分计算,使调用继续运行或返回,而不需要等待计算结 ...

  4. Python爬虫入门教程 8-100 蜂鸟网图片爬取之三

    蜂鸟网图片--啰嗦两句 前几天的教程内容量都比较大,今天写一个相对简单的,爬取的还是蜂鸟,依旧采用aiohttp 希望你喜欢 爬取页面https://tu.fengniao.com/15/ 本篇教程还 ...

  5. C#版 - Leetcode 633. 平方数之和 - 题解

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...

  6. WebApi系列~对HttpClient的响应流进行解压

    回到目录 有时我们的请求头为ContentEncoding添加了gzip进行了压缩,而服务端返回数据时也会对它进行gzip压缩,如果在这种情况下,你直接头响应流会是乱码,而必须先进行压缩,大叔将这块的 ...

  7. Chapter 5 Blood Type——22

    Suddenly the sidewalk disappeared from beneath me. My eyes flew open in shock. 突然我身下的人行道消失了.我飞快的睁开眼睛 ...

  8. Kafka控制器选举流程剖析

    1.概述 平时在使用Kafka的时候,可能关注的更多的是Kafka系统层面的.今天来给大家剖析一下Kafka的控制器,了解一下Kafka控制器的选举流程. 2.内容 Kafka控制器,其实就是一个Ka ...

  9. 离线批量数据通道Tunnel的最佳实践及常见问题

    基本介绍及应用场景 Tunnel是MaxCompute提供的离线批量数据通道服务,主要提供大批量离线数据上传和下载,仅提供每次批量大于等于64MB数据的场景,小批量流式数据场景请使用DataHub实时 ...

  10. 执行对象Statement、PreparedStatement和CallableStatement详解 JDBC简介（五）

    执行对象是SQL的执行者,SQL是“安排好的任务”,执行对象就是“实际工作的人”. 执行对象有三种: Statement.PreparedStatement和CallableStatement,他们都 ...