JQuery
JQuery
参考视频：https://www.bilibili.com/video/BV1JJ41177di?p=26
一、JQuery是什么
JQuery库，里面存在大量的Javascript函数
二、引入JQuery
方一：
官网下载第二个
导入项目
jsp页面
<head> <meta charset="GBK"> <title>$Title$</title> <%-- 导入js--%> <script src="lib/js/jquery-3.5.1.js"></script> </head>
方二：
百度CDN JQuery
随便选个，复制
<script>标签，放到<head>标签内
<head> <title>$Title$</title> <%-- CDN引入--%> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> </head>
三、公式
$(‘选择器‘).action()选择器就是css的选择器
用单引号
例子
<%@ page contentType="text/html;charset=GBK" language="java" %> <html> <head> <meta charset="GBK"> <title>$Title$</title> <%-- CDN引入--%> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> </head> <body> <a href="" id="test">点我</a> <script> $(‘#test‘).click(function () { alert(‘hello,JQuery‘); }) </script> </body> </html>
四、选择器
可查看工具网站
基本
<script> //原生js //标签 document.getElementsByTagName（）； //id document.getElementById（）； //类 document.getElementsByClassName（）； //jQuery css 中的选择器它全部都能用 $(‘p‘).click();//标签选择器 $(‘#id1‘).click();//id选择器 $(‘.class1‘).click();//class选择器 </script>
五、事件
鼠标事件
- 例子
<% @page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <style> #mouseMove { width: 500px; height: 500px; border: 1px solid red; } </style> </head> <body> mouse: <span id="mouseXY"></span> <div id="mouseMove"> 在这里移动鼠标 </div> <script> //当网页元素加载完毕之后，响应操作 // $(‘document‘).ready(function () { // }); // 简写 $(function () { $(‘#mouseMove‘).mousemove(function(e){ $(‘#mouseXY‘).text(‘x:‘+e.pageX+‘,y:‘+e.pageY) }) }); </script> </body> </html>
六、操作文本
节点文本操作
<div id="programme"> <li id="P"> Python</li> <li name="J">Java</li> </div><script> $(‘#programme‘).text();//获取值 $(‘#programme‘).text(‘设置值‘);//设置值 $(‘#programme‘).html();//获取值 $(‘#programme‘).html(‘<strong>123</strong>‘);//设置值 </script>
css操作
$(‘#programme li[name=J]‘).css({"color":"red","background-color":"yellow"});
元素的显示和隐藏
- 本质
display:none
$(‘#programme li[name=J]‘).hide();//隐藏 $(‘#programme li[name=J]‘).show();//显示- 本质
七、未来ajax
$(‘#xxx‘).ajax()
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}}); 相关推荐
83510998 2020-08-08
tthappyer 2020-07-25
tztzyzyz 2020-07-05
87281248 2020-07-04
82244951 2020-06-28
89510194 2020-06-27
牵手白首 2020-06-14
开心就好 2020-06-10
EdwardSiCong 2020-11-23
hhanbj 2020-11-17
85477104 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15