选择器
- jQuery简称js库,是为了简化JavaScript的开发或是DOM的操作等.
- jQuery选择器的作用是用于定位页面元素
特点:
- 就是做得多,写的少
- 兼容各种浏览器
工厂函数
- jQuery的工厂函数是作为jQuery的一入口,通过该函数可以实现定位页面元素,将DOM对象包装成jQuery对象,以及创建页面元素等功能.
jQuery的工厂函数有两种写法:
- $()
- jQuery()
- 说明: “$” 符号与 “jQuery” 单词的含义是一致的
jQuery的约定:
- 在变量前加 $ 以表示jQuery操作
示例代码:
<!-- 引入jQuery文件 -->
<script src="js/jquery.js"></script>
<body>
<button id="btn">按钮</button>
<script>
// DOM操作 (返回DOM对象) - 获取页面中的按钮元素
var btn = document.getElementById('btn');
console.log(btn);
/*
jQuery操作 - 获取页面中的按钮元素
jQuery() - 称为jQuery的工厂函数
* 作用 - 该函数是jQuery操作的一个入口
* 用于定位页面中的元素
* 用法 - 另一种用法是"$()"
* 返回值 - jQuery对象
*/
var btn = jQuery('#btn');
var btn = $('#btn');
console.log(btn);
</script>
</body>DOM对象与jQuery对象
- 所谓DOM对象,就是指由DOM的官方规范提供的对象,或者是通过DOM提供的对象属性或方法定位HTML页面元素得到的对象.
- DOM对象转换为jQuery对象
示例代码:
<script src="js/jquery.js"></script>
</head>
<body>
<button id="btn">克鲁达</button>
<script>
// DOM操作(返回DOM对象
var btn = document.getElementById('btn');
// 1. 将DOM对象转换为jQuery对象 - 就是工厂函数
var $btn = $(btn);
console.log($btn);
// 2. 将jQuery对象转换为DOM对象:
// jQuery对象是一个类数组对象 - 转换方法就是: jQuery对象[索引值]
var btn1 = $btn[0];
console.log(btn1);
// jQuery对象提供了get(index)方法 - index表示索引值
var btn2 = $btn.get(0);
console.log(btn2);
</script>
</body>基本选择器
- 注意 – 所有选择器都是字符串类型
- 注意 – 通配符选择器是匹配所有的
- ID 选择器: 就是通过HTML页面的元素的id属性值定位页面元素
- 元素选择器: 就是通过HTML页面的元素名称定位页面元素
- 类选择器: 就是通过HTML页面元素的class属性定位页面元素
- 通配符选择器: 就是匹配HTML页面中所有的元素
- 组合选择器: 就是将每个选择器匹配的元素的集合
- 说明: 由于jQuery对象是类数组对象,即使匹配的元素只有一个,返回的结果依旧是类数组对象.
- 备注: 在jquery中使用选择器的时候是没有优先级别的
示例代码:
<script src="js/jquery.js"></script>
</head>
<body>
<div id="d1">一花一世界</div>
<div id="d2" class="yy">一笑一人生</div>
<script>
// ID属性选择器 - 匹配指定ID属性值的元素
console.log($('#d1'));
// 类选择器 - 匹配所有指定类名的元素
console.log($('.yy'));
// 元素选择器 - 匹配所有指定元素木那个的元素
console.log($('div'));
// 通配符选择器 - 匹配页面中所有的元素
console.log($('*'));
// 组合选择器 - 多个选择器之间使用逗号分隔(并集) - 并集就是符合一个就好使
console.log($('#d1','.yy'));
// 组合选择器 - 多个选择器之间没有任何分隔(交集) - 交集就是必须全部符合才好使
console.log($('#d2.yy'));
</script>
</body>层级选择器
- 后代选择器 – 匹配指定祖先元素中的后代元素
- 子选择器 – 匹配指定父元素中的子元素
- 相邻兄弟选择器 – 匹配指定元素的下一个兄弟元素
- 普通兄弟选择器 – 匹配指定元素的下面所有兄弟元素
示例代码:
<title>层级选择器</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="parent">
<div id="child">
<div id="d6"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d4"></div>
<div id="d5"></div>
</div>
<div id="child2">
<div id="d3"></div>
</div>
</div>
<script>
// 查找指定父元素所有的后代div
console.log($('#parent div'));
// 查找指定父元素的所有子级元素
console.log($('#parent>div'));
// 查找指定元素的下一个兄弟元素
console.log($('#d1+div'));
// 查找指定元素的后面所有兄弟元素(不包括前面的)
console.log($('#d1~div'));
// siblings()方法 - 获取指定元素所有的兄弟元素(包括前面的)
console.log($('#d1').siblings('div'));
</script>
</body>基本过滤选择器
- 就是把不要的过滤掉要的留下
- 在指定范围匹配的元素当中进行筛选(本身自己没有层级结构)
示例代码:
<title>基本过滤选择器</title>
<script src="js/jquery.js"></script>
<style>
#animated{
width: 100px;
height: 200px;
background-color: cyan;
position: absolute;
left: 100px;
}
</style>
</head>
<body>
<h1>八百标兵奔北坡</h1>
<h2>炮兵并排北边跑</h2>
<div>一花一世界</div>
<div id="d2">
<div id="child"></div>
</div>
<div></div>
<div></div>
<div>一笑一人生</div>
<div id="animated"></div>
<script>
// 在指定范围内筛选出第一个元素
console.log($('div:first'));
// 在指定范围内筛选出最后一个元素
console.log($('div:last'));
/*
注意 :
* 索引值为偶数时实际上是奇数
* 索引值为奇数时实际上是偶数
* 因为索引值是从 0 开始的
*/
// 在指定范围内筛选出索引值为偶数的元素
console.log($('div:even'));
// 在指定范围内筛选出索引值为奇数的元素
console.log($('div:odd'));
/*
:eq(index) - index表示索引值
*/
// 筛选出等于指定索引值的元素
console.log($('div:eq(0)'));
// 筛选出大于指定索引值的元素
console.log($('div:gt(3)'));
// 筛选出小于于指定索引值的元素
console.log($('div:lt(2)'));
// :header - 表示匹配h1~h6的元素
console.log($(':header'));
function animated() {
/*
slideToggle - 是jQuery提供的动画效果
*/
$('#animated').slideToggle(animated);
}
animated();
// :animated - 表示只能匹配由jQuery实现的动画
console.log($(':animated'));
// 筛选出除属性值为child以外的所有元素
console.log($('div:not("#child")'));
</script>
</body>内容过滤选择器
示例代码:
<title>内容过滤选择器</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div>我是有内容的</div>
<div></div>
<div>
<div id="child"></div>
</div>
<script>
// 匹配到包含指定文本内容的元素
console.log($('div:contains("内容")'));
// 匹配到没有文本内容的元素和没有后代元素的元素
console.log($('div:empty'));
// 匹配到有文本内容的元素和有后代元素的元素
console.log($('div:parent'));
/*
:has() - 表示包含匹配指定选择器元素的父级
[0] - 表示数组的提取
*/
console.log($('div:has("#child")')[0]);
</script>
</body>可见性过滤选择器
:hidden选择器
- 就是匹配到所有不可见的元素
- 不能匹配到CSS样式属性visibility设置为hidden的隐藏元素
- 还能匹配到HTML页面中不做任何显示效果的元素
注意 – 用的时候尽量确定元素类型或指定范围
- 因为要是不指定范围的话它会筛选出页面中所有的隐藏元素(比如:<HTML>,<meta>以及<style>等等)
示例代码:
<title>可见性过滤选择器</title>
<script src="js/jquery.js"></script>
<style>
#d1 {
display: none;
}
#d2 {
visibility: hidden;
}
</style>
</head>
<body>
<div id="d1">一花一世界...</div>
<div id="d2">一笑一人生...</div>
<input type="hidden" value="用户名">
<input type="text" name="username">
<script>
console.log($('hidden'));
</script>
</body>:visible选择器
- 就是匹配到所有可见的元素
匹配CSS样式属性visibility设置为hidden的隐藏元素
- 当visibility设置为hidden时的元素,依旧占有页面空间
- 还能匹配HTML页面中<html>和<body>元素
示例代码:
<title>可见性过滤选择器</title>
<script src="js/jquery.js"></script>
<style>
#d1 {
display: none;
}
#d2 {
visibility: hidden;
}
</style>
</head>
<body>
<div id="d1">一花一世界...</div>
<div id="d2">一笑一人生...</div>
<input type="hidden" value="用户名">
<input type="text" name="username">
<script>
console.log($(':visible'));
</script>
</body>属性过滤选择器
- 就是通过元素的属性过滤掉不要的元素
- 通过属性以及属性的值来筛选
示例代码:
<title>属性过滤选择器</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="username" name="d1" class="mydiv"></div>
<div id="password" name="d2" class="mycls"></div>
<div id="d3"></div>
<div class="myd"></div>
<script>
// 获取到所有元素中所有带有指定属性的元素
console.log($('div[name]'));
// 获取到所有元素中带有指定属性和值的元素
console.log($('div[class=mydiv]'));
// 获取到所有不含有指定属性或不等于特定属性值的元素
console.log($('div[class!=maydiv]'));
// 获取到所有指定元素中以什么什么开头的元素
console.log($('div[class^=my]'));
// 属性过滤选择器组合用法 - 交集(交集就是必须全部符合才好使)
console.log($('div[name=di][class^=my]'));
</script>
</body>子元素过滤选择器
- 在指定的范围内进行子级选择器过滤
需要注意的是:
nth-child(index)
- 作用 – 匹配当前元素作为第几个子元素
index是从 1 开始的,表示第几个
- 和索引值不同的是索引值是从 0 开始的
示例代码:
<title>子元素过滤选择器</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="parent">
<div id="d1">我是第一个子元素...</div>
<div id="d2">我是中间的子元素...</div>
<div id="d3">我是最后一个子元素...
<div id="child">我是id为d3的唯一的子元素...</div>
</div>
</div>
<script>
// :first-child - 表示当前匹配到的是第一个子元素
console.log($('div:first-child'));
// :last-child - 表示当前匹配到的是最后一个子元素
console.log($('div:last-child'));
/*
nth-child(index)
* 作用 - 匹配当前元素作为第几个子元素
* index - 表示第几个
* 注意 - index是从 1 开始的,表示第几个
* 和索引值不同的是索引值是从 0 开始的
*/
console.log($('div:nth-child(2)'));
// only-child - 表示获取到某个父级元素中唯一一个子元素的元素
console.log($('div:only-child'));
</script>
</body>表单对象过滤选择器
示例代码:
<title>表单对象过滤选择器</title>
<script src="js/jquery.js"></script>
</head>
<body>
<form action="#">
<input type="text" disabled>
<input type="checkbox">亚古兽
<input type="checkbox" checked>加鲁鲁兽
<select>
<option>黑龙江</option>
<!-- selected - 表示被选中的 -->
<option selected>佳木斯</option>
<option>哈尔滨</option>
</select>
</form>
<script>
// :disabled - 表示匹配到不可用的元素
console.log($('input:disabled'));
// :checked - 表示匹配到所有被选中的元素
console.log($('input:checked'));
// :selected - 表示匹配到选中的<option>元素
console.log($('option:selected'))
</script>
</body>