一、昨日内容回顾

二、今日内容总结

　　　　1.jquery的介绍

　　　　　　　1）、为什么要用jquery？

　　　　　　　　　　# window.onload 事件有事件覆盖的问题，因此只能写一个事件。

　　　　　　　　　　# 代码容错性差

　　　　　　　　　　# 浏览器兼容性问题。

　　　　　　　　　　# 书写很繁琐，代码量多。

　　　　　　　　　　# 代码很乱，各个页面到处都是

　　　　　　　　　　# 动画效果很难实现

　　　　   　　 2）、jquery两大特点

　　　　　　　　　　　　# 链式编程

　　　　　　　　　　　　# 隐式迭代

　　　　　　　3）、jquery的引入步骤

　　　　　　　　　　　（1）引包

　　　　　　　　　　　（2）入口函数

　　　　　　　　　　　（3） 功能实现代码（事件处理）

　　　　　　　　　　　　

　　　　　　　4）、jqurey的入口函数的三种写法

　　　　　　　　　　　　

        // 1. 文档加载完毕，图片不加载的时候，就可以执行这个函数

        $(document).ready(function() {

            alert(1);

        })

        // 2. 写法一的简单写法

        $(function(){

            alert(1);

        })

        // 3. 文档和图片都加载完毕的时候，再执行这个函数

        $(window).ready(function(){

            alert(1);

        })

　　　　　　　5）、jquery和js入口函数的两大不同点

　　　　　　　　区别一：书写个数b不同：

　　　　　　　　　　　　# js的入口函数只能出现一次，出现多次会存在事件覆盖的问题

　　　　　　　　　　　　# jQurey的入口函数，可以出现任意多次，并不存在事件覆盖问题

　　　　　　　　区别二：执行时机不同：

　　　　　　　　　　　　# js的入口函数是在所有的文件资源加载完毕后，才执行。这些文件资源包括：页面文档、外部的js文档、外部的css文档、图片等。

　　　　　　　　　　　　# jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

　　　　　　　　　　　　文档加载的顺序：从上往下，边解析边执行。

　　　　　　　6）、jQuery对象和DOM对象相互转换

　　　　　　　　　　　 # jQuery对象转换成DOM对象

　　　　　　　　　　　　$('div')[0]

　　　　　　　　　　　# DOM对象转换成jQuery对象

　　　　　　　　　　　　$(this)

　　　　　　    7）、jqurey内部封装原理

　　　　　　　　　　　1、使用闭包函数实现模块化，并创建对象，在原型上添加方法

　　　　　　　　　　　2、每次调用完一个方法之后，它的返回值是一个对象（jQuery对象）（链式编程）

　　　　　　　　　　　3、给jQuery对象封装了属性和方法，99%的都是方法，jQuery对象是类似为数组的

　　　　　　　　　　　4、属性：索引（与DOM对象之间转化）、length方法。

　　　　  　　 8）、DOM2级事件分为三个阶段：1.捕获阶段 2.处于目标阶段 3.冒泡阶段 （了解）

　　　　　　　　　　所有的事件方法都会有一个事件对象：event

　　　　2.jquery的选择器

　　　　　　　　1）、基本选择器

　　　　　　　　　　

　　　　　　　　2）、层级选择器

　　　　　　　　　　

　　　　　　　　3）、过滤选择器

　　　　　　　　　　　　

　　　　　　　　4）、属性选择器

　　　　　　　　　　　　

　　　　　　　　5）、筛选选择器

　　　　　　　　　　　　

　　　　3.jquery的动画效果

　　　　　　　　1）、显示隐藏动画 hide、show、toggle　　　　　　　　　　　　　

　　　　　　　　2）、滑入滑出动画slideDown、slideUp、slideToggle

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        .box{

            display: none;

            width: 300px;

            height: 300px;

            background-color: red;

        }

    </style>

</head>

<body>

    <button class="btn">显示</button>

    <div class="box">

    </div>

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

    <script type="text/javascript">

        var isshow = true

        $(document).ready(function() {

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

                // if(isshow){

                //     $('div').show(2000,

                //         function(){

                //             isshow=false;

                //             $('.btn').text('隐藏');});

                // }else{

                //     $('div').hide(2000,function(){

                //         isshow=true;

                //         $('.btn').text('显示');

                //     });

                //     }    

                $('div').stop().toggle(1000,function(){

                    if($('.btn').text()=='隐藏'){

                        console.log($('.btn').text());

                       $('.btn').text('显示');

                    }else{

                       $('.btn').text('隐藏');

                    }

                })

            })

        })

    </script>

