jQuery复习总结（二）选择器 详细实例代码+截图调试（迅速入门掌握）

最新推荐文章于 2021-05-22 17:36:22 发布
最新推荐文章于 2021-05-22 17:36:22 发布
阅读量370 收藏
点赞数
分类专栏： jQuery 文章标签： jQuery jQuery整理 jQuery选择器 前端jQuery框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42507756/article/details/84991811
版权

常用选择器

Basics

$(‘code’) ——元素选择器

JavaScript原生方法实现在DOM中选择指定类型元素
document.getElementsByTagName("tagName")
jQuery简化后
$("p") — 选择<p>标签元素 
$("div") — 选择<div>标签元素

$(’#myid’) ——id选择器

JavaScript原生方法实现在DOM中选择指定id值的元素
document.getElementById("id")
jQuery简化后
$("#test") — 选择id为“test”的标签元素
$("#demo") — 选择id为“demo”的标签元素

$(’.myclass’) ——类选择器

JavaScript没有提供内置的类选择方法
jQuery简化后
$(".test") — 选择class为“test”的标签元素
$(".index") — 选择class为“index”的标签元素

$(’*’) ——通配选择器

$("*") — 选择所有的元素 //设置的css会作用在所有的元素之上 包括body

$(‘code, #myid, .myclass’) ——分组选择器

css样式或是事件将发生在所有`<code>`标签元素上，id为myid还有class为myclass的元素上

Hierarchy

$(‘div code’)
选择匹配<div>后代里所有<code>元素

<html>
    <head>
        <title>JQuery selector</title>
    </head>
    <body>
		<div>
			<code>something test1</code>
			<p>test</p>
			<code>something test2</code></br>
			<code>something test3</code>
		</div>
		<button>Click Me</button>
    </body>
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $('button').on('click', function() {
            $('div code').css('backgroundColor','yellow');
        });
    });

    </script>
    <!-- <script src="/js/jquery-latest.js"></script> -->
</html>

在这里插入图片描述

$(‘parent>child’)
前一个元素为父元素，后一个为子元素，匹配前一个元素的所有后一个子元素，且为直接子元素

<html>
    <head>
        <title>JQuery selector</title>
    </head>
    <body>
		<div>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<div>
					<li>这个不会被选到</li>
				</div>
			</ul>
			<li>这个不会被选到</li>
		</div>
		<button>Click Me</button>
    </body>
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $('button').on('click', function() {
            $('ul>li').css('backgroundColor','yellow');
        });
    });

    </script>
    <!-- <script src="/js/jquery-latest.js"></script> -->
</html>

在这里插入图片描述
注意 区别在于子元素必须是父元素的直接子元素，例子中，第一个<li>不是<ul>的直接子元素，所以未被选中

$('prev + next ')
选择prev的紧跟的第一个元素

<html>
    <head>
        <title>JQuery selector</title>
    </head>
    <body>
		<div>
			<p class="test">test</p>
			<p>test2</p>
			<p>test3</p>
			<h3>test5</h3>
			<p>test4</p>
		</div>
		<button>Click Me</button>
    </body>
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $('button').on('click', function() {
            $('.test+p').css('backgroundColor','yellow');
        });
    });

    </script>
    <!-- <script src="/js/jquery-latest.js"></script> -->
</html>

在这里插入图片描述

只选择到了test2这个<p>标签
$(‘prev ~ siblings’)
选择prev的所有兄弟siblings元素

<html>
    <head>
        <title>JQuery selector</title>
    </head>
    <body>
		<div>
			<p class="test">test</p>
			<p>test2</p>
			<p>test3</p>
			<h3>test5</h3>
			<p>test4</p>
		</div>
		<button>Click Me</button>
    </body>
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $('button').on('click', function() {
            $('.test~p').css('backgroundColor','yellow');
        });
    });

    </script>
    <!-- <script src="/js/jquery-latest.js"></script> -->
</html>

在这里插入图片描述

Basic Filters

在这里插入图片描述
举例：

