jQuery第五天

最新推荐文章于 2024-07-08 18:01:35 发布
最新推荐文章于 2024-07-08 18:01:35 发布
阅读量115 收藏
点赞数
分类专栏： jQuery 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59708269/article/details/124800624
版权

一.扩展插件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>25_扩展插件</title>
  <style type="text/css">
    * {
      margin: 0px;
    }

    .div1 {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 50px;
      left: 10px;
      background: red;
    }
  </style>
</head>
<body>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全　选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="reverseCheckedBtn" value="反选"/>

<!--
1. 扩展jQuery的工具方法
  $.extend(object)
2. 扩展jQuery对象的方法
  $.fn.extend(object)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/my_jQuery-plugin.js"></script>
<script type="text/javascript">
  /*
   需求：
   1. 给 $ 添加4个工具方法:
     * min(a, b) : 返回较小的值
     * max(c, d) : 返回较大的值
     * leftTrim() : 去掉字符串左边的空格
     * rightTrim() : 去掉字符串右边的空格
   2. 给jQuery对象 添加3个功能方法:
     * checkAll() : 全选
     * unCheckAll() : 全不选
     * reverseCheck() : 全反选
   */
  console.log($.min(3, 5), $.max(3, 5))
  var string = '   my atguigu    '
  console.log('-----' + $.leftTrim(string) + '-----')
  console.log('-----' + $.rightTrim(string) + '-----')

  var $items = $(':checkbox[name=items]')
  $('#checkedAllBtn').click(function () {
    $items.checkAll()
  })
  $('#checkedNoBtn').click(function () {
    $items.unCheckAll()
  })
  $('#reverseCheckedBtn').click(function () {
    $items.reverseCheck()
  })
</script>
</body>
</html>

/*
 需求：
 1. 给 $ 添加4个工具方法:
   * min(a, b) : 返回较小的值
   * max(c, d) : 返回较大的值
   * leftTrim() : 去掉字符串左边的空格
   * rightTrim() : 去掉字符串右边的空格
 2. 给jQuery对象 添加3个功能方法:
 * checkAll() : 全选
 * unCheckAll() : 全不选
 * reverseCheck() : 全反选
 */
(function () {

  // 扩展$的方法
  $.extend({
    min: function (a, b) {
      return a < b ? a : b
    },
    max: function (a, b) {
      return a > b ? a : b
    },
    leftTrim: function (str) {
      return str.replace(/^\s+/, '')
    },
    rightTrim: function (str) {
      return str.replace(/\s+$/, '')
    }
  })

  // 扩展jQuery对象的方法
  $.fn.extend({
    checkAll: function () {
      this.prop('checked', true) // this是jQuery对象
    },
    unCheckAll: function () {
      this.prop('checked', false)
    },
    reverseCheck: function () {
      // this是jQuery对象
      this.each(function () {
        // this是dom元素
        this.checked = !this.checked
      })
    }
  })

})()

二.多库共存

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>26_多库共存</title>
  <style type="text/css">
    * {
      margin: 0px;
    }

    .div1 {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 50px;
      left: 10px;
      background: red;
    }
  </style>
</head>
<body>
<!--
问题 : 如果有2个库都有$, 就存在冲突
解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict()
-->
<script type="text/javascript" src="js/myLib.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">

  // 释放$的使用权
  jQuery.noConflict()
  // 调用myLib中的$
  $()
  // 要想使用jQuery的功能, 只能使用jQuery
  jQuery(function () {
    console.log('文档加载完成')
  })
  console.log('+++++')

</script>
</body>
</html>

(function () {
  window.$ = function () {
    console.log('my lib $()...')
  }
})()

三.onload与ready

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>window.onload与$(document).ready()</title>
</head>
<body>
<h1>测试window.onload与$(document).ready()</h1>
<img id="logo" src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-05-19/6fec71d56242b74eb24b4ac80b817eac.png">

<!--
区别: window.onload与 $(document).ready()
  * window.onload
    * 包括页面的图片加载完后才会回调(晚)
    * 只能有一个监听回调
  * $(document).ready()
    * 等同于: $(function(){})
    * 页面加载完就回调(早)
    * 可以有多个监听回调
