python全栈开发day47-jqurey
一、昨日内容回顾
二、今日内容总结
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的更多相关文章
- Python全栈开发【面向对象进阶】
Python全栈开发[面向对象进阶] 本节内容: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__geta ...
- Python全栈开发【面向对象】
Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...
- Python全栈开发【模块】
Python全栈开发[模块] 本节内容: 模块介绍 time random os sys json & picle shelve XML hashlib ConfigParser loggin ...
- Python全栈开发【基础四】
Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...
- Python全栈开发【基础三】
Python全栈开发[基础三] 本节内容: 函数(全局与局部变量) 递归 内置函数 函数 一.定义和使用 函数最重要的是减少代码的重用性和增强代码可读性 def 函数名(参数): ... 函数体 . ...
- Python全栈开发【基础二】
Python全栈开发[基础二] 本节内容: Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典) 其他(编码,range,f ...
- Python全栈开发【基础一】
Python全栈开发[第一篇] 本节内容: Python 的种类 Python 的环境 Python 入门(解释器.编码.变量.input输入.if流程控制与缩进.while循环) if流程控制与wh ...
- python 全栈开发之路 day1
python 全栈开发之路 day1 本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...
- Python全栈开发
Python全栈开发 一文让你彻底明白Python装饰器原理,从此面试工作再也不怕了. 一.装饰器 装饰器可以使函数执行前和执行后分别执行其他的附加功能,这种在代码运行期间动态增加功能的方式,称之为“ ...
- 老男孩最新Python全栈开发视频教程（92天全）重点内容梳理笔记 看完就是全栈开发工程师
为什么要写这个系列博客呢? 说来讽刺,91年生人的我,同龄人大多有一份事业,或者有一个家庭了.而我,念了次985大学,年少轻狂,在大学期间迷信创业,觉得大学里的许多课程如同吃翔一样学了几乎一辈子都用不 ...
随机推荐
- web4.0基本配置
const path = require('path');//引入路径包 const HWP = require('html-webpack-plugin');//引入自动产出html包 const ...
- centos shell运行报语法错误: 未预期的文件结尾
可能原因: 脚本是windows下写的,然后传到linux下运行的 需要给dos文件格式转成unix dos转unix 安装: yum install dos2unix 命令: dos2unix fi ...
- JavaSE之概述
作此篇是鉴于个人Java学习之需要,也便于日后进一步归纳与复习. 规定: 1 Java全面概述[囊括 Java工作原理,JVM方面知识,关键字(final,static,public,pr ...
- ado.net 访问excel
1 类:OleDbConnection ... 2 connection string : Provider=Microsoft.ACE.OLEDB.12.0;Data Source={excelPa ...
- zabbix 在图形中显示网络设备的接口描述
zabbix原始模板没有提供来显示网络设备接口的描述,我们通常看到的图形显示是下面这样的: zabbix 3之后图形显示变化蛮大的,但我们乍一看,并不知道这个ethernet0/1是什么接口,网络设备 ...
- CentOS 7以上版本Nginx开机自启
Nginx+Center OS 7.x 开机启动设置 centos 7以上是用Systemd进行系统初始化的,Systemd 是 Linux 系统中最新的初始化系统(init),它主要的设计目标是克服 ...
- 2017-2018-2 20155303『网络对抗技术』Exp7：网络欺诈防范
2017-2018-2 『网络对抗技术』Exp7:网络欺诈防范 --------CONTENTS-------- 一.原理与实践说明 1.实践目标 2.实践内容概述 3.基础问题回答 二.实践过程记录 ...
- 基于URL的权限管理(三)
思路:先创建一个专门的类ActiveUser用于存储用户登录的信息,主要用于存储用户id,账户,名称,菜单,权限. 认证拦截器主要是查看用户是否已登陆,如果没有转发到登陆界面,用户用账户跟密码登录时候 ...
- stderr 和stdout
今天又查了一下fprintf,其中对第一个参数stderr特别感兴趣. int fprintf(FILE *stream,char *format,[argument]): 在此之前先区分一下:pri ...
- python3之协程
1.协程的概念 协程,又称微线程,纤程.英文名Coroutine. 线程是系统级别的它们由操作系统调度,而协程则是程序级别的由程序根据需要自己调度.在一个线程中会有很多函数,我们把这些函数称为子程序, ...