js、day3
作者：互联网
1.jQuery简单认识
-
是封装好的库
1.1jquery导入的两种方式
-
方法1：下载到本地
-
一种是去英文网址，找到
-
然后右键点击保存为，就可以下载到本地了，然后在文件中创建lib文件夹，将该下载好的文件放入，该文件夹
-
-
方法2：cdn
-
需要网络
-
直接找到cdn jquery
-
点击赋值链接，然后创建script就可以了，但是没有网络的话这样就不行
-
-
1.2jquery简单公式
-
美元符号代表jquery
-
selector是选择器
-
action是函数
-
公式为$(selector).action
1.3选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
<script>
//原生js，选择器少，不好记
document.getElementsByTagName();
document.getElementById();
document.getElementsByClassName();
//css中的选择器他都能用，可以在官网中查看有哪些选择器
$('p').click();//标签选择
$('#id1').click();//id选择
$('.class').click();//类选择
</script>
</head>
<body>
</body>
</html>
1.4事件
鼠标事件，键盘事件，其他事件，之类的
-
鼠标
-
mouse
-
-
键盘事件
-
简单写下鼠标移动显示网页坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标坐标</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
#square{
margin: 0;
width: 500px;
height: 500px;
border: solid 1px black;
border-radius: 5px;
}
</style>
<script>
//因为要获取元素，所以必须在文档加载后获取，有如下几种方法
//方法1
// window.onload = function (){}
//方法2
// $(document).ready(funcion(){})写成这样就是jquery的形式，在页面加载完全后进行，和方法一是一个意思
// $(document).ready(function (){
// //将span里面的东西替换为文本
// $('#xy').text('这是什么东西');
// })
//方法3
//是方法2的简化，其实是一个意思
// $(function (){
// $('#xy').text("这是什西");
// })
// 显示坐标
// $(function (){
// $('#square').bind('mousemove',function(e){
// $("#xy").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
// });
// });
// 这里虽然提示输入的是onmousemove，但是还是输入 mouse
window.onload = function (){
$('#square').mousemove(function (e){
$("#xy").text("x:"+e.pageX+" y:"+e.pageY);
});
}
</script>
</head>
<body>
<span id="xy"></span>
<div id="square">
</div>
<button id="btn1">
点击变成傻逼
</button>
</body>
</html>
标签：function,jquery,text,day3,js,xy,document,选择器 来源： https://www.cnblogs.com/raoxin/p/16217036.html