jQuery入门（1）

jQuery是指JavaScript和Query（查询），是辅助JavaScript开发的js类库

使用 jQuery 获取页面标签对象

  • 使用js原生函数获取页面标签对象并绑定单击事件
1
2
3
4
5
6
7
8
<script type="text/javascript">
    window.onload = function (){
    const obj_bt = document.getElementById('btnId');
    obj_bt.onclick = function (){
        console.log('这时js原生的单击事件');
    }
}
</script>
  • 使用jQuery提供的方法获取标签对象并绑定单击事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>

    //表示页面加载完成后进行是方法 相当于原生的 window.onload = function(){}
    $(function(){
    //表示按ID查询标签对象 得到的是一个jQuery对象 一般习惯在这样的
    //一般习惯对jQuery对象的命名在其前面添加‘$’符
    const $obj_bt = $('#btnId'); 

    //这个是jQuery绑定单击事件的方法
    $obj_bt.click(function(){
        console.log('这是一个jQuert的单击事件');
        console.log(typeof $obj_bt);
    });

});
</script>

使用jQuery绑定事件的步骤依然是两步：1. 获取标签对象; 2. 标签对象绑定事件

tips：值得注意的是使用jQuery前需要将文档导入，这一步必须单独交给一个<script>标签去完成，因为一个<script>标签不能同时拥有src属性和内容，故带有src属性的标签就意味着浏览器会忽视其标签内内容。

tips：src属性既可以引用本地的 js 文档也可以使用URL的形式指向外部 js 资源，详见《JavaScript高级程序设计（第4版）》12~13页。

jQuery的核心函数

通过上面的例子可以发现，在使用jQuery定义的一些方法时 $ 是经常会使用到的一个符号，那么这个 $ 是什么呢？

在jQuery中 $ 代表的是一个函数，可以在jQuery源码中（大概在文档最底端）发现一行这样的代码 window.jQuery = window.$ = jQuery 即将 jQuery 函数赋值给了 $

JQuery源码还是很重要的，有时间还是得好好看看滴~

这里的 jQuery 函数也即 $ 函数就是jQuery的核心函数能够通过它完成非常多的任务

序号 参数 功能
1 函数 页面加载完成之后自动，相当于原生的window.onload
2 HTML标签字符串 将这个标签字符串转换为一个标签并，可以通过 appandTo() 函数将其添加入页面文档中
3 选择器字符串 $("#<id属性值>") id选择器，根据id查询标签对象 $("<标签名>") 标签名选择器，根据标签名查询标签对象 $(".<class属性值>") 类型选择器，可以根据class属性选择标签对象。这非常类似于css的选择器
4 DOM对象 会把DOM对象转化为jQuery对象返回

示例：在页面中插入一个span标签

1
$('<span>这是一个用jQuery添加的标签</span>').appendTo('body');

示例：通过id选择标签对象

1
const $obj_bt = $('#btnId');

示例：

1
2
3
4
const obj_bt = document.getElementById('bthId');
const $obj_bt = $(obj_bt);
console.log(obj_bt);
console.log($obj_bt);

运行结果：

image-20211123213833204

jQuery对象

  • jQuery对象和dom对象的区别（从获得方式上看）

    dom对象是通过js原生的getElementById()、getElemetsByXX() 获取的标签对象

    jQuery对象是 (1)通过 jQuery 提供的API创建的对象，如用HTML标签字符串加上核心函数获取的对象；(2) 使用jQuery包装的DOM对象；(3) 使用jQuery提供的选择器获取的标签对象。

  • jQuery对象的本质

    jQuery对象实际上是DOM数组 + jQuery提供的一系列功能函数

jQuery选择器

基本的jQuery选择器：

