jQuery02(达)

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

jQuery02(达)

文章目录

DOM的脑图已经整理完毕, 可以到 FTP/DOM 中下载:DOM&BOM_ALL.zip

复习

jQuery: 是利用 JS 和 DOM 基础知识点, 封装的一套 JavaScript 框架

  • 在早年间, 具有统治性的地位, 大多数项目都是用JQuery 制作的
  • 虽然大趋势是vue开发为主, 但是 非1线城市 和 旧项目的维护, 政府项目…
  • jQuery 很简单, 因为作者的理念: write less, do more: 写的少 做的多!

写法格式: $(选择器).操作()

  • 选择DOM加载完毕的时机: 如果脚本script 书写在html顶部的位置, 页面代码还没有生成, 是无法直接操作DOM的, 需要监听DOM加载完毕的时机

    $(document).ready(function(){
    // DOM 加载完毕....
})

// 简化:
$(function(){
    
})

  • 变量声明: 用于保存 jq对象的变量, 应该用 $ 开头, 非强制 但是 强烈推荐

  • 各种选择器:

    • css选择器

      $('p')  所有p标签
$('.danger')  所有 class='danger' 标签
$('#box') id='box' 的标签
$('ul>li')  所有 ul下的子元素的li 标签
...

    • JQ提供的选择器: css选择器有时候过于复杂, 所有JQ提供了一些简化

      $(':checkbox')   选择 type='checkbox' 的元素,  : 专属 input 标签
$(':text')

序号:  此序号 非 css 的 nth-child, 相对于 DOM 中的元素结构
$('li:eq(0)') eq等于 eq(0) 相对的是 查询出来的所有li中 序号0的
$('li:gt(0)')  gt大于
$('li:lt(0)')  lt小于

// 此处的奇数偶数 针对的是 查询出来的元素 的序号的奇数偶数
奇数 odd   $('li:odd')
偶数 even  $('li:even')

  • 事件

    事件添加 采用的是 addEventListener 作为底层, 是一个事件列表, 新增事件不会覆盖旧事件

    • click: 点击
    • dblclick: 双击
    • mouseEnter: 鼠标进入
    • mouseLeave: 鼠标离开
    • hover: 参数1: 鼠标进入; 参数2: 鼠标离开
    • change: 变更 – 勾选框
    • focus: 获取焦点 - 输入框
    • blur: 失去焦点

  • 样式

    • css
      • 读取:css(属性名)
      • 设置:css(属性名, 值)
    • class
      • 添加样式: addClass()
      • 删除样式: removeClass
      • 切换样式: toggleClass
      • 判断是否存在: hasClass

  • 属性

    • prop: 用于操作系统提供的标准属性
      • 读取: prop(属性名)
      • 设置: prop(属性名, 值)
    • attr: 用于操作自定义属性

包含关系选择器

  • contains: 文本中包含xxx
  • has: 子元素中包含
  • not: 不包含
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <h1>包含关系选择器</h1>
      <button>提交订单</button>
      <button>Submit注册信息</button>
      <button>马上提交</button>
      <button>清空重填</button>

      <hr />
      <div class="alert"></div>
      <hr />
      <div class="alert">
        <span class="close">x</span>
      </div>
    </div>

    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      // 选取 双标签内容中 含有 '提交' 字样的元素, 变为绿色按钮
      // contains: 包含,含有
      $("button:contains(提交)").css("background-color", "green")

      // 选中包含 .close 样式的 .alert 元素, 修改其样式
      // has: 有, 包含
      $(".alert:has(.close)").css({
        backgroundColor: "yellow",
        padding: "5px",
        borderRadius: "3px",
        textAlign: "right",
      })

      // 选择 .alert 中, 没有 .close 样式的
      // not: 没有
      $(".alert:not(:has(.close))").css({
        "background-color": "green",
        height: "30px",
      })

      // 空 empty, 代表没有子元素
      // 选择 .alert中 是空的那个
      $(".alert:empty").css("box-shadow", "0 0 3px 3px black")

      // 选择 .alert 中 不是空的,  把阴影改成 蓝色
      $(".alert:not(:empty)").css("box-shadow", "0 0 3px 3px blue")
    </script>
  </body>
