--------------------jquery--------------
jquery库,里面存在大量的JavaScript函数
jquery
引用的,有在线的和本地的
<head>
<meta charset="UTF-8">
<title>Jquery</title>
<!-- 在线引用jquery-->
<!-- <script src="https://cdn.bootcss.com/jquery/3.5.1/core.js"></script> -->
<!-- 本地引用jquery-->
<script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<!-- jquery的公式 -->
<a href="" id="test-jquery">点我</a>
<script>
document.getElementById('test-jquery');
$('#test-jquery').click(function () {
alert('哇,你真点');
});
</script>
</body>
选择器
复习网站:
https://jquery.cuishifeng.cn/jQuery.Ajax.html
jquery事件
鼠标事件、键盘事件、其他事件
捕获鼠标的坐标:
<style>
#divmove{
width: 500px;
height: 300px;
background-color: bisque;
border: 1px solid red;
}
</style>
</head>
<body>
mouse: <span id="mousemove"></span>
<div id="divmove">
在这里移动鼠标
</div>
<script>
//当网页元素加载完毕之后,响应事件
$(document).ready(
function () {
$('#divmove').mousemove(function (e) {
$('#mousemove').text('x'+e.pageX+'y'+e.pageY)
})
}
)
</script>
如何进行对DOM元素的操作
<ul id = "test-ul">
<li class="java">JAVA</li>
<li name="c">C</li>
<li name="c++">C++</li>
</ul>
<script>
$('#test-ul li[name=c]').text();//TEST里没值,这个方法就是在取值,如果有,就是赋值
$('#test-ul').html();
$('#test-ul').show();//显示
$('#test-ul').hide();//隐藏
</script>
Ajax
$(’#id’).ajax()
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});