仅简单总结一下
jquery选择器的名称---------语法说明
- 基本选择器
1.标签(元素)选择器---------$(“html标签名”) 获得所有匹配标签名称的元素
2.id选择器---------$("#id的属性值") 获得与指定id属性值匹配的元素
3.类选择器---------$(".class的属性值") 获得与指定的class属性值匹配的元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-基本选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<span class="female">古力娜扎</span>
<span class="female">迪丽热巴</span>
<span class="female hero">黑寡妇</span>
<span class="male hero">钢铁侠</span>
<span class="male hero">超人</span>
<span id="boss">灭霸</span>
<script>
// 1.获取span标签的jquery对象
console.log($('span'));
// 2.获取class有hero的jquery对象
console.log($('.hero'));
// 3.获得id="boss"的jquery对象
console.log($('#boss'));
</script>
</body>
</html>
- 层级关系选择器
1.后代选择器---------$(“A B”) 选择A元素内部的所有B元素
2.并集选择器---------$(“选择器1,选择器2…”) 获取多个选择器选中的所有元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05-层级关系选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="kangxi">
<span>儿子:雍正</span>
<p>
<span>孙子:乾隆</span>
</p>
</div>
<div>牛顿</div>
<script>
// 1. 获取所有的p,div的文本
console.log($('p,div').text());
// 2. 获取div的后代span的文本
console.log($('#kangxi span').text());
</script>
</body>
</html>
- 属性选择器
1.属性选择器---------$(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器
2.复合属性选择器---------$(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>06-属性选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text" name="username" value="用户名"/><br/>
<input type="text" name="nickname" value="昵称"/><br/>
<script>
// 1.获取type='text'的input标签
console.log($('input[type="text"]'));
// 2.获取type='text' 且 name="nickname" 的input标签
console.log($('input[type="text"][name="nickname"]'));
</script>
</body>
</html>
- 过滤选择器
1.首元素选择器---------first 获得选择的元素中的第一个元素
2.尾元素选择器---------last 获得选择的元素中的最后一个元素
3.偶数选择器---------even 偶数,从 0 开始计数
4.奇数选择器---------odd 奇数,从 0 开始计数
5.指定索引选择器---------eq(index) 指定索引元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>07-过滤选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul>
<li>大娃(红娃)</li>
<li>二娃(橙娃)</li>
<li>三娃(黄娃)</li>
<li>四娃(绿娃)</li>
<li>五娃(青娃)</li>
<li>六娃(蓝娃)</li>
<li>七娃(紫娃)</li>
</ul>
<script>
// 1.获取第一个元素console.log($('li:first').text());
// 2.获取偶数索引元素
console.log($('li:even').text());
// 3.获取指定索引2的元素console.log($('li:eq(2)').text());
</script>
</body>
</html>
- 对象遍历选择器
jq对象jq对象.each(function(index,element){------------------------------------------------------------------------------------})
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-对象遍历</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--jquery对象的遍历 $.each() 用法示例-->
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ul>
<script>
let lis = document.querySelectorAll('li');
// 普通for
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 增强for
for (let li of lis) { console.log(li);
}
console.log(' ')
// jq的for循环
$('li').each(function (index, element) {
// console.log(index);
// console.log(element);
// console.log(element.innerHTML); // 遍历的元素是js对象
// console.log($(element).html()); // 升级为jq对象
// console.log(this); // 当前遍历的元素,相当于element 补充
})
</script>
</body>
</html>