-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
  /*
   需求：
   1. 直接打印img的宽度，观察其值
   2. 在 $(function(){}) 中 打印 img 的宽度
   3. 在 window.onload 中打印宽度
   4. 在 img 加载完成后打印宽度
   */

  // 1. 直接打印img的宽度，观察其值
  console.log('直接', $('#logo').width())
  
  window.onload = function () {
    console.log('onload', $('#logo').width())
  }
  window.onload = function () {
    console.log('onload2', $('#logo').width())
  }
  
  $(function () {
    console.log('ready', $('#logo').width())
  })
  $(function () {
    console.log('ready2', $('#logo').width())
  })
  
  $('#logo').on('load', function () {
    console.log('img load', $(this).width())
  })

  /*$(document).ready(function () {

  })*/
  
</script>
</body>
</html>

四.jQueryUI

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="jquery-ui.css">
</head>
<body>

<!-- Accordion: 手风琴-->
<h2>1. Accordion: 手风琴</h2>
<div id="accordion">
  <h3>First</h3>
  <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
  <h3>Second</h3>
  <div>Phasellus mattis tincidunt nibh.</div>
  <h3>Third</h3>
  <div>Nam dui erat, auctor a, dignissim quis.</div>
</div>

<!-- 2. Autocomplete: 自动搜索匹配 -->
<h2>Autocomplete</h2>
<div>
  <input id="autocomplete" title="type &quot;a&quot;">
</div>

<!-- 3. Tabs: 选项卡 -->
<h2 >3. Tabs: 选项卡</h2>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
  <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
  // 1. Accordion: 手风琴
  $('#accordion').accordion()

  // 所有数据的数组
  var dataSource = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ]

  // 2. Autocomplete: 自动搜索匹配
  $( "#autocomplete" ).autocomplete({
    source: dataSource  // 数据源
  });

  // 3. Tabs: 选项卡
  $('#tabs').tabs()

</script>
</body>
</html>

五.laydate

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="js/laydate.js"></script>
</head>
<body>
<input placeholder="请输入日期" class="laydate-icon" onclick="laydate()">

<input class="laydate-icon" id="demo" value="2014-6-25更新">
<script type="text/javascript">
  ;!function(){
    laydate.skin('molv');

    laydate({
      elem: '#demo'
    })

  }()
</script>


<div id="test1" class="laydate-icon"></div>
<script>
  laydate({  // 配置对象
    elem: '#test1',
    format: 'YYYY/MM', // 分隔符可以任意定义，该例子表示只显示年月
    festival: true, //显示节日
    choose: function(datas){ //选择日期完毕的回调
      alert('得到：'+datas);
    }
  });
</script>

<div id="hello3" class="laydate-icon"></div>
<script>
  laydate({
    elem: '#hello3',
    min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
    max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
  });
</script>
</body>
</html>

六.表格隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01__表格隔行变色</title>
  <style>
    div, span, p {
      width: 140px;
      height: 140px;
      margin: 5px;
      background: #aaa;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Verdana;
    }

    div.mini {
      width: 55px;
      height: 55px;
      background-color: #aaa;
      font-size: 12px;
    }

    div.hide {
      display: none;
    }

    #data {
      width: 600px;
    }

    #data, td, th {
      border-collapse: collapse;
      border: 1px solid #aaaaaa;
    }

    th, td {
      height: 28px;
    }

    #data thead {
      background-color: #333399;
      color: #ffffff;
    }

    .odd {
      background-color: #ccccff;
    }
  </style>
</head>
<body>
<table id="data">
  <thead>
    <tr>
      <th>姓名</th>
      <th>工资</th>
      <th>入职时间</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>Tom</td>
    <td>$3500</td>
    <td>2010-10-25</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>$3400</td>
    <td>2010-12-1</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>King</td>
    <td>$5900</td>
    <td>2009-08-17</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>Scott</td>
    <td>$3800</td>
    <td>2012-11-17</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>Smith</td>
    <td>$3100</td>
    <td>2014-01-27</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  <tr>
    <td>Allen</td>
    <td>$3700</td>
    <td>2011-12-05</td>
    <td><a href="javascript:void(0)">删除</a></td>
  </tr>
  </tbody>
