1.jquery的位置信息

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         .father{
  12.             width: 400px;
  13.             height: 400px;
  14.             background-color: yellow;
  15.             position: relative;
  16.             top: 20px;
  17.         }
  18.         .box{
  19.             width: 200px;
  20.             height: 200px;
  21.             padding: 10px;
  22.             border:1px solid yellow;
  23.             background-color: red;
  24.  
  25.             top: 10px;
  26.             left: 100px;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="father">
  32.         <div class="box"></div>
  33.     </div>
  34.     <ul>
  35.         <li>11</li>
  36.         <li>11</li>
  37.         <li>11</li>
  38.         <li>11</li>
  39.         <li>11</li>
  40.         <li>11</li>
  41.         <li>11</li>
  42.         <li>11</li>
  43.         <li>11</li>
  44.         <li>11</li>
  45.         <li>11</li>
  46.         <li>11</li>
  47.         <li>11</li>
  48.         <li>11</li>
  49.         <li>11</li>
  50.         <li>11</li>
  51.         <li>11</li>
  52.         <li>11</li>
  53.         <li>11</li>
  54.         <li>11</li>
  55.         <li>11</li>
  56.         <li>11</li>
  57.         <li>11</li>
  58.         <li>11</li>
  59.         <li>11</li>
  60.         <li>11</li>
  61.         <li>11</li>
  62.         <li>11</li>
  63.         <li>11</li>
  64.         <li>11</li>
  65.         <li>11</li>
  66.         <li>11</li>
  67.         <li>11</li>
  68.         <li>11</li>
  69.         <li>11</li>
  70.         <li>11</li>
  71.         <li>11</li>
  72.         <li>11</li>
  73.         <li>11</li>
  74.         <li>11</li>
  75.         <li>11</li>
  76.         <li>11</li>
  77.         <li>11</li>
  78.         <li>11</li>
  79.         <li>11</li>
  80.         <li>11</li>
  81.         <li>11</li>
  82.         <li>11</li>
  83.         <li>11</li>
  84.         <li>11</li>
  85.         <li>11</li>
  86.         <li>11</li>
  87.         <li>11</li>
  88.         <li>11</li>
  89.         <li>11</li>
  90.         <li>11</li>
  91.         <li>11</li>
  92.         <li>11</li>
  93.         <li>11</li>
  94.         <li>11</li>
  95.         <li>11</li>
  96.         <li>11</li>
  97.         <li>11</li>
  98.         <li>11</li>
  99.         <li>11</li>
  100.         <li>11</li>
  101.         <li>11</li>
  102.         <li>11</li>
  103.         <li>11</li>
  104.         <li>11</li>
  105.         <li>11</li>
  106.         <li>11</li>
  107.         <li>11</li>
  108.         <li>11</li>
  109.         <li>11</li>
  110.         <li>11</li>
  111.         <li>11</li>
  112.         <li>11</li>
  113.         <li>11</li>
  114.         <li>11</li>
  115.         <li>11</li>
  116.         <li>11</li>
  117.         <li>11</li>
  118.         <li>11</li>
  119.         <li>11</li>
  120.         <li>11</li>
  121.         <li>11</li>
  122.         <li>11</li>
  123.         <li>11</li>
  124.         <li>11</li>
  125.         <li>11</li>
  126.         <li>11</li>
  127.         <li>11</li>
  128.         <li>11</li>
  129.         <li>11</li>
  130.         <li>11</li>
  131.         <li>11</li>
  132.         <li>11</li>
  133.         <li>11</li>
  134.         <li>11</li>
  135.         <li>11</li>
  136.         <li>11</li>
  137.         <li>11</li>
  138.         <li>11</li>
  139.         <li>11</li>
  140.         <li>11</li>
  141.         <li>11</li>
  142.         <li>11</li>
  143.         <li>11</li>
  144.         <li>11</li>
  145.         <li>11</li>
  146.         <li>11d</li>
  147.     </ul>
  148.     <script src="jquery.js"></script>
  149.     <script>
  150.         $(function () {
  151.             //1.获取内容的宽和高
  152.             // console.log($(".box").width());
  153.             // console.log($(".box").height());
  154.  
  155.             //当2秒之后 让div的盒子的宽度变成400
  156.             // delay() 必须要结合动画的方法
  157.            // $(".box").delay(2000).hide(3000);
  158.            //  setTimeout(function () {
  159.            //      $(".box").width(400);
  160.            //  },2000)
  161.  
  162.             //2.innerWidth() innerHeight()内部的宽和高 包含宽和高+paddding不包含boeder
  163.             // $(".box").innerWidth(400);
  164.  
  165.             //3.outerWidth() outerHeight() 外部的宽和高 包含所有
  166.             // console.log($(".box").outerHeight());
  167.  
  168.             // console.log($(".box").offset().top);
  169.  
  170.             //监听滚动事件
  171.             $(document).scroll(function () {
  172.                 // console.log(11111);
  173.  
  174.                 console.log($(this).scrollTop());
  175.             });
  176.  
  177.         })
  178.     </script>
  179. </body>
  180. </html>

2.回到顶部

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         .fixTop{
  12.             position: fixed;
  13.             bottom: 20px;
  14.             right: 30px;
  15.             width: 100px;
  16.             height: 100px;
  17.             line-height: 100px;
  18.             text-align: center;
  19.             color: #fff;
  20.             background-color: #000;
  21.             cursor: pointer;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <ul>
  27.         <li>1</li>
  28.         <li>1</li>
  29.         <li>1</li>
  30.         <li>1</li>
  31.         <li>1</li>
  32.         <li>1</li>
  33.         <li>1</li>
  34.         <li>1</li>
  35.         <li>1</li>
  36.         <li>1</li>
  37.         <li>1</li>
  38.         <li>1</li>
  39.         <li>1</li>
  40.         <li>1</li>
  41.         <li>1</li>
  42.         <li>1</li>
  43.         <li>1</li>
  44.         <li>1</li>
  45.         <li>1</li>
  46.         <li>1</li>
  47.         <li>1</li>
  48.         <li>1</li>
  49.         <li>1</li>
  50.         <li>1</li>
  51.         <li>1</li>
  52.         <li>1</li>
  53.         <li>1</li>
  54.         <li>1</li>
  55.         <li>1</li>
  56.         <li>1</li>
  57.         <li>1</li>
  58.         <li>1</li>
  59.         <li>1</li>
  60.         <li>1</li>
  61.         <li>1</li>
  62.         <li>1</li>
  63.         <li>1</li>
  64.         <li>1</li>
  65.         <li>1</li>
  66.         <li>1</li>
  67.         <li>1</li>
  68.         <li>1</li>
  69.         <li>1</li>
  70.         <li>1</li>
  71.         <li>1</li>
  72.         <li>1</li>
  73.         <li>1</li>
  74.         <li>1</li>
  75.         <li>1</li>
  76.     </ul>
  77.     <div class="fixTop">回到顶部</div>
  78.     <script src="jquery.js"></script>
  79.     <script>
  80.         $(function () {
  81.             $(".fixTop").click(function () {
  82.                 $("html,body").animate({
  83.                     "scrollTop":0
  84.                 },1000)
  85.             })
  86.  
  87.         })
  88.     </script>
  89. </body>
  90. </html>

3.事件流

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <button id="btn">按钮</button>
  9.     <script>
  10.        // document.getElementById("btn").addEventListener("click",function () {
  11.        //     alert(1);
  12.        // },false);
  13.  
  14.         window.onload=(function (){
  15.             var oBtn = document.getElementById('btn');
  16.  
  17.             //1.
  18.             document.addEventListener('click',function(){
  19.                 console.log('document处于事件捕获阶段');
  20.             }, true);
  21.  
  22.             //2.
  23.             document.documentElement.addEventListener('click',function(){
  24.                 console.log('html处于事件捕获阶段');
  25.             }, true);
  26.             //
  27.              document.body.addEventListener('click',function(){
  28.                 console.log('body处于事件捕获阶段');
  29.             }, true);
  30.              //4.
  31.             oBtn.addEventListener('click',function(){
  32.                 console.log('btn处于事件捕获阶段');
  33.             }, true);
  34.             //
  35.             oBtn.addEventListener('click',function(){
  36.                 console.log('btn处于事件冒泡阶段');
  37.             }, false);
  38.             //
  39.              document.body.addEventListener('click',function(){
  40.                 console.log('body处于事件冒泡阶段');
  41.             }, false);
  42.              //
  43.               document.documentElement.addEventListener('click',function(){
  44.                 console.log('html处于事件冒泡阶段');
  45.             }, false);
  46.            //7.
  47.             document.addEventListener('click',function(){
  48.                 console.log('document处于事件冒泡阶段');
  49.             }, false);
  50.         })
  51.  
  52.     </script>
  53. </body>
  54. </html>

4.事件冒泡的问题

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .father{
  8.             width: 300px;
  9.             height: 300px;
  10.             background-color: red;
  11.  
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="father">
  17.         <button class="child">按钮</button>
  18.     </div>
  19.     <script src="jquery.js"></script>
  20.     <script>
  21.         $(function () {
  22.             //默认传过来一个event
  23.             $(".child").click(function (event) {
  24.                 console.log("按钮被点击了");
  25.                 console.log(this);
  26.                 // console.log(event);
  27.                 console.log(event.target);
  28.                 //阻止事件冒泡
  29.                 event.stopPropagation();
  30.             })
  31.             $(".father").click(function (event) {
  32.                 console.log("父盒子被点击了");
  33.                 console.log(this)
  34.                 //event.target 如果没有事件冒泡，指的是点击的目标对象
  35.                 console.log(event.target)
  36.                 console.log(event.currentTarget)
  37.             })
  38.  
  39.         })
  40.     </script>
  41.  
  42. </body>
  43. </html>

5.换肤

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.        *{
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         .fu{
  12.             position: fixed;
  13.             top:0;
  14.             left: 0;
  15.             width: 100%;
  16.             height: 320px;
  17.             background-color: red;
  18.             display: none;
  19.         }
  20.         .up{
  21.             cursor: pointer;
  22.         }
  23.     </style>
  24. </head>
  25. <body style="height: 2000px">
  26.     <a href='http://www.baidu.com' id="changeFu">换肤</a>
  27.     <div class="fu">
  28.         <ul>
  29.             <li>
  30.                 <a href="javascript:void(0)">女神降临</a>
  31.             </li>
  32.             <li>
  33.                 <a href="javascript:void(0)">明星</a>
  34.             </li>
  35.  
  36.             <span class="up">收起</span>
  37.  
  38.         </ul>
  39.     </div>
  40.     <script src="jquery.js"></script>
  41.     <script>
  42.         $(function () {
  43.             $("#changeFu").click(function (event) {
  44.                 // //阻止当前默认事件
  45.                 // event.preventDefault();
  46.                 // //阻止冒泡
  47.                 // event.stopPropagation();
  48.                 console.log(111);
  49.                 $(".fu").slideDown(1000);
  50.                 //想当于既阻止了默认事件又阻止冒泡
  51.                 return false;
  52.             })
  53.             $("body,.up").click(function (event) {
  54.                 $(".fu").slideUp(1000);
  55.             })
  56.             $(".fu ul li a").click(function (event) {
  57.                 event.stopPropagation();
  58.                 $(this).css("color","green").parent("li").siblings("li").find("a").css("color","blue");
  59.             })
  60.             $(".fu").click(function (event) {
  61.                 return false;
  62.             })
  63.         })
  64.     </script>
  65. </body>
  66. </html>

6.事件代理

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <ul>
  9.         <li class="item1">
  10.             <a href="javascript:void(0);" id="a">zhang</a>
  11.  
  12.         </li>
  13.     </ul>
  14.     <script src="jquery.js"></script>
  15.     <script>
  16.         $(function () {
  17.             //绑定事件 如果使用事件委托的方式  以后的页面不会出现问题
  18.             //第二个参数  表示的是后代的选择器
  19.             //事件委托（代理）如果未来添加元素了 优先考虑事件委托
  20.  
  21.             $("ul").on("click","#a",function () {
  22.                 alert(this.innerText)
  23.             })
  24.  
  25.             $("ul").append('<li><a href="javascript:void(0);" id="a">qing</a></li>')
  26.         })
  27.     </script>
  28.  
  29. </body>
  30. </html>

7.合击事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <button>按钮</button>
  9.     <script src="jquery.js"></script>
  10.     <script>
  11.         $(function () {
  12.             // $("button").mouseenter(function (event) {
  13.             //
  14.             // })
  15.             // $("button").mouseleave(function (event) {
  16.             //
  17.             // })
  18.  
  19.             $("button").hover(function () {
  20.                 console.log("进入")
  21.             },function () {
  22.                 console.log("离开")
  23.             })
  24.  
  25.         })
  26.     </script>
  27.  
  28. </body>
  29. </html>

8.单双击事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <button>按钮</button>
  9.     <script src="jquery.js"></script>
  10.     <script>
  11.         $(function () {
  12.             //单双击的时间间隔是300ms
  13.             var tim = null;
  14.             var count = 0;
  15.             $("button").click(function (event) {
  16.                 count++;
  17.                 clearTimeout(tim);
  18.                 var tim = setTimeout(function () {
  19.                     if (count == 1){
  20.                         console.log("单机");
  21.                     }
  22.                     count = 0;
  23.                 },300);
  24.  
  25.             });
  26.             $("button").dblclick(function (event) {
  27.                 console.log("双击")
  28.             });
  29.         })
  30.     </script>
  31.  
  32. </body>
  33. </html>

9.聚焦和失焦

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <input type="text">
  9.     <script src="jquery.js"> </script>
  10.     <script>
  11.         //加载页面的时候 获取到焦点
  12.         // $("input[type=text]").focus();
  13.         //获取焦点时
  14.         // $("input[type=text]").focus(function () {
  15.         //     console.log(1);
  16.         // });
  17.         //获取到焦点并敲键盘时
  18.         // $("input[type=text]").keydown(function (event) {
  19.         //     console.log(1);
  20.         //     console.log(event.keyCode);//键盘码
  21.         // })
  22.         //改变时
  23.         // $('input[type=text]').change(function () {
  24.         //     console.log(111);
  25.         // })
  26.         //选中内容的时候
  27.          $('input[type=text]').select(function () {
  28.              console.log(1111);
  29.          })
  30.  
  31.     </script>
  32. </body>
  33. </html>

10.表单控件事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <!--form表单交互 接收不到 后端返回回来的数据-->
  9.     <div>
  10.         <input type="text" name="user">
  11.         <input type="submit">
  12.     </div>
  13.     <script src="jquery.js"></script>
  14.     <script>
  15.         $('input[type=submit]').click(function (event) {
  16.             var userName = $("input[type=text]").val();
  17.             //发送ajax交互
  18.  
  19.         });
  20.         //要是表单就取消自己的默认事件
  21.         $('form').submit(function(event) {
  22.             event.preventDefault();
  23.         })
  24.     </script>
  25. </body>
  26. </html>

jquery基础知识3的更多相关文章

  1. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  2. JQuery基础知识（1）

    JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...

  3. JQuery基础知识（2）

    JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...

  4. 0417 jQuery基础知识

    jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...

  5. JQuery基础知识梳理篇

    这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...

  6. 【JQuery基础知识/statusCode(状态码)】---初学者必备

    今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...

  7. 【前端】之jQuery基础知识

    jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...

  8. jQuery基础知识总结

    1.  jQuery基本概念介绍             1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...

  9. jQuery基础知识准备

    一． 代码风格在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号"$"来起始的.而这个"$"就是jQuery当中最重要且独有的对象:jQu ...

  10. Jquery基础知识；

    1.jquery语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 基础语法: $(selector).action() 美元符号定义 jQuery 选择符(select ...

随机推荐

  1. C# .NET WINFORM MUTEX 互斥

    static class Program 里的全局变量: static System.Threading.Mutex appMutex; Main 方法里的内容: string exeName = & ...

  2. 开发环境下的 Kubernetes 容器网络演进之路

    马蜂窝技术原创文章,更多干货请搜索公众号:mfwtech 使用 Docker+Kubernetes 来简化开发人员的工作流,使应用更加快速地迭代,缩短发布周期,在很多研发团队中已经是常见的做法. 如果 ...

  3. Error:(18, 51) java: -source 1.5 中不支持 diamond 运算符 (请使用 -source 7 或更高版本以启用 diamond 运算符)

    问题:主要是因为jdk版本不一样 解决: 方法一:List<String> list=new ArrayList<Stirng>(); 方法二:重新安装jdk8的版本(安装和配 ...

  4. virtualenv虚拟环境搭建及pipreqs自动生成第三方模块简介

    阅读目录 virtualenv简介 含义: 为何要用虚拟环境: virtualenv安装和使用 pipreqs模块的介绍和使用 回到顶部 virtualenv简介 回到顶部 含义: virtual:虚 ...

  5. MFC无法使用CDialogEx类

    在stdafx.h中添加以下代码: #include <afxcontrolbars.h>

  6. spark源码阅读 RDDs

    RDDs弹性分布式数据集 spark就是实现了RDDs编程模型的集群计算平台.有很多RDDs的介绍,这里就不仔细说了,这儿主要看源码. abstract class RDD[T: ClassTag]( ...

  7. 【转帖】2011-2018年中国IPv6地址数量及国际出口带宽数走势情况[图]

    2011-2018年中国IPv6地址数量及国际出口带宽数走势情况[图] http://www.chyxx.com/industry/201910/791801.html 三亿多ipv4的地址. 接近9 ...

  8. 给定a、b两个文件，各存放50亿个url，每个url各占64字节，内存限制是4G，让你找出a、b文件共同的url?

    package com.hadoop.hdfs; import org.apache.hadoop.yarn.webapp.hamlet.Hamlet; import org.junit.Test; ...

  9. 2019牛客暑期多校训练营（第四场）A meeting（dfs或dp,dp待更新）

    示例1: 输入: 4 21 23 13 42 4 输出:2 说明: They can meet at place 1 or 3. 题意:从K个点到达不联通图某个点需要的最短时间,这个最短时间是这K个人 ...

  10. 解决windows 激活问题

    解决windows 激活问题 下载 然后 搞定  重启