一、昨日内容回顾

  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()获取checkedtruefasle值,与服务器进行交互更好

    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. 4jqueryajax()方法:
  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.挂载 ...