</body>

</html>

例子　　　　　　

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        .box{

            display: none;

            width: 300px;

            height: 300px;

            background-color: red;

        }

    </style>

</head>

<body>

    <button class="btn">显示</button>

    <div class="box">

    </div>

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

    <script type="text/javascript">

        var isshow = true

        $(document).ready(function() {

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

                $('div').stop().slideToggle(1000,function(){

                    if($('.btn').text()=='隐藏'){

                        console.log($('.btn').text());

                       $('.btn').text('显示');

                    }else{

                       $('.btn').text('隐藏');

                    }

                })

            })

        })

    </script>

</body>

</html>

　　　　　　　　3）、淡入淡出 fadeIn、fadeOut、fadeToggle

　　　　　　　　4）、自定义动画 animate　　　

　　　　　　　  5）、停止动画　　

$(selector).stop(true, false);

里面的两个参数，有不同的含义。

第一个参数：

true：后续动画不执行。

false：后续动画会执行。

第二个参数：

true：立即执行完成当前动画。

false：立即停止当前动画。

PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。

参数解释

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

        }

        .wrap {

            width: 330px;

            height: 30px;

            margin: 100px auto 0;

            padding-left: 10px;

            background-color: pink;

        }

        .wrap li {

            background-color: green;

        }

        .wrap > ul > li {

            float: left;

            margin-right: 10px;

            position: relative;

        }

        .wrap a {

            display: block;

            height: 30px;

            width: 100px;

            text-decoration: none;

            color: #000;

            line-height: 30px;

            text-align: center;

        }

        .wrap li ul {

            position: absolute;

            top: 30px;

            display: none;

        }

    </style>

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

    <script>

        //入口函数

        $(function() {

            // 需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。

                var oF_li = $('.wrap>ul>li');

                //绑定事件，移动至一级li，下拉显示ul

                oF_li.mouseenter(function(){

                    $(this).children('ul').stop().slideDown(1000);

                });

                //绑定事件，移开一级li，上卷隐藏ul

                oF_li.mouseout(function(){

                    $(this).children('ul').stop().slideUp(1000);

                });

        })

    </script>

</head>

<body>

<div class="wrap">

    <ul>

        <li>

            <a href="javascript:void(0);">一级菜单1</a>

            <ul>

                <li><a href="javascript:void(0);">二级菜单2</a></li>

                <li><a href="javascript:void(0);">二级菜单3</a></li>

                <li><a href="javascript:void(0);">二级菜单4</a></li>

            </ul>

        </li>

        <li>

            <a href="javascript:void(0);">二级菜单1</a>

            <ul>

                <li><a href="javascript:void(0);">二级菜单2</a></li>

                <li><a href="javascript:void(0);">二级菜单3</a></li>

                <li><a href="javascript:void(0);">二级菜单4</a></li>

            </ul>

        </li>

        <li>

            <a href="javascript:void(0);">三级菜单1</a>

            <ul>

                <li><a href="javascript:void(0);">三级菜单2</a></li>

                <li><a href="javascript:void(0);">三级菜单3</a></li>

                <li><a href="javascript:void(0);">三级菜单4</a></li>

            </ul>

        </li>

    </ul>

</div>

</body>

</html>

鼠标悬停显示和隐藏下拉菜单

　　　　　　　　　

三、预习和扩展

　　1.浮动的盒子居中：　　

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        .box{

            width: 300px;

            height: 300px;

            background-color: red;

            position: fixed;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

            margin: auto;

        }

    </style>

</head>

<body>

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

</body>

</html>

　　2.vertical-align：

　　  1） 只有在行内块设置为middle才会居中

　　　2） 父级原始不是行内块，设置为inline-block没用，设置为table-cell可以，但是必须在标准流，relative下，而fixed，absolute，float不行。

　　　3）不行的情况，暂时通过lineheight设置进行解决。

　　　　https://blog.csdn.net/eau93/article/details/38656907

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        *{padding: 0;

            margin: 0;}

        .box{

    /*        position: absolute;*/

            float: left;

            display: table-cell;

/*            line-height: 100px;*/

            width: 1260px;

            height:100px;

            background-color: #A29F9F;

            vertical-align: middle;

            text-align: center;

            }

    </style>

</head>

<body>

<div class="box">

<!--     你好 -->

        <img src="logo_top_red.png">

</div>

</body>

</html>

　　3. attr和prop()获取和设置属性的区别

  • 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

　　  4.设置border输出小三角CSS

　　　　

       #box{

          height: 0;

          width: 0;

          border-top: 10px solid black;

          border-left: 10px solid green;

          border-right: 10px solid blue;

          border-bottom: 10px solid red;

       }

