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());
- DOM对象要想转换为jQuery对象,需要使用jQuery的工厂函数 $( ) 将其包裹,返回的就是对应的jQuery对象。
- 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对象是数组对象。jQuery对象[索引值]可以直接转换为对应的DOM对象
jQuery选择器
a) 基本选择器
- Id选择器
- 类选择器
- 元素选择器
- 通配符选择器 -- *
- 组合选择器 -- 选择器之间用逗号隔开,匹配并集结果
b) 层级选择器
- parent child
- parent>child
- targetelem+next
- trgetelem~nextall
c) 过滤选择器
- 基本过滤选择器
* :first - 匹配第一个 -- first()函数
* :last - 匹配最后一个 -- last()函数
*:not() - 匹配指定规则之外
*:even - 匹配偶数
* :odd - 匹配奇数
* :eq() - 索引值等于 -- 索引值从 0 开始
* :gt() - 索引值大于
* :lt() - 索引值小于
* :header -- 匹配h1h2h3h4h5h6标题
* :animated - 匹配动画 -- 只能匹配jQuery实现的动画效果
- 子元素过滤选择器
* :nth-child() -- 从 1 开始
* :first-child
* :last-child
* :only-child - 只有一个子元素
- 可见性过滤选择器
* :hidden -- 匹配隐藏元素
* :visible -- 匹配可见元素
- 属性过滤选择器
* [attrName]
* [attrName=value]
* [attrName!=value]
* [attrName^=value]
* [attrName$=value]
* [attrName*=value]
*[selector1][selector2][selectorN]
- 内容过滤选择器
* :contains(text) - 含有指定文本的元素
* :empty - 不包含子元素或文本元素的元素
* :parent - 包含子元素或文本元素的元素
* :has(selector) - 包含匹配selector的父元素
- 表单对象属性过滤选择器
* :enabled
* :disabled
* :checked
* :selected
d) 表单选择器