Java Web_jQuery

最新推荐文章于 2024-09-15 19:46:31 发布
最新推荐文章于 2024-09-15 19:46:31 发布
阅读量607 收藏 2
点赞数 1
分类专栏： Java Web 文章标签： java jquery css javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/diviner_s/article/details/115639013
版权

文章目录

jQuery

1. jQuery介绍

Why is jQuery？
jQuery，就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。（来自百度百科）

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

jQuery优势：jQuery是免费的、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

2. jQuery初试

我们使用jQuery库的时候需要引入jQuery库，即需要引入该文件。
<script type="text/javascript" src = "../script/jquery-1.7.2.js"></script> //引入jQuery库
src位置是我当前放置的jQuery文件的位置。
如何判断jQuery是否引入成功，我们可以通过alert($)测试一下，如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
		<script type="text/javascript" src = "../script/jquery-1.7.2.js"></script>  
		//引入jQuary库
		<script type="text/javascript">
			alert($)
		</script>


</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

我们运行发现有该提示框弹出，里面显示jQuery库函数，即为引入成功！
在这里插入图片描述

需求：使用jQuery给一个按钮绑定单击事件。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		// window.onload = function () {
		// 	var btnObj = document.getElementById("btnId");
		// 	// alert(btnObj);//[object HTMLButtonElement]   ====>>>  dom对象
		// 	btnObj.onclick = function () {
		// 		alert("js 原生的单击事件");
		// 	}
		// }

		$(function () { // 表示页面加载完成 之后，相当 window.onload = function () {}
			var $btnObj = $("#btnId"); // 表示按id查询标签对象
			$btnObj.click(function () { // 绑定单击事件
				alert("jQuery 的单击事件");
			});
		});

	</script>

</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

运行结果：
在这里插入图片描述

注意：

  1. 使用jQuery一定要引入jQuery库
  2. jQuery中的$是一个函数

3. jQuery核心函数

$ 是 jQuery的核心函数，能完成jQuery的很多功能。$()就是调用 $ 这个函数

  • 当传入参数为函数时：
    表示页面加载完成之后。相当于window.onload = function(){}
  • 当传入参数为HTML字符串时：
    会为我们创建这个html标签对象
  • 当传入参数为选择器字符串时：
    $("#id 属性值");         id选择器，根据id查询标签对象
    $("标签名");                标签名选择器，根据指定的标签名查询标签对象
    $(".class 属性值");   类型选择器，可以根据class属性查询标签对象
  • 当传入参数为DOM对象时：
    会把这个dom对象转化为jQuery对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	//核心函数的4个作用
    $(function () {
        // alert("页面加载完成之后，自动调用");

        $("    <div>" +
            "        <span>div-span1</span>" +
            "        <span>div-span2</span>" +
            "    </div>").appendTo("body");

        // alert($("button").length);

        var btnObj = document.getElementById("btn01");
        // alert(btnObj);
        // alert( $(btnObj) );

        // alert( $("<h1></h1>") );
        alert($("button"));

    });
	//传入参数为[函数]时：在文档加载完成后执行这个函数
	//传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
	//传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
	//传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回

</script>
</head>
<body>
    <button id="btn01">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>

4. jQuery对象和dom对象区分

Dom对象

  1. 通过getElementByld()查询出来的标签对象是Dom对象
  2. 通过getElementsByName()查询出来的标签对象是Dom对象
  3. 通过getElementsByTagName()查询出来的标签对象是Dom对象
  4. 通过createElement()方法创建的对象，是Dom对象
    DOM对象通过alert()函数表示出来的效果是：[object HTML 标签名 Element]

jQuery对象

  1. 通过jQuery提供的API创建的对象，是jQuery对象
  2. 通过jQuery包装的Dom对象，也是jQuery对象
  3. 通过jQuery提供的API查询到的对象，是jQuery对象
    jQuary对象通过alert()函数表示出来的效果是：[object Object]

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数

