选择器的几种写法以及选择器之间的符号意义

时间:2019-01-22
本文章向大家介绍选择器的几种写法以及选择器之间的符号意义,主要包括选择器的几种写法以及选择器之间的符号意义使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

首先你要有一个JQuery文件 ,然后按以下面这段代码为例:

<!DOCTYPE html>
<html>

<head>
    <title>JQuery</title>
<script src="jquery-3.3.1.js"></script>
</head>

<body>
    <div id="containerId" class="container">
        <div id="boxId" class="box" >div</div>
        <div class="box" a="123">div</div>
        <div id="boxid" name="boxname" class="box">div</div>
    </div>
</body>
<script>

console.log($(".container"))
console.log($(".container .box[a=123]"))
console.log($("div#boxid"))
</script>

</html>

 

ps:id和标签不能以数字开头

 $("选择器"),选择器可以是标签,id,class。

选择器

1. “ ”,例 $(#containerId div) or $(#containerId #boxId)

代表当前选择器内部的所有的div 或者是ID为boxId的节点

2.“+“”例 $(#containerId+div)

代表id为containerId节点同级下面第一个div

3.“~” 例 $(#containerId~div)

代表id为containerId节点同级同级下面所有的div

4.$(".container .box[a=123]")的意思是找到class为container下面的class为box同时属性为a="123"的节点。自定义属性

5.$(".box#boxId") 代表同时满足id为boxId和class为box的节点

JQuery

1.$(".container").find("选择器") 代表class=container为开始节点去寻找下面的节点

2.$(".container").children() or$(".container").parent(),代表class=container为开始节点去找所有子级或所有父级

3.(".container").parent("选择器2")代表class=container为开始节点去找所有子级符合选择器2的节点

4.....没写完,回去补充