前端-jQuery-选择标签-选择器和筛选器
jQuery选择器和筛选器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery初识</title>
</head>
<body>
<div id="d1">d1</div>
<div class="c1">.c1</div>
<p class="c2">p</p>
<a class="c2" href="">a标签</a>
<!--筛选器-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<!--not-->
<div id="d2">
<p class="c1">div</p>
<p class="c1">div</p>
<p class="c2">div</p>
<p class="c2">div</p>
</div>
<!--:has-->
<div id="d3">
<div style="" style="color: rgb(0, 0, 255);">>
<p>div中的p标签</p>
</div>
<div style="" style="color: rgb(0, 0, 255);">>
<a href="">div中的a标签</a>
</div>
</div>
<!--属性选择器-->
<form action="" id="f1">
<label>用户名:
<input name="username" type="text" disabled>
</label>
<label>密码:
<input name="pwd" type="password">
</label>
<label>篮球:
<input name="hobby" value="basketball" type="checkbox">
</label>
<label>足球:
<input name="hobby" value="football" type="checkbox">
</label>
<label>男
<input name="gender" value="1" type="radio">
</label>
<label>女:
<input name="gender" value="0" type="radio">
</label>
</form>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>
###
上面是练习选择器的html代码，
jQuery选择器
jQuery选择器---id选择器
$("#d1")//这种是返回一个列表，数组，必须要取出来，才是对应的标签
$("#d1")[0]
###
jQuery选择器---属性选择器
$(".c1")----点后面加属性就可以了，任何属性都可以查，
$(".c1")[0]
###
jQuery选择器---标签选择器
$("div")
$("div")[0]//这是找到div标签中的第一个
###
jQuery选择器---选择器的组合使用
上面是三种常用的选择器，这三种可以配合使用
$("a.c2")[0] //这就是取出了属性是c2的a标签
这个很重要，
###
jQuery选择器---所有的选择器
$("*");//找所有的选择器，包括标签， 属性，id，
###
jQuery选择器---组合选择器
$("a,#d1")//这是找到两种标签合并在一起返回，中间用逗号分割
####
jQuery选择器---层级选择器
//子孙选择器 -----空格
$("form input")//这是在form标签的子孙标签中，去查到input标签，
//儿子选择器 ------箭头
$("label>input")//在label的儿子标签中，去查到input标签，
//毗邻选择器 ------加号
$("label+input")//这是找input标签，这个标签和label标签紧挨着
// 弟弟选择器 ----波浪线
$("#p2~li") //这是找到p2标签下面的，所有的和他同级的li标签，
####
jQuery筛选器
//筛选器 ------- 就是先有一堆东西，然后把想要的过滤出来，这就是筛选器，
很多时候筛选器和选择器都是叫做选择器，没有这么大的区分，但是你要知道，还是有点差异的，
####
jQuery筛选器 ---第一个，最后一个，第三个，偶数个，奇数个，
$("ul")//找到ul标签 ----选择器
$("ul li")//找到ul标签下面的所有li标签 ----选择器
$("ul li:first")//找到ul标签下面的第一个li标签
$("ul li:last")//找到ul标签下面的最后一个li标签
$("ul li:eq(2)")//找到ul标签下面的第3个li标签
$("ul li:even")//找到ul标签下面的索引是偶数的li标签
$("ul li:odd")//找到ul标签下面的索引是奇数的li标签
//隔行变色就是这样做的
$("ul li:gt(0)")//找到ul标签下面的索引大于0的li标签
$("ul li:lt(2)")//找到ul标签下面的索引是小于2的li标签
###
jQuery筛选器-not
$("#d2 p:not(.c2)")//移除p标签下面，属性是c2的，移除不满足条件的
###
jQuery筛选器-has
$("#d3 div:has(a)")//找到含有a标签的div
###
jQuery筛选器-属性选择器
//[attribute=value]// 属性等于
//[attribute!=value]// 属性不等于
$("input[name='hobby']")//找到属性是hobby 的输入框
###
jQuery筛选器-表单常用筛选
$(":text")
$("input[type='text']")
//这两种写法是一样的，第一种是简写
/*
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
//表单对象属性
:enabled
:disabled
:checked
:selected
* */
###
jQuery-筛选器2
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>筛选器示例</title>
<style>
.c1 {
height: 200px;
width: 200px;
border-radius: 50%;
background-color: red;
}
.c2 {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li id="l0">l0</li>
<li>l1</li>
<li>l2</li>
<li id="l3">l3</li>
<li>l4</li>
<li>l5</li>
</ul>
<!--父标签-->
<div id="d1">div-1
<div id="d2">div-2
<div id="d3">div-3
<a href="">a标签</a>
</div>
</div>
</div>
<!--兄弟和儿子-->
<div id="dd">
<p>p0</p>
<p>p1</p>
<p id="p2">p2</p>
<p>p3</p>
</div>
<div class="c1"></div>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>
###
jQuery筛选器--上一个，下一个，所有标签，
$("#l3")//这是找到id是l3的这个标签
//这是找到这个标签的上一个
$("#l3").prev();
//这是找到这个标签的下一个
$("#l3").next();
//这是找到这个标签上面所有的标签
$("#l3").prevAll();
//这是找到这个标签下面所有的标签
$("#l3").nextAll();
//这是找到l1下面的，直到找到l3为止，不包含l3
$("#l1").nextUntil("#l3");
###
jQuery筛选器--父标签
//找父标签
$("a").parent()
//找到父标签的父标签，这是一种链式操作
$("a").parent().parent()
//找到所有的父标签
$("a").parents()
//直到找到某一个父标签为止
$("a").parentsUntil("body")
###
jQuery筛选器--子标签
//找到子标签
$("#dd").children()
###
jQuery筛选器--兄弟标签
//找到兄弟标签，上边下面都能找到
$("#p2").siblings()
###
jQuery筛选器--find
// 查找find ------- 这个很重要！！！！！！！
$("div").find("p") //这是找到div标签，在这个结果集里面再去找p标签
####
jQuery操作标签--添加class属性，删除class属性，判断，切换class属性
//添加指定的CSS类名。
$("#p2").addClass("c2");
// 移除指定的CSS类名。
$("#p2").removeClass("c2");
// 判断样式存不存在
$("#p2").hasClass("c2");
// 切换CSS类名，如果有就移除，如果没有就添加。
$("#p2").toggleClass("c2");
####
jQuery操作标签----样式操作实例----灯的点亮和点灭
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>简单的点击事件实现灯点亮和关闭</title>
<style>
.c1 {
height: 200px;
width: 200px;
border-radius: 50%;
background-color: red;
}
.c2 {
background-color: green;
}
</style>
</head>
<body>
<div class="c1"></div>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
<script>
// 第一步：找到要操作的元素
//语法和原生的还是不一样的
$(".c1").click(function () {
//this这是一个dom对象，要转换成为jQuery对象
$(this).toggleClass("c2")
} )
</script>
####
jQuery操作左侧菜单的展示和隐藏的思路
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>左侧菜单作业分解</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="left-menu">
<div class="menu-title">菜单一</div>
<div class="menu-items">
<ul>
<li><a href="">111</a></li>
<li><a href="">222</a></li>
<li><a href="">333</a></li>
</ul>
</div>
<div class="menu-title">菜单二</div>
<div class="menu-items hide">
<ul>
<li><a href="">111</a></li>
<li><a href="">222</a></li>
<li><a href="">333</a></li>
</ul>
</div>
<div class="menu-title">菜单三</div>
<div class="menu-items hide">
<ul>
<li><a href="">111</a></li>
<li><a href="">222</a></li>
<li><a href="">333</a></li>
</ul>
</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 需求分析
// 找到所有的.menu-title标签,绑定点击事件
// 点击事件具体要做的事儿
// 1. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类)
// 2. 把其他的.menu-items隐藏,添加hide类
// 1. 找到所有的.menu-items, 隐藏
// 2. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类)
</script>
</body>
</html>
###
#########################
