python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax
一、昨日内容回顾
1.jQuery初识
1）、使用jQuery而非JS的六大理由
2）、jQuery对象和js对象转换
3）、jQuery的两大特点
4）、jQuery的入口函数三大写法
5）、jQuery原理
。。。。。
2.jQuery的选择器
1）、基础选择器
2）、层级选择器
3）、基本过滤选择器
$（‘div:eq(0)’）
4)、 属性选择器
$("input[type=‘radio’]")
5）、筛选选择器
$('#box').children('span')
3.jQuery动画
show() hide() toggle
fadeIn() fadeOut() fadeToggle
slideDown() slideUp() slideToggle()
二、今日内容总结
1.jQuery自定义动画
animate({json},2000,fn)
父子标签之间可以进行传值，通常是通过自定义标签属性
2.jQuery的属性操作
jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
1、html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
2、DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
3、类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
4、值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
5、attr和prop区别：
.attr()
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr() .prop()
对dom对象属性的操作 区分：attr()和prop() 像id class title 当给标签设置此系统提供的属性，那么该对象内部自己会封装系统的属性 DOM对象内部属性：
div#aaa.uuu
accessKey:""
className:"uuu"
clientHeight:0
。。。。 ****当使用单选按钮的时候 使用prop()获取checked的true和fasle值，与服务器进行交互更好
3.jQuery的文档操作（DOM操作）
1）父子之间添加节点
末尾：
父节点.append(子节点) # 子节点：HTMLString、js对象，jQuery对象
子节点.appendTo(父节点) # 可直接对添加子节点进行相关操作
首位：
父节点.prepend(子节点)
子节点.prependTo(父节点)
2）同级节点之间添加节点
参考节点.after(要添加节点)
要添加节点.insertAfter(参考节点)
对应：before和insertBefore
3） 目标节点,replaceWith(要替换节点)
要替换节点.replaceAll(目标节点)
4） .clone(true)
5 ) remove() #返回值 不保留事件
detach() # 返回值 保留事件
empty() # 清空改对象下的所有子元素
nodejs jsonView
4.jQuery中的ajax初识
（4）jquery的ajax()方法：
getNowWeather();
function getNowWeather(){
$.ajax({
url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976',
type:'get',
success:function(allData){
console.log(allData.HeWeather6[0])
console.log(allData.HeWeather6[0].now.tmp);
var tmp = allData.HeWeather6[0].now.tmp; var allTmp = tmp+"℃" $('.tmp').text(allTmp); }
})
};
三、预习和扩展
https://www.processon.com/view/link/5ad1c48de4b0b74a6dd65426
1. 学习廖雪峰博客，实现其实战demo。
2. 防止事件冒泡 ：
$('button').mouseover(function(event){
event.stopPropagation();
})
3. 获取电脑屏幕的最大值：screen
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{
width: 300px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
window.onresize=function(){
// console.log(screen.width);
// console.log(screen.height);
// console.log(document.documentElement.clientWidth);
// console.log(document.documentElement.clientHeight);
}
// 获取盒子的高度和宽度
$(function(){ console.log($('.box').width()); }) </script> </body>
</html>
height 屏幕的像素高度
width 屏幕的像素宽度
availHeight 屏幕的像素高度减去系统部件高度之后的值(只读)
availWidth 屏幕的像素宽度减去系统部件宽度之后的值(只读)。。。。。。。
4.自定义滚动条
https://blog.csdn.net/javao_0/article/details/55680160
https://segmentfault.com/a/1190000012800450
5. box-shadow:
http://web.jobbole.com/87938/
6.onmouseleave与onmouseout区别
1、onmouseleave、onmouseenter，鼠标进入到指定元素区域内触发事件，不支持冒泡，不包含子元素的区域。
2、onmouseout、onmouseover、鼠标进入指定元素触发事件，含子元素区域。
附加：jQuery中的子元素选择器find与children区别。
find是筛选出当前元素下的所有（儿子元素，孙子元素等）符合条件的元素。
children是筛选出当前元素下的直接子元素（儿子元素）。
7.事件的三个阶段：捕获阶段、目标阶段、冒泡阶段
https://blog.csdn.net/H12KJGJ/article/details/78813320
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body> <div id="a">
<div id="b">
<a href="javascript:;" id="c">点击</a>
</div>
</div>
</body> <script type="text/javascript">
oA = document.getElementById('a');
oB = document.getElementById('b');
oC = document.getElementById('c');
//第三个参数默认是false,
//是对事件冒泡过程添加函数进行处理
oA.addEventListener('click',function(event){
console.log('a');
});
oB.addEventListener('click',function(event){
console.log('b');
});
oC.addEventListener('click',function(event){
console.log('c');
}); //事件捕获过程处理
//第三个参数设为true
oA.addEventListener('click',function(event){
console.log('a');
},true);
oB.addEventListener('click',function(event){
console.log('b');
},true);
oC.addEventListener('click',function(event){
console.log('c');
},true);
// 阻止冒泡事件的发生 oA.addEventListener('click',function(event){
if (event.target.className=='a') {
console.log(event.target);
}
console.log(event.currentTarget); }) for(var i=0;i<oA.children.length;i++){
oA.children[i].addEventListener('click',function(event){
event.stopPropagation(); //在子元素上阻止冒泡
})
} </script>
</html>
8.cssText
https://www.cnblogs.com/majingyi/p/6840818.html
python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax的更多相关文章
- python全栈开发day67--字段类型、字段属性、ORM回顾
一.回顾总结 https://www.cnblogs.com/maple-shaw/articles/9323320.html 1. 视图 1. CBV 和 FBV from django.views ...
- Python全栈开发记录_第三篇（linux（ubuntu）的操作）
该篇幅主要记录linux的操作,常见就不记录了,主要记录一些不太常用.难用或者自己忘记了的点. 看到https://www.cnblogs.com/resn/p/5800922.html这篇幅讲解的不 ...
- 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 全栈开发之路 day1
python 全栈开发之路 day1 本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...
- python全栈开发中级班全程笔记（第二模块、第四章）（常用模块导入）
python全栈开发笔记第二模块 第四章 :常用模块(第二部分) 一.os 模块的 详解 1.os.getcwd() :得到当前工作目录,即当前python解释器所在目录路径 impor ...
- python 全栈开发，Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)
昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...
- python全栈开发从入门到放弃之迭代器生成器
1.python中的for循环 l = [1,2,3,4,5,6] for i in l: #根据索引取值 print(i) 输出结果: 1 2 3 4 5 6 2.iterable 可迭代的 可迭 ...
- Python全栈开发【基础四】
Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...
随机推荐
- 一个简单的使用Quartz和Oozie调度作业给大数据计算平台执行
一,介绍 Oozie是一个基于Hadoop的工作流调度器,它可以通过Oozie Client 以编程的形式提交不同类型的作业,如MapReduce作业和Spark作业给底层的计算平台(如 Cloude ...
- STM32Cube自学-1
为了方便调试,使用Keil5+Proteus.1.新建Proteus STM32项目,选择STMF103C6 2.新建STM32CubeMX项目,选择同型号CPU,选择UART1,Asynchrono ...
- WF控制台工作流（2）
using System; using System.Linq; using System.Activities; using System.Activities.Statements; namesp ...
- HNOI2018游记
第一次参加本省省选,结果又是一次划水 Day 0 喝了一个小时鸡汤 大家看看人家钱学森(sheng) 竞赛生要多发展些爱好 不要一考完就fake,那种下考说"大佬AC辣!太强啦!月莫月莫月莫 ...
- HDU4738 Caocao's Bridges【强连通】
题意: 曹操有N个岛,这些岛用M座桥连接起来,每座桥有士兵把守(也可能没有),周瑜想让这N个岛不连通,但只能炸掉一座桥,并且炸掉一座桥需要派出不小于守桥士兵数的人去,桥的守兵数为0时,也需要派出一个人 ...
- pycharm永久激活（转）
机器上安装的pycharm失效了,注册服务器也不管用了.网上找了一个比较满意的激活方法,推荐给大家: 第一步:下载jar包: 此jar包的目的就是让截获截止时间并骗过pycharm; 百度云下载地址 ...
- 使用Jupyter lab前应该读的几篇文章
知乎上的一篇文章: 如何优雅的使用Jupyter? Jupyter Lab原来还有如下使用方式: 执行Shell命令 Hintland(提示命令).snippets(插入代码段).一键美化代码等功能( ...
- UML 类图 说明
继承关系用空心三角形+实线来表示 关联:就是属性 聚合: 合成:组成 依赖:作为参数存在
- Android中实现延时执行操作的几种方法
1.使用线程的休眠实现延时操作 new Thread() { @Override public void run() { super.run(); Thread.sleep(3000);//休眠3秒 ...
- SpringBoot使用Redis缓存
(1).添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...