2020.4.20 Jquery事件

发布于 2020-04-20  22 次阅读


1.复习内容

  • javacript DOM操作复习

  • 原生js不支持遍历添加属性

    • 所以多选的元素需要自己遍历
    • 需要选择下标才能添加属性样式等
    • 元素的方法也需要选定指定的元素之后才能操作

2.灵感代办

  • js原生操作dom练习

    • 获取元素节点:TagName,ClassName,Name,Id
    • 操作元素内容: innerHTML,innerText,value
    • 操作元素对象属性:直接赋值法 id=“id”,setAttribute/getAttribute
    • 操作元素样式 element.style=字符串,element.style.属性名= 值,方法 fontSize()(连接符变属性驼峰)
    • 元素层次获取:children(),nextElementSibling,previousElementSibling,获取节点属性列表 attributes
    • 节点的创建createElement(),用父节点添加appendChild(),insertBefore(),创建一个节点createTextNode()

3.学习内容

  • 一、Jquery使用

    1. 获取元素内容

    2. 操作元素内容

    3. 操作元素属性

      1. attr(“attrname”,”value”)

        设置元素读取属性(在标签上显示的属性)

      2. prop(“attrName”,”value”)

        设置或读取元素属性(涉及元素状态的用prop,属性取值是布尔的)

      3. removeAttr(“attrName”)

        移除指定标签属性

    4. 操作元素样式

      1. 写好css样式,然后动态添加属性id和类到元素
      2. 对类名有一组方法方便操作(因为类名不唯一)
        1. addClass(“className”) 为元素添加类名
        2. removeClass(“className”) 移除指定类名
        3. toggleClass(“className”) 借助用户行为更改(比如点击事件),有则删除,无则添加
      3. 操作行内样式
        1. css(“attr”,”value”); 缺点修改样式多就变得复杂
        2. css(Json对象);传递一个json对象
        3. json对象:定义就是花括号,键和值都是字符串格式(推荐统一使用双引号){“name”:”abd”,”age”:”23”}
    5. 根据层次结构来获取元素

      1. parent()获取父元素,父元素唯一
      2. parents()/parents(“selector”) 获取祖先元素/满足选择器的父元素
      3. children()/children(“selector”) 获取直接子元素列表,可以循环获取,多个div获取多个子元素
      4. find(“selector”) 获取指定后代元素
      5. next()/next(“selector”) 获取下一个兄弟元素
      6. prev()/prev(“selector”) 获取上一个兄弟元素
      7. siblings()/siblings(“selector”) 获取所有兄弟元素
    6. 元素的创建添加删除

      1. 创建元素
        1. $(“直接写标签内容”)
      2. 添加元素
        1. 作为子元素添加

          $parent.append(element); 添加到末尾

          $parent.prepend(element); 添加到开头

        2. 作为兄弟元素添加

          $obj.before(element) 在obj之前添加元素

          $obj.after(element) 在obj之后添加元素

      3. 删除元素
        1. obj.remove() 谁调用谁删除
    7. 事件处理

      1. 窗口加载完毕

        原生js用onload

        js和jq的区别:
        • 原生js的onload会造成覆盖问题,需要手动检测,jq的ready方法已经封装好检测,不需要考虑覆盖问题
        • js会等所有元素加载完毕,jq是元素节点加载完毕

      jquery使用ready()表示

      *   语法1:$(document).ready( function)  文档加载完毕
      *   语法2:$().ready(function) 文档加载完毕执行
      *   语法3:$(function)  文档加载完毕执行
      
      1. this关键字

        1. this关键字是原生的js对象,需要转换为jq对象使用
      2. 绑定方式(省略“on”的事件)

        1. 使用on() 绑定:
          1. $(‘h1’).on(“click”,function (){})
        2. 使用bind绑定:(本质就是on)
          1. $(‘h1’).bind(“click”,function (){})
        3. 将省略on前缀的事件名称做为方法名直接调用,例:$(‘h1’).click(function(){}) onclick省略on
      3. 事件对象的获取和使用同原生JS

        1. 在传递的函数中添加参数event ,function(event)(){}

4.扩展延伸知识

  1. 空格的代码:

    1. 半方大的空白\ 或\ 
    2. 全方大的空白\ 或\ 
    3. 不断行的空白格\ 或\ 
  2. jquery链式调用

    1. 链式调用就类似链表,可以连续使用 css().css()
  3. jquery如有没有找到方法,很大概率是jq变成了原生js

    https://stackoverflow.com/questions/4114870/jquery-value-attr-is-not-a-function

  4. JavaScript 和 jquery

    如果文档是标签形式的字符串,那么它一定是JavaScript

    ​ javascript都是变量(set或get)

    ​ jquery都是方法

  5. 原生JS中onload时间会被覆盖

    1. 需要检测一下,是否已经定义过onload
    2. 判断方法就是判断onload是否为null
      if(window.onload){
          var fn = window.onload;
          fn();
      }
      window.onload = function(){
          //code;
      }
      
  6. HTML事件需要注意:

    ​ 在文档加载完毕之后,在添加事件

  7. 去掉a标签的下划线

    ​ decoration:none;

  8. 轮廓线的英文

    ​ outline

  9. 浏览器渲染bug

    1. 浏览器渲染图片会在底部多留3px,如有有文字,好像文字溢出
  10. 调整行内块元素垂直对齐方式,

    1. veritycal-align
    2. veritycal-align调整的是元素左右的对齐方式
  11. 行内元素不支持上下margin,行内块也不支持

    1. font-height 可以调行高
  12. css中具有多个属性,顺序随意

    1. 比如backgroud: 参数的顺序位置可以随意填写
  13. margin,padding的计算

    1. 具有优先级,比如上下边距20px,父元素只有20px空闲,那么上边距为20px,下边距为0px
  14. CSS样式继承规则

    首先从父元素继承,然后依次像祖先元素

  15. vertical-align对齐方式

    常用的属性:top,middle,bottom,%百分比,inherit继承,text-top/bottom 文字的顶部/底部

    https://www.w3school.com.cn/css/pr_pos_vertical-align.asp

6.今天都复习了之前的什么内容


Ares个人进阶之路