jQuery基础

jQuery

• jQuery基本流程图https://www.processon.com/mindmap/5bca9b19e4b0fe81b666b9ac

• 特点

  • jQuery是一个轻量级的、兼容多浏览器的JavaScript库
  • jQuery是用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行ajax交互，能够极大的简化JavaScript编程，
  • 使用jQuery的原因：简单，开发效率高，不用浏览器的差异化

• 使用方法

  • 下载：https://jquery.com/
  • 导入
    • 通过网址下载之后script导入本地文件路劲就可以了
    • 通过使用bootcdn来使用jquery
  • 按照jQuery的语法使用就可以了
    • 注意：必须先导入再使用

• jQuery内容

  • jQuery对象和普通DOM对象的区别

    • jQuery选择器找到的是jquery对象
    • 原生的DOM找到的就是DOM对象
    • 互相转换
      • jQuery对象[0]------>DOM对象
      • $(DOM对象)------->jquery对象

  • 查找标签

    • 基本选择器

      • id选择器

      • $("#id")
        $("tagName")
        $(".className")
        $("div.c1")  // 找到有c1 class类的div标签
        //所有元素选择器
        $("*")
        //组合选择器
        $("#id, .className, tagName")
        

    • 层级选择器

      • $("x y");// x的所有后代y（子子孙孙）
        $("x > y");// x的所有儿子y（儿子）
        $("x + y")// 找到所有紧挨在x后面的y
        $("x ~ y")// x之后所有的兄弟y
        

    • 属性选择器

      • [attribute]
        [attribute=value]// 属性等于
        [attribute!=value]// 属性不等于
        

    • 基本筛选器

      • :first // 第一个
        :last // 最后一个
        :eq(index)// 索引等于index的那个元素
        :even // 匹配所有索引值为偶数的元素，从 0 开始计数
        :odd // 匹配所有索引值为奇数的元素，从 0 开始计数
        :gt(index)// 匹配所有大于给定索引值的元素
        :lt(index)// 匹配所有小于给定索引值的元素
        :not(元素选择器)// 移除所有满足not条件的标签
        :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
        

    • 表单筛选器 type属性值

      • :text    //文字
        :password//密文
        :file//文件
        :radio//圆
        :checkbox
        
        :submit//提交按钮
        :reset//重启
        :button//按钮
        

    • 筛选器方法

      1. 往下找

         1. .next()同级下一个

         2. .nextAll()同级以下所有

         3. .nextUntil同级以下指定到哪

         4. $("#id").next()
            $("#id").nextAll()
            $("#id").nextUntil("#i2")
            

      2. 往上找

         1. $("#id").prev()//id为id的同级上一个元素
            $("#id").prevAll()//往上同级所有
            $("#id").prevUntil("#i2")//往上指定到哪
            

      3. 找父级标签

         1. $("#id").parent()
            $("#id").parents()  // 查找当前元素的所有的父辈元素
            $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
            

      4. 儿子和兄弟元素

         1. $("#id").children();// 儿子们
            $("#id").siblings();// 兄弟们
            

      5. 补充

         1. 指定查找

            1. $("div").find("p")//从div标签的后代找到p标签
               //筛选
               $("div").filter(".c1")//找到div且是c1的标签
               

         2. .first() // 获取匹配的第一个元素
            .last() // 获取匹配的最后一个元素
            .not() // 从匹配元素的集合中删除与指定表达式匹配的元素
            .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
            .eq() // 索引值等于指定值的元素
            

• 操作标签

  • 操作class

    • addClass();// 添加指定的CSS类名。
      removeClass();// 移除指定的CSS类名。
      hasClass();// 判断样式存不存在
      toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
      

  • 操作css样式

    • .css("background-color") 查找背景颜色

    • .css("backgound-color","red") 更换背景颜色

    • .css({height:"300px",width:"200px"}) 更换多个css样式

    • $("p").css("color", "red"); //将所有p标签的字体设置为红色
      

  • 位置操作

    • offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
      position()// 获取匹配元素相对父元素的偏移
      scrollTop()// 获取匹配元素相对滚动条顶部的偏移
      scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
      

  • 大小(尺寸)操作

    • 从内到外 内容（content）>内填充（padding)>边框（border）>外边距（margin）
    • height/width 内容的高/宽
    • innerHeight/innerWidth 内容+内填充
    • outerHeight/outerWidth 内容+内填充+边框

  • 文本操作

    • 文本值

      • html()// 取得第一个匹配元素的html内容
        html(val)// 设置所有匹配元素的html内容
        

    • html代码

      • text()// 取得所有匹配元素的内容
        text(val)// 设置所有匹配元素的内容
        

    • 值

      • val()// 取得第一个匹配元素的当前值
        val(val)// 设置所有匹配元素的值
        val([val1, val2])// 设置多选的checkbox、多选select的值
        

        实例

        $("[name='hobby']").val(['basketball', 'football']);
        $("#s1").val(["1", "2"]
        

    • 属性

      • 想要获取返回文本类的属性用atr（标签上的属性用attr）

      • 想要获取返回布尔值的属性用prop（DOM对象有的属性用prop）

      • attr(attrName)// 返回第一个匹配元素的属性值
        attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
        attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
        removeAttr()// 从每一个匹配的元素中删除一个属性
        

  • 文档操作

    • 添加到指定元素内部的后面

    • $(A).append(B)// 把B追加到A
      $(A).appendTo(B)// 把A追加到B
      

      添加到指定元素内部的前面

      $(A).prepend(B)// 把B前置到A
      $(A).prependTo(B)// 把A前置到B
      

      添加到指定元素外部的后面

      $(A).after(B)// 把B放到A的后面
      $(A).insertAfter(B)// 把A放到B的后面
      

      添加到指定元素外部的前面

      $(A).before(B)// 把B放到A的前面
      $(A).insertBefore(B)// 把A放到B的前面
      

      移除和清空元素

      remove()// 从DOM中删除所有匹配的元素。
      empty()// 删除匹配的元素集合中所有的子节点
      

    • 替换

      • replaceWith()
        replaceAll()
        

    • 克隆

      • clone()// 参数