<html>
    <head>
        <title>JQuery selector</title>
    </head>
    <body>
		<div>
			<ul>
				<li>0</li>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
		<button>Click Me</button>
    </body>
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $('button').on('click', function() {
            $('ul li:first').css('backgroundColor','yellow');
			$('ul li:last').css('backgroundColor','red');
			$('ul li:eq(3)').css('backgroundColor','blue');
			$('ul li:odd').css('fontSize','20px');
			$('ul li:even').css('fontSize','40px');
        });
    });

    </script>
    <!-- <script src="/js/jquery-latest.js"></script> -->
</html>

在这里插入图片描述

Content Filters

在这里插入图片描述
举例：

<html>
    <head>
        <title>JQuery selector</title>
    </head>
    <body>
		<div class="test">
			<div>This is Haris test example</div>
			<div>Haris test example</div>
			<div style="width:30px,height:10px,solid,bodersize:1px">
			</div>
			<p hidden="hidden">这个看不见</p>
			<table>
				<tr>
					<td>1</td>
					<td hidden="hidden">2</td>
					<td>3</td>
					<td hidden="hidden">4</td>
					<td>5</td>
				</tr>
			</table>
		</div>
		<button>Click Me</button>
    </body>
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $('button').on('click', function() {
            $('.test div:contains("This")').css('backgroundColor','yellow');
			$('.test div:empty').css('backgroundColor','red');
			$('tr td:hidden').css('backgroundColor','black').show(2000);
			$('tr td:visible').css('backgroundColor','green');
        });
    });

    </script>
    <!-- <script src="/js/jquery-latest.js"></script> -->
</html>

在这里插入图片描述

Attribute Filters

在这里插入图片描述
举例：

<html>
    <head>
        <title>JQuery selector</title>
    </head>
    <body >
		<div class="test">
			<div id="test" title="test">this is a div with id attribute</div>
			<div class="test1" title="test">this is a div with class attribute1</div>
			<div class="test2" title="test2">this is a div with class attribute2</div>
			<div class="test3" title="test">this is a div with class attribute3</div>
			<a href="#">
		</div>
		<button>Click Me</button>
    </body>
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $('button').on('click', function() {
            $('[id]').css('backgroundColor','yellow');
			$('[class="test1"]').css('backgroundColor','red');
			$('[title!="test"]').css('backgroundColor','blue');
			$('[class$="t3"]').css('backgroundColor','green');
        });
    });
    </script>
    <!-- <script src="/js/jquery-latest.js"></script> -->
</html>

title不为test的所有元素全部被变为蓝色 只有title不为test的三个div没有变成蓝色
在这里插入图片描述

Child Filters

$(‘li:first-child’)
第一个子元素
$(‘li:last-child’)
最后一个子元素
$(‘li:nth-child(even)’)
偶数个子元素
$(‘li:nth-child(odd)’)
奇数个子元素
$(‘li:nth-child(2)’)
第二个子元素
$(‘li:nth-child(2n)’)
偶数个子元素
$(‘code:only-child’)
匹配唯一子元素

举例：

<html>
    <head>
        <title>JQuery selector</title>
    </head>
    <body >
		<ul>
			<li><sapn>0</span><span>000</span></li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
		<ul>
			<li>7</li>
		</ul>
		<button>Click Me</button>
    </body>
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $('button').on('click', function() {
            $('li:first-child').css('backgroundColor','yellow');
			$('li:last-child').css('backgroundColor','red');
			$('li:nth-child(3)').css('backgroundColor','yellow');
			$('li:nth-child(even)').css('fontSize','15px');
			$('li:nth-child(odd)').css('fontSize','30px');
			$('li:only-child').css('backgroundColor','blue');
        });
    });

    </script>
    <!-- <script src="/js/jquery-latest.js"></script> -->
</html>

在这里插入图片描述

Forms

在这里插入图片描述
同元素选择器一样，<input>表单控件的type选择

Form Filters

在这里插入图片描述
在<input>type选择的基础上出现了选择表单控件的状态不同时的选择器

