jQuery学习笔记（一）

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) 表单选择器