jQuery对象不能使用DOM对象的属性和方法
DOM对象也不能使用jQuery对象的属性和方法

  • Dom对象和jQuery对象互转
  1. dom对象转化为jQuery对象
    • 先有DOM对象
    • $(DOM对象) 就可以转化为jQuery对象
  2. jQuery对象转为dom对象
  • 先有jQuery对象
  • jQuery对象[下标]取出相应的Dom对象

在这里插入图片描述

5. jQuery选择器

5.1 基本选择器

在这里插入图片描述

  1. id选择器
    $("#ids")其中的ids是一个标签的id值而$("#ids")就是满条件的标签
  2. 类选择器
    $(".myclass")其中的myclass就是class = "myclass"的值，而$(".myclass")就是获取类为myclass的所有标签，有可能是一个标签有可能是多个。
  3. 元素选择器
    $("div")就是选择所有的div标签。
  4. 通配符选择器
    $("*")选择页面上的所有元素
  5. 逗号分隔
    $("#ids,""myclass")选择id为ids的和类为myclass 的标签，合并两个选择器的结果并返回

5.2 层级选择器

实例：给出Html代码：

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

1、ancsetor decendant 后代选择器:在给定的祖先元素下匹配所有的后代元素。

  • ancestor:任何有效的选择器
  • descendant:用以匹配元素的选择器，并且它是第一个选择器的后代元素

jQuery代码：

$("form input") //找到表单中所有的input元素

结果：
[<input name = "name " />,<input name="newsletter" /> ]

2、 parent > child 子元素选择器：在给定的父元素下匹配所有的子元素。

  • parent:任何有效选择器
  • child：用以匹配元素的选择器，并且它是第一个选择器的子元素
$("form > input") //匹配表单中所有的子级input元素。

结果:
[ <input name="name" /> ]
3、 parent > prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素。

  • prev：任何有效选择器
  • next：一个有效选择器并且紧接着第一个选择器
    jQuery 代码:
$("label + input")  //匹配所有跟在 label 后面的 input 元素

结果:
[ <input name="name" />, <input name="newsletter" /> ]
4、 parent > prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素。

  • prev：任何有效选择器
  • siblings：一个选择器，并且它作为第一个选择器的同辈
    jQuery 代码:
$("form ~ input")  //找到所有与表单同辈的 input 元素

结果:
[ <input name="none" /> ]

5.3 过滤选择器

基本选择器
基本选择器概念
:first获取第一个元素
:last获取最后个元素
:not(selector)去除所有与给定选择器匹配的元素
:even匹配所有索引值为偶数的元素，从 0 开始计数
:odd匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index)匹配一个给定索引值的元素
:gt(index)匹配所有大于给定索引值的元素
:lt(index)匹配所有小于给定索引值的元素
:header匹配如 h1, h2, h3 之类的标题元素
:animated匹配所有正在执行动画效果的元素
内容过滤器
内容过滤器概念
:contains(text)匹配包含给定文本的元素
:empty匹配所有不包含子元素或者文本的空元素
:parent匹配含有子元素或者文本的元素
:has(selector)匹配含有选择器所匹配的元素的元素
属性过滤器
属性过滤器概念
[attribute]匹配包含给定属性的元素。
[attribute=value]匹配给定的属性是某个特定值的元素
[attribute!=value]匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value]匹配给定的属性是以某些值开始的元素
[attribute$=value]匹配给定的属性是以某些值结尾的元素
[attribute*=value]匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN]复合属性选择器，需要同时满足多个条件时使用。
表单过滤器
表单过滤器概念
:input匹配所有 input, textarea, select 和 button 元素
:text匹配所有 文本输入框
:password匹配所有的密码输入框
:radio匹配所有的单选框
:checkbox匹配所有的复选框
:submit匹配所有提交按钮
:image匹配所有 img 标签
:reset匹配所有重置按钮
:button匹配所有 input type=button 按钮
:file匹配所有 input type=file 文件上传
:hidden匹配所有不可见元素
表单对象属性过滤器
表单对象属性过滤器概念
:enabled匹配所有可用元素
:disabled匹配所有不可用元素
:checked匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象
:selected匹配所有选中的 option

