jQuery（JavaScript类库）

天宇阿

已于 2022-09-03 18:04:04 修改

阅读量337

点赞数

分类专栏： JavaScript 文章标签： jquery 前端

于 2022-06-05 13:46:01 首次发布

本文链接：https://blog.csdn.net/zhao854116434/article/details/125124954

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

一、概述
二、选择器
- 2.1 介绍
- 2.2 JavaScript和jQuery选择器区别
三、事件
- 3.1 鼠标事件
四、操作Dom元素

学习视频来自于：秦疆（遇见狂神说）Bilibili地址
他的自学网站：kuangstudy

坚持你所相信的，相信你的坚持

一、概述

1.1 介绍

jquery是JavaScript的集成类库，里面有很多写好的可以直接调用的类，方便开发。

1.2 网络资源

文档网站
https://jquery.cuishifeng.cn/
官网
https://jquery.com/
cdn jquery
https://www.jq22.com/cdn/

1.3 快速入门

公式
$(selector).action()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 在线选择器 -->
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		<button id="bt">点我</button>
		<script type="text/javascript">
			'use strict'
			// id选择器+点击事件
			$('#bt').click(function(){
				alert('hello,jquery');
			})
		</script>
	</body>
</html>

二、选择器

2.1 介绍

选择器就是css的选择器，写法完全和css相同。

2.2 JavaScript和jQuery选择器区别

// 原生JavaScript选择器
document.getElementsByTagName(); // 标签选择器
document.getElementsByClassName(); // 类选择器
document.getElementById(); // id选择器
// jQuery中的选择器+点击事件
$('p').click(); // 标签选择器
$('#id1').click(); // 类选择器
$('.class1').click(); // id选择器

三、事件

3.1 鼠标事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 在线选择器 -->
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		<!-- 需求：获取当前鼠标坐标 -->
		<div id="divmove">
			<span>在这里移动鼠标</span><br>
			鼠标：<span id="mouseMove"></span>
		</div>
	</body>
	<script>
		// 当网页加载完成后，响应事件 全写
		// $(document).ready(function() {
		// })
		// 简写
		$(function() {
			// 鼠标移动完毕事件
			$('#divmove').mousemove(function(e) {
				$('#mouseMove').text('x:' + e.pageX + '	' + 'y:' + e.pageY);
			})
		});
	</script>
	<style>
		#divmove {
			width: 70%;
			height: 300px;
			border: solid 1px red;
		}
	</style>
</html>

四、操作Dom元素

// 节点文本操作
$('#test-ul li[name=python]').text('C++'); // 设置值
$('#test-ul li[name=python]').text(); // 获取值
$('#test-ul').html('<strong>ccc<strong>'); // 设置值
$('#test-ul').html(); // 获取值
// css操作
$('#test-ul').css('color','red'); // 调用css改变样式
$('#test-ul li[name=python]').hide(); // 隐藏选中的标签
$('#test-ul li[name=python]').show(); // 显示选中的标签

全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		<ul id="test-ul">
			<li class="js">Java</li>
			<li name="python">Python</li>
		</ul>
		<script>
			//$(function() {
				$('#test-ul li[name=python]').text('C++');
			//})
		</script>
	</body>
</html>

天宇阿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery（JavaScript类库）

jquery是JavaScript的集成类库，里面有很多写好的可以直接调用的类，方便开发。文档网站https://jquery.cuishifeng.cn/官网https://jquery.com/cdn jqueryhttps://www.jq22.com/cdn/公式$(selector).action()二、选择器2.1 介绍选择器就是css的选择器，写法完全和css相同。三、事件3.1 鼠标事件四、操作Dom元素全部代码...
复制链接

扫一扫