经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery第3天
来源：cnblogs　　作者：replaceroot　　时间：2019/5/6 8:55:39　　对本文有异议

复习

如何区别 JS DOM对象和 JQ 包装对象？

JQ对象其实是经过包装的DOM对象，包装后可调用 JQ 的方法。

JS 对象基本上都是属性为主，JQ基本上都方法为主。

可通过 console.dir() 在控制台输出对象的所有属性和方法区别。

JQ 对象输出

 

DOM 对象输出

 

JQ事件绑定方式

目标

学习 JQ事件绑定方式 on

知识点

方式1：（推荐使用 on）

  1. 事件源.on("事件类型",事件处理函数);

方式2：（了解）

  1. 事件源.bind("事件类型",事件处理函数);

方式3：（快捷绑定方式）

  1. 事件源.事件类型(事件处理函数)

小结

推荐使用 on 实现事件绑定

 

JQ事件解绑方式

目标

学习 JQ事件解绑方式 off

知识点

方式1：（推荐使用 off）

  1. 事件源.off("事件类型");
    ?
    如果不传入事件类型参数，代表移除所有事件。

方式2：

  1. 事件源.unbind("事件类型");

小结

推荐使用 off 解绑事件

 

JQ事件委托

目标

学习 JQ事件委托

事件委托绑定

on 的方式：

  1. $("父元素").on("事件类型","子元素",事件处理函数);
    ?
    父元素: 委托事件
    子元素：子元素才是真正触发事件的目标元素

delegate 的方式：(了解)

  1. $("父元素").delegate ("子元素", "事件类型", 事件处理函数);

 

事件委托解绑

off 方式

  1. $("父元素").off("事件类型","子元素");

undelegate

  1. $("父元素").undelegate ("子元素", "事件类型");

小结

推荐使用 on 实现事件委托绑定，注意区别子元素和事件类型的参数顺序。

推荐使用 off 实现事件委托解绑。

 

替换节点

目标

通过手册查阅 replaceWith 替换节点的用法

知识点

新节点替换

  1. 原节点.replaceWith(新节点)

字符串替换

  1. 原节点.replaceWith(字符串)

小结

建议创建新节点再替换，因为新建节点后可以保持到变量中方便下次使用，直接传字符串则需要重新查找。

 

事件触发器

目标

学习事件触发器触发事件

知识点

trigger 主要用于模拟用户触发了某个事件，如：页面加载的时候获取输入框焦点...

  1. JQ元素.trigger("事件类型")

 

鼠标移入移出事件

目标

学习新的鼠标移入移出事件

知识点

鼠标移入：

  1. mouseover
    mouseenter   // 推荐使用

鼠标移出：

  1. mouseout
    mouseleave   // 推荐使用

小结

之前我们学习了 hover 鼠标移入移出综合体，其实就是调用了 mouseenter 和 mouseleave。

早期的时候，Chrome 浏览器其实是不支持 mouseenter 和 mouseleave 事件的。

jQuery 提出并实现了，原理就是阻止事件传播，避免事件移到子元素反复触发的问题。

 

JQ元素索引值

目标

通过 JQ 提供的方式获取元素索引值

知识点

jQuery 直接提供了获取元素索引值的方法。

  1. .index()

常见写法1：

  1. $(this).index()
    // 获取当前元素的索引值，以父元素为单位，当前元素是第几个孩子。

常见写法2：

  1. $("选择器").index(this)
    // 获取当前元素的索引值，以选择器选中的元素为单位，当前元素是第几个。

小结

大部分情况下两种写法都可以。

 

获取元素宽高

目标

获取元素宽高

知识点

  1. // 获取或设置宽度
    .width()
    ?
    // 获取或设置高度
    .height()
    ?
    # 不传入参数代表获取，传入参数代表设置宽高。

小结

width() height() 获取和设置的数据类型都是数值型。

 

offset 获取元素偏移值

目标

获取元素的偏移值

知识点

获取元素基于页面的偏移值。

  1. .offset()
    ?
    # 返回对象格式  { left: xx, top: xx }

小结

获取的时候会把 margin-left 和 left 的偏移值都会计算进去。

 

控制页面滚动到某个位置

目标

获取和设置页面滚动位置

知识点

应用场景：返回顶部，点击跳转到某个楼层。

写法1：无动画效果

  1. $("html,body").scrollTop(数值);
    ?
    # 如果数值为0，就是返回顶部

写法2：带动画效果

  1. $("html,body").stop().animate({ scrollTop : 数值 })

小结

控制水平滚动位置使用 scrollLeft，使用方式和 scrollTop 同理。

 

思维脑图总结：

 

