pink老师的jquery

已于 2023-02-23 17:16:41 修改
阅读量258 收藏 1
点赞数
分类专栏： jQuery 文章标签： javascript 开发语言 jquery
于 2023-02-21 10:46:35 首次发布
原文链接：https://blog.csdn.net/qq_38490457/article/details/109683256?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167693662916782425171526%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167693662916782425171526&biz_id=0&utm_me
版权
本教程详细介绍了jQuery的基础知识，包括jQuery的核心函数如$()，选择器如基本选择器、层级选择器、过滤选择器，以及如何进行事件处理和简单的动画效果。内容涵盖标签选择器、ID选择器、类选择器，还有属性筛选、内容筛选和层级操作，同时讲解了CSS样式操作、DOM操作和事件绑定等内容。
摘要由CSDN通过智能技术生成

jQuery


转载内容在转载过程中尚有缺失，看主页jquery收藏原版内容

目录

配套资料，免费下载
链接：https://pan.baidu.com/s/152NnFqzAUx9br2qb49mstA
提取码：ujyp
复制这段内容后打开百度网盘手机App，操作更方便哦

第一章 jQuery简介

1.1、jQuery简介

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！

1.2、jQuery官网

官方地址：点击打开

官方文档：点击打开

1.3、jQuery版本介绍

  • 1.x （本教程所采用）
    • 兼容老版本IE
    • 文件较大，但兼容性最好
  • 2.x
    • 部分IE8及以下版本不支持
    • 文件较小，执行效率更高
  • 3.x
    • 完全不再支持IE8及以下版本
    • 提供了一些新的API
    • 提供不包含AJAX/动画API的版本

1.4、jQuery引入方式

  • 本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用
<head>
    <script src="jquery-1.9.1.min.js"></script>
</head>    

 
 

 
 
  • 1
  • 2
  • 3
  • CDN引入：使用远程CDN资源库在线引入，避免了文件下载（本教程所采用）
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>    

 
 

 
 
  • 1
  • 2
  • 3

1.5、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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

1.6、jQuery两把利器

jQuery两把利器分别是：

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

第二章 jQuery核心函数

2.1、选择器

2.1.1、基本选择器

2.1.1.1、标签选择器

需求描述：选择页面中所有的div标签，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
$('div').css('background', 'red');

 
 

 
 
  • 1

image-20201108173258243

2.1.1.2、id选择器

需求描述：选择页面中所有id为btn的按钮，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
$('#btn').css('background', 'red');

 
 

 
 
  • 1

image-20201108174241651

2.1.1.3、class选择器

需求描述：选择页面中所有class为red的段落，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
$('.red').css('background', 'red');

 
 

 
 
  • 1

image-20201108174410579

2.1.1.4、通配符选择器

需求描述：选择页面中class为content的div下所有元素，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
$('.content *').css('background', 'red');

 
 

 
 
  • 1

image-20201108183707902

2.1.1.5、并集选择器

需求描述：选择页面中所有的段落与按钮，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
  • 4
$('p,button').css('background', 'red');

 
 

 
 
  • 1

image-20201108183914014

2.1.1.6、交集选择器

需求描述：选择页面中所有class为red的段落，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('p.red').css('background', 'red');

 
 

 
 
  • 1

image-20201108184128559

2.1.2、层级选择器

2.1.2.1、子代选择器

需求描述：选择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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
$('ul>span').css('background', 'red');

 
 

 
 
  • 1

image-20201110181100657

2.1.2.2、后代选择器

需求描述：选择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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
$('ul span').css('background', 'red');

 
 

 
 
  • 1

image-20201110181202087

2.1.2.3、兄弟选择器

需求描述：选中id为box的下一个兄弟li，设置其背景为红色

<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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
$('#box+li').css('background', 'red');

 
 

 
 
  • 1

image-20201110181745366

需求描述：选中id为box的后边的兄弟li，设置其背景为红色

<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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
$('#box~li').css('background', 'red');

 
 

 
 
  • 1

image-20201110181831495

2.1.3、过滤选择器

2.1.3.1、基本筛选器

需求描述：实现隔行变色，让表格的奇数行的背景变为红色，:even代表选取下标为偶数的行

<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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('tr:even').css('background', 'red');

 
 

 
 
  • 1

image-20201111112357714

需求描述：实现隔行变色，让表格的偶数行的背景变为红色，:odd代表选取下标为奇数的行

<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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('tr:odd').css('background', 'red');

 
 

 
 
  • 1

image-20201111112537833

需求描述：实现让表格的第一行的背景变为红色