</table>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  $('#data>tbody>tr:odd').css('background', '#ccccff')
  // $('#data>tbody>tr:odd').addClass('odd')
  //$('#data>tbody>tr:odd').attr('class', 'odd')
</script>
</body>
</html>

七.多Tab点击切换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_多Tab点击切换</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #tab li {
      float: left;
      list-style: none;
      width: 80px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      text-align: center;
    }

    #container {
      position: relative;
    }

    #content1, #content2, #content3 {
      width: 300px;
      height: 100px;
      padding: 30px;
      position: absolute;
      top: 40px;
      left: 0;
    }

    #tab1, #content1 {
      background-color: #ffcc00;
    }

    #tab2, #content2 {
      background-color: #ff00cc;
    }

    #tab3, #content3 {
      background-color: #00ccff;
    }
  </style>
</head>
<body>
<h2>多Tab点击切换</h2>

<ul id="tab">
  <li id="tab1" value="1">10元套餐</li>
  <li id="tab2" value="2">30元套餐</li>
  <li id="tab3" value="3">50元包月</li>
</ul>

<div id="container">
  <div id="content1">
    10元套餐详情：<br/>&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
  </div>
  <div id="content2" style="display: none">
    30元套餐详情：<br/>&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
  </div>
  <div id="content3" style="display: none">
    50元包月详情：<br/>&nbsp;每月无限量随心打
  </div>
</div>


<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">

  var $contents = $('#container>div')
  // 给3个li加监听
  /*$('#tab>li').click(function () { // 隐式遍历
    //alert('----')
    // 隐隐藏所有内容div
    $contents.css('display', 'none')
    // 显示对应的内容div
    // 得到当前点击的li在兄弟中下标
    var index = $(this).index()
    // 找到对应的内容div, 并显示
    $contents[index].style.display = 'block'
    // $($contents[index]).css('display', 'block')
  })*/

  var currIndex = 0 //当前显示的内容div的下标
  $('#tab>li').click(function () { // 隐式遍历
    //alert('----')
    // 隐藏当前已经显示的内容div
    $contents[currIndex].style.display = 'none'
    // 显示对应的内容div
      // 得到当前点击的li在兄弟中下标
    var index = $(this).index()
      // 找到对应的内容div, 并显示
    $contents[index].style.display = 'block'

    // 更新下标
    currIndex = index
  })


</script>
</body>
</html>

八.回到顶部

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>03_回到顶部</title>
  <style>
    #to_top {
      width: 30px;
      height: 40px;
      font: 14px/20px arial;
      text-align: center;
      background: #06c;
      position: fixed;
      cursor: pointer;
      color: #fff;
      left: 1050px;
      top: 500px;
    }
  </style>
</head>
<body style="height: 2000px;">

<div id="to_top">返回顶部</div>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  $('#to_top').click(function () {
    // 瞬间滚到顶部
    //$('html,body').scrollTop(0)

    // 平滑滚到顶部
      // 总距离
    var $page = $('html,body')
    var distance = $('html').scrollTop() + $('body').scrollTop()
      // 总时间
    var time = 500
      // 间隔时间
    var intervalTime = 50
    var itemDistance = distance/(time/intervalTime)
      // 使用循环定时器不断滚动
    var intervalId = setInterval(function () {
      distance -= itemDistance
      // 到达顶部, 停止定时器
      if(distance<=0) {
        distance = 0 //修正
        clearInterval(intervalId)
      }
      $page.scrollTop(distance)
    }, intervalTime)

  })
</script>
</body>

</html>