类型 语法 功能
标签名选择器 $(“<标签名>”); 按标签名查询
ID选择器 $(“#<id值>”) 按id属性查询
类名选择器 $(“.<类名>”) 按class属性查询
“星号”选择器（匹配所有） $(“*”) 查询所有标签对象
组合选择器 $(“selector1, selector2, … , selectorN”) 查询满足任意条件的标签

注意得到的数组的顺序是按网页文档的顺序排列的

tips：可以使用类似CSS中选择器的方法设计“与”逻辑

层级选择器

类型 语法 功能
后代选择器 $(“<基本选择器（祖先）> < 空格> <基本选择器（后代）>”) 选择祖先节点下满足条件的后代标签对象
子对象选择器 $(“<基本选择器（parent）> < > (大于号)> <基本选择器（child）>”) 选择父标签的直接子标签对象
邻居选择器 $(“<基本选择器（prev）> < + (加号)> <基本选择器（next）>”) 选择紧邻在prev后面的next标签元素
兄弟选择器 $(“<基本选择器（prev）> < ~ (波浪号) > <基本选择器（silblings）>”) 选择prev标签对象后面的所有兄弟标签对象（不包括兄弟节点的子节点）

基本过滤器

类型 语法 功能
首尾过滤器 $(“<选择器> <:first/last>”) 获取选择器匹配到的第一个/最后一个元素
去除过滤器 $(“<选择器> <:not(selector)>”) 在通过选择器获取的对象中去除selector匹配的标签对象
索引过滤器 $(“<选择器> <:even/odd/eq/gt/lt>”) 匹配选择器匹配到的标签对象中索引 偶数/奇数/匹配/大于/小于 的标签对象
标题选择器 $(“<选择器> <:header>”) 匹配选择器匹配到的标签对象中的所有标题 (h1，h2…) 对象
动画选择器 $(“<选择器> <:animated>”) 匹配正在执行动画的选择器

内容过滤器

类型 语法 功能
文本过滤器 $(“<选择器> <:contains(text)>”) 匹配包含给定文本的元素
空内容过滤器 $(“<选择器> <:empty>”) 匹配不包含子元素或者文本的空元素
有内容过滤器 $(“<选择器> <:parent>”) 匹配包含子元素或者文本的元素
包含过滤器 $(“<选择器> <:has(selector)>”) 匹配选择器匹配的标签中包含有selector匹配的标签对象

属性过滤器

类型 语法 功能
属性过滤器 $(“<选择器> <[<属性>]>”) 匹配包含有给定属性的标签对象
属性值过滤器 $(“<选择器> <[<属性> = <value>]>”) 匹配包含给定属性并且值为给定值 ‘value’ 的标签对象
属性值逆过滤器 $(“<选择器> <[<属性> != <value>]>”) 匹配不包含给定属性值或者包含但值不为 ‘value’ 的标签对象
属性值模糊过滤器 ("<选择器><‘[<属性>/("<选择器> <`[<属性> ^//* = ]`>") 匹配属性值以 ‘value’ 开头/结尾/包含 的标签对象
复合属性过滤器 $(“<选择器> <[selector_1] [selector_2]...[selector_n]>”) 匹配属性值同时满足所有属性选择器的标签元素（区别于基本选择器中的组合选择器）

表单过滤器

类型 语法 功能
input过滤器 $(“<选择器> <:input>”) 匹配所有input，textarea，select和button元素
表单类型过滤器 $(“<选择器> <:<type类型名>>”) 例如text匹配所有的单行文本框（type=“text”）标签对象…
可用性过滤器 $(“<选择器> <:enabled/disabled>”) 匹配所有可用/不可用的表单对象（disabled属性）
选中过滤器 $(“<选择器> <:checked>”) 匹配所有被选中的表单对象（一般为单选或复选框对象）
不可见过滤器 、$(“<选择器> <:hidden>”) 匹配所有不可见（display:none）或表单中type: hidden 的隐藏域 标签元素

jQuery的一些方法

方法 功能
val() 设置和获取表单的value属性
each(function(){ <函数体>}) 遍历jQuery的所有元素并执行function，在function中的this对象就是当前jQuery解包后的dom对象

jQuery对象筛选

函数 功能
equ() 获取匹配索引的元素
first() 获取第一个对象
last() 获取最后一个对象
filter(<选择器>) 进一步过滤元素（留下匹配）
is(<选择器>) 判断是否有匹配的元素（有即保留）
has(<选择器>) 保留有子元素匹配选择器的元素
not(<选择器>) 删除匹配选择器的元素
children(<选择器>) 返回匹配选择器的所有子元素
find(<选择器>) 返回匹配选择器的所有后代元素
next() 返回取得每一个匹配选择器的标签的紧邻的后一个兄弟元素
nextAll() 返回当前元素之后的所有同辈元素
nextUntil(<选择器>) 返回当前元素往后到匹配选择器的元素为止的所有元素
parent() 返回当前元素的父元素
prev() 返回取得每一个匹配选择器的标签的紧邻的前一个兄弟元素
prevAll() 返回当前元素之前的所有同辈元素
prevUntil(<选择器>) 返回当前元素之前到匹配选择器的元素为止的所有元素
siblings(<选择器>) 返回当前元素所有匹配选择器的兄弟元素
add(<选择器>) 把选择器匹配到的所有元素添加到当前的jQuery对象中然后返回