</html>

可见性选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      HTML的元素可以隐藏, 隐藏方式有以下几种:
      - display: none 移除, 不占位
      - 表单元素input, 带有type='hidden' 写法, 效果与display:none相同
      - opacity: 0;  透明度改全透明, 但是依然占位
      - visibility:hidden   也是透明度全透明, 隐藏但是占位

      此处的 不可见元素选择器, 只能选中第一种 display:none
    -->
    <div id="box">
      <div style="display: none">11111111111</div>
      <div style="visibility: hidden">222222222222</div>
      <div style="opacity: 0">333333333333</div>
      <input type="hidden" />
    </div>

    <!-- 细节: 优化方式 -->
    <!-- 让要显示给用户看的内容, 最先加载 -->
    <!-- 脚本应该放在最后书写 -->
    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      // 选择器: 选择隐藏的DOM元素 -- 仅限 display:none 的
      // 包含 input 的 type='none'
      console.log($("#box>*:hidden"))
      // 通配符 *  可以省略:
      console.log($("#box>:hidden"))
    </script>
  </body>
</html>

祖先选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 2px solid gray;
        padding: 10px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <!-- div#d1>div#d2>div#d3>div#d4>div#d5 -->
    <div id="d1">
      d1
      <div id="d2">
        d2
        <div id="d3">
          d3
          <div id="d4">
            d4
            <div id="d5">Hello World!</div>
          </div>
        </div>
      </div>
    </div>

    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      // parent: 父母
      // 选择 id='d5' 的元素的 父元素
      // 由于css没有选择父元素的 选择器, 所有JQ提供了专门的方法来实现
      $("#d5").parent().css("border-color", "blue")

      // 所有的祖辈元素  parents
      $("#d5").parents().css("border-color", "orange")

      // 选择 在 当前元素 和 指定元素 之间的所有祖辈元素
      // Until: 直到...为止
      // 不含 #d2 元素
      $("#d5").parentsUntil("#d2").css("border-color", "green")
    </script>
  </body>
</html>

后代选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 2px solid gray;
        padding: 10px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="d1">
      <div>11111</div>
      <div>
        <div>2222</div>
        <div>2222</div>
      </div>
      <div>11111</div>
    </div>

    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      // 后代选择器:
      // 选择d1 下方所有的子元素
      $("#d1>div").css("border-color", "blue")
      // 另一种写法: 适合动态获取子元素
      $("#d1").children().css("border-color", "red")

      // 需求: 点击div元素后, 把子元素添加阴影
      $("div").click(function () {
        //选择当前元素的 子元素
        $(this).children().css("box-shadow", "0 0 3px 3px black")
      })

      // 后代元素的获取
      $("#d1 div").css("border-color", "orange")
      // 另一种写法: 适合动态获取 find
      $("#d1").find("div").css("border-color", "purple")
    </script>
  </body>
</html>

大小图联动效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <img src="./img/1.jpg" data-big="./img/1-l.jpg" width="100" alt="" />
      <img src="./img/2.jpg" data-big="./img/2-l.jpg" width="100" alt="" />
      <img src="./img/3.jpg" data-big="./img/3-l.jpg" width="100" alt="" />
      <img src="./img/4.jpg" data-big="./img/4-l.jpg" width="100" alt="" />
    </div>
    <hr />
    <div>
      <img src="./img/1-l.jpg" width="400" alt="" />
    </div>

    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      $("div:eq(0)>img").mouseover(function () {
        console.log("鼠标经过")
        // attr: 读取自定义属性
        // let big_img = $(this).attr("data-big")
        // 设置到 大图的 src - 系统属性
        // $("div:eq(1)>img").prop("src", big_img)
        //
        // 观察发现: 小图  xxx.jpg    大图 xxx-l.jpg
        // 利用正则替换: 把 .jgp 换成 -l.jpg
        let src = $(this).prop("src")
        // .是正则的 通配符, 需要 \. 转义成不同的.
        console.log("替换前:", src)
        src = src.replace(/\.jpg/, "-l.jpg")
        console.log("替换后:", src)
        $("div:eq(1)>img").prop("src", src)
      })
    </script>
  </body>