九.导航动态显示效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_导航动态显示效果</title>
  <style rel="stylesheet">
    * {
      margin: 0;
      padding: 0;
      word-wrap: break-word;
      word-break: break-all;
    }

    body {
      background: #FFF;
      color: #333;
      font: 12px/1.6em Helvetica, Arial, sans-serif;
    }

    a {
      color: #0287CA;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    ul, li {
      list-style: none;
    }

    img {
      border: none;
    }

    h1, h2, h3, h4, h5, h6 {
      font-size: 1em;
    }

    html {
      overflow: -moz-scrollbars-vertical; /* 在Firefox下始终显示滚动条*/
    }

    #navigation {
      width: 784px;
      padding: 8px;
      margin: 8px auto;
      background: #3B5998;
      height: 18px;
    }

    #navigation ul li {
      float: left;
      margin-right: 14px;
      position: relative;
      z-index: 100;
    }

    #navigation ul li a {
      display: block;
      padding: 0 8px;
      background: #EEEEEE;
      font-weight: 700;
    }

    #navigation ul li a:hover {
      background: none;
      color: #fff;
    }

    #navigation ul li ul {
      background-color: #88C366;
      position: absolute;
      width: 80px;
      overflow: hidden;
      display: none;
    }

    #navigation ul li ul li {
      border-bottom: 1px solid #BBB;
      text-align: left;
      width: 100%;
    }
  </style>
</head>
<body>
<div id="navigation">
  <ul>
    <li><a href="#">首 页</a></li>
    <li><a href="#">衬 衫</a>
      <ul>
        <li><a href="#">短袖衬衫</a></li>
        <li><a href="#">长袖衬衫</a></li>
        <li><a href="#">无袖衬衫</a></li>
      </ul>
    </li>
    <li><a href="#">卫 衣</a>
      <ul>
        <li><a href="#">开襟卫衣</a></li>
        <li><a href="#">套头卫衣</a></li>
      </ul>
    </li>
    <li>
      <a href="#">裤 子</a>
      <ul>
        <li><a href="#">休闲裤</a></li>
        <li><a href="#">卡其裤</a></li>
        <li><a href="#">牛仔裤</a></li>
        <li><a href="#">短裤</a></li>
      </ul>
    </li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  $('#navigation>ul>li:has(ul)').hover(function () {
    //动画展开
    $(this).children('ul').stop(true).slideDown()
  }, function () {
    // 动画收缩
    $(this).children('ul').stop(true).slideUp()
  })
