【JavaScript】JavaScript基础教程(10)

前言：

本文内容：jQuery事件、jQuery操作DOM元素、前端小结

推荐免费JavaScript基础讲解视频：【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili

JavaScript基础教程笔记代码下载地址：

蓝奏云：下载地址密码：joker

百度云：下载地址提取码：86v8

jQuery事件

常见DOM事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jQuery-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #move{
            width:300px;
            height: 100px;
            background: #f5cdd5;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<!--获取鼠标坐标-->
mouse: <span id="coordinate"></span>
<div id="move">
在这里移动鼠标
</div>
<script>
    // 当网页元素加载完毕后响应时间
    $(function(){
        // mousemove耗费资源过大，请谨慎使用
        // 直接调用MOUSEMOVE现已被弃用
        $('#move').MOUSEMOVE(function(coordinates){
            $('#coordinate').text('x:'+coordinates.pageX+' y:'+coordinates.pageY);
        })
    })
</script>
</body>
</html>

jQuery操作DOM元素

节点文本操作

1 2	$('#text-ul li[name=java]').text('JavaSE');// 设置值 $('#text-ul .js').html('JS');// 获得值

css操作

1	$('#text-ul li[name=java]').css('color','red');// 修改颜色

元素显示和隐藏

1
2
3

// 显示和隐藏 hide()隐藏 show()显示
// 本质是display:none;
$('#text-ul .js').hide();

ajax简单了解

异步的 JavaScript 和 XML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>