JavaScript学习笔记（五）：jQuery

最新推荐文章于 2024-05-30 11:27:58 发布

名字叫啥好

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量66

点赞数

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/Monday__/article/details/122437241

版权

JavaScript
jQuery库，里面存在大量的JavaScript函数

公式：$(selector).action()

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<!--cdn引用-->
	<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
<body>
</body>
</html>

选择器

//原生js,选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();

//jQuery  css中的选择器它都能用
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//class选择器

文档工具站：http://jquery.cuishifeng.cn/

事件
鼠标事件，键盘事件，…

<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<!--cdn引用-->
	<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
	<style>
		#divMove{
			width:500px;
			height:500px;
			border:1px solid red;
		}
	</style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>

<script>
	//当网页元素加载完毕后，响应事件
	$(function(){
		$('#divMove').mousemove(function (e){
			$('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY)
		})
	});
</script>
</body>

操作DOM

<ul id="test-ul">
	<li class="js">JavaScript</li>
	<li name="python">Python</li>
</ul>

<script>
	//节点文本操作
	$('#test-ul li[name=python']).text();//获得值
	$('#test-ul li[name=python']).text('设置值');//设置值
	$('#test-ul'),html();//获得值
	$('#test-ul'),html('<strong>123</strong>');//设置值
	//css的操作
	$('#test-url li[name=python]').css("color","red");
	//元素的显示和隐藏 本质 display:none
	$('#test-url li[name=python]').show();
	$('#test-url li[name=python]').hide();
	//娱乐测试
	$(window).width();
	$(window).height();
	$('#test-url li[name=python]').toggle();
</script>

ajax是jQuery的一个方法

小技巧
1、如何巩固JS（看jQuery源码，看游戏源码）
2、巩固HTML和CSS （扒网站，全部down下来，然后对应修改看效果）

名字叫啥好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（五）：jQuery

JavaScriptjQuery库，里面存在大量的JavaScript函数公式：$(selector).action()获取jQuery<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.bootcss.com/j
复制链接

扫一扫