案例

 微博新闻发布效果：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>微博发布效果</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             list-style: none;
  12.         }
  14.         .weibo {
  15.             width: 600px;
  16.             border: 1px solid #ccc;
  18.             margin: 100px auto;
  19.             padding: 10px;
  21.         }
  23.         .weibo-text {
  24.             width: 590px;
  25.             height: 140px;
  26.             padding: 5px;
  27.             border: 1px solid #ccc;
  28.             outline: none;
  29.             resize: none;
  30.         }
  32.         .weibo-text:focus {
  33.             border-color: #f60;
  34.         }
  36.         .weibo-btn {
  37.             width: 80px;
  38.             height: 30px;
  39.             background-color: #f90;
  40.             color: #fff;
  41.             border: 0 none;
  42.             margin-top: 5px;
  43.             border-radius: 3px;
  44.             cursor: pointer;
  45.             outline: 0 none;
  46.         }
  48.         .weibo-list {
  49.             padding-top: 10px;
  50.         }
  52.         .weibo-list li {
  53.             font-size: 14px;
  54.             line-height: 30px;
  55.             border-bottom: 1px dotted #ccc;
  56.             overflow: hidden;
  57.         }
  59.         .weibo-list li p {
  60.             float: left;
  61.             cursor: pointer;
  62.         }
  64.         .weibo-list li span {
  65.             float: right;
  66.             cursor: pointer;
  67.         }
  69.         .weibo-list li input {
  70.             height: 24px;
  71.             line-height: 24px;
  72.             width: 300px;
  73.             font-size: 14px;
  74.             border: 0 none;
  75.         }
  76.     </style>
  77.     <!-- 1. 引入 jQuery 核心库 -->
  78.     <script src="./lib/jquery-1.12.4.js"></script>
  79.     <!-- 2. 新建 script 写业务逻辑 -->
  80.     <script>
  81.         // 3. jQuery 入口函数，业务代码写到入口函数内部
  82.         $(function () {
  83.           // **********业务代码开始**********
  84.           
  85.           // 1.判断输入微博的长度，如果为0提示，超过120提示
  86.           var $userInput = $('.weibo-text');
  87.           var $weiboBtn = $('.weibo-btn');
  88.           var $weiboList = $('.weibo-list');
  89.           var newInput
  90.           console.log($userInput, $weiboBtn, $weiboList);
  92.           $weiboBtn.on('click', function(){
  93.             // 获取内容长度
  94.             // trim()方法意味着删除左右2边的空格
  95.             var userText = $userInput.val().trim();
  96.             if(userText.length === 0){
  97.               alert("请输入内容再发布哦?");
  98.               // 中断函数
  99.               return;
  100.             }else if(userText.length > 120){
  101.               alert("请保证内容长度小于120个字符哦?");
  102.               return;
  103.             }else{
  104.               // 2. 把输入的微博内容，添加到 .weibo-list 列表中
  105.               // 获取用户输入的内容并创建元素插入到.weibo-list的最前面
  106.               var newTag = $("<li><p>" + userText + "</p><span>删除</span></li>");
  107.               $weiboList.prepend(newTag);
  109.               // 3. 发布成功后，清空文本域 .weibo-text
  110.               $userInput.val("");
  112.               // 4. 发布的时候，有滑动显示动画效果
  113.               // 思路：先将newTag隐藏然后通过slideDown()下滑方式显示
  114.               newTag.hide().slideDown(500);
  115.             }
  116.           });
  117.           // 5. 点击删除按钮，删除对应那条微博  事件委托实现
  118.           $weiboList.on('click', 'li span' ,function(){
  119.             // 找到当前节点的父节点然后删除这个父节点也就是删除li
  120.             $(this).parent().remove();
  121.           });
  123.           // 6. 点击 p 标签，p 标签能替换成 input 标签进行微博编辑
  124.           $weiboList.on('click', 'li p' ,function(){
  125.             // 保存当前p标签的内容
  126.             var pOldString = $(this).text();
  127.             newInput = $('<input text="text" />');
  128.             // 替换标签
  129.             $(this).replaceWith(newInput);
  130.             // 将p标签原来的内容给input的value值
  131.             newInput.val(pOldString);
  132.             // 输入框获取焦点
  133.             newInput.trigger('focus');
  134.           });
  136.           // 7. input 标签失去焦点后，input 标签替换回 p 标签
  137.           $weiboList.on('blur', 'li input', function(){
  138.             // 获取input标签的value值
  139.             var newInputValue = newInput.val();
  140.             console.log(newInputValue);
  141.             var newP = $('<p>' + newInputValue + '</p>')
  142.             $(this).replaceWith(newP); 
  143.                       
  144.           });
  145.           // 8. 页面发布的时候，通过事件触发器自动获取文本域的焦点    
  146.           $userInput.trigger('focus');
  148.           // 9. 利用事件对象，判断回车键，实现按回车键发布微博。
  149.           $userInput.on('keyup', function(event){
  150.             if(event.keyCode === 13){
  151.               $weiboBtn.trigger('click');
  152.             }
  153.           });
  154.         });
  156.     </script>
  157. </head>
  158.  
  159. <body>
  160.     <div class="weibo">
  161.         <textarea class="weibo-text"></textarea>
  162.         <input class="weibo-btn" value="发布" type="button">
  163.         <ul class="weibo-list">
  164.             <li>
  165.                 <p>快来收了这九款用上就停不下来的应用吧！！</p>
  166.                 <span>删除</span>
  167.             </li>
  168.             <li>
  169.                 <p>超级详细的云南大理自助游攻略</p>
  170.                 <span>删除</span>
  171.             </li>
  172.             <li>
  173.                 <p>外国最近很火的舞蹈，舒服简单自然，太棒了！</p>
  174.                 <span>删除</span>
  175.             </li>
  176.         </ul>
  177.     </div>
  178. </body>
  179.  
  180. </html>

 

原文链接：http://www.cnblogs.com/replaceroot/p/10816297.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号