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大学,年少轻狂,在大学期间迷信创业,觉得大学里的许多课程如同吃翔一样学了几乎一辈子都用不 ...
随机推荐
- PHPEXCEL xls模板导入，及格式自定义：合并单元格、加粗、居中等操作
PHPExcel 是用来操作Office Excel 文档的一个PHP类库,它基于微软的OpenXML标准和PHP语言.可以使用它来读取.写入不同格式的电子表格,如 Excel (BIFF) .xls ...
- 如何写一个好的缺陷（Defect）报告
编写缺陷报告是测试人员的日常工作,好的缺陷报告能够让开发人员更容易理解,更快速的定位问题:不好的缺陷报告可能会误导调查方向,增加沟通成本.那么一个好的缺陷报告应该包括哪些方面呢? 请看我的mindma ...
- 不同数据库下的web.config中数据库连接字符串
<connectionStrings> <add name="OADBConnectionString" connectionString="Data ...
- HKE和他的小朋友（矩乘快速幂）
题面: 题目背景: HKE带着\(n\)个小朋友做游戏 题目描述: 现在有n个座位编号为\(1\)至\(n\),这些小朋友也编号\(1\)至\(n\).一开始所有小朋友都坐在相应的座位上.HKE的游戏 ...
- AES加解密算法
直接粘代码,该类是基于微信公众号消息加密解密所提供的PHP DEMO改造而来,目前使用于彬彬大学APP接口token校验中. php的mcrypt 扩展已经过时了大约10年,并且用起来很复杂.因此它被 ...
- 【tomcat】sessionId学习(未完待续)
这里主要研究tomcat中session的管理方式以及sessionId的原理,下文将研究sessionid存到redis中以及基于redis实现session共享. 平时也就是了解session是基 ...
- oracle_集合函数
查询10和20号部门的员工 SQL> 1. select * from emp where deptno in (10,20); SQL> 2. select * from emp whe ...
- 基于Python的机器学习实战：Apriori
目录: 1.关联分析 2. Apriori 原理 3. 使用 Apriori 算法来发现频繁集 4.从频繁集中挖掘关联规则 5. 总结 1.关联分析 返回目录 关联分析是一种在大规模数据集中寻找有趣 ...
- Pytorch 入门之Siamese网络
首次体验Pytorch,本文参考于:github and PyTorch 中文网人脸相似度对比 本文主要熟悉Pytorch大致流程,修改了读取数据部分.没有采用原作者的ImageFolder方法: ...
- 算法导论 之 红黑树 - 删除[C语言]【转】
转自:https://blog.csdn.net/qifengzou/article/details/17608863 作者:邹祁峰 邮箱:Qifeng.zou.job@hotmail.com 博客: ...