基础，层次，选择器
Posted x-i-n
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基础，层次，选择器相关的知识，希望对你有一定的参考价值。
基础，层次，选择器
1.基本选择器
1.标签选择器
$("标签名")
$("p").html() //获取p标签对象，是jquery对象形式的
$("p").length2.类选择器
$(".class值")
3.id选择器
$("#id值")
3.并集选择器 逗号隔开
$(".class值，#id值")
4.交集选择器（同时存在）
$("class值id值")
$("p.myStyle").html()：选中 即是p标签，并且class的值是myStyle
注意：不能出现歧义
错误写法 $(".myStylep").html()
交集选择器 在交接处 只能是.或#开头的选择器
5.全局选择器
$("*")
选中全部元素
2.层次选择器（只取后面的哪些元素）
? 相邻选择器 "+"
? $("选择器1+选择器2")
? 同辈选择器 "~"
? $("选择器1~选择器2")
? 后代选择器 空格
? $("选择器1 选择器2")
? 子代选择器 ">"
? $("选择器>选择器2")
3.属性选择器 [...]
$("[属性名]")
$("[class]") : // 选中全部元素中 有class属性的 元素
$("[属性名=属性值]")
$("[class=xxx]")
$("[class='xxx']")
$("[class!=a]") // 不等于， 包含两种： 有class但值不是a, 没有class
$("[class^=a]") // class以a开头的元素
$("[class$=a]") // class以a结尾的元素
$("[class*=a]") // class有a的元素4.过滤选择器
? 过滤选择器的一些方法 和其他函数类型，例如 $("ul>li:first")等价于$("ul>li").first()
? 有些不同，例如， 可以$("ul>li:odd") ；错误$("ul>li").odd();
:first 最开头那一个
:last 最后那一个
:even 偶数
:odd 奇数
:eq(index) 第index个
:gt(index) >index的全部元素
:lt(index) <index的全部元素
:not(选择器) 除了...以外
:header 选中所有的标题元素 h1 h2
:focus 获取当前焦点的元素
5.可见性选择器
? :visible 选中所有可见的元素
? :hidden 选中所有隐藏的元素
例：
<html>
<head>
<title>my title</title>
<meta charset="utf-8"/>
<!--引用 -->
<script type="text/javascript" src="jQuery/jquery-3.4.1.js">
</script>
<!--使用 -->
<script type="text/javascript" >
//alert("hello");
/*$(document).ready(function(){//加载函数也称初始化函数
alert("hello jquery");
});*/
//当网页中的dom（结构出来了并不需要内容）元素全部加载完毕后 立刻执行
//onload:javascript,初始化函数，当网页中的dom元素（关联图片，视图，资源）全部加载完毕后 立刻执行
/*$(document).ready( function(){
alert("hello js");
});
$(function(){
alert("hello 123");
});
function init()
{
alert("init...");
}*/
$( function(){
var $title = $("#myTitle");
//alert($title.html()+"jquery");
//alert($title[0].innerHTML+"111");
//alert($title.get(0).innerHTML+"222");
//alert( $("p").html());//标签选择器 $("标签名")
//alert( $("p").length);
//alert($(".myTitle").html()+"555");//类选择器
//alert($("#myTitle").html()+"333");//id选择器
//alert($(".myTitle,#myTitle,#myTitle3 ").length );//并集选择器
//alert($("p.myTytle").length );//交集选择器 错误写法$(".myStylep").html()
//alert($("*").length );//全局选择器
//层次选择器+ $("选择器1+选择器2")相邻只取后面的
//alert($("#b+li").html() );
//alert($("#b+li").length);
//同辈选择器~ $("选择器1~选择器2") 同辈只取后面的
//alert($("#b~li").html() );
//alert($("#b~li").length);
//后代选择器 空格 $("选择器1 选择器2")
//alert($("body li").length);
//alert($("body>li").length);//不行
//子代选择器 > $("选择器1>选择器2")
//alert($("ul>li").length);
//属性选择器 [...]
// $("[属性名]") $("[name]"):选中全部元素中 有name属性的元素
//alert($("[class]").html());
//alert($("[class='xxx']").html());//选中class=xxx的
//$("[class !=a]") 不等于 包含两种: 有calss但值不是a 没有class
//$("[class ^=a]") class以a开头的元素
//$("[class $=a]") class以a结尾的元素
//$("[class *=a]") class有a的元素
});
/*function init()
{
var title = document.getElementById("myTitle");
//alert( title.innerHTML );
alert( $(title).html()+"123" );
}*/
</script>
<style>
<!--.myTitle{
color:red;
}-->
</style>
</head>
<!--<body onload="init()">-->
<body >
<p id="myTitle" >你最喜欢的颜色是？</p>
<p class="myStyle" >你最喜欢的颜色是2？</p>
<p id="myTitle3" >你最喜欢的颜色是3？</p>
<ul>
<li>aaa</li>
<li id="b">bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>ee</li>
<li>ff</li>
</ul>
</body >
</html>以上是关于基础，层次，选择器的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript之jQuery-2 jQuery选择器(jQuery选择器基本选择器层次选择器过滤选择器表单选择器)