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

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

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

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')

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

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

web

下面介绍位置选择器:

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

本文转载自:https://www.gylmap.com

HTML代码如下:


			

第一个:first

偶数:even

奇数:odd

偶数:even

奇数:odd

JavaScript代码如下:

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

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

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

HTML代码如下:

  • c++
  • java
  • javascript
  • python
    • jsp
    • rust

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

  • 包括子元素
      都是这个id为test的元素的后代元素,选中祖元素并设置后代元素的样式。

      JavaScript代码如下:

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

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

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

    HTML5

    HTML5

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

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

    HTML代码如下:

    ul id="test">
    			
  • java
  • python
  • javaScript
  • hbuilderx
    • java
    • python

    JavaScript代码如下:

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

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

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

  • 秒鲨号所有文章资讯、展示的图片素材等内容均为注册用户上传(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考。用户通过本站上传、发布的任何内容的知识产权归属用户或原始著作权人所有。如有侵犯您的版权,请联系我们反馈!本站将在三个工作日内改正。
    (0)

    大家都在看

    品牌推广 在线咨询
    返回顶部