欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript选择器有哪些(javascript选择器推荐)

程序员文章站 2023-11-30 13:35:10
jquery是javascript的一个轻量级扩展库,用于操作css、dom、bom。它的安装非常简单,就不多啰嗦了,我们先讲讲操作css。首先:开发工具是hbuilder、api是jquery3.6...

jquery是javascript的一个轻量级扩展库,用于操作css、dom、bom。它的安装非常简单,就不多啰嗦了,我们先讲讲操作css。首先:开发工具是hbuilder、api是jquery3.6。

javascript选择器有哪些(javascript选择器推荐)

jquery

先使用script标签引入jquery代码如下:

<script type="text/javascript" src="js/jquery-3.6.0.js"></script>

引入api后,再创建一个script标签,用来写javascript。

首先介绍jquery的类选择器,选择器是css的基本知识,具体的也不多介绍了。


  1. 类选择器

首先编写html文件,创建三个p元素:

    <p class="c1">p-1</p>
		<p class="c1" id="p2">p-2</p>
		<p class="c2" id="p3">p-3</p>

然后编写javascript代码

$(document).ready(function(){
		$('.c1').css('border','8px solid red')
	})

这个是jquery的基本语法,因为是对dom操作,所以工厂函数里写上document,这里的.c1是选中标签的类为c1的元素,添加它的样式。jquery还有一种极简写法:

$('.c2').css('border','5px solid green')

也就是去掉工厂函数,直接选中元素并添加元素。

2.标签选择器

jquery还有一个标签选择器。也就是在选择器里写对应的标签名

html代码如下:

<p class="c1" id="p1">p1</p>
<p class="c1" id="p2">p2</p>

javascript代码如下:

$('p').css('border','4px solid blue')

然后打开浏览器就有对应的样式了。

javascript选择器有哪些(javascript选择器推荐)

web

下面介绍位置选择器:

jquery的位置选择器可以很快地找到需要的dom元素。注:jquery的集合都是从0开始索引的。

html代码如下:

<div class="div">
			<p>第一个:first</p>
			<p>偶数:even</p>
		</div>
		
		<div class="div">
			<p>奇数:odd</p>
		</div>
		
		<div class="div">
			<p>偶数:even</p>
		</div>
		
		<div class="div">
			<p>奇数:odd</p>
		</div>

javascript代码如下:

$(".div:first").css("background","black")

这就是选择第一个盒模型,并设置样式。

下面介绍后代选择器。后代选择器就是给定一个祖元素然后作用到这个标签的儿子元素、孙子元素等等。后代选择器中间是空格分开。

html代码如下:

<ul id="test">
			<li>c++</li>
			<li>java</li>
			<li>javascript</li>
			<li>python</li>
			<ul>
				 <li>jsp</li>
				 <li>rust</li>
			</ul>
</ul>

在这段代码中,id是test的元素为祖元素,下面的<li>包括子元素<ul>都是这个id为test的元素的后代元素,选中祖元素并设置后代元素的样式。

javascript代码如下:

$("#test li").css("border","1px solid blue")

因为是设置元素的样式,所以直接使用极简写法,后面的代码可能会与标准写法混用。

javascript选择器有哪些(javascript选择器推荐)

html5

javascript选择器有哪些(javascript选择器推荐)

html5

这样就把这个祖先元素下面所有的后代元素都设置了样式。

再介绍子代选择器。子代选择器整体代码与后代选择器差不多,选择器中间使用大于号也就是”>”这个符号。它是选中父元素后,只能作用到该父元素的子元素,对孙子元素没有任何作用。案例如下:

html代码如下:

ul id="test">
			<li>java</li>
			<li>python</li>
			<li>javascript</li>
			<li>hbuilderx</li>
			<ul>
				<!-- 这两个li元素是孙子元素匹配不到 -->
				<li>java</li>
				<li>python</li>
			</ul>
		</ul>

javascript代码如下:

$("#test>li").css("background","yellow")

这就为子代元素设置样式。

jquery的选择器先介绍这么多,有些选择器的代码还没整理好,欲知后事如何,且听下回分析。