举例：

<html>
    <head>
        <title>JQuery selector</title>
    </head>
    <body>
		<form id="form1">
		<input type="text" name="" value="文本域"><br/>
		<input type="password" name="" value="密码域"><br/>
		<input type="checkbox" name="" value="复选框">复选框<br/>
		<input type="radio" name="" value="单选按钮">单选按钮<br/>
		<input type="image" src="" value="图像域"><br/>
		<input type="file" src="" value="文件域"><br/>
		<input type="hidden" name="" value="隐藏域"><br/>
		<input type="button" value="普通按钮" onclick=""><br/>
		<input type="submit" value="提交按钮" onclick=""><br/>
		<input type="reset"  value="重置按钮" onclick=""><br/>
	    </form>
	<br/>
	<br/>
	<br/>
	<br/>
	<button id="action">变化</button>
    </body>
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
		$('#action').on('click',function(){
			$("#form1 :text").val("修改后的文本域");
			$("#form1 :password").val("修改后的密码域");
			$("#form1 :checkbox").val("修改后的复选框");
			$("#form1 :radio").val("修改后的单选框");
			$("#form1 :image").hide(3000);
			$("#form1 :file").hide(5000);
			$("#form1 :hidden").show(5000)
			$("#form1 :button").css('backgroundColor','yellow');
			$("#form1 :submit").css('backgroundColor','red');
			$("#form1 :reset").css('backgroundColor','blue');
		});
    })
    </script>
    <!-- <script src="/js/jquery-latest.js"></script> -->
</html>

在这里插入图片描述

