内容回顾:

　　- 筛选选择器

　　　　$('li:eq(1)')  查找匹配的元素

　　　　$('li:first')

　　　　$('li:last')

　　- 属性选择器

　　- 筛选的方法

　　　　- find()  查找后代的元素

　　　　- children()  查找亲儿子的元素

　　　　- parent()  查找的亲爹

　　　　- siblings()  查找的是兄弟(除自己之外)

　　　　- eq()  查找匹配的元素

　　-  DOM操作

　　　　-类的操作

　　　　　　-addClass('active pp')

　　　　　　- removeClass('active pp')

　　　　　　- toggleClass('active')

　　　　- 标签属性操作

　　　　　　-attr('src')

　　　　　　-attr('src','./1.png')

　　　　　　-attr('title',/校花)

　　　　　　-attr ({'src':''1.png','title':'校花'})

　　　   - 值的操作

　　　　　　- text()  文本

　　　　　　- html()  文本和标签

　　　　　　- val()  只对表单元素有效

　　　　　　　<input name value type/>

　　　　　　　　select

　　　　　　　　　　<option>抽烟</option>

　　　　　　　　　　<option value='喝酒'>喝酒</option>

　　　　　　　　　　<option>烫头</option>

　　　　　　　　<p>

　　　　　　　　　　<a>123</a>

　　　　　　　　</p>

　　　 - 样式属性操作

　　　　　　-css ('color','red')

　　　　　　-css({})

　　　 - 对象属性操作

　　　　　　- prop()

　　　　　　- removeProp()

　　　- 自定义动画

　　　　　　- animate({},时间,fn)

今日内容

　　1.DOM的操作

　　　　-追加元素  (后置追加)  父子

　　　　　　content:可以是  jsDOM对象,  jquery对象,  标签字符串

　　　　　　-  父.append(content)

　　　　　　- 子.appendTo(父)

　　　  -追加元素(前置追加)  父子

　　　　　　- 父.prepend()

　　　　　　-子.prependTo(父)

　　　 - 兄弟插入

　　　　　   - 参考节点.after()(要插入的兄弟节点)

　　　　　　-要插入的兄弟节点.insertAfter(参考节点)

　　　　　　- before()

　　　　　　- inserBefore()

　　　 - 替换操作

　　　　　　- 原节点.replaceWith(替换的节点)

　　　　　　- 替换的节点.replaceAll(原节点)

　　　 -  删除操作

　　　　　　- remove()  删除所有  元素和事件一起删除

　　　　　　-  detach()  删除元素事件不删除

　　　　　　-  empty()  清空

　　　　　　-  html('')  清空内容

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <script src="jquery.js"></script>
  5.     <script>
  6.         $(function () {
  7.             var oA = document.createElement('a');
  8.             oA.href = '#';
  9.             oA.innerText = '家辉'
  10.  
  11.           //  append(content) //jsDOM对象，jquery对象，标签字符串
  12.             $('.box').append('<h1 id="aaa">得劲</h1>');
  13.  
  14.             $('#aaa').click(function () {
  15.                 $(this).css('color','red');
  16.             })
  17.  
  18.             //移动操作
  19.             $('.box').append($('ul'));
  20.  
  21.             $('.box').append('<h3>得劲</h3>');
  22.             $('.box').append(oA);
  23.  
  24.             $('<h1>得劲</h1>').appendTo('.box').css('color', 'red').click(function () {
  25.  
  26.                 $(this).css('color', 'yellow');
  27.  
  28.             })
  29.             //
  30.             //
  31.             $('.box').prepend(`<ul>
  32.                     <li class="item">龙飞</li>
  33.                     <li class="item">龙飞</li>
  34.                     <li>龙飞</li>
  35.                 </ul>`);
  36.             //
  37.             $('.box').prepend(`<ol id="second">
  38.                     <li class="item">龙飞</li>
  39.                     <li class="item">龙飞</li>
  40.                     <li>龙飞</li>
  41.                 </ol>`);
  42.             //
  43.             $(`<ol id="first">
  44.                     <li class="item">鹏</li>
  45.                     <li class="item">马</li>
  46.                     <li>鹤</li>
  47.                 </ol>`).appendTo('ol li.item:eq(0)');
  48.  
  49.         })
  50.     </script>
  51. </head>
  52. <body>
  53. <div class="box">
  54.  
  55. </div>
  56.  
  57. </body>
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <script src="jquery.js"></script>
  5.     <script>
  6.         $(function () {
  7.             $('.box ul li.item').after('<li class="item2">家辉</li>');
  8.             $('<li class="item3">龙飞</li>').insertAfter('.item2');
  9.  
  10.             $('.item3').replaceWith('<li id="box3">文杰</li>');
  11.  
  12.             $(`<li class="active">李鑫</li>`).replaceAll('ul li');
  13.  
  14.             $('<h2>艳林</h2>').replaceAll('.content p');
  15.  
  16.         })
  17.     </script>
  18. </head>
  19. <body>
  20. <div class="box">
  21.     <ul>
  22.         <li class="item">得劲</li>
  23.  
  24.     </ul>
  25.  
  26.     <div class="content">
  27.         <p>alex</p>
  28.     </div>
  29. </div>
  30.  
  31. </body>
  1. <script src="jquery.js"></script>
  2.     <script>
  3.         $(function () {
  4.            $('.btn').click(function () {
  5.                alert(1111);
  6.  
  7.                //remove()删除元素 元素和事件一起删除
  8.                let jBtn =  $(this).remove();
  9.                //删除元素 事件不删除
  10.                // let jBtn = $(this).detach();
  11.                console.log(jBtn)
  12.  
  13.                $('.content').append(jBtn);
  14.  
  15.            })
  16.  
  17.            setTimeout(function () {
  18.                 $('.content').empty();
  19.            },2000)
  20.         })
  21.     </script>
  22. </head>
  23. <body>
  24. <div class="content">
  25.  
  26.     <h3>文正</h3>
  27.  
  28. </div>
  29. <hr>
  30. <hr>
  31. <hr>
  32. <hr>
  33.     <button class="btn">删除</button>
  34. </body>

2.事件
        事件流
        - DOM2级事件
            - 事件捕获阶段
            - 处于目标阶段
            - 事件冒泡阶段
   
        鼠标事件：
            - click()
            - dblclick()
              当鼠标穿过被选元素或者被选元素的子元素会被调用
            - mouseover()
            - mouseout()

当鼠标穿过被选元素的时候会调用
            - mouseenter()
            - mouseleave()
            - mouseDown()
            - mouseUp()
            - mousemove()
            - focus()
            - blur()
        表单事件：
            - change()
            - select()
            - submit()

  1. <body>
  2.     <button id="btn">
  3.         按钮
  4.     </button>
  5.     <script>
  6.         var oBtn = document.getElementById('btn');
  7.  
  8.         //false 默认为false 没有捕获阶段
  9.         oBtn.addEventListener('click',function () {
  10.             alert(1)
  11.         },false)
  12.         oBtn.onclick = function () {
  13.             alert('弹出了');
  14.         }
  15.  
  16.         document.addEventListener('click',function () {
  17.             console.log('document处于捕获阶段')
  18.         },true);
  19.  
  20.         document.documentElement.addEventListener('click',function () {
  21.             console.log('html处于捕获阶段')
  22.         },true);
  23.         document.body.addEventListener('click',function () {
  24.             console.log('body处于捕获阶段')
  25.         },true);
  26.         oBtn.addEventListener('click',function () {
  27.             console.log('按钮处于捕获阶段');
  28.         },true)
  29.         oBtn.addEventListener('click',function () {
  30.            console.log('按钮处于冒泡阶段');
  31.         },false)
  32.         document.body.addEventListener('click',function () {
  33.             console.log('body处于冒泡阶段')
  34.         },false);
  35.          document.documentElement.addEventListener('click',function () {
  36.             console.log('html处于冒泡阶段')
  37.         },false);
  38.          document.addEventListener('click',function () {
  39.             console.log('document处于冒泡阶段')
  40.         },false);
  41.     </script>
  42. </body>
  1. <style>
  2.         *{
  3.             padding: 0;
  4.             margin:0;
  5.         }
  6.         .header{
  7.             width: 100%;
  8.             height: 49px;
  9.             background-color: darkviolet;
  10.         }
  11.         .header a{
  12.             color: #fff;
  13.         }
  14.         .changefu{
  15.             position: fixed;
  16.             top: 0;
  17.             left: 0;
  18.             width: 100%;
  19.             height: 200px;
  20.             background-color: darkcyan;
  21.             display: none;
  22.         }
  23.         .up{
  24.             float: right;
  25.         }
  26.     </style>
  27.  
  28. </head>
  29. <body style="height: 2000px">
  30.     <div class="header">
  31.         <a href="#">换肤</a>
  32.     </div>
  33.     <div class="changefu">
  34.         <div class="content">
  35.             <button>img1</button>
  36.         </div>
  37.         <button class="up">收起</button>
  38.     </div>
  39.  
  40.     <script>
  41.  
  42.         $('.header a').click(function (e) {
  43.             // console.log(e);
  44.  
  45.             //阻止默认事件
  46.             e.preventDefault();//取消事件的默认动作。
  47.             e.stopPropagation()//不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
  48.  
  49.             $('.changefu').stop().slideDown(2000);
  50.  
  51.         })
  52.  
  53.         $('.up,body').click(function () {
  54.             $('.changefu').stop().slideUp(2000);
  55.         })
  56.  
  57.         $('.content button').click(function (e) {
  58.             e.stopPropagation()
  59.             alert(2222);
  60.         })
  61.  
  62.     </script>
  63. </body>
  1. <style>
  2.         .box{
  3.             width: 200px;
  4.             height: 200px;
  5.             background-color: red;
  6.             position: relative;
  7.         }
  8.         .child{
  9.             position: absolute;
  10.             top: 200px;
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: green;
  14.             display: none;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <button>按钮</button>
  20.     <div class="box">
  21.         <div class="child"></div>
  22.     </div>
  23.  
  24.     <input type="text" value="123">
  25.  
  26.     <input type="radio" name="sex" value="1">男
  27.     <input type="radio" name="sex" value="0">女
  28.  
  29.     <select name="" id="">
  30.         <option value="a">抽烟</option>
  31.         <option value="b">喝酒</option>
  32.         <option value="c">烫头</option>
  33.     </select>
  34.     <script>
  35.  
  36.         //两次单击时间间隔是300毫秒
  37.         //先做两次单击 再做双击
  38.         var timer = null;
  39.         $('button').click(function () {
  40.  
  41.             clearTimeout(timer)
  42.             timer = setTimeout(function () {
  43.                 console.log('单击了');
  44.             },300)
  45.  
  46.         })
  47.         $('button').dblclick(function () {
  48.             clearTimeout(timer)
  49.             console.log('双击了');
  50.         })
  51.  
  52.         // $('.box').mouseenter(function () {
  53.         //     console.log('盒子进入了');
  54.         //     $(this).children().show();
  55.         // })
  56.         //  $('.box').mouseleave(function () {
  57.         //      console.log('盒子离开了');
  58.         //       $(this).children().hide();
  59.         // })
  60.         //
  61.         //  $('.box').mouseover(function () {
  62.         //     console.log('盒子进入了');
  63.         //     $(this).children().show();
  64.         // })
  65.         //  $('.box').mouseout(function () {
  66.         //      console.log('盒子离开了');
  67.         //       $(this).children().hide();
  68.         // })
  69.  
  70.         $('.box').hover(function () {
  71.             $(this).children().show();
  72.         },function () {
  73.              $(this).children().hide();
  74.         })
  75.  
  76.         $('.box').mousedown(function () {
  77.             console.log('鼠标摁下了');
  78.         })
  79.  
  80.         $('.box').mouseup(function () {
  81.             console.log('鼠标抬起了');
  82.         })
  83.  
  84.         // $('input[type=text]').focus(function () {
  85.         //     console.log('获取焦点了');
  86.         // })
  87.         //
  88.         // $('input[type=text]').blur(function () {
  89.         //     console.log('失去焦点了');
  90.         // })
  91.  
  92.         //自动获取焦点
  93.         // $('input[type=text]')[0].focus();
  94.  
  95.         $('input[type=radio]').change(function () {
  96.             console.log('表单元素改变了');
  97.  
  98.             console.log($(this).val());
  99.         })
  100.  
  101.         $('select').change(function (e) {
  102.  
  103.             console.log($(this).find('option:selected').val());
  104.         //
  105.         //
  106.  
  107.         })
  108.  
  109.         $('input[type=text]').select(function () {
  110.             console.log('被选泽了')
  111.         })
  112.  
  113.     </script>
  114. </body>

3.ajax

  1. <body>
  2. <a href=""></a>
  3. <form action="" method="get">
  4.     <input type="text" name="username" value="">
  5.     <br>
  6.     <input type="password" name="username">
  7.     <br>
  8.     <input type="submit">
  9. </form>
  10.  
  11. <script>
  12.  
  13.     $('form').submit(function (e) {
  14.  
  15.         var username = $('input[type=text]').val();
  16.         alert(1111);
  17.         //    阻止默认事件
  18.         e.preventDefault();
  19.  
  20.         var data = {
  21.             'title': "该用户已存在"
  22.         }
  23.  
  24.         $(`<span>${data.title}</span>`).insertAfter('input[type=text]').css({
  25.             "color": 'red',
  26.             "font-size": 12
  27.         });
  28.  
  29.         //    与后端发生交互
  30.         // $.ajax({
  31.         //     url: `http://127.0.0.1:8080/login?username=${username}`,
  32.         //     type:'get',
  33.         //     success:function (data) {
  34.         //         //{"text":'该用户已存在'}
  35.         //
  36.         //
  37.         //
  38.         //
  39.         //         //DOM操作
  40.         //     }
  41.         //
  42.         // });
  43.  
  44.         $.ajax({
  45.             url: `http://127.0.0.1:8080/login`,
  46.             type: 'post',
  47.             data: {
  48.                 username: 'alex',
  49.                 password: '123'
  50.             },
  51.             success: function (data) {
  52.                 //{"text":'该用户已存在'}
  53.  
  54.                 //DOM操作
  55.             }
  56.  
  57.         });
  58.  
  59.     });
  60. </script>

　4.位置信息
       　　 width()
        　　height()

  1.  <style>
  2.         .box{
  3.             width: 200px;
  4.             height: 400px;
  5.             background-color: red;
  6.         }
  7.     </style>
  8. </head>
  9. <body>
  10.     <div class="box"></div>
  11.  
  12.     <script>
  13.  
  14.         // console.log($('.box').css('width'));
  15.  
  16.         console.log($('.box').width())
  17.         console.log($('.box').height())
  18.  
  19.         $('.box').width(400);
  20.  
  21.     </script>
  22. </body>

　　5.jquery插件

day57 Pyhton 前端Jquery09的更多相关文章

  1. day56 Pyhton 前端Jquery08

    前端 内容回顾: -BOM -jquery介绍 -jquery下载和引入方式 npm install jquery -jquery的选择器 -基本选择器 -通配符选择器 - id选择器 - 类选择器 ...

  2. day50 Pyhton 前端01

    文档结构: <!-- 定义文档类型 --> <!DOCTYPE html> <!-- 文档 --> <html lang='en'> <!-- 仅 ...

  3. day55 Pyhton 前端Jquery07

    昨日回顾: 表单,点击submit提交以后,服务端受到信息 import socket import pymysql from urllib.parse import unquote def run( ...

  4. day54 Pyhton 前端JS06

    内容回顾 - ECMAScript5.0 基础语法 - var 声明变量 - 五种基本数据类型 - string - number NaN number 1 number - boolean - un ...

  5. day54 Pyhton 前端JS05

    今日内容: 1.数组Array var colors = ['red','color','yellow']; 使用new 关键词对构造函数进行创建对象 var colors2 = new Array( ...

  6. day53 Pyhton 前端04

    内容回顾: 盒子: 内边距:padding,解决内部矛盾,内边距的增加整个盒子也会增加 外边距:margin,解决外部矛盾,当来盒子都有外边距的时候,取两者最大值 边框:border border-c ...

  7. day52 Pyhton 前端03

    内容回顾 块级标签: div p h 列表:ol;ul;dl 表格:table 行内标签: span a i/em b/strong u/del 行内块: input textarea img 其他: ...

  8. day51 Pyhton 前端02

    内容回顾: 1.h1~h6:加粗,数字越大级别越小,自动换行 2.br:换行;hr:分割线; (特殊符号,空格) 3.p:与前边和后边内容之间有间距 4.a标签的href:本地文件连接;网络连接;锚链 ...

  9. 最受Web前端开发者欢迎的五大开发工具

    工其事,必利于器.好的开发工具毋容置疑会帮助Web前端开发者事半功倍,51CTO在上期主办的技术沙龙<大型网站PHP开发之道> 对现场的百余位Web开发者做了问卷调查,后经51CTO调研小 ...

随机推荐

  1. Java线程本质

    java当中的线程和操作系统的线程是什么关系? 关于操作系统的线程 linux操作系统的线程控制原语 int pthread create(pthread t *thread, const pthre ...

  2. HTML标签语言一览表

    <html> ● 文件声明 让浏览器知道这是 html 文件 <head> ● 开头 提供文件整体资讯 <title> ● 标题 定义文件标题,将显示于浏览顶端 & ...

  3. 记一次线上OOM问题分析与解决

    一.问题情况 最近用户反映系统响应越来越慢,而且不是偶发性的慢.根据后台日志,可以看到系统已经有oom现象. 根据jdk自带的jconsole工具,可以监视到系统处于堵塞时期.cup占满,活动线程数持 ...

  4. git 快速入门及常用命令

    身为技术人员,都知道Git是干嘛的.从服务端角度它是代码仓库,可以多人协作.版本控制.高效处理大型或小型项目所有内容:从客户端讲,它能够方便管理本地分支.且与服务端代码的同步,从拉取.合并.提交等等管 ...

  5. CSS -- 盒子模型之边框、内边距、外边距

    一.使用border为盒子添加边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有: dashed( ...

  6. 恭喜！Apache Hudi社区新晋多位Committer

    1. 介绍 经过Apache Hudi项目委员会讨论及投票,向Udit Mehrotra.Gary Li.Raymond Xu.Pratyaksh Sharma 4人发出Committer邀请,4人均 ...

  7. 反序列化之PHP

    反序列化漏洞 #PHP反序列化 原理:未对用户输入的序列化字符串进行检测,导致攻击者可以控制反序列化过程,从而导致代码执行,SQL注入,目录遍历等不可控后果.在反序列化的过程中自动触发了某些魔术方法. ...

  8. canvas学习作业，模仿做一个祖玛的小游戏

    这个游戏的原理我分为11个步骤,依次如下: 1.布局, 2.画曲线(曲线由两个半径不同的圆构成) 3.画曲线起点起始圆和曲线终点终止圆 4.起始的圆动起来, 5.起始的圆沿曲线走起来 6.起始的圆沿曲 ...

  9. 【python】调用sm.ms图床api接口，实现上传图片并返回url

    图床简介 sm.ms网站提供免费的图床服务.单图上传大小限制5MB,每次最多上传10张,支持多种图片链接格式和api接口调用. 获取令牌 注册账号并登录,点击User-Dashboard 点击API ...

  10. spring boot之支持http和https并行（http不跳转）

    首先需要去做个证书 yml配置文件中设置的是https监听端口 server: port: 10007 tomcat: basedir: /data/apps/temp #配置SSL ssl: key ...