首页 > 其他分享 >jQuery入门

jQuery入门

时间：2024-02-21 17:01:45浏览次数：26  
标签：jQuery 输出 入门 css background 选择器 red

原文链接：https://zhuanlan.zhihu.com/p/635366269

为什么要学jQuery？使用JavaScript开发过程中，有许多的缺点：查找元素的方法单一、遍历数组很麻烦，通常要嵌套一大堆的for循环有兼容性问题、想要实现简单的动画效果也很麻烦、代码冗余。

为了解决这些问题，我们在JavaScript开发中使用jQuery来提高开发效率。

一、jQuery简介

1.1、jQuery简介

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

jQuery官网地址：http://jquery.com/

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>


CDN引入：使用远程CDN资源库在线引入，避免了文件下载（本教程所采用）。

<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

 

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.6、jQuery两把利器

jQuery两把利器分别是：

jQuery核心函数：即： $() 或 jQuery()，jQuery定义了这个全局的函数供我们调用，它既可作为一般函数调用，且传递的参数类型不同/格式不同，功能就完全不同，也可作为对象调用其定义好的方法，此时 $ 就是一个工具对象。


jQuery核心对象：即执行jQuery核心函数返回的对象，jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)，jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom，调用jQuery对象的任何方法后返回的还是当前jQuery对象。

二、jQuery核心函数
jQuery核心函数主要从选择器、工具和ajax三个部分来讲解，都是以代码实例来为大家详细实操讲解的，大家学习过程中也要拿出电脑一起敲代码练习哦！

选择器
什么是jQuery选择器?

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。(注意：jQuery选择器返回的是jQuery对象。)
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。
所以我们平时真正能用到的只是少数的最常用的选择器。下面详细介绍一下每种选择器的使用及案例。

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

1)标签选择器

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

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


$('div').css('background', 'red');
输出结果如下：

2)id选择器

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

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


$('#btn').css('background', 'red');
输出结果如下：

3)class选择器

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

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

 

$('.red').css('background', 'red');

输出结果如下：

4)通配符选择器

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

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

 

$('.content *').css('background', 'red');

输出结果如下：

5)并集选择器

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

<p>我是段落</p>
<button>我是按钮</button>
<div>我是div</div>
<h1>我是大标题</h1> 
$('p,button').css('background', 'red');

输出结果如下：

 

6)交集选择器

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

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

 

$('p.red').css('background', 'red');

输出结果如下：

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>


$('ul>span').css('background', 'red');
输出结果如下：

 

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>

 

$('ul span').css('background', 'red');

输出结果如下：

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>

 

$('#box+li').css('background', 'red');

输出结果如下：

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

 

$('#box~li').css('background', 'red');

 

输出结果如下：

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>

 

$('tr:even').css('background', 'red');

输出结果如下：

 

需求描述：实现隔行变色，让表格的偶数行的背景变为红色，: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>


$('tr:odd').css('background', 'red');
输出结果如下：

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

<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:first').css('background', 'red');

输出结果如下：

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

<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:last').css('background', 'red');

输出结果如下：

 

需求描述：实现让下标（从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>

 

$('tr:lt(2)').css('background', 'red');

输出结果如下：

需求描述：实现让下标（从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>

 

$('tr:gt(2)').css('background', 'red');

输出结果如下：

 

需求描述：实现让下标（从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>

 

$('tr:eq(2)').css('background', 'red');

输出结果如下：

需求描述：实现让下标（从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>

 

$('tr:not(tr:eq(2))').css('background', 'red');

输出结果如下：

 

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');

输出结果如下：

 

 

需求描述：实现让内容为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>


$('td:has(span)').css('background', 'red');
输出结果如下：

、

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

<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:empty').css('background', 'red');

输出结果如下：

 

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

<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:parent').css('background', 'red');
输出结果如下：

 

3）属性筛选器

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

<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属性值是en的所有超链接，设置其背景为红色。

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


$('a[hreflang="en"]').css('background', 'red');
输出结果如下：

 

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

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


$('a[hreflang!="en"]').css('background', 'red');
输出结果如下：

 

需求描述：查找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>


$('a[hreflang|="en"]').css('background', 'red');
或者
$('a[hreflang^="en"]').css('background', 'red');
输出结果如下：

 

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

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


$('a[hreflang$="CN"]').css('background', 'red');
输出结果如下：

 

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

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


$('a[hreflang*="CN"]').css('background', 'red');
输出结果如下：

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

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


$('a[hreflang~="CN"]').css('background', 'red');
输出结果如下：

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


$('a[hreflang="zh-CN"][title="Chinese"]').css('background', 'red');
输出结果如下：

4）可见性筛选器

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

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


$('p:hidden').css('display', 'block');
输出结果如下：

 


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

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


