JavaWeb学习------jQuery

这篇具有很好参考价值的文章主要介绍了JavaWeb学习------jQuery。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JavaWeb学习------jQuery

jQuery函数库下载

  1. jQuery函数库下载官网:Download jQuery | jQuery
  2. 配套资料,免费下载

链接:https://pan.baidu.com/s/1aXBfItEYG4uM53u6PUEMTg 

提取码:6c9i

  • 然后下载?
  1. 来到官网,有两种jQuery可以下载,一种是压缩版的,另一种是没有压缩的 ,建议两个都下载下来,没有压缩版本的可以看源码。

JavaWeb学习------jQuery

 2.按照下图:

JavaWeb学习------jQuery

 3.下载到对应的文件夹上即可

JavaWeb学习------jQuery

 4.打开没有压缩版的:【可以看到源码:1万多行代码】

JavaWeb学习------jQuery

 压缩版的:【2行代码】 

JavaWeb学习------jQuery


第一章 jQuery简介

1.1、jQuery简介

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

1.2、jQuery版本介绍

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

1.3、jQuery引入方式 

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

1.4、jQuery快速使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
 <script src="jquery-3.6.4.min.js"></script>
</head>
<body>    

    $(function () {
        // 请将jQuery代码书写在这里 ...
        alert('Hello,World!');
    });
</script>
</body>
</html>

1.5、jQuery两把利器

jQuery两把利器分别是:

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

第二章 jQuery核心函数 

2.1、选择器

2.1.1、基本选择器

JavaWeb学习------jQuery 

 文章来源地址https://www.toymoban.com/news/detail-434565.html

2.1.1.1、标签选择器

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

<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
$('div').css('background', 'red');

效果: 

JavaWeb学习------jQuery

2.1.1.2、id选择器

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

<button>按钮1</button>
<button id="btn">按钮2</button>
<button>按钮3</button>
$('.red').css('background', 'red');

效果:

JavaWeb学习------jQuery

2.1.1.3、class选择器

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

<p class="red">我是段落1</p>
<p>我是段落2</p>
<p class="red">我是段落3</p>
$('.red').css('background', 'red');

效果:

JavaWeb学习------jQuery

2.1.1.4、通配符选择器

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

<div class="content">
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
</div>
$('.content *').css('background', 'red');

效果:

JavaWeb学习------jQuery

2.1.1.5、并集选择器

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

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

效果:

JavaWeb学习------jQuery

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

效果:

JavaWeb学习------jQuery

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>
$('ul>span').css('background', 'red');

效果:

JavaWeb学习------jQuery

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>
$('ul span').css('background', 'red');

效果:

JavaWeb学习------jQuery

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>
$('#box+li').css('background', 'red');

效果:

JavaWeb学习------jQuery

 需求描述:选中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');

效果:

JavaWeb学习------jQuery

2.1.3、过滤选择器

2.1.3.1、基本筛选器

 JavaWeb学习------jQuery

 

需求描述:实现隔行变色,让表格的奇数行的背景变为红色,: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');

效果:

JavaWeb学习------jQuery

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

效果:

JavaWeb学习------jQuery

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

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

效果:

JavaWeb学习------jQuery

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

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

效果: 

