入门JQuery

最新推荐文章于 2023-08-20 20:53:50 发布

冰镇毛衣

最新推荐文章于 2023-08-20 20:53:50 发布

阅读量240

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/sumatray/article/details/127027967

版权

一、 jQuery 操作DOM

1.1 选择器

#id 选择器
element 选择器
.class 选择器
层级选择器（父子、兄弟等）

$("parent>child")

parent元素中的指定child直接子元素

$("parent child")

所有后代元素

$("prev + next")

紧贴prev之后的元素

伪类选择器（:first）

:first/:last ----- 第一个/最后一个匹配的元素

:eq(N) ----- 匹配的索引为N的元素

:even/:odd ----- 奇数/偶数个元素

:checked ----- 表单中所有勾选的元素

:disabled ----- 被禁用的元素

属性选择器

属性选择器常用条件

1. =：等于/相等

2. ^=: 以** 开始

3. $=: 以**结束

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>jQuery选择器的练习</title>
	<link rel="stylesheet" href="">
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	<script type="text/javascript">
		// jQuery代码的内容
		// $(document).ready(function() {
		// 	// 根据ID
		// 	var username = $('#username');
		// 	// var username = jQuery('#username');
		// 	console.log(username);

		// 	// 根据class来查询
		// 	var areaList = jQuery('.area');
		// 	console.log(areaList);

		// 	// 根据元素标签来查询
		// 	var pList = $('p');
		// 	console.log(pList)
		// });

		// $(function() {
		jQuery(function() {
			// 根据ID
			var username = $('#username');
			// var username = jQuery('#username');
			console.log(username);

			// 根据class来查询
			var areaList = jQuery('.area');
			console.log(areaList);

			// 根据元素标签来查询
			var pList = $('p');
			console.log(pList)

			// 层级选择器
			// var bodyList = $('body *');
			// 所有的后代元素p
			var bodyList = $('body p');
			console.log(bodyList);

			// 直接的子元素
			bodyList = $('body > p');
			console.log(bodyList);

			// 紧贴之后的元素
			var input = $('label + input');
			console.log(input)

			// 伪类选择器练习
			var pFirst = $('p:first');
			console.log(pFirst)

			var p2  = $('p:eq(1)');
			console.log(p2);

			// 属性选择器
			var password = $('input[name="password"]');
			// var password = $('input[name^="passw"]');
			console.log(password)

			var idInputList = $('input[id]');
			console.log(idInputList)
		})

	</script>
</head>
<body>
	<label for="username">用户名</label>
	<input type="text" name="username" id="username">
	<input type="password" name="password" >

	<p class="area city">广州</p>
	<p>深圳</p>
	<p class="area">长沙</p>
	<p class="area" id="beij">北京</p>

	<div>
		<p>海南</p>
	</div>
	
</body>
</html>

1.2 查询DOM信息

访问HTML属性（id,class,style,自定义属性）

.attr('class')

查看HTML/文本信息

.html()/text()

查看表单信息

.val()

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>查询DOM信息</title>
	<link rel="stylesheet" href="">
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
	<input type="text" name="username" id="username" class="input-text user-input" my-user='张三'
		value="我的用户名">
		<!-- textarea  select checkbox radio -->
	<input type="text" name="password">

	<p class="area city">广州</p>
	<p style="color:#f00;">深圳</p>
	<p class="area">长沙</p>
	<p class="area" id="beij">北京</p>

	<p class="info" id="info">
		查看详细
		<span>内容：</span>
		<small>文字描述</small>
	</p>
	<script>
		$(document).ready(function() {
			// class属性
			var cls = $('#username').attr('class');
			console.log('class:', cls)
			// type属性
			var tys = $('#username').attr('type');
			console.log('type:', tys);
			// 自定义属性
			var user = $('#username').attr('my-user');
			console.log('my-user:', user);

			// 查询html信息
			var htmlContent = $('#info').html();
			console.log('Html:', htmlContent);
			// 查询text信息
			var textContent = $('#info').text();
			console.log('Text:', textContent);

			var inputUsername = $('#username').val();
			console.log('inputUsername:', inputUsername);

			// jQuery对象转换成DOM对象
			var username = $('#username');
			console.log('username jquery', username);
			// dom对象
			console.log('username dom', username.get()[0].value);
			console.log('username dom', username.get(0).value);
		})
	</script>