$('p:visible').css('display', 'none');
输出结果如下：

 

5）子元素筛选器

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

<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>我是列表项1</li>
<li>我是列表项2</li>
<li>我是列表项3</li>
<li>我是列表项4</li>
</ul>


$('ul li:last-child').css('background', 'red');
输出结果如下：

 

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

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


$('ul li:nth-child(2)').css('background', 'red');
输出结果如下：

 

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>


$('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]);
输出结果如下：

 

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>


console.log($(':focus')[0]);
console.log($(':checked')[0]);
console.log($(':disabled')[0]);
console.log($(':selected')[0]);
输出结果如下：

 

 

 

 

 

 

标签：jQuery,输出,入门,css,background,选择器,red
From： https://www.cnblogs.com/Dongmy/p/18025094

相关文章

  • gorm入门
    目录1.简介2.实例3.增删改查新增更新删除查询高级查询原生sql4.模型类约定字段标签关联标签单个声明BelongsTo一对一HasOne一对一一对多多对多文档1.简介特定： 全功能ORM 关联(HasOne，HasMany，BelongsTo，ManyToMany，多态，单表继承) Create，Save，Update，Delete，Find中钩子方......
  • Python 机器学习工具 scikit-learn 的入门使用
    参考文档：https://www.scikitlearn.com.cn/通过对已有多组数据的训练，从而实现对单个数据的结果预测安装pipinstall-Uscikit-learnDemo通过使用sklearn包中的决策树DecisionTreeclassifier算法实现简单预测importsklearnfromsklearnimporttreefeature=[[178,1],......
  • Java入门
    Java入门1.1Java特性和优势简单性面向对象可移植性高性能分布式动态性多线程安全性健壮性1.2Java三大版本JavaSE:标准版JavaME:嵌入式开发JavaEE:企业级开发1.3JDK,JRE,JVMJDK:JavaDevelopmentKitJRE:JavaRuntimeEnvironmentJVM:JavaVirtualMachi......
  • jQuery $.ajax() 方法概述
    原文链接：https://www.bejson.com/apidoc/jquery/jQuery.Ajax.html通过HTTP请求加载远程数据。jQuery底层AJAX实现。简单易用的高层实现见$.get,$.post等。$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获......
  • Linux 网络编程从入门到进阶 学习指南
    前言大家好，我是小康。在上一篇文章中，我们探讨了Linux系统编程的诸多基础构件，包括文件操作、进程管理和线程同步等，接下来，我们将视野扩展到网络世界。在这个新篇章里，我们要让应用跳出单机限制，学会在网络上跨机器交流信息。接下来，我们要深入套接字（sockets）和TCP/IP协议，揭示如何......
  • Linux 系统编程从入门到进阶 学习指南
    引言大家好，我是小康，今天我们来学习一下Linux系统编程相关的知识。Linux系统编程是连接高级语言和硬件的桥梁，它对深入理解计算机系统至关重要。无论你是打算构建高性能服务器还是开发嵌入式设备，掌握Linux系统编程是C和C++开发者的基本技能。本文旨在为初学者提供一个清......
  • kettle从入门到精通 第四十四课 kettle 去重
     1、我们平常在写应用程序的时候，会有去重的业务场景，可以在数据库层面解决，也可以在内存层面解决。同样kettle也有去重的步骤【唯一行（哈希值）】和【去除重复记录】唯一行（哈希值）：使用HashSet来删除重复行，只保留唯一的行。去除重复记录（UniqueRows）：删除重复行，只保留唯一的行。这只......
  • [转]基于前端技术栈的PC跨平台桌面应用开发技术Electron简介及快速入门
    原文地址:Electron简介及快速入门-知乎大江东去：基于EA的软件工程创新理论与最佳实践第四章：桌面应用系统开发基础及入门第四节：Electron简介及快速入门一、Electron基本介绍官网地址：https://www.electronjs.org/Electron是一个由OpenJS基金会维护的开源项目，也是一个活跃的......
  • docker快速入门与基本指令
    参考资料：https://zhuanlan.zhihu.com/p/137895577https://www.runoob.com/docker/ubuntu-docker-install.html安装docker的安装相对简单，官方提供了一个安装命令：curl-fsSLhttps://test.docker.com-otest-docker.shsudoshtest-docker.sh可以使用piplist|grepd......
  • 【前端开发】VSCode下载安装教程，新手入门（超详细）附安装包
    ​1.VSCode简介        VSCode，全称VisualStudioCode，是一款由微软开发的跨平台源代码编辑器，可用于Windows、Linux和macOS操作系统。以下是对VSCode的详细介绍：功能丰富：VSCode支持语法高亮、代码自动补全（又称IntelliSense）、代码重构、查看定义功能，并内置了命令行工......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99