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调研小 ...

随机推荐

centOS7 设置mysql数据库外网可以访问
1.查看目前防火墙是否对外开发了3306端口 firewall-cmd --list-all 2.查看3306端口是否开放 firewall-cmd --query-port=3306/tcp no ...
自定义AQS独占模式下的同步器来实现独享锁
自定义AQS独占模式下的同步器来实现独享锁 /** * 自定义AQS独占模式下的同步器来实现独享锁 */ public class Mutex implements Lock, java.io.Ser ...
springboot之零碎小知识
1.springboot启动类加载yml配置项主要是如下方法,读取了yml的配置项,赋值为类成员属性 @Autowired public void setEnvironment(Environmen ...
k8s Docker 安装
k8s Docker 安装一.运行环境 Centos 7.7 虚拟机内核为 3.10 基础组件版本: k8s.gcr.io/kube-apiserver:v1.16.0 k8s.gcr.io/kub ...
MySql约束_设计_备份还原(资料二)
今日内容 1. DQL:查询语句 1. 排序查询 2. 聚合函数 3. 分组查询 4. 分页查询 2. 约束 3. 多表之间的关系 4. 范式 5. 数据库的备份和还原 DQL:查询语句 1. 排序查 ...
Ubuntu16环境安装和使用NFS
通过NFS服务我们可以方便的读写服务器上的文件,一起来实战Ubuntu16环境安装和使用NFS: 文章概要本次实战由以下步骤组成: 列举环境信息: 在192.168.119.128安装NFS服务,将 ...
简单渗透测试流程演示（445端口、IPC$、灰鸽子）
目录一.实验流程二.实验过程 2.1 信息收集 2.2 利用过程 2.3 暴力破解系统密码之445 2.4 通过木马留后门一.实验流程 0.授权(对方同意被渗透测试才是合法的.)1.信息收集 ...
linux中重启网卡后网络不通（NetworkManager篇）
1.问题描述 RHEL7.6系统,使用nmcli绑定双网卡后,在使用以下命令重启network服务后主机网络异常,导致无法通过ssh远程登录系统. systemctl restart network ...
（转载）IO模型
本文转载自网络. 如有侵权,请联系处理! 简介参考<UNIX Network Programming Volume 1, ThirdEdition [Electronic resources] ...
heap是堆，stack是栈
1.栈是用来存放基本类型的变量和引用类型的变量,堆用来存放new出来的对象和数组. 2.栈的存取速度快,但不灵活.堆的存取速度慢,但是存取灵活,空间动态分配. 3.栈在建立在连续的物理位置上,而堆只需 ...

day57 Pyhton 前端Jquery09

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

随机推荐

热门专题