JavaWeb学习------jQuery

 需求描述:实现让下标(从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');

效果:

JavaWeb学习------jQuery

 需求描述:实现让下标(从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');

效果: 

JavaWeb学习------jQuery

 需求描述:实现让下标(从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');

效果:

JavaWeb学习------jQuery

 需求描述:实现让下标(从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');

效果:

JavaWeb学习------jQuery

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>
$('td:contains("男")').css('background', 'red');

效果:

JavaWeb学习------jQuery

 需求描述:实现让内容为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');

效果:

JavaWeb学习------jQuery

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

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

效果:

JavaWeb学习------jQuery

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

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

 效果:

JavaWeb学习------jQuery

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>
$('[hreflang]').css('background', 'red');

效果: 

JavaWeb学习------jQuery

JavaWeb学习------jQuery

 

到了这里,关于JavaWeb学习------jQuery的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web学习笔记(二十九)jQuery

    目录 1. jQuery 1.1 什么是jQuery  1.2 原生js的缺点  1.3 原生jQuery的优势 1.4 jQuery中的入口函数 1.5 jQuery入口函数和window.onload入口函数的区别 1.6 $(参数)中参数的含义  1.7DOM和jQuery相互转换 、 1.7.1 jQuery转DOM 1.7.2 DOM转 jQuery 1.8设置、获取文本内容  1.8.1设置文本内容 1.8.2获取文本内

    2024年03月17日
    浏览(43)
  • Html + Jquery + Vue前端学习笔记

    输入框里的值变了,data里的查询参数也会跟着变,这就是vue的绑定 @keyup.enter.native 这个代表键盘的回车事件,一般用来做查询 clearable 代表可清空 看一下整体效果 some方法判断数组中是否包含某个值 div富文本显示,u3000代表空格 上移,下移,删除,添加 控制两个按钮切换变

    2024年02月12日
    浏览(39)
  • EasyUI Jquery 学习笔记 —— Window(窗口)详细版

    通过 $.messager.defaults 重写默认的 defaults。 消息框(messager)提供不同样式的消息框,包括警示(alert)、确认(confirm)、提示(prompt)、进展(progress)等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作。 依赖 window linkbutton progressbar

    2024年04月15日
    浏览(38)
  • AJAX学习笔记6 JQuery对AJAX进行封装

    AJAX学习笔记5同步与异步理解_biubiubiu0706的博客-CSDN博客 AJAX请求相关的代码都是类似的,有很多重复的代码,这些重复的代码能不能不写,能不能封装一个工具类。要发送ajax请求的话,就直接调用这个工具类中的相关函数即可。  用JS发送AJAX请求回顾 响应结果一般是个字符串

    2024年02月09日
    浏览(37)
  • jQuery UI widget源码解析,价值2000元的学习资源泄露

    * @param base 需要继承的ui组件 * @param prototype 插件的实际代码 * @returns {Function} */ $.widget = function(name, base, prototype) { var fullName, //插件全称 existingConstructor, //原有的构造函数 constructor, //当前构造函数 basePrototype, //父类的Prototype // proxiedPrototype allows the provided prot

    2024年04月10日
    浏览(34)
  • 狂神Javaweb完整版基础入门(IDEA版)值得学习的JavaWeb教程

    Java web web开发: web,网页的意思,www.baidu.com 静态web html,css 提供给所有人看的数据始终不会发生变化! 动态web 淘宝,几乎是所有的网站 提供给所有的人看的数据始终会变化,每个人在不同的时间,不同的地点看到不同的信息 技术栈:Servlet/Jsp,ASP,PHP 在Java中,动态web资

    2024年02月06日
    浏览(53)
  • JavaWeb学习-Day10

    准备工作    开发流程:  开发接口步骤:  删除部门:  新增部门:    简化代码: limit:分页展示,公式:(页数-1)*页面总数,页面总数   目前出现的问题: 1.网页没有图形化界面,只有从数据库读取的信息,postman可以 正常运行,初步怀疑是前端和后端Java代码没有连

    2024年02月11日
    浏览(32)
  • JavaWeb学习------Servlet

    目录 JavaWeb学习------Servlet Servlet 生命周期 Servlet 生命周期  Servlet 方法介绍 •Servlet 体系结构 Servlet 体系结构 •Servlet urlPattern配置 Servlet urlPattern配置 •XML 配置方式编写 Servlet  XML 配置方式编写 Servlet • 快速入门 • Servlet 执行流程 Servlet 生命周期 对象的生命周期指一个对象

    2024年02月02日
    浏览(37)
  • javaweb学习

    2024年02月12日
    浏览(29)
  • JAVAweb开发学习

    value(请求URL路径)、method(HTTP请求) 简单映射 :@RequestMapping(“user”) 一、只进行value请求:  在本地窗口相关路径查看:   @RequestParam 在方法内传入参数名称,nickname 在本地端口进行访问    1.javabean的创建 alt+ inseet 无参构造、set、get、tostring  2.在controller类中导入 

    2023年04月24日
    浏览(24)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包