</body>
</html>

jQuery对象与原生DOM对象相互转换

$('#id').get(0)

1.3 遍历DOM

length ----- 对象的长度

for 循环遍历

.each() 循环遍历

find()

作用：在当前的元素集合中进行搜索

语法规则：.find(selector) .find(element)

1.4 修改DOM 信息

使用jQuery构建DOM

$('<p/>')

.append() / .appendTo()添加到DOM
.html() / .text() / .val() / .attr() 设置内容
css() 添加css / .addClass()、 .removeClass()类操作
.show() / hide() 控制显示和隐藏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>DOM查询</title>
	<link rel="stylesheet" href="">
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
	<input type="text" name="username" id="username" class="input-text user-input" my-user='张三'
		value="我的用户名">
		<!-- textarea  select checkbox radio -->
	<input type="text" name="password">

	<p class="area city">广州</p>
	<p style="color:#f00;">深圳</p>
	<p class="area">长沙 <span>测试数据</span></p>
	<p class="area" id="beij">北京</p>

	<p class="info" id="info" style="display: none;">
		查看详细
		<span>内容：</span>
		<small>文字描述</small>
	</p>
	<script>
		$(function() {
			var pList = $('p');
			// // 第一个p元素
			// var p1 = pList.get(0);
			// console.log(p1);
			// var p3 = pList.get(2);
			// console.log(p3);


			console.log(pList);
			console.log('总共有几个：', pList.length);
			// for 循环遍历
			for (var i=0; i<pList.length; i++) {
				var item = pList[i];
				console.log(item)
			}
			// .each函数循环遍历
			console.log('---------------------')
			pList.each(function(index, value) {
				console.log(index, value)
			});

			console.log('--------------');  // json对象数组[{username: },{},]
			$.each(['a', 'bbb', 'ccc'], function(index, value) {
				console.log(index, value)
			})

			// .find的使用
			var list = pList.find('span');
			console.log(list)

			// 构建dom对象
			var htmlDom = $('<p class="test"/>');
			console.log(htmlDom)
			// 添加到html dom
			// htmlDom.appendTo('body');

			// $('body').append(htmlDom);


			// 在dom中添加内容
			// htmlDom.html('<span>我是新加的</span>');
			// $('body').append(htmlDom);

			// $('#beij').html('<span>我是新加的</span>');
			// .text() .val()

			// $('#beij').attr('class', '666');
			// 添加新的class
			$('#beij').addClass('666');
			// 移除class
			$('#beij').removeClass('area');

			// 操作css样式
			$('#beij').css({
				'color': '#0f0',
				'background-color': '#000'
			})

			// 隐藏元素
			// $('#info').hide();
			// 显示元素
			$('#info').show();


			// jQuery的链式调用
			var myDom = $('<p/>').text('你好').append('<span>，财主</span>').appendTo('body');
			// console.log(myDom)
		})
	</script>
</body>
</html>

二、jQuery中的事件

2.1 常用事件

文档加载
鼠标事件（点击/滑动）
键盘事件
表单事件

文档加载

当DOM准备就绪时，指定一个函数来执行

$(document).ready(function(){})

$(function(){})

鼠标事件

点击事件

.click() / .dbclick() ----- 单击/双击

移动事件

.mouseenter() / .mouseleave() ---- 进入/离开 (hover)

2.2 jQuery事件绑定

绑定语法

on('click',function(){})

click(function(){})

bind('click',function(){})

键盘事件

按下

.keydown()

抬起

.keyup()

表单事件

焦点：

.focus() / .blur() ---- 获得/失去焦点

值发生改变

.change()

