JQuery基础

JQuery基础

1. 概念:

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

JavaScript框架:本质上就是一些js文件,封装了js的原装代码而已。

2. 快速入门:

  1. 下载JQuery

    • 目前JQuery有三个大版本:
      • 1.x:兼容ie678,使用最为广泛的,官方只做bug维护,功能再新增。因此一般项目来说,使用这个版本就可以了。
      • 2.x:不兼容ie678,很少有人使用,官方只做bug维护,功能不再新增。如果不考虑兼容ie678,可以使用这个版本。
      • 3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用这个版本,很多老的JQuery插件不支持这个版本。
  2. 导入JQuery的js文件

  3. 使用

3. JQuery对象和JS对象区别与转换

  1. JQuery对象在操作时,更加方便。
  2. JS对象和JQuery对象方法不通用。
  3. 两者相互转换:
    • JQuery对象 –> JS对象:JQuery对象[索引]或者JQuery对象.get(索引)。
    • JS对象 –> JQuery对象:$(JS对象)。

4. 选择器

  1. 基本选择器:

    1. 标签选择器(元素选择器)
      • 语法:$(“html标签名”)获得所有匹配标签名称的元素。
    2. id选择器
      • 语法:$(“#id的属性值”)获得与指定id属性值匹配的元素
    3. 类选择器
      • 语法:$(“.class的属性值”)获得与指定class属性值匹配的元素。
    4. 并集选择器
      • 语法:$(“选择器1,选择器2…..”)获得多个选择器选中的所有元素。
  2. 层级选择器:

    1. 后代选择器:
      • 语法:$(“A B”)选择A元素内部的所有B元素,包括B元素下的B元素。
    2. 子选择器:
      • 语法:$(“A > B”)选择A元素内部的所有B子元素,只包括B元素。
  3. 属性选择器:

    1. 属性名称选择器
      • 语法:$(“A[属性名]”)包含指定属性的选择器。
    2. 属性选择器
      • 语法:$(“A[属性名=’值’]”)包含指定属性等于指定值的选择器。
    3. 复合属性选择器
      • 语法:$(“A[属性名=’值’][]….”)包含多个属性条件的选择器。
  4. 过滤选择器:

    1. 首元素选择器:
      • 语法: :first 获得选择的元素中的第一个元素。
    2. 尾元素选择器:
      • 语法: :last 获得选择的元素中的最后一个元素。
    3. 非元素选择器:
      • 语法: :not(selector) 不包括指定内容的元素。
    4. 偶数选择器:
      • 语法: :even 偶数,从0开始计数。
    5. 奇数选择器:
      • 语法: :odd 奇数,从0开始计数。
    6. 等于索引选择器:
      • 语法: :eq(index) 指定索引元素。
    7. 大于索引选择器:
      • 语法: :gt(index) 大于指定索引元素。
    8. 小于索引选择器:
      • 语法: :lt(index) 小于指定索引元素。
    9. 标题选择器:
      • 语法: header 获得标题元素(h1~h6),固定写法。
  5. 表单过滤选择器:

    1. 可用元素选择器
      • 语法: :enabled 获得可用元素。
    2. 吧可用元素选择器
      • 语法: :disabled 获得不可用元素。
    3. 选中选择器
      • 语法: :checked 获得单选/复选框中的元素。
    4. 选中选择器
      • 语法: :selected 获得下拉框选中的元素。

5. DOM操作

  1. 内容操作

    1. html():获取/设置元素对象的标签体内容。
    2. text():获取/设置元素对象的标签体纯文本内容。
    3. val():获取/设置元素对象的value属性值。
  2. 属性操作

    1. 通用属性操作

      1. attr():获取/设置元素的属性。
      2. removeAttr():删除属性。
      3. prop():获取/设置元素的属性。
      4. removeProp():删除属性。
      • 如果操作的属性是固有的属性,建议使用prop,如果是自定义属性,则建议使用attr。
    2. 对class属性操作

      1. addClass():添加class属性值。
      2. removeClass():删除class属性值。
      3. toggleClass():切换class属性值。判断元素上是否有class,有就删除class,没有就添加class。
  3. CRUD操作

    1. append():父元素将子元素追加到末尾。
    2. prepend():父元素将子元素追加到开头。
    3. appendTo():将对象添加到括号中对象内部末尾。
    4. prependTo():将对象添加到括号中对象内部开头。
    5. after():添加元素到对应的元素后边。
    6. before():添加元素到对应的元素前边。
    7. insertAfter():将对象添加到括号中元素的后边。
    8. insertBefore():将对象添加到括号中元素的前边。
    9. remove():删除元素。
    10. empty():清空元素的所有后代元素。
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!

请我喝杯咖啡吧~

支付宝
微信