526互联

【jQuery基础】详解及使用教程

发布时间 2024-01-12 17:57:51作者: 三叔测试笔记

jQuery简介

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！
JavaScript 是一种脚本语言，主要用在浏览器中，实现对网页的文档对象的操作和一些用户交互动作的处理。
jQuery 则是 JavaScript 的一个代码库（习惯性叫类库），它将一些在 JavaScript 开发中经常用到的功能集合起来，以方便开发者直接使用，而不需要再用原生 JavaScript 语句写大量代码，同时可在不同浏览器间实现一致的效果。是当前最流行的 JavaScript 库之一。

jQuery引入方式

  • 本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用。
<head>
    <script src="jquery-1.9.1.min.js"></script>
</head>
  • CDN引入：使用远程CDN资源库在线引入，避免了文件下载（本教程所采用）。
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

jQuery快速使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function () {
        // 请将jQuery代码书写在这里 ...
        alert('Hello,World!');
    });
</script>
</body>
</html>

jQuery两把利器

  • jQuery核心函数：
    即： $() 或 jQuery()，jQuery定义了这个全局的函数供我们调用，它既可作为一般函数调用，且传递的参数类型不同/格式不同，功能就完全不同，也可作为对象调用其定义好的方法，此时 $ 就是一个工具对象。
  • jQuery核心对象：
    即执行jQuery核心函数返回的对象，jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)，jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom，调用jQuery对象的任何方法后返回的还是当前jQuery对象。

jQuery核心函数

jQuery核心函数主要有：

  • 选择器
  • 工具
  • ajax

jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。(注意：jQuery选择器返回的是jQuery对象。)

1.基本选择器

基本选择器包含：
标签选择器、id选择器、class选择器、通配符选择器、并集选择器、交集选择器。

标签选择器

<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>

$('div').css('background', 'red');  // 选择页面中所有的div标签，设置其背景为红色

输出结果：

id选择器

<button>按钮1</button>
<button id="btn">按钮2</button>
<button>按钮3</button>

$('#btn').css('background', 'red');  // 选择页面中所有id为btn的按钮，设置其背景为红色。

输出结果：

class选择器

<p class="red">我是段落1</p>
<p>我是段落2</p>
<p class="red">我是段落3</p>

$('.red').css('background', 'red');  // 选择页面中所有class为red的段落，设置其背景为红色。

结果输出：

通配符选择器

<div>
    <p>我是段落1</p> 
    <p>我是段落2</p>
    <p>我是段落3</p>
</div>

$('.content *').css('background', 'red');  // 选择页面中class为content的div下所有元素，设置其背景为红色

输出结果：

并集选择器

<p>我是段落</p>
<button>我是按钮</button>
<div>我是div</div>
<h1>我是大标题</h1>

$('p,button').css('background', 'red');  // 选择页面中所有的段落与按钮，设置其背景为红色

输出结果：

交集选择器

<p class="red">我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>

$('p.red').css('background', 'red');  // 选择页面中所有class为red的段落，设置其背景为红色

输出结果：

2.层级选择器

层级选择器主要有：

  • 子代选择器
  • 后代选择器
  • 兄弟选择器

子代选择器

<ul>
    <span>我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>

$('ul>span').css('background', 'red');  // 选择ul下的所有span子元素，设置其背景为红色

输出结果：

后代选择器

<ul>
    <span>我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>

$('ul span').css('background', 'red');  // 选择ul下的所有span元素，设置其背景为红色

输出结果：

兄弟选择器

<ul>
    <span>我是ul的span1</span>
    <li id="box">我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>

$('#box+li').css('background', 'red');  // 选中id为box的下一个兄弟li，设置其背景为红色

输出结果：

$('#box~li').css('background', 'red');  // 选中id为box的后边的兄弟li，设置其背景为红色

输出结果：

过滤选择器

基本筛选器

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:even').css('background', 'red');  // 实现隔行变色，让表格的奇数行的背景变为红色，:even代表选取下标为偶数的行