<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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('tr:first').css('background', 'red');

 
 

 
 
  • 1

image-20201111113400031

需求描述：实现让表格的最后一行的背景变为红色

<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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('tr:last').css('background', 'red');

 
 

 
 
  • 1

image-20201111113453734

需求描述：实现让下标（从0开始）小于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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('tr:lt(2)').css('background', 'red');

 
 

 
 
  • 1

image-20201111113912067

需求描述：实现让下标（从0开始）大于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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('tr:gt(2)').css('background', 'red');

 
 

 
 
  • 1

image-20201111114920024

需求描述：实现让下标（从0开始）等于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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('tr:eq(2)').css('background', 'red');

 
 

 
 
  • 1

image-20201111115028273

需求描述：实现让下标（从0开始）不等于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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('tr:not(tr:eq(2))').css('background', 'red');

 
 

 
 
  • 1

image-20201111115202609

2.1.3.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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('td:contains("男")').css('background', 'red');

 
 

 
 
  • 1

image-20201111120011180

需求描述：实现让内容为span标签的单元格的背景变为红色

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

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('td:has(span)').css('background', 'red');

 
 

 
 
  • 1

image-20201111120813884

需求描述：实现让内容为空的单元格的背景变为红色

<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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('td:empty').css('background', 'red');

 
 

 
 
  • 1

image-20201111120205737

需求描述：实现让内容不为空的单元格的背景变为红色

<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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('td:parent').css('background', 'red');

 
 

 
 
  • 1

image-20201111120622665

2.1.3.3、属性筛选器

需求描述：查找herflang属性的标签元素，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
$('[hreflang]').css('background', 'red');

 
 

 
 
  • 1

image-20201112091316884

需求描述：查找hreflang属性值是en的所有超链接，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
$('a[hreflang="en"]').css('background', 'red');

 
 

 
 
  • 1

image-20201112091734984

需求描述：查找hreflang属性值不是en的所有超链接，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
$('a[hreflang!="en"]').css('background', 'red');

 
 

 
 
  • 1

image-20201112091926200

需求描述：查找hreflang属性值是en或者以en开头的所有超链接，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
$('a[hreflang|="en"]').css('background', 'red');
或者
$('a[hreflang^="en"]').css('background', 'red');

 
 

 
 
  • 1
  • 2
  • 3

image-20201112091126256

需求描述：查找hreflang属性值是以给定值CN结尾的元素，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
$('a[hreflang$="CN"]').css('background', 'red');

 
 

 
 
  • 1

image-20201112093211690

需求描述：选择hreflang属性具有包含一个给定的子字符串CN的超链接，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
$('a[hreflang*="CN"]').css('background', 'red');

 
 

 
 
  • 1

image-20201112092429193

需求描述：选择hreflang属性用空格分隔的值中包含一个给定值为CN的超链接，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
$('a[hreflang~="CN"]').css('background', 'red');

 
 

 
 
  • 1

image-20201112092856115

需求描述：选择hreflang属性为zh-CN，title属性为Chinese的超链接，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
$('a[hreflang="zh-CN"][title="Chinese"]').css('background', 'red');

 
 

 
 
  • 1

image-20201112095539910

2.1.3.4、可见性筛选器

需求描述：让隐藏的段落显示出来

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

 
 

 
 
  • 1
  • 2
$('p:hidden').css('display', 'block');

 
 

 
 
  • 1

image-20201112100048861

需求描述：让显示的段落隐藏起来

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

 
 

 
 
  • 1
  • 2
$('p:visible').css('display', 'none');

 
 

 
 
  • 1

image-20201112100256467

2.1.3.5、子元素筛选器

需求描述：选择所有父级元素ul下的第一个子元素li，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('ul li:first-child').css('background', 'red');

 
 

 
 
  • 1

image-20201112101446747

需求描述：选择所有父级元素ul下的最后一个子元素li，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('ul li:last-child').css('background', 'red');

 
 

 
 
  • 1

image-20201112101837483

需求描述：选择所有父级元素ul下的第二个子元素li，设置其背景为红色

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

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$('ul li:nth-child(2)').css('background', 'red');

 
 

 
 
  • 1

image-20201112104323763

2.1.4、表单选择器

2.1.4.1、表单类型选择器

需求描述：选中表单中的文本框、密码框、文件框、按钮、提交按钮、重置按钮等，设置其背景为红色

<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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
$('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');

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

image-20201112105954052

需求描述：选中复选框、单选框，然后输出标签信息

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

 
 

 
 
  • 1
  • 2
  • 3
  • 4
