jQuery——选择器

飓风.

已于 2022-03-19 23:02:13 修改

阅读量746

点赞数

文章标签： jquery 前端 javascript

于 2022-03-17 21:17:17 首次发布

本文链接：https://blog.csdn.net/qq_62981121/article/details/123535586

版权

Why?为什么要学习？

查看官方jQueryLOGO：理念write less，do more 为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件 适用于中大型网站开发。

How?怎么用？
工具：HBuilderX

案例1：点击按钮获取输入框中的值（JS对比jQuery）使用jQuery步骤

1.下载jQuery库开发版本：jquery-3.3.1.js 生产版本：jquery-3.3.1.min.js
2.引入：将js文件复制到项目中
3.使用

选择器

jQuery中的选择器就是一个标记，为了快速获取指定的标签
jQuery中常见选择器： ID选择器 class选择器 element选择器
子代选择器后代选择器相邻兄弟选择器分组选择器...

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			window.onload=function test(){
				// id选择器
				console.log($("#ul1"));
				
				// class选择器
				console.log($(".aa"))
				
				// 标签选择器
				console.log($("li"))
				
				//first获取第一个元素
				console.log($("#ul1>li:first").css("background","red"))
				
				// 获取最后一个
				console.log($("#ul1>li:last").css("background","red"))
				
				// 根据（下标）获取指定元素
				$("#ul1>li:eq(3)").css("background","red");
				
				//获取偶数
				$("#ul1>li:even()").css("background","red");
				
				//获取奇数
				$("#ul1>li:odd()").css("background","red");
				
				// gt 选择索引大于2
				$("#ul1>li:gt(2)").css("background","red");
				
				// lt 选择索引小于3
				
				
				// 
				$("ul>li:contains('adsfsa')").css("background","red");
				
				
				// 表格
				
				// 给第一行设置颜色
			     $("#tr1").css("background","pink")
				
				$("#tables tr:gt(0):even").css("background","red");
				
				$("#tables tr:gt(0):odd").css("background","blue")
				
				
				$("form>input:text").css("background","red");
				console.log($("form>input:radio:checked").val());
				
			    console.log($("form>input:checkbox:checked").val());
				
				$("form>input:checkbox:checked").each(function(){
					console.log($(this).val());
				})
				
				
			}
			
			// li.background
		</script>

飓风.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery——选择器

选择器 jQuery中的选择器就是一个标记，为了快速获取指定的标签 jQuery中常见选择器： ID选择器 class选择器 element选择器子代选择器后代选择器相邻兄弟选择器分组选择器...————————————————版权声明：本文为CSDN博主「嘴强程序员」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_...
复制链接

扫一扫