前端选择器的简单介绍

2023-12-07 11 0

jQuery选择器与css选择器,用来选取网页中的元素 示例:$(“h3”).css(“background”,“red”);
获取网页中所有h 3元素的背景
$(“h3”)返回的是jQuery对象
.css是为了jQuery对象设置样式的方法

请列举出css中学习过的几种选择器?

基础选择器
1.标签选择器
2.类选择器
3.id选择器
高级选择器
1.层次选择器
后代选择器 空格
子代选择器 大于号
相邻兄弟选择器 加号
通用兄弟选择器 ~
2.结构伪类选择器
F E:first-child >E元素是F的第一个子元素
F E:last-child
>E元素是F元素的最后一个子元素
F E:nth-child(n)>E元素是F元素的第N个子元素
F E::first - of - type
>选择父元素F中的指定类型的第一个子元素F
F E:last - of - type==>选择父元素F中的指定类型的最后一个子元素F
F E:nth - of - type(n)==>选择指定类型的第n个

jQuery选择器的优势有哪些?

拿到相信的DOM元素之后,可以添加相应的操作;
不用担心其兼容性,它比单纯的css选择器功能更加强大,拥有跨浏览器的兼容性。

jQuery选择器包括几大类?

通过css选择器选取元素:
基本选择器

层次选择器
属性属选择器
通过过滤选择器选择元素:
基本过滤选择器
可见性过滤选择器


基本选择器又包括:
1.标签选择器:
element ,根据给定的标签名汽配元素==> ( " h 2 " ) 选 择 所 有 的 H 2 元 素 2. 类 选 择 器 : . c l a s s , 根 据 给 定 的 c l a s s 匹 配 元 素 = = > ("h2")选择所有的H 2元素 2.类选择器: .class ,根据给定的class匹配元素==> "h2"H22..class,class==>(".title")选取所有class为title的元素
3.ID选择器:
“#” id,根据给定的id来匹配元素==> $ ("#title") 选取id为tiltle的元素
4.并集选择器:selector1,selector2…,将每一个选择器匹配的元素合并后一起返回==> ( " d i v , p , . t i t l e " ) 选 取 所 哟 d i v , p 还 有 类 名 为 t i t l e 的 元 素 5. 全 局 选 择 器 : ∗ , 匹 配 所 有 的 元 素 = = > ("div,p,.title")选取所哟div,p还有类名为title的元素 5.全局选择器:*,匹配所有的元素==> ("div,p,.title")div,ptitle5.,==>("*")选取所有的元素


层次选择器

层次选择器通过DOM元素之间的层次关系来获取元素的
1.后代选择器:子代和父代用空格隔开==>KaTeX parse error: Expected 'EOF', got '#' at position 34: …(“属性”,“属性值”),选取#̲menue下的所有span标签…("#menue>span").css(“属性”,“属性值”),选取#menue的子元素
3.相邻元素选择器:prev+next,选取prev之后的next元素,就只选取一个==> ( " p + d d " ) . c s s ( “ 属 性 ” , “ 属 性 值 ” ) , 选 择 的 是 与 p 相 邻 的 d d 元 素 。 4. 同 辈 选 择 器 , p r e v s i b i n g s , 选 择 的 是 p r e v 之 后 的 s i b i n g s 元 素 = = > ("p+dd").css(“属性”,“属性值”),选择的是与p相邻的dd元素。 4.同辈选择器,prev~sibings,选择的是prev之后的sibings元素==> ("p+dd").css()pdd4.prev sibings,prevsibings==>(“p~dl”).css(“属性”,“属性值”),选择的是p 后面 的所有dl


属性选择器器

【attribute^=value】==>选取给定属性是以某些特定的值开始的元素 ==>KaTeX parse error: Double superscript at position 10: ("[href^='̲en' ]")选取href属性…("[href = ′ . j p g ′ ] " ) 选 择 属 性 值 是 以 . j p g 结 尾 的 元 素 【 a t t r i b u t e = v a l u e 】 选 取 给 定 属 性 是 以 包 含 耨 写 属 性 值 的 元 素 = = > ='.jpg']")选择属性值是以.jpg结尾的元素 【attribute^=value】选取给定属性是以包含耨写属性值的元素==> =.jpg]").jpgattribute=value==>("[href* = ‘txt’]")选取href属性中含有txt的元素。
属性选择器可以根据是否包含有某属性来选取元素;
a标签带有class属性的
$(“news a[class]”).css(“background”,“blue”);
属性选择器可以根据属性的值来选取元素;
class属性值为hot
$(“news a[class = ‘hot’]”).css(“background”,"#ccbcb");
属性选择器可以指定选取不等于属性是某个特定值的元素;
class值不等于hot
$(“news a[class != hot]”).css(“backgroumd”,“c9cbcb”);
根据属性值包含特定的值获取元素
a标签href属性值是以www开头的
$(“news a[ href^ = ‘www’]”).css(“background”,“blue”);
根据属性值包含特定的值以指定值结尾的元素
a标签href属性值以HTML结尾
( " n e w s a [ h r e f ("news a[href ("newsa[href = ‘href’]").css(“background”,“red”);

属性选择器可以指定属性值包含指定值的元素
a标签href属性值包含“k2"的元素
$(“news a[href* = ‘k2’]”).css(“banckground”,“red”);


过滤选择器

通过特定的过滤规则来筛选所需要的元素
主要分类
基本过滤选择器
可见性过滤选择器
表单对象过滤选择器
内容过滤选择器,子元素过滤选择器
基本过滤选择器

  1. :first<>选取第一个元素 <>$(“li:first”)选取所有li元素中的第一个
  1. :last<>选取最后一个元素<>$(“li:last”)选取全部li元素中的最后一个
  1. :not(selector)<>除去所有与给定选择器匹配的元素<>$(“li:not(.three)”)选取class不是three的元素
    4.:even<>选择索引是偶数的所有元素(index从0开始)<> $(“li:even”)选取索引是偶数的所有li元素
    5.:odd <> 选取索引是奇数的所有元素(index 从0 开始) <> $(“li:odd”)选取索引是奇数的所有的li元素

通过位置选取元素的jQuery选择器有哪些?

基本选择器里面的层次选择器就是根据元素的位置来选择的,具体看上面。


使用jQuery如何实现隔行变色的效果?

1.:even<>选择索引是偶数的所有元素(index从0开始)<> $(“li:even”)选取索引是偶数的所有li元素
2.:odd <> 选取索引是奇数的所有元素(index 从0 开始) <> $(“li:odd”)选取索引是奇数的所有的li元素 根据需求选择是偶数行变色还是奇数行变色,选择上面的其中一种方法来实现

通过元素显示状态来选取元素

  1. :visible <> 选取可见的元素 <> $(":visible").show();选取所有可见的元素
  2. :hidden <> 选取所有隐藏的元素 <> $(":hidden").hide();选取所需要的隐藏元素

注意事项

  1. 选择器中的空格: 选择器中的空格书写很规范很严格,多一个空格或者少一个空格,都会影响选择器的效果,所以千万注意啊,特别是平时喜欢打空格让代码看起来更清秀的小伙伴!

注:这些仅仅是个人在预习时所写的一些笔记,其中有错误的地方,请大胆指出,在下感激不尽!

代码编程
赞赏

相关文章

关于红外相机热成像相机的一些sdk使用方法
typedef 函数指针用法
树莓派安装线性代数库 armadillo(debian系统)
树莓派下编译多个.cpp文件
泛在电力物联网、能源互联网与虚拟电厂
树莓派上跑一个opencv小程序(没有使用makefile)