2020.4.17 Jquery

发布于 2020-04-17  59 次阅读


Table of Contents

1.复习内容

2.灵感代办

3.学习内容

  1. 事件分类

    1. 鼠标事件

    2. 键盘事件

    3. 加载完毕

    4. 表单事件

      1. onfocus() 表单控件获取到焦点
      2. onblur() 表单控件失去焦点
      3. onchange() 控件的值或者状态是否发生变化(比较之前与之后,等控件失去焦点判断,选择按钮常用)
      4. oninput(实时监听输入)
      5. onsubmit(监听表单事件是否可以发送,返回值true发送,false不发送)
    5. this

      1. 指代函数的调用对象或者事件的触发对象
      2. 谁调用函数 谁就是this(比如window)
    6. 事件对象

      1. 事件对象跟随事件触发自动创建,保存与当前事件相关的信息。自动传入事件处理函数中,只需要接收
      2. 例子:btn.onclick = function(event){}
      3. 事件event是怎么传递的?
  2. Jquery使用

    1. 文档地址:https://www.jquery123.com/
    2. 使用:

      1. 引入jquery文件

      2. 工厂函数 $() (对象和原生JS不同,)

        1. 用于获取元素,创建元素节点,转换对象类型
        2. 根据选择器选择元素,返回的jQuery对象

          $(‘h1’),#id,.c1 组合 #di h1

      3. DOM操作

        1. 常用获取元素的方法

          jquery使用选择器获取元素

          1. 基础选择器(标签,id,类,群组选择器)
          2. 层级选择器(后代,子,相邻兄弟,通用兄弟)
            1. 相邻兄弟$(“h1+h2”)

              查找h1后面相邻的兄弟元素,不满足找不到

            2. 通用兄弟选择器$(“h1~h2”)
            3. 空格找后代
            4. 大于号找子代
          3. 过滤选择器

            过滤选择器与伪类选择器类似,必须与基础选择器结合使用

            1. :frist 第一个元素
            2. :last 最后一个元素
            3. :odd 查找奇数下标对应元素
            4. :even 查找偶数下标对应元素
            5. :eq查找指定下标对应的元素
            6. :gt查找大于指定下标的元素
            7. :lt查找小于指定下标的元素
            8. not(selector) 否定筛选(:not(:eq(5),:first())) 非常灵活
          4. 属性选择器

            根据标签属性匹配元素

            1. [attrName] 匹配包含指定属性的元素
            2. [attrName = value ] 匹配属性名=属性值的元素
            3. [attrName ^=value ]匹配属性值以字符结尾的元素
            4. [attrName $=value] 匹配一指定字符结尾的元素
            5. [attrName * =value] 匹配包含指定字符的元素(任意位置)
          5. 子元素过滤选择器
            1. :first-child 匹配第一个
            2. :last-child 匹配最后一个
            3. :nth-child 匹配第N个
        2. 操作元素内容
          1. html() 方法可读可写
          2. text() 原样输出,不识别标签
          3. val() 相当于原生JS的Value
        3. 操作元素属性
        4. 操作元素样式
          1. css()
        5. 根据层级结构获取元素
        6. 元素创建,添加删除
      • js可以和jq互相转换

        • jq转js对象
          • 用[0]下标来取元素
          • 用.get(0)来获取元素
        • js转jq
          • $(h1) 包装一下js对象

4.扩展延伸知识

  • 表单控件

    • action是地址,method是请求方法 enctype是编码类型
  • JavaScript for in循环
    • for (list in lists)list是一个索引

5.知识内容个人梳理

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