javascript选择器有哪些（javascript选择器推荐）
>jQuery是JavaScript的一个轻量级扩展库，用于操作CSS、DOM、BOM。它的安装非常简单，就不多啰嗦了，我们先讲讲操作CSS。首先:开发工具是Hbuilder、API是jquery3.6。
jQuery
先使用script标签引入jQuery代码如下:
<script type=\"text/javascript\" src=\"js/jquery-3.6.0.js\"></script>引入API后，再创建一个Script标签，用来写javaScript。
首先介绍jquery的类选择器，选择器是CSS的基本知识，具体的也不多介绍了。
首先编写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\')然后打开浏览器就有对应的样式了。
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\")因为是设置元素的样式，所以直接使用极简写法，后面的代码可能会与标准写法混用。
HTML5
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的选择器先介绍这么多，有些选择器的代码还没整理好，欲知后事如何，且听下回分析。
相关文章：