day57 Pyhton 前端Jquery09

内容回顾:

　　- 筛选选择器

　　　　$('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() 只对表单元素有效

　　　　　　　　select

　　　　　　　　<p>

　　　　　　　　</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('') 清空内容

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery.js"></script>

    <script>

        $(function () {

            var oA = document.createElement('a');

            oA.href = '#';

            oA.innerText = '家辉'

          //  append(content) //jsDOM对象，jquery对象，标签字符串

            $('.box').append('<h1 id="aaa">得劲</h1>');

            $('#aaa').click(function () {

                $(this).css('color','red');

            })

            //移动操作

            $('.box').append($('ul'));

            $('.box').append('<h3>得劲</h3>');

            $('.box').append(oA);

            $('<h1>得劲</h1>').appendTo('.box').css('color', 'red').click(function () {

                $(this).css('color', 'yellow');

            })

            //

            //

            $('.box').prepend(`<ul>

                    <li class="item">龙飞</li>

                    <li class="item">龙飞</li>

                    <li>龙飞</li>

                </ul>`);

            //

            $('.box').prepend(`<ol id="second">

                    <li class="item">龙飞</li>

                    <li class="item">龙飞</li>

                    <li>龙飞</li>

                </ol>`);

            //

            $(`<ol id="first">

                    <li class="item">鹏</li>

                    <li class="item">马</li>

                    <li>鹤</li>

                </ol>`).appendTo('ol li.item:eq(0)');

        })

    </script>

</head>

<body>

<div class="box">

</div>

</body>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery.js"></script>

    <script>

        $(function () {

            $('.box ul li.item').after('<li class="item2">家辉</li>');

            $('<li class="item3">龙飞</li>').insertAfter('.item2');

            $('.item3').replaceWith('<li id="box3">文杰</li>');

            $(`<li class="active">李鑫</li>`).replaceAll('ul li');

            $('<h2>艳林</h2>').replaceAll('.content p');

        })

    </script>

</head>

<body>

<div class="box">

    <ul>

        <li class="item">得劲</li>

    </ul>

    <div class="content">

        <p>alex</p>

    </div>

</div>

</body>

<script src="jquery.js"></script>

    <script>

        $(function () {

           $('.btn').click(function () {

               alert(1111);

               //remove()删除元素 元素和事件一起删除

               let jBtn =  $(this).remove();

               //删除元素 事件不删除

               // let jBtn = $(this).detach();

               console.log(jBtn)

               $('.content').append(jBtn);

           })

           setTimeout(function () {

                $('.content').empty();

           },2000)

        })

    </script>

</head>

<body>

<div class="content">

    <h3>文正</h3>

</div>

<hr>

<hr>

<hr>

<hr>

    <button class="btn">删除</button>

</body>

2.事件
        事件流
        - DOM2级事件
            - 事件捕获阶段
            - 处于目标阶段
            - 事件冒泡阶段

        鼠标事件：
            - click()
            - dblclick()
              当鼠标穿过被选元素或者被选元素的子元素会被调用
            - mouseover()
            - mouseout()

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

<body>

    <button id="btn">

        按钮

    </button>

    <script>

        var oBtn = document.getElementById('btn');

        //false 默认为false 没有捕获阶段

        oBtn.addEventListener('click',function () {

            alert(1)

        },false)

        oBtn.onclick = function () {

            alert('弹出了');

        }

        document.addEventListener('click',function () {

            console.log('document处于捕获阶段')

        },true);

        document.documentElement.addEventListener('click',function () {

            console.log('html处于捕获阶段')

        },true);

        document.body.addEventListener('click',function () {

            console.log('body处于捕获阶段')

        },true);

        oBtn.addEventListener('click',function () {

            console.log('按钮处于捕获阶段');

        },true)

        oBtn.addEventListener('click',function () {

           console.log('按钮处于冒泡阶段');

        },false)

        document.body.addEventListener('click',function () {

            console.log('body处于冒泡阶段')

        },false);

         document.documentElement.addEventListener('click',function () {

            console.log('html处于冒泡阶段')

        },false);

         document.addEventListener('click',function () {

            console.log('document处于冒泡阶段')

        },false);

    </script>

</body>

<style>

        *{

            padding: 0;

            margin:0;

        }

        .header{

            width: 100%;

            height: 49px;

            background-color: darkviolet;

        }

        .header a{

            color: #fff;

        }

        .changefu{

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 200px;

            background-color: darkcyan;

            display: none;

        }

        .up{

            float: right;

        }

    </style>

</head>

<body style="height: 2000px">

    <div class="header">

        <a href="#">换肤</a>

    </div>

    <div class="changefu">

        <div class="content">

            <button>img1</button>

        </div>

        <button class="up">收起</button>

    </div>

    <script>

        $('.header a').click(function (e) {

            // console.log(e);

            //阻止默认事件

            e.preventDefault();//取消事件的默认动作。

            e.stopPropagation()//不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

            $('.changefu').stop().slideDown(2000);

        })

        $('.up,body').click(function () {

            $('.changefu').stop().slideUp(2000);

        })

        $('.content button').click(function (e) {

            e.stopPropagation()

            alert(2222);

        })

    </script>

</body>

<style>

        .box{

            width: 200px;

            height: 200px;

            background-color: red;

            position: relative;

        }

        .child{

            position: absolute;

            top: 200px;

            width: 100px;

            height: 100px;

            background-color: green;

            display: none;

        }

    </style>

</head>

<body>

    <button>按钮</button>

    <div class="box">

        <div class="child"></div>

    </div>

    <input type="text" value="123">

    <input type="radio" name="sex" value="1">男

    <input type="radio" name="sex" value="0">女

    <select name="" id="">

        <option value="a">抽烟</option>

        <option value="b">喝酒</option>

        <option value="c">烫头</option>

    </select>

    <script>

        //两次单击时间间隔是300毫秒

        //先做两次单击 再做双击

        var timer = null;

        $('button').click(function () {

            clearTimeout(timer)

            timer = setTimeout(function () {

                console.log('单击了');

            },300)

        })

        $('button').dblclick(function () {

            clearTimeout(timer)

            console.log('双击了');

        })

        // $('.box').mouseenter(function () {

        //     console.log('盒子进入了');

        //     $(this).children().show();

        // })

        //  $('.box').mouseleave(function () {

        //      console.log('盒子离开了');

        //       $(this).children().hide();

        // })

        //

        //  $('.box').mouseover(function () {

        //     console.log('盒子进入了');

        //     $(this).children().show();

        // })

        //  $('.box').mouseout(function () {

        //      console.log('盒子离开了');

        //       $(this).children().hide();

        // })

        $('.box').hover(function () {

            $(this).children().show();

        },function () {

             $(this).children().hide();

        })

        $('.box').mousedown(function () {

            console.log('鼠标摁下了');

        })

        $('.box').mouseup(function () {

            console.log('鼠标抬起了');

        })

        // $('input[type=text]').focus(function () {

        //     console.log('获取焦点了');

        // })

        //

        // $('input[type=text]').blur(function () {

        //     console.log('失去焦点了');

        // })

        //自动获取焦点

        // $('input[type=text]')[0].focus();

        $('input[type=radio]').change(function () {

            console.log('表单元素改变了');

            console.log($(this).val());

        })

        $('select').change(function (e) {

            console.log($(this).find('option:selected').val());

        //

        //

        })

        $('input[type=text]').select(function () {

            console.log('被选泽了')

        })

    </script>

</body>

3.ajax

<body>

<a href=""></a>

<form action="" method="get">

    <input type="text" name="username" value="">

    <br>

    <input type="password" name="username">

    <br>

    <input type="submit">

</form>

<script>

    $('form').submit(function (e) {

        var username = $('input[type=text]').val();

        alert(1111);

        //    阻止默认事件

        e.preventDefault();

        var data = {

            'title': "该用户已存在"

        }

        $(`<span>${data.title}</span>`).insertAfter('input[type=text]').css({

            "color": 'red',

            "font-size": 12

        });

        //    与后端发生交互

        // $.ajax({

        //     url: `http://127.0.0.1:8080/login?username=${username}`,

        //     type:'get',

        //     success:function (data) {

        //         //{"text":'该用户已存在'}

        //

        //

        //

        //

        //         //DOM操作

        //     }

        //

        // });

        $.ajax({

            url: `http://127.0.0.1:8080/login`,

            type: 'post',

            data: {

                username: 'alex',

                password: '123'

            },

            success: function (data) {

                //{"text":'该用户已存在'}

                //DOM操作

            }

        });

    });

</script>

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

 <style>

        .box{

            width: 200px;

            height: 400px;

            background-color: red;

        }

    </style>

</head>

<body>

    <div class="box"></div>

    <script>

        // console.log($('.box').css('width'));

        console.log($('.box').width())

        console.log($('.box').height())

        $('.box').width(400);

    </script>

</body>

　　5.jquery插件

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

day56 Pyhton 前端Jquery08
前端内容回顾: -BOM -jquery介绍 -jquery下载和引入方式 npm install jquery -jquery的选择器 -基本选择器 -通配符选择器 - id选择器 - 类选择器 ...
day50 Pyhton 前端01
文档结构:  <!DOCTYPE html>  <html lang='en'> <!-- 仅 ...
day55 Pyhton 前端Jquery07
昨日回顾: 表单,点击submit提交以后,服务端受到信息 import socket import pymysql from urllib.parse import unquote def run( ...
day54 Pyhton 前端JS06
内容回顾 - ECMAScript5.0 基础语法 - var 声明变量 - 五种基本数据类型 - string - number NaN number 1 number - boolean - un ...
day54 Pyhton 前端JS05
今日内容: 1.数组Array var colors = ['red','color','yellow']; 使用new 关键词对构造函数进行创建对象 var colors2 = new Array( ...
day53 Pyhton 前端04
内容回顾: 盒子: 内边距:padding,解决内部矛盾,内边距的增加整个盒子也会增加外边距:margin,解决外部矛盾,当来盒子都有外边距的时候,取两者最大值边框:border border-c ...
day52 Pyhton 前端03
内容回顾块级标签: div p h 列表:ol;ul;dl 表格:table 行内标签: span a i/em b/strong u/del 行内块: input textarea img 其他: ...
day51 Pyhton 前端02
内容回顾: 1.h1~h6:加粗,数字越大级别越小,自动换行 2.br:换行;hr:分割线; (特殊符号,空格) 3.p:与前边和后边内容之间有间距 4.a标签的href:本地文件连接;网络连接;锚链 ...
最受Web前端开发者欢迎的五大开发工具
工其事,必利于器.好的开发工具毋容置疑会帮助Web前端开发者事半功倍,51CTO在上期主办的技术沙龙<大型网站PHP开发之道> 对现场的百余位Web开发者做了问卷调查,后经51CTO调研小 ...

随机推荐

SpringBoot版不需要配置文件注解获取当前登录用户
本文讯(2019年3月30日飞快的蜗牛博客) 我是一个懒人,很久不写博客,想起来看到也不一定会写,只有心血来潮的时候写写,"钱塘江上潮信来,今日方知我是我"...... 空杯 ...
[POJ3253]Fence Repair(单调队列)
题目链接 http://poj.org/problem?id=3253 题目描述大意:切长度为a的木条的花费是a,给定最终切好的n段各自的长度,问由原来的一根木条(长度为n段长度和)以最终总花费最小 ...
git如何在远程某个分支的基础上新建分支
1.任意新建文件夹,右击git bash here $ git init(将此目录变成本地仓库) 2.$ git remote add origin 'https://git............g ...
SpringCloud实战 | 第一篇：Windows搭建Nacos服务
前言为什么放弃eureka选择nacos?本地开发环境需要搭建nacos-server,想着是很简单的事但是被一些文章(少了关键必要的步骤)给带偏了,所以亲测成功后写了这篇文章. 搭建nacos-s ...
小BUG大原理 | 第一篇：重写WebMvcConfigurationSupport后SpringBoot自动配置失效
一.背景公司的项目前段时间发版上线后,测试反馈用户的批量删除功能报错.正常情况下看起来应该是个小BUG,可怪就怪在上个版本正常,且此次发版未涉及用户功能的改动.因为这个看似小BUG我了解到不少未知的 ...
IntelliJ IDEA编辑器激活码
2020-3-31 日亲自测试有效,什么时候失效就母鸡了激活码一: T3ACKYHDVF-eyJsaWNlbnNlSWQiOiJUM0FDS1lIRFZGIiwibGljZW5zZWVOYW1lI ...
容器云平台No.7~kubernetes监控系统prometheus-operator
简介 prometheus-operator Prometheus:一个非常优秀的监控工具或者说是监控方案.它提供了数据搜集.存储.处理.可视化和告警一套完整的解决方案.作为kubernetes官方推 ...
Aop的学习与使用
什么是aop AOP(Aspect Oriented Programming)意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一 ...
趣图：调试bug进行时
扩展阅读趣图:大神写实,左脚程序继续运行,右脚程序调试趣图:Bug 多了,总有一个会把你坑了趣图:领导在旁,只求代码无Bug
vue +signalR
概述:ASP.NET Core SignalR是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立即将内容推送到客户端. 这玩意的概念我就不多讲 ...

day57 Pyhton 前端Jquery09

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

随机推荐

热门专题