Day09【jQuery】选择器

最新推荐文章于 2021-12-27 17:58:52 发布
最新推荐文章于 2021-12-27 17:58:52 发布
阅读量117 收藏
点赞数
文章标签： jquery js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43639081/article/details/109469660
版权

jquery的选择器概述

  • （1）选择器是什么？
    $()
    特殊的”函数”，不同的字符串参数（代表不同的规则），执行之后可以获取页面的符合条件的元素返回
  • （2）选择器分类
    基本选择器
    层级选择器
    属性选择器
    基本过滤选择器
    表单属性选择器

一、基本选择器

选择器名称语法解释
标签选择器（元素选择器）$(“html标签名”)获得所有匹配标签名称的元素
id选择器$("#id的属性值")获得与指定id属性值匹配的元素
元素选择器$(".class的属性值")获取与指定的class属性值匹配的元素
	<script type="text/javascript">
	
		 //<input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
		 //id选择器
		 $("#b1").click(function () {
			 $("#one").css("background-color","red");
		 });
		 //<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
         //标签名选择器
		 $("#b2").click(function () {
			 $("div").css("background-color","red");
         });
		 //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
         //类选择器
         $("#b3").click(function () {
             $(".mini").css("background-color","red");
         });
		 //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
		 //并列选择器
         $("#b4").click(function () {
             $("span,#two").css("background-color","red");
         });

	</script>

二、层级选择器

在这里插入图片描述
在这里插入图片描述

<script type="text/javascript">
			//----------------------层级选择器----------------------------------------
		 //<input type="button" value=" 改变 <>body 内所有 <div> 的背景色为红色"  id="b1"/> ---A B
			$("#b1").click(function () {
				$("body div").css("background-color","red");
            });
		 //<input type="button" value=" 改变 <body> 内 子 <div> 的背景色为 红色"  id="b2"/> ---A>B
            $("#b2").click(function () {
                $("body > div").css("background-color","red");
            });
	</script>

三、属性选择器

  • （1）如果选择器中有多个条件 $("[][][]")
  • （2）*= 表示含有某个字符 test es
    在这里插入图片描述
<script type="text/javascript">
			<!--属性选择器-->
		 //<input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
			$("#b1").click(function () {
				$("div[title]").css("background-color","red");
            });
		 // <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
            $("#b2").click(function () {
                $("div[title='test']").css("background-color","red");
            });
		 //<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“test”的 div 元素背景色为红色"  id="b7"/>
           //如果选择器中有多个条件 $("[][][]")
			//*= 表示含有某个字符
            $("#b7").click(function () {
                $("div[id][title*='test']").css("background-color","red");
            });
	</script>

