jQuery是JavaScript的一个轻量级扩展库，用于操作CSS、DOM、BOM。它的安装非常简单，就不多啰嗦了，我们先讲讲操作CSS。首先:开发工具是Hbuilder、API是jquery3.6。
JQuery是JavaScript的轻量级扩展库，用来操作CSS，DOM，BOM。它的安装很简单，先说操作CSS。首先，开发工具是Hbuilder，API是jquery3.6。
框架
使用脚本标记引入jQuery代码，如下所示:
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
引入API后，创建一个脚本标签来编写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')
然后打开浏览器就有对应的样式了。
然后打开浏览器，会有相应的样式。
网
这是位置选择器:
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的元素是祖先元素，下面的<>
JavaScript代码如下:
$("#test li").css("border","1px solid blue")
因为是设置元素的样式，所以直接使用极简写法，后面的代码可能会与标准写法混用。
因为是设置元素的样式，所以直接用了极限速记法，下面的代码可能会和标准写法混在一起。
HTML5
HTML5
HTML5
因此，该祖先元素下的所有后代元素都被样式化。
然后介绍子选择器。子选择器的整体代码与子选择器类似，选择器中间使用了大于号，即”& gt”这个符号。它是一个子元素，在父元素被选中后只能作用于父元素，而对孙子元素没有影响。案例如下:
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的选择器一开始就介绍了这么多。有些选择者代码还没有整理出来。欲知后果如何，且听下回分解。
本文来自早川希奈子投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/492167.html
微信扫一扫 
