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

随机推荐

转载：使用java获取某A股当天/上一交易日的交易基本信息
整个程序是借用了新浪的对外股票接口http://hq.sinajs.cn/list=sh603696,如果把这个地址放到浏览器地址栏里,你将看到: var hq_str_sh603696=" ...
h5内嵌微信小程序，调用微信支付功能
在小程序中不能使用之前在浏览器中配置的支付功能,只能调用小程序专属的api进行支付. 因为需要在现在实现的基础上,再添加在小程序中调用微信支付功能,所以我的思路是这样的 1.在点击支付按钮时,判断是不 ...
CentOS如何设置IP连接网络
1.登录系统,进入:cd /etc/sysconfig/network-scripts 目录下,如下图: 找到 ifcfg-ens33(文件) 第二步:使用vi编辑器打开ifcfg-ens33文件,使 ...
html基础：css样式1
h't'm'l中用到css样式有三种方式: 1.在header中增加style标签,在style标签中写 2.用link标签引用css样式文件 3.在需要使用css样式的标签添加style属性一.在 ...
adb命令装包failure问题
图片摘自CSDN,待验证
【小白学PyTorch】11 MobileNet详解及PyTorch实现
文章来自微信公众号[机器学习炼丹术].我是炼丹兄,欢迎加我微信好友交流学习:cyx645016617. @ 目录 1 背景 2 深度可分离卷积 2.2 一般卷积计算量 2.2 深度可分离卷积计算量 2 ...
NSThread线程对象
NSThread 创建线程的方式准备在后台线程调用的方法 longOperation: - (void)longOperation:(id)obj { NSLog(@"%@ - %@&qu ...
工具类-Fastjson入门使用
简介什么是Fastjson? fastjson是阿里巴巴的开源JSON解析库,它可以解析JSON格式的字符串,支持将Java Bean序列化为JSON字符串,也可以从JSON字符串反序列化到Java ...
[LeetCode] 22. 括号生成（回溯/DP）
题目给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: [ "((()))", "(()( ...
gcc之__attribute__简介及对齐参数介绍
GNU C的一大特色就是__attribute__机制.__attribute__机制可以设置函数属性(Function Attribute).变量属性(Variable Attribute)和类型属 ...

day57 Pyhton 前端Jquery09

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

随机推荐

热门专题