四、基本过滤选择器

  • （1）索引顺序，就是标签顺序
  • （2）header指的是h1~h6
    在这里插入图片描述
	<script type="text/javascript">
		
		 //<input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
		 $("#b1").click(function () {
			$("div:first").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
         $("#b2").click(function () {
             $("div:last").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
         $("#b3").click(function () {
             $("div:not(.one)").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
         $("#b4").click(function () {
             $("div:even").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
         $("#b5").click(function () {
             $("div:odd").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
         $("#b6").click(function () {
             $("div:gt(3)").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
         $("#b7").click(function () {
             $("div:eq(3)").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
         $("#b8").click(function () {
             $("div:lt(3):even").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
         $("#b9").click(function () {
             $(":header").css("backgroundColor","red");
         });

	</script>

五、表单属性过滤器

（1）表单属性过滤器
一般针对表单form标签 里面的元素
在这里插入图片描述

<script type="text/javascript">
		
		//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
		$("#b1").click(function () {
		    //inputEles  = [js对象，js对象]
			 var inputEles = $("input[type='text']:enabled");
 			 for(var i=0; i<inputEles.length; i++){
				 //alert(inputEles[i].value);  //js对象
				 alert($(inputEles[i]).val()); //转为jquery对象
			 }
        });
		// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
        $("#b2").click(function () {
            //inputEles  = [js对象，js对象]
            var inputEles = $("input[type='text']:disabled");
            for(var i=0; i<inputEles.length; i++){
                //alert(inputEles[i].value);  //js对象
                alert($(inputEles[i]).val()); //转为jquery对象
            }
        });
		 //<input type="button" value=" 利用 jQuery 对象的 length 属性获取复选选框选中的个数"  id="b3"/>
		$("#b3").click(function () {
			var checkEles = $("input[type='checkbox']:checked");
			alert(checkEles.length);
        });
		// <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
        $("#b4").click(function () {
           var optionEles =   $("option:selected");
            for(var i=0; i<optionEles.length; i++){
				alert($(optionEles[i]).text());
			}
        });
	</script>
信仰G
关注
jQuery之日期选择器的深入解析
10-27
jQuery日期选择器是jQuery UI组件库中的一个常用组件，它能够让用户通过图形界面选择日期。本文深入解析了jQuery日期选择器的各种功能和配置选项，以及如何使用它来增强Web表单的用户体验。 首先，关于日期选择器的...
css动画移动，列表向上滚动不留空白
m0_71225230的博客
10-07 1700
1定义一个动画，move是动画名，动画效果：列表向上移动100%（move对应动画名称，花20秒，平稳移动100%，循环动画）列表向上移动会出现空白，只需要复制一份数据拼接上去。2使用动画，在对用标签的css内部写。一张列表，向上滚动的效果。
css3常用动画样式文件move.css
weixin_34077371的博客
09-12 173
move.css zoomIn  zoomInDownouter-circlearrowTop expandOpen fadeIn  fadeInNormal  fadeInUp   fadeInRight   fadeInDown  fadeInLeft moveDown 上往下进入   moveUp 由下往上进入   moveLeft 由右往左进入   moveRight由左往...
CSS3实现移动效果
qq_45823118的博客
03-18 1859
CSS3实现移动效果任务描述相关知识transform属性transition属性代码文件 任务描述 本关任务：用CSS3实现物体移动效果。 相关知识 为了完成本关任务，你需要掌握： transform属性 transition属性。 transform属性 下面是基本的html结构，： <div class="move"> <p>向上移动</p> </div> 效果如下： 现在需要平滑的往上移动200px。 该如何实现呢？ 咱们先实现往上移动
CSS的动画属性
m0_61889892的博客
10-27 3726
1、CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称 2、当鼠标悬停在div元素上时，会产生名为move的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键词，定义move效果 3、@keyframes 规则 可以通过百分比设置 例如 @keyframes move{ 0%{} ...
css动画基础环形移动
weixin_46564011的博客
12-27 268
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>c.
jQuery ui带时间的日期选择器代码
11-10
标题"jQuery ui带时间的日期选择器代码"所指的就是如何在jQuery UI的日期选择器基础上添加时间选择的功能。 首先，我们需要确保引入了jQuery和jQuery UI的相关库。这通常意味着在HTML文件的`<head>`部分包含以下...
Day09【JQuery】源码及综合案例
11-04
这个“Day09【JQuery】源码及综合案例”主题将深入探讨 jQuery 的核心机制，并通过实践案例加深理解。 1. **jQuery 的引入与基本用法** - 引入 jQuery：通常通过 `<script>` 标签在 HTML 文件中引入 jQuery 库。 ...
day20 jquery01.zip
11-18
比如，使用jQuery选择元素只需一行代码，如`$("selector")`，而原生JavaScript可能需要多行代码来实现相同功能。 jQuery中的循环语句主要涉及到遍历元素集合。通常，我们使用`.each()`方法来对jQuery对象中的每个...
jQuery日期选择器插件
02-27
**jQuery日期选择器插件**是一种广泛应用于网页开发中的组件，它允许用户通过交互式的日历界面方便地选择日期。这种插件极大地提高了用户在网页上输入日期的体验，尤其适用于需要用户输入生日、预约日期或者截止日期...
Move.js 常用方法:快速实现css3动画
WihauShe's Blogger
04-29 410
(个人经验，仅供参考，错误之处，敬请谅解) 介绍 方法
html5中move是什么意思,Move.js入门
weixin_35916663的博客
06-21 1013
在网站上，CSS3 的过渡和动画是当前创建轻量级动画的首选方法。不幸的是，很多开发者发现他们自己的语法和复杂和混乱的。如果这听起来像你自己，对你来说，或许Move.js是完美的方案。Move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库。本教程将探讨Move.js的基础知识，并提供一个在线demo。基础知识Move.js 提供了创建 CSS3 动画的最简单的 JavaS...
html css移动位置,html – 如何使用CSS移动对象？
weixin_34857730的博客
06-04 305
I have two images […] what I want is that one of the objects start moving from left side and the other start moving from the right and meet at the center as if they want to collide.Is it possible to d...
css animation动画完成后隐藏_CSS知识总结
weixin_39625172的博客
11-23 1805
本周学习了css布局、定位、动画，方老师解答了很多之前学习中遇到的疑惑，点拨了css学习方法和思路，受益匪浅！！版权声明：资料来源「饥人谷」。一、浏览器渲染原理浏览器渲染过程：根据HTML构建HTML树（DOM）根据CSS构建CSS树（CSSOM）将两棵树合并形成渲染树（render tree）Layout布局（文档流、盒模型、计算大小和位置）Paint绘制（绘制边框颜色、阴影、文字颜色等）com...
前端大全—总结css选择器知识
u011777331的专栏
04-24 346
基本选择器   1.标签选择器：就是用html标签名进行选择，如p{ }   2.ID选择器：用元素的id属性进行选择，用法：#ID名{ }   3.类选择器：用元素的class属性进行选择，用法：.class名{ } 扩展选择器   1.关联选择器，其实就是对标签中的标签进行选择 用法：选择器 选择器{ }//选择器一般就是上面的基本选择器，选择器之间用空格   2.组合选择器，其实
前端css——css选择器（完整用心总结）
m0_48930261的博客
08-17 645
选择器常用的选择器元素选择器id选择器类选择器选择器分组（并集选择器）通配选择器复合选择器（交集选择器）后代元素选择器伪类选择器伪元素选择器属性选择器：兄弟元素选择器否定伪类选择器否定伪类： 常用的选择器 元素选择器 作用：通过元素选择器，可以选择页面中所有指定元素 语法：.标签名{} 如： .p{ } id选择器 使用方法：通过元素的id属性值选中唯一的一个元素 语法：#id的属性值{ } 类选择器 先介绍一个属性class。我们可以为元素设置class属性，class属性和id属性类似，只不过cla
精通 CSS 选择器
Night_Emperor的博客
08-30 486
文章转自：http://www.cnblogs.com/xyzhanjiang/p/5447406.html CSS 选择器除了样式表匹配元素时需要用到，在使用 jQuery 等库的时候也可以利用 CSS 选择器来选择元素，因此作为前端开发需要熟练掌握。下面是一些常用的 CSS 选择器示例。 元素选择器 E，选择所有指定元素名称的元素，例如 p，选择所有的 p 元素。
jQuery日期选择器详解与实例
在本文中，我们将深入探讨jQuery中的日期选择器功能，这是一个强大的工具，用于简化网页开发中与日期相关的交互。默认情况下，当日期输入文本框获取焦点时，jQuery插件会弹出一个可定制的日历选择面板，用户可以选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值