console.log($(':checkbox')[0]);
console.log($(':radio')[0]);

 
 

 
 
  • 1
  • 2

image-20201112111743216

2.1.4.2、表单状态选择器

需求描述：输出表单获取焦点、表单选中、表单禁用、表单列表项选中的状态所在的标签信息

<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>

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
console.log($(':focus')[0]);
console.log($(':checked')[0]);
console.log($(':disabled')[0]);
console.log($(':selected')[0]);

 
 

 
 
  • 1
  • 2
  • 3
  • 4

image-20201112111607308

2.2、工具

2.2.1、$.each方法

方法描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1，其他对象通过其属性名进行迭代。

需求描述：给定一个数组，使用$.each方法进行遍历输出

var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];
$.each(arr, function (index, element) {
    console.log(index, element);
});

 
 

 
 
  • 1
  • 2
  • 3
  • 4

image-20201112150402126

需求描述：给定一个对象，使用$.each方法进行遍历输出

var obj = {
    name: 'Tom',
    age: 28,
    speak: function () {}
};
$.each(obj, function (key, value) {
    console.log(key, value);
});

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

image-20201112150826663

2.2.2、$.trim方法

方法描述：去掉字符串起始和结尾的空格。

需求描述：给定一个字符串，去掉该字符串的前后空格

var str = '    hello    ';
console.log($.trim(str));

 
 

 
 
  • 1
  • 2

image-20201112153235248

2.2.3、$.type方法

方法描述：确定JavaScript 对象的类型。

需求描述：给定一个对象，输出该对象的类型

var str = '    hello    ';
console.log($.type(str));

 
 

 
 
  • 1
  • 2

image-20201112153751009

2.2.4、$.isArray方法

方法描述：用来测试指定对象是否为一个数组。

需求描述：给定一个对象，输出该对象是不是数组类型

var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];
console.log($.isArray(arr));

 
 

 
 
  • 1
  • 2

image-20201112154343259

2.2.5、$.isFunction方法

方法描述：用来测试指定对象是否为一个函数。

需求描述：给定一个对象，输出该对象是不是函数类型

var fun = function () {
    console.log("hello");
};
console.log($.isFunction(fun));

 
 

 
 
  • 1
  • 2
  • 3
  • 4

image-20201112154758585

2.3、ajax

2.3.1、$.ajax方法

方法描述：执行一个异步的HTTP的请求。

需求描述：执行一个异步的HTTP GET请求，从服务器加载数据。

$.ajax({
    url: '/user/login',
    type: 'get',
    data: {
        username: 'zhangsan',
        password: '123456'
    },
    dataType: 'text',
    success: function (response) {
        alert(response);
    },
    error: function (response) {
        alert(response);
    }
});

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

需求描述：执行一个异步的HTTP POST请求，从服务器加载数据。

$.ajax({
    url: '/user/login',
    type: 'post',
    data: {
        username: 'zhangsan',
        password: '123456'
    },
    dataType: 'text',
    success: function (response) {
        alert(response);
    },
    error: function (response) {
        alert(response);
    }
});

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

2.3.2、$.get方法

方法描述：使用一个HTTP GET请求从服务器加载数据。

这是一个ajax功能的缩写，这相当于:

$.ajax({
    url: url,
    data: data,
    success: success,
    dataType: dataType
});

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$.get('/user/login', {username: 'zhangsan', password: '123456'}, function (response) {
    alert(response);
});

 
 

 
 
  • 1
  • 2
  • 3

2.3.3、$.post方法

方法描述：使用一个HTTP POST请求从服务器加载数据。

这是一个ajax功能的缩写，这相当于:

$.ajax({
    url: url,
    data: data,
    success: success,
    dataType: dataType
});

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
$.post('/user/login', {username: 'zhangsan', password: '123456'}, function (response) {
    alert(response);
});

 
 

 
 
  • 1
  • 2
  • 3

第三章 jQuery核心对象

3.1、属性

3.1.1、属性

3.1.1.1、attr()

方法描述：专门操作属性值为非布尔值的属性，该方法读写一体。

需求描述：设置p标签的title属性为”我是attr修改后的段落标题“

<p id="content" title="我是段落标题">我是段落</p>

 
 

 
 
  • 1
$('#content').attr('title', '我是attr修改后的段落标题');

 
 

 
 
  • 1

image-20201112173818651

需求描述：读取p标签的title属性并输出

<p id="content" title="我是段落标题">我是段落</p>

 
 

 
 
  • 1
console.log($('#content').attr('title'));

 
 

 
 
  • 1

image-20201112173942146

3.1.1.2、prop()