</script>
</body>
彭于晏爱编程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery第三天
m0_59708269的博客
05-14 124
一.工具方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>09_$工具方法</title> </head> <body> <!-- 1. $.each(): 遍历数组或对象中的数据 2. $.trim(): 去除字符串两边的空格 3. $.type(obj): 得到数据的类型 4. $.isArray(obj): 判断是否是
与JQuery的第二天
weixin_54001390的博客
03-30 114
今日内容： 1. 动画，2. 遍历，3. 事件绑定 ， 4. 案件 ，5. 插件 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数： 1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) 2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
jQuery学习：日期控件 layui -laydate
weixin_47295886的博客
11-16 744
【代码】jQuery学习：日期控件 layui -laydate。
jQuery--onload与ready、扩展插件、验证插件
qq_34983808的博客
05-28 213
1、onload与ready的区别 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;window.onload与$(document).ready()&lt;/title&gt; &lt;/head&amp
日期插件layDate的使用
热门推荐
PresByter的博客
10-12 4万+
效果图官方链接 1 layui中的laydate官方链接 2 贤心的layui使用说明 只需引入 laydate.js 即可 HTML结构 <input type="text" id="test1">3.js使用方法 //新版本js使用方法 laydate.render({ elem: '#test1' //指定元素 }); //旧版本js使用方法 laydate({ e
jquery日历插件——laydate的使用
不积跬步无以至千里
12-13 5066
主要使用的是layui组件库中的laydate组件。附： layui.laydate https://www.layui.com/laydate/ HTML部分 &lt;div class="card-calendar"&gt; &lt;!-- 日历选择器 --&gt; &lt;input type="text" class="inputBox " r...
总结使用layui-laydate日历控件遇到的问题
weixin_44764814的博客
04-06 4004
一、利用layui-laydate日历控件选择月份 1、问题 选择月份时不能实现鼠标直接点击选择，选择之后需要按“确定” 原来的代码 html文件： <div class="layui-inline layui-show-xs-block"> <span>日期: </span> </div> <div class="layui-inline layui-show-xs-block"> <input type="text"
jQuery第5天知识点：隐式迭代、链式编程、jQuery插件.7z
07-18
在深入探讨jQuery的这三个核心概念之前，让我们先简要了解一下jQuery。jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务，极大地提高了开发者的效率。现在，我们将详细...
锋利的jquery第五章例子
12-12
《锋利的jQuery第五章实例解析》 在深入探讨这些实例之前，首先理解jQuery的核心概念是至关重要的。jQuery是一款高效、简洁的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。在jQuery的...
JQuery自学第三天.docx
04-24
在JQuery自学的第三天，我们深入理解了JQuery与原生JavaScript的区别、冲突解决策略、核心函数的用法以及JQuery对象的概念。 1. **JQuery与原生JS的区别**： - 加载模式：原生JS等待DOM和所有资源加载完毕才执行，...
laydate.js
09-13
layui时间插件,更新其中个的js代码,添加render 方法,这样在使用时间的插件的时候,直接按照官网API的方式去引入即可使用
JQuery自学第一天.docx
04-15
5. **静态方法与实例方法**： - 静态方法（如`$.each()`）是直接通过类名调用的，不依赖于特定的实例。 - 实例方法（如`$(...).fadeIn()`)是通过JQuery对象调用的，它们与特定的DOM元素集合关联。 6. **静态方法`...
锋利的jQuery第2版源码
05-04
《锋利的jQuery第2版》是一本深入探讨jQuery库的专著，旨在帮助开发者更好地理解和运用这个强大的JavaScript工具。本书源码的提供是为了让读者能够结合实际代码加深理解，进一步提升开发技能。以下是根据书中的核心...
jQuery的laydate时间控件修改方法
qq_40668646的博客
05-07 654
最终效果如下 用的是模板生成的控件 在template_field_jsp文件中，日期段时间控件模板如下 <script id="tplDatePicker" type="text/template"> [% field.isRange = field.configName === 'dateRangeConfig';%] [% field.nameSuffix = field.isRange && !field.name.contains('Range') .
转：laydate日历控件的使用
总有一天，你的日积月累，会成为别人的望尘莫及
05-16 691
原文转载自：http://www.cnblogs.com/fengpingfan/p/4660273.html   在日常的网页开发过程中，日期组件已经成为不可或缺的组件之一。同时，随着广大杰出攻城狮的不懈努力，也出现了很多优秀的日期组件，其中我个人觉得 layDate 日期组件是一个非常不错的组件，简洁易用，样式清爽。此文主要以贤心所作的 layDate 组件进行日期选择的演示，敬请各位小...
laydate组件
Charge8的博客
07-03 3390
layui.laydate 时间日期组件：点击打开链接主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。内置强劲的自定义日期格式解析和合法校正机制，含中文版和国际版，主题简约却又不失灵活多样。可以在 layui 中使用 layDate，也可直接使用 layDate 独立版，下面在layui中使用laydate组件，引...
jQuery LayDate 日期控件
zaixianshouce的博客
12-15 460
她基于原生JavaScript精心雕琢，兼容了包括IE6在内的所有主流浏览器。她具备优雅的内部代码，良好的性能体验，和完善的皮肤体系，并且完全开源，你可以任意获取开发版源代码，一扫某些传统日期控件的封闭与狭隘。layDate本着资源共享的开发者精神和对网页日历交互无穷的追求，延续了layui一贯的简单与易用。她遵循LGPL协议，您可以免费将她用于任何个人项目。 版本 LayDate 1...
当jQuery动态添加遇到laydate
不秃头码农
10-22 1972
jQuery动态添加laydate解决方案 今天做项目的某个模块功能，需要jQuery动态添加laydate来实现，上图： 每点击添加一次就要生成一个laydate框，开始直接绑定css实现，发现已有的输入框可以正常弹出laydate，但是点击添加按钮生成出来的却没反应，在网上找了好久，还学到了一个前端名词事件委托(本人搞java的不懂这些，见笑了)，然后尝试用事件委托来实现，初次尝试如下（#t...
LibreOffice的国内镜像安装地址和node.js国内快速下载网站
最新发布
小丁的博客
07-08 291
国内镜像包网址：https://mirrors.cloud.tencent.com/libreoffice/libreoffice/
第一个jquery页面
06-20
在jQuery中，创建第一个使用这个流行的JavaScript库的页面非常简单。jQuery的核心思想是简化DOM操作和事件处理。下面是一个基础的HTML页面，展示了如何引入jQuery并使用它来选择元素： ```html <!DOCTYPE html> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值