一、昨日内容回顾

　　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区别：

　　　　　　　　

  1.             .attr()
  2.                 html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
  3.  
  4.             .prop()
  5.               对dom对象属性的操作
  6.  
  7.              区分：attr()和prop() 像id class title 当给标签设置此系统提供的属性，那么该对象内部自己会封装系统的属性
  8.  
  9.                 DOM对象内部属性：
  10.                 div#aaa.uuu
  11.                     accessKey:""
  12.                     className:"uuu"
  13.                     clientHeight:0
  14.                     。。。。
  15.  
  16.                 ****当使用单选按钮的时候 使用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初识

　　　　　　　　

  1.         （4）jquery的ajax()方法：
  2.             getNowWeather();
  3.             function getNowWeather(){
  4.                 $.ajax({
  5.                 url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976',
  6.                 type:'get',
  7.                 success:function(allData){
  8.                     console.log(allData.HeWeather6[0])
  9.                     console.log(allData.HeWeather6[0].now.tmp);
  10.                     var tmp = allData.HeWeather6[0].now.tmp;
  11.  
  12.                     var allTmp = tmp+"℃"
  13.  
  14.                     $('.tmp').text(allTmp);
  15.  
  16.                 }
  17.                 })
  18.             };

三、预习和扩展

　　　

　　　　https://www.processon.com/view/link/5ad1c48de4b0b74a6dd65426

　　　1. 学习廖雪峰博客，实现其实战demo。

　　　 2. 防止事件冒泡 ：

　　　　$('button').mouseover(function(event){

　　　　　event.stopPropagation();

　　　　　　})

　　　3. 获取电脑屏幕的最大值：screen　　　

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style type="text/css">
  6.         .box{
  7.             width: 300px;
  8.             height: 200px;
  9.             background-color: red;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div class="box">
  15.  
  16.     </div>
  17.  
  18. <script type="text/javascript" src="jquery.js"></script>
  19.  
  20. <script type="text/javascript">
  21.     window.onresize=function(){
  22.         // console.log(screen.width);
  23.         // console.log(screen.height);
  24.         // console.log(document.documentElement.clientWidth);
  25.         // console.log(document.documentElement.clientHeight);
  26.     }
  27.     // 获取盒子的高度和宽度
  28.     $(function(){
  29.  
  30.         console.log($('.box').width());
  31.  
  32.     })
  33.  
  34. </script>
  35.  
  36. </body>
  37. </html>
  1. height            屏幕的像素高度
  2. width             屏幕的像素宽度
  3. availHeight       屏幕的像素高度减去系统部件高度之后的值(只读)
  4. 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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7.  
  8.     <div id="a">
  9.         <div id="b">
  10.             <a href="javascript:;" id="c">点击</a>
  11.         </div>
  12.     </div>
  13. </body>
  14.  
  15. <script type="text/javascript">
  16.     oA = document.getElementById('a');
  17.     oB = document.getElementById('b');
  18.     oC = document.getElementById('c');
  19. //第三个参数默认是false,
  20. //是对事件冒泡过程添加函数进行处理
  21.     oA.addEventListener('click',function(event){
  22.         console.log('a');
  23.     });
  24.     oB.addEventListener('click',function(event){
  25.         console.log('b');
  26.     });
  27.     oC.addEventListener('click',function(event){
  28.         console.log('c');
  29.     });
  30.  
  31. //事件捕获过程处理
  32. //第三个参数设为true
  33.     oA.addEventListener('click',function(event){
  34.         console.log('a');
  35.     },true);
  36.     oB.addEventListener('click',function(event){
  37.         console.log('b');
  38.     },true);
  39.     oC.addEventListener('click',function(event){
  40.         console.log('c');
  41.     },true);
  42. // 阻止冒泡事件的发生
  43.  
  44. oA.addEventListener('click',function(event){
  45.   if (event.target.className=='a') {
  46.       console.log(event.target);
  47.   }
  48.    console.log(event.currentTarget);
  49.  
  50. })
  51.  
  52. for(var i=0;i<oA.children.length;i++){
  53.   oA.children[i].addEventListener('click',function(event){
  54.     event.stopPropagation();  //在子元素上阻止冒泡
  55.   })
  56. }
  57.  
  58. </script>
  59. </html>

8.cssText

https://www.cnblogs.com/majingyi/p/6840818.html

python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax的更多相关文章

  1. python全栈开发day67--字段类型、字段属性、ORM回顾

    一.回顾总结 https://www.cnblogs.com/maple-shaw/articles/9323320.html 1. 视图 1. CBV 和 FBV from django.views ...

  2. Python全栈开发记录_第三篇（linux（ubuntu）的操作）

    该篇幅主要记录linux的操作,常见就不记录了,主要记录一些不太常用.难用或者自己忘记了的点. 看到https://www.cnblogs.com/resn/p/5800922.html这篇幅讲解的不 ...

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

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

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

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

  5. Python全栈开发【模块】

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

  6. python 全栈开发之路 day1

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

  7. python全栈开发中级班全程笔记（第二模块、第四章）（常用模块导入）

    python全栈开发笔记第二模块 第四章 :常用模块(第二部分)     一.os 模块的 详解 1.os.getcwd()    :得到当前工作目录,即当前python解释器所在目录路径 impor ...

  8. python 全栈开发，Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)

    昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...

  9. 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  可迭代的 可迭 ...

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

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

随机推荐

  1. mysql创建数据库指定编码格式

    CREATE DATABASE `databasename` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

  2. 使用jQuery实现返回顶部功能

    <p id="back-to-top"><a href="#top"><span></span>返回顶部< ...

  3. POJ1287 Networking【最小生成树】

    题意: 给出n个节点,再有m条边,这m条边代表从a节点到b节点电缆的长度,现在要你将所有节点都连起来,并且使长度最小 思路: 这是个标准的最小生成树的问题,用prim的时候需要注意的是他有重边,取边最 ...

  4. Linux定时任务调度

    ⒈概述 任务调度:是指系统在某个时间执行的特定的命令或程序 分类:1)系统任务:有些重要的工作必须周而复始的执行,例如病毒扫描等 2)用户任务:个别用户可能希望定时执行某些程序,例如mysql定时备份 ...

  5. Cpp读文件、CString转String、String转CString

    场景 C++读取文件 技术点 读取文件 fstream提供了三个类,用来实现c++对文件的操作.(文件的创建.读.写). ifstream -- 从已有的文件读入 ofstream -- 向文件写内容 ...

  6. 【Shell】获取当前路径

    bathpath=$(cd dirname $0 ; pwd)

  7. ERROR 1067 (42000): Invalid default value for 'created_time'【转】

    执行表增加字段语句报错 mysql> ALTER TABLE ha_question ADD COLUMN question_number INT; ERROR (): Invalid defa ...

  8. CAP理论介绍

    经典CAP图 分布式系统的CAP理论:理论首先把分布式系统中的三个特性进行了如下归纳: ●一致性(C):在分布式系统中的所有数据备份,在同一时刻是否同样的值.(等同于所有节点访问同一份最新的数据副本) ...

  9. Project Euler Problem8

    Largest product in a series Problem 8 Find the greatest product of five consecutive digits in the 10 ...

  10. centos6.5系统bash损坏之救援模式修复

    1.模拟bash被损坏的情况 # mv /bin/bash /tmp [root@localhost ~]# sync [root@localhost ~]# shutdown -r now 2.挂载 ...