</html>

兄弟选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>000</li>
      <li id="a1">111</li>
      <li>222</li>
      <li>333</li>
      <li>444</li>
      <li>555</li>
      <li>666</li>
      <li>777</li>
    </ul>

    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      console.log($("ul>li"))
      // 等价于 ul>li:eq(4) ;  单独的eq() 方法适合动态获取
      let $li4 = $("ul>li").eq(4)
      // 修改 li4 下方的元素颜色
      // next: 下一个
      $li4.next().css("color", "blue")
      // 下面所有的
      $li4.nextAll().css("color", "red")
      // 下方内容, 从当前项 到 指定项中间部分
      $li4.nextUntil("li:eq(7)").css("color", "orange")

      // 上一个元素
      // prev: 全称是 previous 上一个
      $li4.prev().css("border", "1px solid red")
      // 上方所有元素
      $li4.prevAll().css("border", "1px solid purple")
      // 上方元素 到 id='a1' 为止
      $li4.prevUntil("#a1").css("background-color", "blue")

      // 同胞: 所有的同级别元素
      $li4.siblings().css("color", "red")
    </script>
  </body>
</html>

标签内容操作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">
      <div>
        <h3>Hello</h3>
      </div>
      <div>
        <h3>World!</h3>
      </div>
      <input type="text" value="555" />
    </div>

    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      let $d0 = $("#box").children(":eq(0)")
      // text(): 就是 DOM 的 innerText, 读取可见的文本
      console.log($d0.text())
      // html(): 就是 DOM 的 innerHTML, 读取所有html代码
      console.log($d0.html())

      // 设置: 会覆盖原有内容!
      // text: 设置的内容 原样输出在页面
      $("#box>div:eq(0)").text("<b>我是粗体</b>")
      // html: 设置的内容 会被 浏览器解析
      $("#box>div:eq(1)").html("<b>我是粗体</b>")

      // 输入框值的操作:  val()
      console.log($("input").val())
      // 设置
      $("input").val("新的输入内容")
    </script>
  </body>
</html>

html的使用场景

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul id="news">
      <!-- 小技巧: 先在html中模拟要生成的 代码 -->
      <!-- <li><a href="">内容...</a></li> -->
    </ul>

    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      let data = [
        "1.人民论坛网评|为群众版实事还需一办到底",
        "2.人民论坛网评|为群众版实事还需一办到底",
        "3.人民论坛网评|为群众版实事还需一办到底",
        "4.人民论坛网评|为群众版实事还需一办到底",
        "5.人民论坛网评|为群众版实事还需一办到底",
      ]

      let all = "" //用于拼接所有生成的html代码字符串
      data.forEach(item => {
        let el = `<li><a href="">${item}</a></li>`
        // + : 字符串拼接符号
        all += el // += 相当于  all = all+el
      })
      console.log(all)

      // html: 设置的内容可以被 解析
      $("ul").html(all)
    </script>
  </body>
</html>

