jQuery的自我学习（一）

最新推荐文章于 2022-08-21 17:46:10 发布

龍龍哥

最新推荐文章于 2022-08-21 17:46:10 发布

阅读量98

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/baldicoot_/article/details/102819831

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery是对DOM的一种封装，可以更加快捷的修改添加js样式。首先我们需要下载相关版本的jQuery的脚本。这里使用的是jquery-3.4.1.js。用使用jQuery时要先引入所下载的东西。(<script src="...")></script>)

jQuery选择器

jQuery有许多简洁的选择器现在介绍其中常用的一些：

		$('#id')
		$(".c1")
		$('a')
		$('#10 a')         //子子孙孙
		$('#10>a')        //儿子
					//:first
					//:last
					//:eq()
		$('[alex]')
		$('[alex="123"]')
		$("input[type='text']")==$(':text')

直接利用$符号搜索标签的id和class名称，可以把他和css的选择器归为一类记忆，有很多相似之处。（切记字符串要用引号包括）

jQuery的事件触发

基础的绑定还是在标签的后面添加“οnclick="xxx();”然后利用选择器寻找到后对其内部进行操作
更高级层次的应该是：直接在选择器$('..')后面添加上事件如：“click”，“hover”等
如：

		<script src="jquery-3.4.1.js")></script>
		<script)>
		
			$('#i1').click(function(){
				$(this).xxx        //这里的this指的是本标签
			})
			
		</script>

对于表单的选项设置：

	   $(this).prop('checked') 获取值
//     $(this).prop('checked'，true) 设置值
//	   $(this).each(function(k){
			(k代表当前索引)；
			（this代表DOM对象）

利用jQuery事件做一个多下拉框菜单案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.header {
			height: 30px;
			width: 90px;
			background-color: #232651;
		}
		.hide {
			display: none;
		}
	</style>
</head>
<body>
	<div style="border:2px solid #216516;width: 90px;">
		<div class="item">
			<div class="header">1</div>
			<div class="bode">
				<div>2</div>
				<div>3</div>
			</div>
		</div>
		<div class="item">
			<div class="header">1</div>
			<div class="bode hide">
				<div>2</div>
				<div>3</div>
			</div>
		</div>
		<div class="item">
			<div class="header">1</div>
			<div class="bode hide">
				<div>2</div>
				<div>3</div>
			</div>
		</div>
		<div class="item">
			<div class="header">1</div>
			<div class="bode hide">
				<div>2</div>
				<div>3</div>
			</div>
		</div>
		<div class="item">
			<div class="header">1</div>
			<div class="bode hide">
				<div>2</div>
				<div>3</div>
			</div>
		</div>
	</div>
	<script src="jquery-3.4.1.js"></script>
	<script>
	$('.header').click(function(){
		$(this).next().removeClass('hide');
		$(this).parent().siblings().find('.bode').addClass('hide');
	})
	</script>
</body>
</html>

从这个小案例中，我们应该掌握许多小的知识点：

$(’#i1’).next()——>//寻找i1标签的下一个标签
$(’#i1’).nextAll() ——> //寻找i1标签下的所有标签
$(’#i1’).nextUntil(’#ii1’)——> //寻找i1标签下的所有标签，直到找到ii1标签为止

$(’#i1’).prev() ——> //寻找i1标签的上一个标签
$(’#i1’).prevAll() ——> //寻找i1标签上的所有标签
$(’#i1’).prevUntil(’#ii1’) ——> //寻找i1标签上的所有标签，直到找到ii1标签为止

$(’#i1’).parent()——> //寻找i1标签的父级标签
$(’#i1’).children() ——>//寻找i1标签的子级标签
$(’#i1’).siblings() ——>//寻找i1标签的兄弟标签
$(’#i1’).find() ——> //寻找i1标签中的某一元素标签

$(…).text()——>获取标签文本
$(…).text(“1”)
$(…).html()
$(…).html(“1”)
$(…).val()——>获取input文本
$(…).val(…)

龍龍哥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的自我学习（一）

jQuery是对DOM的一种封装，可以更加快捷的修改添加js样式。首先我们需要下载相关版本的jQuery的脚本。这里使用的是jquery-3.4.1.js。用使用jQuery时要先引入所下载的东西。(<script src="...")></script>)jQuery选择器jQuery有许多简洁的选择器现在介绍其中常用的一些： $('#id') $(".c1"...
复制链接

扫一扫

专栏目录