jQuery工厂函数

jQuery的工厂函数算做是jQuery的一个入口,通过它既可以使用选择器,也可以包装DOM对象,还可以创建元素等功能。

工厂函数的写法有两种:

  • 第一种是$( )
  • 第二种是jQuery( )

这里的”$”符号就表示jQuery,是jQuery的一个约定。
不仅如此,jQuery也建议通过jQuery获取的元素变量前都增加”$”符号。目前有很多JS库都效仿了jQuery的这种做法,当然也引起了多个使用””的JS库一起使用时的一些冲突,主要还是集中在”$”的使用权上。

jQuery对象与DOM对象

  • DOM对象
    • 定义:是指通过DOM获取的元素。
  • jQuery对象
    • 定义:是通过包装DOM对象后产生的一种对象(jQuery自定义的全局对象)。
    • 可以说jQuery底层其实还是DOM对象。
    • 注意:jQuery是类数组对象,所以jQuery对象中可能包含多个DOM对象或一个DOM对象,这要看具体情况。
  • DOM对象转换为jQuery对象
    • DOM对象要想转换为jQuery对象,需要使用jQuery的工厂函数 $( ) 将其包裹,返回的就是对应的jQuery对象。
      // DOM对象
      var username = document.getElementById("username");
      // DOM对象转换为jQuery对象
      var $username = $(username);
      // 测试
      console.log($username.val());
      
  • jQuery对象转换为DOM对象
    • jQuery对象是数组对象。jQuery对象[索引值]可以直接转换为对应的DOM对象
      // jQuery对象
      var $user = $("#username");
      // 1. jQuery对象是数组对象
      var user1 = $user[0];
      // 测试
      console.log(user1.value);
      
    • jQuery提供了get(index)方法。jQuery对象.get(索引值)也可以转换为对应的DOM对象
      // jQuery对象
      var $user = $("#username");
      // 2. jQuery提供get(index)方法进行转换
      var user2 = $user.get(0);
      // 测试
      console.log(user2.value);

jQuery选择器

a) 基本选择器

  1. Id选择器
  2. 类选择器
  3. 元素选择器
  4. 通配符选择器 -- *
  5. 组合选择器 -- 选择器之间用逗号隔开,匹配并集结果

b) 层级选择器

  1. parent child
  2. parent>child
  3. targetelem+next
  4. trgetelem~nextall

c) 过滤选择器

  1. 基本过滤选择器

* :first - 匹配第一个 -- first()函数

* :last - 匹配最后一个 --  last()函数

*:not() - 匹配指定规则之外

*:even - 匹配偶数

* :odd - 匹配奇数

* :eq() - 索引值等于 -- 索引值从 0 开始

* :gt() - 索引值大于

* :lt() - 索引值小于

* :header -- 匹配h1h2h3h4h5h6标题

* :animated - 匹配动画 -- 只能匹配jQuery实现的动画效果

  1. 子元素过滤选择器

* :nth-child() -- 1 开始

* :first-child

* :last-child

* :only-child - 只有一个子元素

  1. 可见性过滤选择器

* :hidden -- 匹配隐藏元素

* :visible -- 匹配可见元素

  1. 属性过滤选择器

* [attrName]

* [attrName=value]

* [attrName!=value]

* [attrName^=value]

* [attrName$=value]

* [attrName*=value]

*[selector1][selector2][selectorN]

  1. 内容过滤选择器

* :contains(text) - 含有指定文本的元素

* :empty - 不包含子元素或文本元素的元素

* :parent - 包含子元素或文本元素的元素

* :has(selector) - 包含匹配selector的父元素

  1. 表单对象属性过滤选择器

* :enabled

* :disabled

* :checked

* :selected

d) 表单选择器