表格的动态生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      动态生成表格:  
      - 静态: 是指通过写html代码, 然后运行起来做显示
      - 动态: 是指代码运行起来之后, 通过JS代码的后续操作, 生成内容
       - 结合网络请求, 就可以实现 页面内容的 动态变化
    -->
    <!-- table#emps>(thead>tr>th*4)+tbody -->
    <table id="emps" border="1">
      <thead>
        <tr>
          <th>序号</th>
          <th>阶段</th>
          <th>讲师</th>
          <th>课程内容</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr> -->
      </tbody>
    </table>

    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      // 假设通过网络请求, 请求到如下的数组:
      let data = [
        { name: "阶段1", teacher: "亮亮", content: "JS,服务器,数据库" },
        { name: "阶段2", teacher: "亚楠", content: "CSS,AJAX,HTML" },
        { name: "阶段3", teacher: "小新", content: "JS,DOM,JQUERY,VUE" },
        { name: "阶段4", teacher: "铭铭", content: "HTML高级,小程序" },
        { name: "阶段5", teacher: "贾", content: "三大框架" },
      ]

      let all = ""
      data.forEach((item, index) => {
        // element: 元素
        // 模板字符串 允许换行写法
        let el = `<tr>
          <td>${index + 1}</td>
          <td>${item.name}</td>
          <td>${item.teacher}</td>
          <td>${item.content}</td>
        </tr>`

        all += el
      })
      // document.getElementsByTagName('tbody')[0].innerHTML = all
      $("tbody").html(all)
    </script>
  </body>
</html>

动态变色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>00</li>
      <li>11</li>
      <li>22</li>
      <li>33</li>
    </ul>

    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      $("li").click(function (e) {
        //被点击元素的 下方的元素
        //静态写法: 代码无需运行, 就能明确知道要写什么
        // $("用户点击元素的+li")
        //
        //$(this): 这个值是用户点击之后才能得到的 -- 动态的值
        $(this).next().css("color", "red")
        //
      })
    </script>
  </body>
</html>

添加元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>00</li>
      <li>11</li>
    </ul>
    <button>添加新内容</button>

    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      // append: 添加
      $("button").click(function (e) {
        // shift+del: 删除整行
        // append: 在子元素中的结尾添加新元素
        // $("ul").append("<li>新内容</li>")
        // 参数接受 多参数 或 数组类型 :  灵活应用了 函数重载机制
        // $("ul").append("11<br>", "22<br>", "33<br>")
        let arr = ["11<br>", "22<br>", "33<br>"]
        $("ul").append(arr)
        // prepend: 子元素的开头添加
        $("ul").prepend(arr)
      })
    </script>
  </body>
</html>

添加元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 添加兄弟级别的元素 -->
    <ul>
      <li>00</li>
      <li>11</li>
      <li>22</li>
    </ul>

    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      // 在 11 的下面添加元素
      // after: 在...后面
      $("li:eq(1)").after("<li>新元素</li>")
      // 允许多参数, 数组参数
      $("li:eq(1)").after("aa<br>", "bb<br>")
      // 数组
      $("li:eq(1)").after(["aa<br>", "bb<br>"])

      // before: 在...之前
      // 添加操作的底层使用的 innerHTML 的方式, 内容可以被解析
      $("li:eq(1)").before("<li>QQQQ</li>")
      // 同样支持 多参数, 数组.
    </script>
  </body>
</html>

删除元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul style="border: 1px solid red">
      <li>00</li>
      <li>11</li>
      <li>22</li>
      <li>33</li>
    </ul>
    <button>删除</button>
    <button>清空</button>

    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      $("button:eq(0)").click(function (e) {
        //删除ul中的最后一个元素
        // last: 最后一个
        // remove(): 删除元素
        $("ul>li").last().remove()
      })

      $("button:eq(1)").click(function (e) {
        // 阻止事件冒泡
        e.stopPropagation()

        //empty: 清空
        $("ul").empty()
      })
    </script>
  </body>
</html>