form表单提交

.submit()

事件的行为

阻止a标签的默认行为

event.preventDefault()

阻止多个事件冒泡

event.stopPropagation()

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>jQuery事件</title>
	<script src="./js/jquery-3.4.1.js" type="text/javascript"></script>
	<style type="text/css">
		.text-danger {
			color: #f00;
		}
		.reg3 {
			background-color: #f00;
			padding: 30px;
		}
		.reg3 span {
			background-color: #fff;
		}
	</style>
</head>
<body>
	<!-- <div onclick="clickMe()">请点击我</div> -->
	<div >请点击我</div>
	<input type="text" name="username" id="username">
	<form action="." method="get">
		<input type="text" name="uname" id="uname">
		<p id="txtError" class="text-danger"></p>
		<select name="sex" id="sex">
			<option value="1">男</option>
			<option value="0">女</option>
		</select>
		<input type="password" name="password">
		<input type="submit" value="注册">
		<button type="submit">提交</button>
	</form>
	<a class="reg2" href="http://imooc.com">注册</a>
	<a class="reg" href="javascript:;">注册会员</a>
	<a class="reg" href="javascript:void(0);">注册会员</a>

	<a class="reg3" href="avascript:;">
		<span>点击我</span>
	</a>
	<script type="text/javascript" src="./js/myjs.js">
		// function clickMe() {
		// 	alert('点击了我')
		// }
		// $(function() {
		// 	// js业务逻辑和html分离
		// 	$('div').click(function() {
		// 		alert('点击了')
		// 	})
		// })

		$(function() {
	// js业务逻辑和html分离

	// 鼠标单击事件
	// $('div').click(function() {
	// 	alert('点击了')
	// })

	// 双击事件
	// $('div').dblclick(function() {
	// 	alert('点击了2次')
	// });

	$('div').on('dblclick', function() {
		alert('点击了2次')
	})

	// hover
	// $('div').mouseenter(function() {
	// 	$(this).css({
	// 		'background-color': '#f00'
	// 	})
	// }).mouseleave(function() {
	// 	$(this).css({
	// 		'background-color': '#fff'
	// 	})
	// })

	$('div').hover(function(){
		$(this).css({
			'background-color': '#00f'
		})
	}, function() {
		$(this).css({
			'background-color': '#fff'
		})
	})

	// 绑定键盘事件
	$('#username').keyup(function() {
		var val = $(this).val()
		console.log(val)
	})

	// 用户名获得焦点
	$("#uname").focus();
	$("#uname").blur(function() {
		var phone = $(this).val()
		if (phone.length !== 11) {
			$("#txtError").text('输入的手机号码不正确')
		}
	})

	// 性别选择发生变化时触发
	$('#sex').change(function() {
		var sex = $(this).val()
		console.log(sex)
	})

	// 表单提交
	$('form').submit(function() {
		alert('表单提交了')
		// 验证我们的表单
		// 验证通过了，才需要提交表单
		return false; // 阻止表单的提交
	})

	// a标签的事件
	$('.reg2').click(function(event) {
		// 阻止a标签的默认行为
		event.preventDefault()
		alert('a click')
	});

	$('.reg').click(function(event) {
		alert('a click 2')
	})

	// 事件的冒泡
	$('.reg3').click(function() {
		alert('reg3');
	})
	$('.reg3 span').click(function(e) {
		// 阻止事件冒泡
		e.stopPropagation();
		alert('reg3 span')
	})
})
	</script>
</body>
</html>

冰镇毛衣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
入门JQuery

parent元素中的指定child直接子元素所有后代元素紧贴prev之后的元素:first/:last ----- 第一个/最后一个匹配的元素:eq(N) ----- 匹配的索引为N的元素:even/:odd ----- 奇数/偶数个元素:checked ----- 表单中所有勾选的元素:disabled ----- 被禁用的元素属性选择器常用条件1. =：等于/相等2. ^=: 以** 开始3. $=: 以**结束。
复制链接

扫一扫