一、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. solr之环境配置三

    配置安装Solr到Tomcat 1. 解压 solr4.7.2.zip 2. 将 solr-4.7.2\dist\solr-4.7.2.war拷贝到 apache-tomcat-7.0.55\weba ...

  2. asp.net core 系列 9 环境(Development、Staging 、Production)

    一.在asp.net core中使用多个环境 ASP.NET Core 配置是基于运行时环境, 使用环境变量.ASP.NET Core 在应用启动时读取环境变量ASPNETCORE_ENVIRONME ...

  3. nginx~linux下的部署

    一些概念     Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄 ...

  4. Win 7 家庭普通版系统升级密钥

    VQB3X-Q3KP8-WJ2H8-R6B6D-7QJB7 (高级版)FJGCP-4DFJD-GJY49-VJBQ7-HYRR2 (旗舰版)要先升级到高级版再升级旗舰版,不然(可能)会出错.

  5. leetcode — best-time-to-buy-and-sell-stock-ii

    /** * Source : https://oj.leetcode.com/problems/best-time-to-buy-and-sell-stock-ii/ * * * * Say you ...

  6. Nginx的正向代理与反向代理详解

    正向代理和反向代理的概念 代理服务(Proxy),通常也称为正向代理服务. 如果把局域网外Internet想象成一个巨大的资源库,那么资源就分布到了Internet的各个点上,局域网内的客户端要访问这 ...

  7. 关于setState的一些记录

    在看React的官方文档的时候, 发现了这么一句话,State Updates May Be Asynchronous,于是查询了一波相关的资料, 最后归纳成以下3个问题 setState为什么要异步 ...

  8. 跨站点请求伪造（CSRF）学习

    一.CSRF介绍 伪造一个站点,在站点中伪造一个向其他站点的请求,在用户访问该站点时让用户执行 假设有如下URL能删除一篇文章: 攻击者在自己的域中构造一个页面: 内容为: 使用一个img标签,其地址 ...

  9. C# 程序异常关闭时的捕获

    本文主要以一个简单的小例子,描述C# Winform程序异常关闭时,如何进行捕获,并记录日志. 概述 有时在界面的事件中,明明有try... catch 进行捕获异常,但是还是会有异常关闭的情况,所以 ...

  10. X级联动

    前端数据 @{ ViewBag.Title = "Index"; } <script src="~/Scripts/jquery-1.10.2.js"&g ...