输入框相关

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <button>查询商品</button>

    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      // 实时监听输入框内容变化
      // 输入框的事件: input事件
      // 万能绑定事件的方法: on(事件名, 回调函数)
      // jq并没有封装所有的事件, 可以利用on来实现 未封装事件的绑定
      $("input").on("input", function () {
        console.log($(this).val())
        // 后续: 如果有查询接口, 应该发送网络请求 去查找数据
      })

      // 点击按钮获取输入框内容
      $("button").click(function (e) {
        console.log("到服务器搜索:", $("input").val())
      })

      // 键盘的回车 可以触发搜索操作
      // 事件名: keyup  按下后弹起时触发
      $("input").keyup(function (e) {
        console.log(e)
        // keyCode: 键盘上 每个按键的 标识码
        // 13 是回车的标识
        if (e.keyCode == 13) {
          console.log("到服务器查询:", $(this).val())
        }
      })
    </script>
  </body>
</html>

替换与克隆

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>替换节点</h2>
    <div id="chosen">
      <img src="img/p0.png" />
    </div>
    <hr />
    <div id="list">
      <img src="img/p3.png" />
      <img src="img/p4.png" />
      <img src="img/p5.png" />
    </div>

    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      // 点击 id='list' 中的图片, 克隆一份, 替换掉 id='chosen'中的图片
      $("#list>img").click(function () {
        //克隆/复制: 当前被点击的图片
        let img_clone = $(this).clone()
        // 替换 : replaceWith-- 替换为
        $("#chosen>img").replaceWith(img_clone)
      })
    </script>
  </body>
</html>

事件冒泡

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>替换节点</h2>
    <div id="chosen">
      <img src="img/p0.png" />
    </div>
    <hr />
    <div id="list">
      <img src="img/p3.png" />
      <img src="img/p4.png" />
      <img src="img/p5.png" />
    </div>

    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      // 浏览器清理缓存的方式: ctrl+F5
      // 事件冒泡机制: 当点击子元素之后, 事件会被父元素感知到
      // 不需要为每个图片添加事件, 只需要给父元素添加即可
      $("#list").click(function (e) {
        // console.log(e.target)
        // e.target是原生的DOM对象, 无法使用JQ的方法,
        // 除非 封装成JQ的对象  $(DOM对象)
        // $("#chosen>img").replaceWith($(e.target).clone())
      })

      // on: 通用绑定事件方式
      // on(事件名, 选择器, 触发的事件)
      // 选择器参数: 可以指定哪个子元素才能触发事件
      $("#list").on("click", "img:gt(0)", function (e) {
        // on的参数2: 专为冒泡机制而生
        // 添加参数2之后, 事件触发时的 this 指向的是 参数2 选择的元素
        console.log($(this))
        $("#chosen>img").replaceWith($(this).clone())
      })
    </script>
  </body>
</html>

作业: 待办事项

  • 输入框中开始没有数据, 确定按钮应该是 disabled 状态
  • 当输入框中输入内容时, 需要判断 实时切换输入框的 disabled 状态
    • 例如: 有内容, 则按钮可用, 没有内容: 按钮不可用
  • 当点击确定按钮之后, 获取输入框的值, 填入到列表的最下方
    • 并且要清空输入框的值, 确定按钮变为不可用
  • 在输入框中按回车, 如果输入框有值, 则填入到列表最下方, 并且清空输入框, 按钮不可用
    • 如果输入框没有值, 即空的时候, 则回车无效
  • 删除按钮点击后, 能够删除对应的行
  • 待办事项:刚开始是 隐藏状态display:none, 当删除了所有项目后, 则暂无待办事项变为可见状态.
    • 当添加了新事项之后, 暂无待办事项 隐藏
      在这里插入图片描述