Haris Ha
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片选择器及图片裁剪的实现
余生无须指教
06-08 434
Android 图片选择 图片裁剪
jQuery基本筛选选择器实例代码
10-20
主要为大家详细介绍了jQuery基本筛选选择器实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery入门—选择器实现隔行变色实例代码
11-30
1、JQuery选择器继承了CSS、path语音的部分语法，允许通过标签名、属性名、内容对DOM元素进行快速、准确的选择。 2、JQuery选择器与JavaScript相比，具有代码简单、完善的检测机制的优势。 3、使用JQuery选择器实现隔行变色，示例代码如下： 代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <TITLE> 使用JQuery实现隔行变色 </TITLE> <META NAME=”Generator” CONTENT=”EditPlus”> <META N
Java开发中网页截图的示例，采用jquery.imageaeraselect-0.9.10这个插件实现，自己详细测试过，可以使用。
zhuzj12345的博客
01-05 725
先看下我们实际项目中的最终效果完成效果图： 下面详细说明一下，这个里面主要用到的技术 图片上传选用的jquery.uploadify插件 截图插件采用的是jquery.imageaeraselect-0.9.10 图片中第一行的红色字体首先提示允许上传的图片的格式和允许上传的图片的最大尺寸，这个做开发的筒子们应该都清楚。 为什么要限制分辨率在600*300以上呢？这个是因为下面的
CSS从入门到精通——基础选择器(二)
qq_42212132的博客
07-31 444
类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式，而不考虑具体的元素时，会使用类选择器。 例如，对于HTML页面: <body> <div class="main"> <article class="news"> <h1>地震自救指南</h1> <p>大的晃动时间约...
css选择器总结（内附实例及截图）
weixin_45135068的博客
07-30 354
目录 通配符选择器 ID选择器 类选择器 ID选择器跟类选择器的区别 复合选择器 5.1 标签指定式选择器（即…又…） 5.2 后代选择器（包含选择器）（重点） 5.3 并集选择器（常用） 5.4 子代选择器 5.5 交集选择器 属性选择器 通配符选择器 通配符选择器用“*”表示，它是所有选择器中作用最广的，能匹配页面中所有的元素，基本语法如下： *{ 代码块 } 通配符选择器的穿透力很强，优先级高于继承的样式，会覆盖继承的样式，一般不用 ID选择器 HTML标签中I
jquery选择器的调试 -- 使用其他的日志工具
过客阵营 -- 简单的就要最简单
03-13 353
/** * 开启站点的JS调试工具 */ $('#site_title').bind('click',function(){ var arr = [234, 2321, 645, 3.3]; nitobi.Debug.log(arr); nitobi.Debug.log($(this)); $(this).unbind('click'); }) ;   这个调试日志窗口...
JavaScript 习题及面试题 1
热门推荐
qq_34227896的博客
04-01 1万+
JavaScript 习题及面试题 1.[单选题] 有以下 ES6 代码function * gen() { yield 1; yield 2; yield 3; } 下面选项描述正确的是哪个？ gen()执行后返回 2 gen()执行后返回 undefined gen()执行后返回一个 Generator 对象 gen()执行后返回 1 ----------------...
c语言中的调试过程截图,附上代码和测试结果的截图，求说明原因，解决问题！谢谢...
weixin_42570769的博客
05-22 259
该楼层疑似违规已被系统折叠隐藏此楼查看此楼#include #include int main(){int countleap(int m,int d);int count(int m,int d);int jleap(int year);int y,m,d,flag,sum;printf("Please input year,month,day:\n");scanf("%d %d %d",&a...
JQuery中常用选择器和方法的总结
YKG
03-09 2260
JQuery是JS的一个类库，是大型开发必备人工具之一。在前端开发过程中，我们可以通过它简化JS的复杂操作、可以不用需要关心兼容性、同时它提供了大量实用的方法。但是需要记住的是，JQ中的思想还是基于原生JS的，它只是一个辅助工具，需要我们正确对待。在我看来，JQ其实可以分为两大内容，一个是选择器，一个是其封装好的方法。下面内容就是简要介绍一下，在实际开发项目中可能会用到的选择器和方法。
在线jquery编辑调试的网站
冲吧，不要停！
06-15 3639
无意中找到一个在线的jquery编辑调试的网站，可能选择jquery版本。好处可能还不止于此，有空看看吧 https://jsfiddle.net/ sample: http://jsfiddle.net/Ln580frh/
jQuery表单元素选择器代码实例
12-08
本文实例为大家分享了jQuery表单元素选择器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> ...
jQuery 选择器项目实例分析及实现代码
12-11
首先废话一句，jQuery选择器真心很强大！ 在项目中遇到这么一个问题easyui的问题 如图所示，当前页面显示的是“原始报文查询”的页面，当时左侧导航栏却选中的是“重发报文查询”。如何让右侧的菜单和左侧的导航实现...
k8s1.16的jenkins部署java项目cicd(cd手动)-kubernetes安装包和详细文档笔记整理
05-28
k8s1.16的jenkins部署java项目cicd(cd手动)-kubernetes安装包和详细文档笔记整理
sja1311.x86_64.tar.gz
05-28
SQLyong 各个版本，免费下载 SQLyog是业界著名的Webyog公司出品的一款简洁高效、功能强大的图形化MySQL数据库管理工具。使用SQLyog可以快速直观地让您从世界的任何角落通过网络来维护远端的MySQL数据库。
debugpy-1.1.0-cp34-cp34m-manylinux1_x86_64.whl
05-28
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
SQLyog-12.5.0-0.x64Community.exe
05-28
SQLyog-12.5.0-0.x64Community
debugpy-1.0.0b12-cp35-cp35m-manylinux1_i686.whl
最新发布
05-28
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
SQLyog-12.1.6-0.x86Community.exe
05-28
SQLyong.exe 各个版本，免费下载 SQLyog是业界著名的Webyog公司出品的一款简洁高效、功能强大的图形化MySQL数据库管理工具。使用SQLyog可以快速直观地让您从世界的任何角落通过网络来维护远端的MySQL数据库。
jquery滑动横向二级菜单代码实例
01-27
以下是一个使用jQuery实现滑动横向二级菜单的代码实例： ```html <!DOCTYPE html> <title>jQuery滑动横向二级菜单 .menu { width: 200px; background-color: #f1f1f1; padding: 10px; } .menu ul { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值