输出结果：

$('tr:odd').css('background', 'red');  // odd代表选取下标为奇数的行

输出结果：

$('tr:first').css('background', 'red');  // first代表选择取下标为第一行
$('tr:last').css('background', 'red');  // last代表选择取下标为最后一行
$('tr:lt(2)').css('background', 'red');  // lt(2)下标（从0开始）小于2的行
$('tr:eq(2)').css('background', 'red');  //  eq(2)下标等于2的行
$('tr:not(tr:eq(2))').css('background', 'red');  //  not(tr:eq(2))下标不等于2的行

内容筛选器

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('td:contains("男")').css('background', 'red');  //  内容为“男”的行
$('td:has(span)').css('background', 'red');  //  内容为span标签的行
$('td:empty').css('background', 'red');  //  内容为空的行
$('td:parent').css('background', 'red');    //  内容不为空的行

属性筛选器

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>

$('[hreflang]').css('background', 'red');   //  查找含hreflang属性标签的元素
$('a[hreflang="en"]').css('background', 'red'); // 查找hreflang属性值是en的元素
$('a[hreflang!="en"]').css('background', 'red');    //查找hreflang属性值不是en的元素
$('a[hreflang|="en"]').css('background', 'red');    //查找hreflang属性值是en或以en开头的元素
$('a[hreflang^="en"]').css('background', 'red');    //查找hreflang属性值是en或以en开头的元素
$('a[hreflang$="CN"]').css('background', 'red');    //hreflang属性值以CN结尾的元素
$('a[hreflang*="CN"]').css('background', 'red');    //hreflang属性值中包含字符串CN的元素
$('a[hreflang~="CN"]').css('background', 'red');    //hreflang属性中用空格分隔的值中包含CN的元素
$('a[hreflang="zh-CN"][title="Chinese"]').css('background', 'red'); //多个属性选择

可见性筛选器

<p style="display: block">我是显示段落</p>
<p style="display: none">我是隐藏段落</p>

$('p:hidden').css('display', 'block');  //让隐藏的段落显示出来
$('p:visible').css('display', 'none');  //让显示的段落隐藏起来

子元素筛选器

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
</ul>

$('ul li:first-child').css('background', 'red');    //选择所有父级元素ul下的第一个子元素li
$('ul li:last-child').css('background', 'red');     //选择所有父级元素ul下的最后一个子元素li
$('ul li:nth-child(2)').css('background', 'red');   //选择所有父级元素ul下的第二个子元素li

表单选择器

表单类型选择器

<form>
    <input type="text"><br>
    <input type="password"><br>
    <input type="file"><br>
    <input type="button" value="按钮"><br>
    <input type="submit" value="提交按钮"><br>
    <input type="reset" value="重置按钮"><br>
</form>

$('input:text').css('background', 'red');   //选中表单中的文本框
$('input:password').css('background', 'red');   //选中表单中的密码框
$('input:file').css('background', 'red');   //选中表单中的文件框
$('input:button').css('background', 'red'); //选中表单中的按钮
$('input:submit').css('background', 'red'); //选中表单中的提交按钮
$('input:reset').css('background', 'red');  //选中表单中的重置按钮

<form>
    <input type="checkbox">复选框<br>
    <input type="radio">单选框<br>
</form>

console.log($(':checkbox')[0]); //控制台输出标签内容
console.log($(':radio')[0]);

控制台输出：

表单状态选择器

<form>
    <input type="text" autofocus><br>
    <input type="checkbox" checked>复选框<br>
    <input type="radio" disabled>单选框<br>
    <select>
        <option selected>列表项1</option>
        <option>列表项2</option>
    </select>
</form>

console.log($(':focus')[0]);    //输出表单获取焦点
console.log($(':checked')[0]);  //表单选中
console.log($(':disabled')[0]); //表单禁用
console.log($(':selected')[0]); //表单列表项选中的状态所在的标签信息

输出结果：