python全栈开发day47-jqurey的更多相关文章

  1. Python全栈开发【面向对象进阶】

    Python全栈开发[面向对象进阶] 本节内容: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__geta ...

  2. Python全栈开发【面向对象】

    Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...

  3. Python全栈开发【模块】

    Python全栈开发[模块] 本节内容: 模块介绍 time random os sys json & picle shelve XML hashlib ConfigParser loggin ...

  4. Python全栈开发【基础四】

    Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...

  5. Python全栈开发【基础三】

    Python全栈开发[基础三]  本节内容: 函数(全局与局部变量) 递归 内置函数 函数 一.定义和使用 函数最重要的是减少代码的重用性和增强代码可读性 def 函数名(参数): ... 函数体 . ...

  6. Python全栈开发【基础二】

    Python全栈开发[基础二] 本节内容: Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典) 其他(编码,range,f ...

  7. Python全栈开发【基础一】

    Python全栈开发[第一篇] 本节内容: Python 的种类 Python 的环境 Python 入门(解释器.编码.变量.input输入.if流程控制与缩进.while循环) if流程控制与wh ...

  8. python 全栈开发之路 day1

    python 全栈开发之路 day1   本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...

  9. Python全栈开发

    Python全栈开发 一文让你彻底明白Python装饰器原理,从此面试工作再也不怕了. 一.装饰器 装饰器可以使函数执行前和执行后分别执行其他的附加功能,这种在代码运行期间动态增加功能的方式,称之为“ ...

  10. 老男孩最新Python全栈开发视频教程（92天全）重点内容梳理笔记 看完就是全栈开发工程师

    为什么要写这个系列博客呢? 说来讽刺,91年生人的我,同龄人大多有一份事业,或者有一个家庭了.而我,念了次985大学,年少轻狂,在大学期间迷信创业,觉得大学里的许多课程如同吃翔一样学了几乎一辈子都用不 ...

随机推荐

  1. luogu 1030 求先序遍历

    此题给出中序遍历和后序遍历后的序列,乍一看确乎想不出法子解决,毕竟是逆向思维: 但是后序遍历的特殊性质 son1,son2,x 使得后序的末尾便是根节点,再由中序天然的递归性质便可递归输出,用下fin ...

  2. UE4的AI学习（1）——基本概念

    AI学习当中,不学习行为树基本概念就不能明白具体实例中的操作意义,但是没有经过具体实例实验,又觉得基本概念抽象难以理解.建议先泛读(1)(2)后再对具体的细节进行死磕,能较深的理解行为树的具体概念.第 ...

  3. java工程师之旅-一个月工作心得

    不知不觉,在工作中已经度过一个月,距离上次写文章已经好几个月了,正好还有二十分钟下班,抽点时间来写一下博文,写一下心得. 首先说一下,在我工作之前,做了一个项目,和一个外校大四的学生做一个毕业设计,一 ...

  4. POST 上传 JSON 数据

    // // ViewController.m // 03-post上传json // // Created by jerry on 15/10/10. // Copyright (c) 2015年 j ...

  5. vlc-android 的编译过程

    参考官方文档:https://wiki.videolan.org/AndroidCompile#Get_VLC_Source 值得注意的的地方: 1.切记安装以下工具 sudo apt-get ins ...

  6. Mac下的开发工具

    1.webstrom 淘宝上2块钱就能买一个 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑 ...

  7. 【Linux】Linux下统计当前文件夹下的文件个数、目录个数

    统计当前文件夹下文件的个数,包括子文件夹里的 ls -lR|grep "^-"|wc -l 统计文件夹下目录的个数,包括子文件夹里的 ls -lR|grep "^d&qu ...

  8. gdb 调试入门，大牛写的高质量指南

    引用自:http://blog.jobbole.com/107759/ gdb 调试 ncurses 全过程: 发现网上的“gdb 示例”只有命令而没有对应的输出,我有点不满意.gdb 是 GNU 调 ...

  9. Linux相关指令和操作

    环境:Ubuntu16.04 1.安装ipython notebook 安装这个软件,必须安装anaconda: 注意几点:1.添加环境变量在安装的时候会自动询问你是否添加: 2.bash命令中应该和 ...

  10. freeRTOS中文实用教程1--任务

    1.前言 FreeRTOS是小型多任务嵌入式操作系统,硬实时性.本章主要讲述任务相关特性及调度相关的知识. 2. 任务的总体特点 任务的状态 (1)任务有两个状态,运行态和非运行态 (2)任务由非运行 ...