方法描述：专门操作属性值为布尔值的属性，该方法读写一体。

需求描述：设置复选框的状态为选中状态

<input type="checkbox">复选框

 
 

 
 
  • 1
$(':checkbox').prop('checked', 'true');

 
 

 
 
  • 1

image-20201112174254845

需求描述：读取复选框的选中状态并输出

<input type="checkbox" checked>复选框

 
 

 
 
  • 1
console.log($(':checkbox').prop('checked'));

 
 

 
 
  • 1

image-20201112174448411

3.1.1.3、val()

方法描述：该方法主要用于获取表单元素的值和设置表单元素的值，该方法读写一体。

需求描述：设置文本框的值为”123456“

<input type="text">

 
 

 
 
  • 1
$(':text').val('123456');

 
 

 
 
  • 1

image-20201112174730206

需求描述：读取文本框的值并输出

<input type="text" value="123456">

 
 

 
 
  • 1
console.log($(':text').val());

 
 

 
 
  • 1

image-20201112175045084

3.1.2、样式

3.1.2.1、css()

方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。

需求描述：设置div的背景颜色为红色，字体颜色为白色

<div>我是div</div>

 
 

 
 
  • 1
$('div').css({
    'background': 'red',
    'color': 'white'
});

 
 

 
 
  • 1
  • 2
  • 3
  • 4

image-20201112210702861

需求描述：获取div的背景颜色和字体颜色并输出

<div style="background: red;color: white">我是div</div>

 
 

 
 
  • 1
console.log($('div').css('background'));
console.log($('div').css('color'));

 
 

 
 
  • 1
  • 2

image-20201112210937731

3.1.2.2、addClass()

方法描述：为每个匹配的元素添加指定的样式类名。

需求描述：为所有的li添加样式”beauty“