管程序猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
机器视觉 Machine Vision
11-14
机器视觉 Machine Vision （英文版） Automated Visual Inspection: Theroy, Pratice And Applications
JQuery02.doc
12-16
Jquery技术的基础详细学习笔记，总结了Jquery技术的各个知识点，可以用来复习以及对基础知识的巩固，对新人的学习很有帮助。
一个利用JQ做指标监控的例子
dominiquefeliz的博客
03-06 254
一个利用JQ做指标监控的例子 接到一个朋友的需要，做一个简单的指标监控，就是当多个周期的均线和K线满足某种情况的时候发出信号。其实这种预警很多图表操盘软件也可以做，但是问题是多个品种监控的时候效率非常低，还容易死机，同时监控信息的发出手段不灵活，例如不方便发到QQ或者微信群里面。于是想到可以通过python来做这个事情。 主程序如下： Mon = Monitor() Mon.addRule(Rul...
jQuery下载
qq_44724114的博客
06-26 110
jQuery下载 链接：https://pan.baidu.com/s/1g45iIut8IyZ4wZvwL4la4g 提取码：pz1t
jquery官方网地址
最后一个BUG留给我
06-02 1856
其官方网站：http://www.jquery.com/官方在线文档：http://docs.jquery.com/Main_Page压缩版下载：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=
Jquery实现AJAX
weixin_57128596的博客
01-18 2826
首先明白什么是ajax： 就类似于你在访问网站，当你输入一个字段时，下面出现的一系列的推荐栏，这就是ajax的作用，不更新当前地址，但是对页面内容进行响应跟新； <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
jquery文档02
06-20
jquery文档02
锋利的jquery02
12-17
【锋利的jquery】高清PDF 01，共6部分，全书190M。
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery2014-12月最新版本库
12-26
这是在2014年12月的最新jQuery和jQuery css，因为经常外链接失败，这可以放本地调试，很有用，新的css采用扁平化主题
Jquery api 速查表分享
10-24
主要给大家分享了一些Jquery api 速查表，十分的全面，这里推荐给大家,需要的朋友可以参考下
图片懒加载
qq_44599041的博客
07-01 137
意义 懒加载（LazyLoad）是前端优化的一种有效方式，能极大的提升用户体验，图片加载是其重点，如果加载图片过多将大大增http请求次数或大小，然而更多时候用户并不会浏览到全部加载进来的图片，这种代价是非常不值得的，所以当用户浏览到当前视口时再去加载相应的图片无疑是两全其美的选择 原理： 图片懒加载:页面加载后只让文档可视区内的图片显示，其它不显示，随着用户对页面的滚动，判断其...
jqueryday01
civilizationV的博客
09-04 231
语法jQuery(document).read(function(){});在window.onload之前运行 $(function(){}); $===jQuery //$是jQuery 全局函数的别名 document ready 是html文档准备就绪 也就是dom树创建完成了 可以进行dom操作了 html 页面下载完成 并准备就绪 window.onload 是整个页面所有的资源都加载完
JQuery插件官网汇总
weixin_34259559的博客
11-18 142
1:swfUpload官网 http://www.cnblogs.com/youring2/archive/2012/07/13/2590010.htmlSWFUpload 2.5.0版 官方说明文档 中文翻译版 博客园使用指南: http://www.cnblogs.com/2050/archive/2012...
jquery实时监控
08-31 4242
//实时监控 var monitoring = function() { var param; $.ajax({ url : "monitoring.action", type : "POST", data : { param : param }, success : function(data) {
jQuery全屏滚动插件 Fullpage.js 及 move.js
布鲁斯基的精炼代码本
09-14 1898
引入文件 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;link rel=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;stylesheet&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;c
JQuery ajax方法及参数
weixin_34366546的博客
03-18 82
©屋主原创，版权归 todayeeee 所有！如需转载，必须在页面明显位置给出原文链接！商业用途请 联系我！ $.ajax({ type: 'GET', // 这是请求的方式 可以是GET方式也可以是POST方式, 默认是GET url: ' xxx.php ', // 这是请求的连接地址 一般情况下这个地址是后台给前端的一个连接，直接写就...
05_ Electron 自定义菜单、主进程与渲染进程通信
最新发布
所学所思
08-09 497
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

管程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值