6. jQuery元素筛选

eq()获取给定索引的元素功能跟 :eq() 一样
first()获取第一个元素功能跟 :first 一样
last()获取最后一个元素功能跟 :last 一样
filter(exp)留下匹配的元素
is(exp)判断是否匹配给定的选择器，只要有一个匹配就返回，true
has(exp)返回包含有匹配选择器的元素的元素功能跟 :has 一样
not(exp)删除匹配选择器的元素功能跟 :not 一样
children(exp)返回匹配给定选择器的子元素功能跟 parent>child 一样
find(exp)返回匹配给定选择器的后代元素功能跟 ancestor descendant 一样
next()返回当前元素的下一个兄弟元素功能跟 prev + next 功能一样
nextAll()返回当前元素后面所有的兄弟元素功能跟 prev ~ siblings 功能一样
nextUntil()返回当前元素到指定匹配的元素为止的后面元素
parent()返回父元素
prev(exp)返回当前元素的上一个兄弟元素
prevAll()返回当前元素前面所有的兄弟元素
prevUnit(exp)返回当前元素到指定匹配的元素为止的前面元素
siblings(exp)返回所有兄弟元素
add()把 add 匹配的选择器的元素添加到当前 jquery
diviner_s
关注
专栏目录
手把手教你做出数据可视化项目（七）可视化图表数据动态获取及界面跳转
diviner_s的博客
06-16 25万+
数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789 Apache Echarts简介：https://blog.csdn.net/diviner_s/article/details/115934089 项目最终效果图： 此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！ 使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、aja.
Apache Echarts常用图表之仪表盘
diviner_s的博客
04-23 1583
仪表盘的常见效果 数值范围：max,min 多个指针：增加data中数组的元素 多个指针颜色的差异：itemStyle 仪表盘的特点 仪表盘可以更加直观的表现出某个指标的进度或实际情况 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
embedhttp:小型，灵活且安全的Java HTTP服务器，可以轻松地嵌入到应用程序中
04-27
嵌入式Java Httpd 小型且易于嵌入的Java Http服务器，用于应用程序。 要求 Java开发工具包/ Java运行时环境1.6+（可以在1.5中使用吗？） 用法 HttpServer server = new HttpServer(); //~ Add any request handlers // static file handler (from jar's resources) : server.addRequestHandler(new HttpStaticJarFileHandler()); // static file handler (from jar's resources with path) : server.addRequestHandler(new HttpStaticJarFileHandler("/assets/http/")); // stati
在SpringMVC中使用@RequestBody注解处理json时，报出HTTP Status 415的解决方案
discovery8090的专栏
01-22 1077
Spring的@RequestBody非常牛x，可以将提交的json直接转换成POJO对象。 正好今天有这样的需求，使用一下，结果一直报415，十分头疼。 HTTP 415 错误 – 不支持的媒体类型(Unsupported media type) 我的angularJs是这样写的 $http({method: "POST", url: url; hea
HTTP方式文件分片断点下载
xcbeyond|疯狂源自梦想，技术成就辉煌
05-11 8254
前言 在进行大文件或网络带宽不是很好的情况下，分片断点下载就会显得很有必要，目前各大下载工具，如：迅雷，都是很好的支持分片断点下载功能的。本文就通过http方式进行文件分片断点下载，进行实战说明。 HTTP之Range 在开始之前有必要了解一下相关概念及原理，即：HTTP之Range，才能更好的理解分片断点下载的原理。 什么是Range Range是一个H...
jquery调用后台java方法_jQuery调用后台方法
weixin_42515024的博客
02-13 507
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using CasMenuModels;using CasMenuBLL;using System.Text;public parti...
kettle java web_kettle web化
weixin_26879037的博客
02-16 2198
kettle web化通过Java API调用kettle核心代码，并基于Spring Boot提供简易的Web管理界面。背景在工作中，通过kettle这款ETL产品进行数据处理时，是通过kitchen命令调用kettle，会启动一个jvm程序处理。在运行时，如果几个任务同时跑，那么会占用比较高的内存。而且每次启动kettle时，会先初始化运行环境。因此，通过Java API调用kettle核心代...
Java Web——jQuery中的过滤器与第一组函数（val、text、attr）
★★光亭★★
04-02 7358
Java Web——jQuery中的过滤器与第一组函数（val、text、attr）
java web 页面初始化_jquery初始化方法总结（四种常见的js页面初始化方法）
weixin_39929259的博客
02-16 491
jquery初始化方法通常是下面这四种，使用非常的普遍，js初始化是在界面加载完成后执行的一些函数，在使用jquery初始化之前需要在标签内引入jquery包，例如：Jquery初始化方法一：$(document).ready(function(){console.log("初始化方法一进入...");});Jquery初始化方法二：$(function(){console.log("初始化方法二...
richengbiao.rar_ richengbiao_jquery java_jquery 日程_jsp jquery_日程
09-21
在本资源"richengbiao.rar"中，包含了一个基于jQuery和Java技术实现的日程管理应用实例，这对于学习AJAX以及Web开发的人员来说是一个很好的参考资料。这个项目着重展示了如何利用jQuery库与JSP（JavaServer Pages）...
AMS.rar_AMS_AMS ja_java 项目_jquery_固定资产
09-22
标题中的“AMS.rar_AMS_AMS ja_java 项目_jquery_固定资产”暗示这是一个与AMS相关的Java项目，其中可能包含了AMS的日本语版本（ja），并且使用了jQuery库来处理前端交互，主要关注的是固定资产的管理。这个项目采用...
jquery-fenye.zip_java分页_jquery
09-14
本项目“jquery-fenye.zip”是关于Java后端与jQuery前端结合实现的一个小型分页功能的示例。下面将详细阐述相关知识点。 首先，我们来看Java分页。在Java Web应用中，分页通常在服务端进行，因为这有助于减少前端的...
miniui_java_myeclipse.rar_jQuery miniUI_java miniui_miniui
09-22
MiniUI 是一个基于 jQuery 的高性能前端界面框架，专为开发企业级 Web 应用而设计。这个名为 "miniui_java_myeclipse.rar" 的压缩包包含了一整套用于 Java 开发者的 MiniUI 资源，特别适配于 MyEclipse 开发环境。...
java_js_jquery_php_正则.rar
09-08
【标题】"java_js_jquery_php_正则.rar" 是一个综合性的压缩包，包含了多个IT领域的关键资源，包括Java、JavaScript、jQuery、PHP以及正则表达式等核心技术的手册和文档，旨在支持开发者和学习者的日常工作和学习...
Phabricator代码审计
qq_17200461的博客
05-26 6039
s
Java-网络
2301_81543552的博客
09-14 779
Java中的网络编程主要涉及使用Socket类进行网络通信，以及理解各种网络协议。以下是一些关键概念和示例代码，帮助您入门。
Java企业面试题3
最新发布
m0_74972727的博客
09-15 763
1. break和continue的作用(智*图) break：用于完全退出一个循环（如 for, while）或一个 switch 语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。 continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在 for 循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。 2. if分支语句和switch分支语句的异同之处(智*图) 相同点：都是用来根据不同的条件执行不同的代码块。
上传文件到钉盘流程详解
jspyth的博客
09-14 797
本文详解如何通过钉钉的API实现上传文件到钉盘目录，代码通过JAVA实现。
自动生成不重复的订单id
ClaireCheney的博客
09-13 340
【代码】自动生成不重复的订单id。
"用Java Web Ajax JQuery MySQL实现九宫格日记网
本章介绍了如何利用Java Web Ajax JQuery MySQL实现九宫格日记网，九宫格日记是一种全新的日记方式，由九个方方正正的格子组成，让用户可以像填写填空题一样快速完成一篇日记。随着生活节奏的加快，越来越多的人开始...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值