day03_jQuery

1.jQuery简介

  • jQuery是兼容多浏览器、轻量级的免费开源JavaScript库。
  • jQuery宗旨：Write Less,Do More【写的少，做的多】

2. day031_jQuery - 图2()

  • $是jQuery，jQuery函数引用
  • $()是触发【调用】核心函数

3. 核心函数作用【$()】

  1. 传入参数为函数时：$(function(){})，类似与window.onload作用

    • $(fn) 与window.onload=fn区别

      1. 加载时机不同，前者当前文档【绘制成功】后执行fn，后者当前文档【完全加载】后执行fn。

        • 绘制成功：节点加载【绘制】成功【标签、属性、文本】
        • 总结：$(fn)先执行，window.onload=fn后执行

      2. 在当前文档中，书写次数不同：前者可以书写多次，后者只能书写一次。

        • 后者如果书写多次，后面window.onload会覆盖前面
      3. 语法结构不同，前者有两种语法结构，后者只有一种语法结构
  2. 传入参数为选择器字符串时： $(选择器字符串)
  3. 传入参数为HTML字符串时：$(HTML字符串)，创建HTML元素节点
  4. 传入参数为DOM对象时： $(DOM对象)，将DOM对象转换为jQuery对象

4. DOM对象与jQuery对象转换问题

为什么DOM对象与jQuery对象需要转换呢？

  1. 因为：默认情况，DOM对象与jQuery对象不能调用对方的属性或方法，所以，当需要调用对方的属性或方法时，需要类型转换

  • DOM对象转换为jQuery对象

    • var $obj = $(DOM对象);

  • jQuery对象转换为DOM对象【将jQuery对象看成数组或集合（伪数组）】

    • var domObj = $obj[0]
    • var domObj = $obj.get(0)

5. jQuery选择器

5.1 基本选择器

  • $(“#id”)：id选择器
  • $(“标签名”)：标签选择器
  • $(“.类名”)：类选择器
  • $(“*”)：【全局】选择器
  • $(“p,span,#id,.class”)：并集选择器

5.2 层级【层次】选择器

  • $(“E F”)：后代选择器
  • $(“E>F”)：子代选择器【子一代】
  • $(“E+F”)：相邻选择器【后一个元素】
  • $(“E~F”)：同辈选择器【后面所有兄弟元素】

5.3 过滤选择器

  • 基本过滤选择器

    • $(“:first”)：匹配第一个元素
    • $(“:last”)：匹配最后一个元素
    • $(“:eq()”)：匹配等于索引位置的元素
    • $(“:gt()”)：匹配大于索引位置的元素
    • $(“:lt()”)：匹配小于索引位置的元素
    • $(“:even”)：匹配偶数索引位置的元素
    • $(“:odd”)：匹配奇数索引位置的元素
    • $(“:header”)：匹配标题元素
    • $(“:animated”)：匹配动画元素
    • $(“:not()”)：匹配【】反向元素

  • 内容过滤选择器

    • $(“:contains()”)：匹配包含【】字符的元素
    • $(“:has()”)：匹配含有【】标签的元素
    • $(“:empty”)：匹配空元素
    • $(“:parent”)：匹配非空元素

  • 可见性过滤选择器

    • $(“:hidden”)：匹配隐藏元素，包括type=hidden，display:none
    • day031_jQuery - 图3%EF%BC%9A%E5%8C%B9%E9%85%8D%E5%8F%AF%E8%A7%81%E5%85%83%E7%B4%A0%EF%BC%8C%E4%B8%8E#card=math&code=%28%22%3Avisible%22%29%EF%BC%9A%E5%8C%B9%E9%85%8D%E5%8F%AF%E8%A7%81%E5%85%83%E7%B4%A0%EF%BC%8C%E4%B8%8E)(“:hidden”)相反

  • 属性过滤选择器

    • $(“[id]”)：匹配带有ID属性的元素
    • $(“[id=’’]”)：匹配带有ID属性且ID的值为【】的元素
    • $(“[id!=’’]”)：匹配带有ID的值不等于【】的元素
    • $(“[id^=]”)：匹配ID属性的值以【】开头的元素
    • day031_jQuery - 图4=]”)：匹配ID属性的值以【】结尾的元素
    • $(“[id*=]”)：匹配ID属性的值包含【】的元素
    • $(“[id][name=’’]”)：匹配包含ID属性，并且NAME的值为【】的元素，多项匹配

  • 子元素过滤选择器

    • $(“:first-child”)：为【每个】父元素匹配第一个子元素
    • $(“:last-child”)：为每个父元素匹配最后一个子元素

  • 表单过滤选择器

    • $(“:input”)：匹配所有表单项【input\select\textarea\button】元素
    • $(“:text”)：匹配文本框元素
    • $(“:password”)：匹配密码框元素
    • $(“:radio”)：匹配单选框元素
    • $(“:checkbox”)：匹配多选框元素
    • $(“:submit”)：匹配提交按钮元素
    • $(“:reset”)：匹配重置按钮的元素
    • $(“:file”)：匹配文件域元素
    • $(“:hidden”)：匹配隐藏域元素
    • $(“:button”)：匹配按钮元素

  • 表单对象属性过滤选择器

    • $(“:enabled”)：匹配可操作元素

    • $(“:disabled”)：匹配不可操作元素

    • $(“:checked”)：匹配单选框和多选框中选中的元素

    • $(“:selected”)：匹配下拉列表中选中的元素