.beauty {
    font-weight: bold;
    font-size: 18px;
    color
一束光亮
关注
专栏目录
黑马前端pink老师——jQuery入门基础学习笔记
weixin_44566194的博客
10-31 2355
本文将黑马前端 pink老师讲解的 jQuery 入门基础课笔记整理了一遍，包括 jQuery 概述、基本使用、常用API、jQuery 事件、jQuery 插件其他方法等知识点。
跟着pink老师学前端之jQuery
weixin_46548238的博客
07-11 862
1. jQurey概述 jQuery是一个快速简洁的JavaScript库，它封装了JavaScript常用的功能代码。学习jQuery本质就是学习调用这些方法。 2. jQuery的基本使用 1. jQuery入口函数 jquery的入口函数，相当于原生js中的DOMContentLoaded。等着页面DOM加载完毕再去执行js代码。 第一种： $(document).ready(function(){ $('div').hide(); }) 第二种： $(function () { $
JQuery——pink老师课程笔记
sissizZ的博客
04-06 2165
JQuery jQuery入门 1.JQuery概述 是一个JavaScript库，封装了很多函数，学习怎么去调用这些函数 2.JQuery的使用 下载Download jQuery | jQuery;production版本/development版本 引入；页面DOM加载完毕执行代码$(function(){…}) $=JQuery,也是顶级对象（相当于window） 用原生js获取的对象就是DOM对象，用jQuery方式获取的就是jQuery对象（用$对原生DOM进行了包装） DOM——jQue
b站pink老师JavaScript的jQuery 案例代码——购物车案例
weixin_72322475的博客
10-08 3696
b站pink老师JavaScript的jQuery 案例代码——购物车案例，本文代码修改了原代码中的BUG：没勾选商品也能计算总购买数量和总价格
jQuery基础自学笔记（pink老师jQuery全内容）
04-12
pink老师jQuery
听完pink老师的js进阶课程，对原型链有了更深入的理解，一张图说明一切
wennianzhu的博客
06-20 606
直接放图片了哈
pink老师的jQuery
最新发布
02-15
《pink老师的jQuery》 jQuery，一个轻量级的JavaScript库，因其简洁的API和强大的功能而深受开发者喜爱。pink老师的jQuery教程，旨在帮助初学者快速掌握这个强大的工具，同时也为有经验的开发者提供了一个便捷的...
JQuery实现购物车
02-19
本文将深入探讨如何使用JavaScript库JQuery来实现一个功能完备的购物车系统，包括商品的添加、重复添加以及计算总价等核心功能。 首先，JQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画效果...
pink老师--css笔记1
weixin_45612149的博客
09-28 180
1：生成标签 直接输入标签名按tab键即可2： 生成多个相同标签 加上*生成数量 例： div*3 +tab 快速生成3对div3：父子级关系的标签 可以用> 例：ul>li +tab4：兄弟关系用+ 例：div+p +tab5：生成带有类名或者id名字的，直接写 .demo 或者 #two +tab就可以了6：生成的div类名有顺序的 可以用自增符号$ +tab7:生成的标签内部写内容用 { } 表示vscode 格式化文档 s+a+F。
css兄弟结点选择器,兄弟选择器CSS
weixin_31067983的博客
08-03 2672
我不得不说我没有IE 7或8，但我确实使用IE模拟器进行了测试。你有一个ID为component-1的元素div，里面有多个div，重复的类component-2, component-3 and component-4您可以使用类在示例中单独设置这些元素的样式。只更改第一个div(或任何div)的背景颜色的技巧是找出你需要更改的div的级别并应用CSS Pseudo class(MDN)(W3S...
js+ajax+jquery笔记
09-05
自己总结的js，ajax，jquery笔记，doc文档，带目录的，很方便查看和复习
黑马程序员pink老师_CSS学习笔记
热门推荐
weixin_46764819的博客
03-07 1万+
CSS参考手册网址 一、CSS字体样式属性 font-size：字号 相对长度单位 说明 em 相当于当前对象内文本的字体尺寸 px 像素【最常用，推荐使用】 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 font-family：字体样式 p { 　　font-family: "宋体"；／＊可以写多个字体，用英文逗号隔开，表示找不到１字体去找２字体，.
CSS3新增选择器：兄弟选择器：+和~​​​​​​ |属性选择器：^$ *| 伪类选择器
weixin_47295886的博客
08-04 284
div~p{ /*兄弟选择器 ~找到h2下面的所有同级别的兄弟p*/h2+p{/*兄弟选择器+ 找到h2下面的紧挨的兄弟元素*/$匹配所选中的属性的后缀的设置样式。^匹配所选中的属性的前缀的设置样式。*只要有含有 不需要要求在前缀后缀。...
背景的设置01
XJT2242746673的博客
12-09 292
背景的设置01
jQuery
weixin_45740539的博客
10-05 456
jQueryjQuery 概述JavaScript 库jQuery 的概念jQuery 的优点jQuery 的基本使用jQuery 的下载jQuery 的入口函数jQuery 的顶级对象 $jQuery 对象和 DOM 对象jQuery 选择器jQuery 基础选择器jQuery 层级选择器jQuery 设置样式隐式迭代（重要）jQuery 筛选选择器jQuery 筛选方法（重点）jQuery 里面的排他思想链式编程jQuery 样式操作操作 css 方法设置类样式方法类操作与className区别jQue
+pink老师的JS教程笔记+
Aa11040818的博客
03-14 6522
初识JS 目标 能够说出JS是什么 能够知道JS的发展历史 能够说出浏览器执行JS的原理 能够说出JS由哪三部分组成 能够写出JS三个输入输出的语句 运行在客户端的脚本语言（不需要编译，由js引擎逐行解释并执行，基于node.js进行服务器编程。 布兰登艾奇 在1995年用十天完成js设计，网景公司。 ECMAScript /dom /bom 输入输出语句 方法 说明 归...
b站pink老师前端课程、品优购项目（跟着练的笔记+代码）
weixin_45727991的博客
11-29 6399
02、网站制作流程 1、 03、品优购项目规划 04、项目搭建 05、样式的模块化开发 06、favicon图标制作 favicon.ico一般用于作为略缩图的网站标志，它显示在浏览器的地址栏或者标签上。 1、制作png图片 2、转换为ico图标（第三方软件eg：bitbug） 3、必须！！！放在文件根目录下（常识） 4、html页面引入favicon图标：在html的head标签内引入代码 <link rel="shortcut icon" href="facvicon.ico"> 0
form表单和file表单在Ajax用法的注意点
m0_62823653的博客
04-14 1302
一.form表单的介绍（属性） 1.action:跳转到哪里；不写，默认跳转到当前页面 2.method:请求方式；get/post 3.enctype:传递参数的格式 （1）application/x-www-form-urlencoded(默认a=1&b=2&c=3) （2） multipart/form-data 用于文件上传； 二.关于form表单跳转 （1）如果在form表单里面添加一个button按钮，此时默认会跳转到form表单的action属性（百度） &l
品优购实战案例解析：pink老师版购物平台教程
资源摘要信息:"品优购实战案例-pink老师版" 知识点一：案例教学法 案例教学法是一种以实际案例为基础，通过分析案例来揭示相关理论知识和解决问题的方法的教学方法。在这个实战案例中，pink老师通过展示品优购电商...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值