JAVA--JQuery
2024-05-17 11:56:09
Web代码：
测试1（helloJQ）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery</title><Script src="js/jquery-3.2.1.min.js" type="text/javascript"></Script>
</head>
<body><button id="btn">没点我呢</button></body>
<Script type="text/javascript">// JQuery$('#btn').click(function () {// 设置元素的文本
// $(this).text("点了我")// 获得元素的文本var text = $(this).text();console.log(text);})// $: 声明我要用jq的语法了// ('div'): 单引号里面是选择器// 这里就是个标签选择器,选中所有div</Script>
</html>测试2(文档加载后执行)：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><Script src="js/jquery-3.2.1.min.js" type="text/javascript">$(document).ready(function () {// 当文档加载完成后执行// $(document)也属于选择器// 我们刚刚已经看了// $(this)// 这时我们就知道了,可以使用jq的选择器// 找到某个对象了})$(function () {// 也是文档加载完成后执行})</Script>
</head>
<body></body>
</html>测试3（双击事件与进入进出）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">div{width: 200px;height: 200px;background-color: red;margin: 20px;}</style><Script src="js/jquery-3.2.1.min.js"></Script><Script type="text/javascript">$(function () {$('#btn').dblclick(function () {console.log("我被双击了");});
// $('div').mouseenter(function () {
// console.log("我进来了啊");
// })
// $('div').mouseleave(function () {
// console.log("我出去了啊");
// })// 链式调用$('div').mouseenter(function () {console.log("我进来了啊");}).mouseleave(function () {console.log("我出去了啊");})
// $('div').mouseenter(function () {
// console.log("我进来了啊");
// $(this).mouseleave(function () {
// console.log("我出去了啊");
// })
// })});</Script>
</head>
<body><button id="btn">点我啊</button><div></div><div></div>
</body>
</html>测试4（enter与Over的区别）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>区别</title><style type="text/css">div{width: 300px;height: 300px;margin: 20px;display: inline-block;color: white;font-size: 40px;}.left{background-color: red;}.right{background-color: green;}span{width: 100px;height: 100px;margin-top: 100px;background-color: white;margin-left: 100px;border: solid 3px blue;display: inline-block;font-size: 40px;color: black;}</style><Script src="js/jquery-3.2.1.min.js"></Script></head>
<body><div class="left"><span id="left"></span></div><div class="right"><span id="right"></span></div>
</body>
<Script type="text/javascript">var left = 0;var right = 0;$('.left').mouseenter(function () {// 左侧的用来显示enter与leave$('#left').text(++left)}).mouseleave(function () {})$('.right').mouseover(function () {// 右侧的用来显示over与out$('#right').text(++right)}).mouseout(function () {})
</Script>
</html>测试5（JQ动画）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画</title><link rel="stylesheet" href="css/myDiv.css"><Script src="js/jquery-3.2.1.min.js"></Script>
</head>
<body><div></div>
</body>
<Script type="text/javascript">$('div').click(function () {// 第一个参数:怎么动?通过更改css样式来实现动画// 第二个参数:多长时间完成:毫秒值// 第三个参数:动画完成后要干什么?是一个回调函数iter($(this));});function iter(thiss) {thiss.animate({"marginLeft": "1000px",
// "marginTop":"200px"}, 100,function () {// 当动画执行完毕,会执行这个回调函数
// alert("动画执行完毕了")thiss.animate({"marginTop": "500px"},100,function () {thiss.animate({"marginLeft": "0"},100,function () {thiss.animate({"marginTop": "0"},100,function () {iter(thiss)})})})})}</Script>
</html>测试6（动画队列）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画队列</title><link rel="stylesheet" href="css/myDiv.css"><script src="js/jquery-3.2.1.min.js"></script>
</head>
<body><div></div>
</body>
<script type="text/javascript">$('div').click(function () {$(this).animate({"marginLeft":"200px"},800).animate({"marginTop":"200px"},800).animate({"marginLeft":"0px"},800).animate({"marginTop":"0px"},800)})</script>
</html>测试7（操作元素属性）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>操作元素属性</title><style type="text/css">.bigRed{font-size: 70px;color: red;}</style><script src="js/jquery-3.2.1.min.js"></script>
</head>
<body><div>浊酒一杯家万里,燕然未勒归无计,羌管悠悠霜满地,人不寐,将军白发征夫泪</div>
</body>
<script type="text/javascript">console.log($('div').attr({"class": "bigRed"}).attr("class"));</script>
</html>测试8（操作CSS式样）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS</title><script src="js/jquery-3.2.1.min.js"></script>
</head>
<body><div></div>
</body>
<script type="text/javascript">$('div').css({"width":"200px","height":"200px","backgroundColor":"red"})</script>
</html>测试9（添加和删除元素）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>添加和删除元素</title><script src="js/jquery-3.2.1.min.js"></script>
</head>
<body><div><p></p></div><div><p></p></div><span><p></p></span>
</body>
<script type="text/javascript">
// $('div').append('添加的内容')
// .before('before添加的内容')
// .after('after添加的内容')
// .append($('<p>'))
// .after($('<div>'))// $('<p>'):生成一个p标签// 删除谁,就要先找到谁$('p').remove()
</script>
</html>测试10（ajax异步获取）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>AJAX</title><script src="js/jquery-3.2.1.min.js"></script>
</head>
<body><button id="btn">点击获取第一名的信息</button><h1 id="nickname"></h1><h1 id="score"></h1>
</body>
<script type="text/javascript">function btnClicked() {$.getJSON("http://192.168.20.221:8080/day16/first",function (jsonData) {
// console.log(jsonData);var nickname = jsonData['nickname'];var score = jsonData['score'];$('#nickname').text("昵称: "+nickname)$('#score').text("分数: "+score)})}$('#btn').click(btnClicked)</script>
</html>测试11（获取一个Json数组）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获取一个JSON数组</title><script src="js/jquery-3.2.1.min.js"></script>
</head>
<body><button id="btn">点我我获取前十名信息</button><table border="1"></table>
</body>
<script type="text/javascript">$('#btn').click(function () {$.get("http://192.168.20.221:8080/day16/ten",function (data,status) {//第一个参数:获得的数据//第二个参数:访问是否成功if (status == "success"){
// console.log(data);
// console.log(data[0]['score']);// 使用parseJSON方法// 将data数据解析成JS中的json对象var jsonData = $.parseJSON(data);
// console.log(jsonData[0]['nickname']);if (jsonData != null){$('tr').remove()$('table').append($('<tr>').append($('<td>').text("昵称")).append($('<td>').text("分数")))// 第一个参数index:当前的元素角标// 第二个参数data:当前的元素$.each(jsonData,function (index,obj) {
// console.log(index);
// console.log(data);$('table').append($('<tr>').append($('<td>').text(obj['nickname'])).append($('<td>').text(obj['score'])))})}}})})</script>
</html>JAVA--JQuery相关推荐
- java jquery ajax_[Java教程]jquery ajax 使用
[Java教程]jquery ajax 使用 0 2015-01-09 11:00:12 异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用JQuery框架实现的AJAX 验证用户名是否存在 ...
- java jquery jsonp 跨域_Jquery跨域调用(JSONP)遇到error问题的解决
之前Jquery的跨域调用一直没有解决,不知道为什么老是执行error里的语句,今天花了点时间研究了一下,终于把问题解决了. 关键的地方是返回的字符串,返回的字符串必须包含jsonp的回调函数名称,而 ...
- java jquery提交表单数据_[Java教程]jquery实现ajax提交表单信息
[Java教程]jquery实现ajax提交表单信息 0 2016-08-23 15:00:08 最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习 ...
- 前后端滑块验证码实例附源码（java jquery）
背景: 发送短信验证码或者登录等场景操作之前都需要进行图片验证码校验或者滑块验证码校验:此举是为了减少黑盒对服务端进行暴力破解密码或者频发短信轰炸请求的操作: 但如果滑块验证完全由前端进行操作,实际上 ...
- JAVA—— JQuery
文章目录 1.1.JQuery介绍 1.2.JQuery快速入门 1.3.小结 2.JQuery基本语法 2.1.JS对象和JQuery对象转换 2.2.事件的基本使用 2.3.事件的绑定和解绑 2. ...
- java jquery愤怒的小鸟_如何做html5山寨版愤怒的小鸟
如何做html5山寨版愤怒的小鸟 15 作者:管理员发布时间:2021/1/26 19:15:54评论数:0 简单而是用的小游戏框架,为你创建好了canvas,而且用了double buffer的ca ...
- java jquery 文件下载_jQuery教程分享通过ajax下载文件
我需要通过ajax从服务器下载文件. 问题是该文件未存储在服务器上. 我的基于java的后端自动从请求参数生成文件并在响应正文中返回它: @RequestMapping(value = "/ ...
- java jquery 框架_[Java教程]小谈Jquery框架
[Java教程]小谈Jquery框架 0 2013-12-23 18:01:16 现在Jquery框架对于开发人员基本上是无人不知,无人不晓了,用起来十分的方便,特别是选择器十分强大,提高了我们的开发 ...
- Java jQuery
零. 复习昨日 1 写出至少15个标签 2 写出至少7个css属性font-size,color,font-familytext-algin,background-color,background-i ...
- java jquery的定义方法_jQuery--基本语法
jQuery--基本语法 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 语法 jQuery 语法是通过选取 HTML 元素,并 ...
最新文章
- numpy.random.seed()
- 原型模式（Prototype）
- ImportError: No module named pil
- 防火墙安装的十步骤，加强网络第一道保护屏
- Hdu1232 畅通工程 【并查集】
- 左神算法：用栈来求解限制后的汉诺塔问题（Java版）
- C#常用集合的使用(转载)
- 如果可以，我们一起留在竹山。
- sparse non-rigid registration of 3d shapes
- YII2 搭建redis拓展(教程)
- ANGULARJS 动态编译添加到dom中
- Moodle 安装出现访问空白和open_basedir问题
- 实现背景轮播登录页面
- 开根号的笔算算法图解_开根号手算方法
- [从头学数学] 第193节 推理与证明
- 机器认知、人机交互、边缘计算……在这里，他们谈论了关于AI的关键议题
- centos 7 下 硬盘GPT格式转换
- RTL8201-RMII电路
- wincc与SQL Server数据库通讯的方法介绍
- 如何让全链路压测落地？