|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery_02_select_02</title>
<!-- 引入Jquery的文件 -->
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
// alert("====");
/* 元素选择器2.
只认标签
*/
console.info("==元素选择器==" + $("li").length);
/* 类选择器
只认class属性
*/
console.info("==类选择器==" + $(".demo1").length);
/* id选择器(id不能重复)
只认id属性
Jquery就是一个容器,里面放的是对象;如果是id选择器,容器的大小肯定是:1;
*/
console.info("==id选择器==" + $("#ul_1").length);
/* 选择器可以任意组合,多个选择器用,隔开 */
console.info("==组合选择器==" + $("li,#ul_1").length);
/* 指定元素下面的所有后代
id:为ul_1,下面有多个少li
==所有后代选择器==6
*/
console.info("==所有后代选择器==" + $("#ul_1 li").length);
/* 所有元素下面的所有子元素(只有孩子,孙子不算)
==所有子选择器==4
*/
console.info("==所有子选择器==" + $("#ul_1 > li").length);
/* 紧跟在.demo2后面的li元素
.demo2的一个弟弟
*/
console.info("==#ul_1 + li==" + $(".demo2 + li").length);
/*
紧跟在.demo2后面的所有li元素
tab键上面的~
*/
console.info("==#ul_1 ~ li==" + $(".demo2 ~ li").length);
/* :first:获取第一个元素 */
console.info("==li:first==" + $("li:first").length + "---" + $("li:first").html());
/* :last:获取最后一个元素 */
console.info("==li:last==" + $("li:last").length + "---" + $("li:last").html());
/* 取反
所有的li不是.demo1的有多少个
如果jquery容器有多个元素,html只取第一个
*/
console.info("==li:not(:.demo1)==" + $("li:not(.demo1)").length + "---" + $("li:not(.demo1)").html());
/* 取得所有jquery容器中偶数的元素
从0开始算,
下标值是0,2,4
个数:1,3,5
*/
console.info("==li:even==" + $("li:even").length + "---" + $("li:even").html());
/* 所有奇数 */
console.info("==li:odd==" + $("li:odd").length + "---" + $("li:odd").html());
/* 取得指定位置的元素
li:eq(2):返回值是Jquery对象
get(index):返回值是div元素
:gt:是大于索引的元素
:lt:是小于索引的元素
*/
console.info("==li:eq(2)==" + $("li:eq(2)") + "---" + $("li:eq(2)").html());
});
</script>
</head>
<body>
<ul class="demo1" id="ul_1">
<li>li_1</li>
<li class="demo2">li_2</li>
<li class="demo1">
li_3
<ul>
<li>li_3_1</li>
<li>li_3_2</li>
</ul>
</li>
<li>li_4</li>
</ul>
<input type="text" value="aaa">
<input type="text" value="bbb">
<div>这都是错</div>
<!--
获取焦点
val:是取得文本框的值
onmouseover:鼠标划过天空的事件
-->
<input type="button" value="测试" οnmοuseοver="alert($('input:focus').val())">
</body>
</html>
|