javascript选择器有哪些（javascript选择器推荐）

jQuery是JavaScript的一个轻量级扩展库，用于操作CSS、DOM、BOM。它的安装非常简单，就不多啰嗦了，我们先讲讲操作CSS。首先:开发工具是Hbuilder、API是jquery3.6。

jQuery

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

引入API后，再创建一个Script标签，用来写javaScript。

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

1. 类选择器

首先编写HTML文件，创建三个p元素:

    
p-1
		
p-2
		
p-3

然后编写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代码如下:

p1
p2

javaScript代码如下:

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

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

web

下面介绍位置选择器:

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

HTML代码如下:

			
第一个:first
			
偶数:even
		
		
		
			
奇数:odd
		
		
		
			
偶数:even
		
		
		
			
奇数:odd
		

JavaScript代码如下：

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

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

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

HTML代码如下:

c++
			
java
			
javascript
			
python
			

jsp
				 
rust
			

在这段代码中，ID是test的元素为祖元素，下面的

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

ul id="test">
			
java
			
python
			
javaScript
			
hbuilderx
			

java
				
python
			

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