jQuery的使用:引入jQuery文件
<script src="jquery-1.11.3.js" type="text/javascript"></script>
jQuery对象
1、什么是jQuery对象
jQuery对象是由jQuery对页面元素进行封装后的一种体现。
jQuery中所提供的所有操作都只针对jQuery对象,其他对象(DOM对象)无法使用。
2、工厂函数-$()
想要获取jQuery对象的话,则必须使用工厂函数$()。
在$()中允许传递一个选择器或者DOM对象作为参数,$()能够将选择器 和 DOM对象全部封装成jQuery对象再进行返回。
3、DOM对象和jQuery对象之间的转换
DOM对象:不能使用jQuery提供的操作
jQuery对象:不能使用DOM提供的操作
1、将Dom对象转换为jQuery对象
语法:var 变量 = $(DOM对象);
注意:所有的对象在起名的时候,最好在变量前加上$,主要用于和DOM对象的区分。
<div id="main">这是id为main的div</div>
<script>
//1、通过DOM的操作,得到id为main的元素
var main = document.getElementById("main");
//2、再将其转换为jQuery对象
var $main = $(main);
$main.html("转换为JQ对象成功!!!");
</script>
2、将jQuery对象转换为Dom对象
1.var dom对象 = jQuery对象[0];
2.var dom对象 = jQuery对象.get(0);
<div id="main">这是id为main的div</div>
<script>
//1、使用jQuery获取id为main的元素
var $main = $("#main");
//2、再将其转换为DOM元素
//var m = $main[0];
var m = $main.get(0);
m.innerHTML="转换为DOM对象成功!!";
</script>
jQuery选择器
1、作用:获取页面上的元素们,返回值都是由jQuery对象所组成的数组
语法:$("选择器")
2、常用选择器
<!-- 1.基本选择器 -->
<div id="main">
<p id="p1" class="c1">床前明月光</p>
<p id="p2" class="c2">疑是地上霜</p>
<p id="p3" class="c2">举头望明月</p>
<p id="p4" class="c3">低头思故乡</p>
<p id="p1" class="c2">更上一层楼</p>
</div>
<script>
// ID选择器:返回页面中指定ID值的元素。
var a = $("#p1"); //返回值:单个元素的组成的集合
console.log(a); //结 果:[p#p1.c1]
console.log(typeof a, a.length, a.html()); //结 果:object 1 床前明月光
// 类选择器:返回页面中指定className的所有元素。className是值。
var b = $(".c2"); //返回值:集合元素
console.log(b); //结 果:[p#p2.c2, p#p3.c2, p#p1.c2, prevObject: w.fn.init(1)]
console.log(typeof b, b.length, b.html()); //结果:object 3 疑是地上霜
// 元素选择器:返回页面中指定标记的所有元素。
var c = $("p"); //返回值:集合元素
console.log(c); //结 果:[p#p1.c1, p#p2.c2, p#p3.c2, p#p4.c3, p#p1.c2, prevObject: w.fn.init(1)]
console.log(typeof c, c.length, c.html()); //结 果:object 5 床前明月光
// 群组选择器/复合选择器:返回满足函数内所有选择器的函数们。
// 用法: $("div,span,p.myClass")
// 说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内。其中p.myClass是表示匹配元素。
var d = $("#p1, #p2, .c3"); //返回值:集合元素
console.log(d); //结 果:[p#p1.c1, p#p2.c2, p#p4.c3, p#p1.c2, prevObject: w.fn.init(1)]
console.log(typeof d, d.length, d.html()); //结 果:object 4 床前明月光
</script>
<!-- 2.层级选择器 -->
<div id="main">
<p id="p1" class="c1">床前明月光</p>
<p id="p2" class="c2">疑是地上霜</p>
<p id="p3" class="c2">举头望明月</p>
<p id="p4" class="c3">低头思故乡</p>
<div id="p1" class="c2">
<p id="p1" class="c2">欲穷千里目</p>
<p id="p6" class="c4">更上一层楼</p>
<input class="form-control" name="title" id="title">
</div>
</div>
<script>
// 后代选择器:$("selector1 selector2")
var a = $("#main #p1");
var b = $("#main .c2");
var c = $("#main p");
console.log(a); //结果:[p#p1.c1, div#p1.c2, p#p1.c2, prevObject: w.fn.init(1)]
console.log(b); //结果:[p#p2.c2, p#p3.c2, div#p1.c2, p#p1.c2, prevObject: w.fn.init(1)]
console.log(c); //结果:[p#p1.c1, p#p2.c2, p#p3.c2, p#p4.c3, p#p1.c2, p#p6.c4, prevObject: w.fn.init(1)]
console.log(typeof a, a.length, a.html()); //结果:object 3 床前明月光
console.log(typeof b, b.length, b.html()); //结果:object 4 疑是地上霜
console.log(typeof c, c.length, c.html()); //结果:object 6 床前明月光
// 子代选择器:$("selector1>selector2")
var a = $("#main>#p1");
var b = $("#main>.c2");
var c = $("#main>p");
console.log(a); //结果:[p#p1.c1, div#p1.c2, prevObject: w.fn.init(1)]
console.log(b); //结果:[p#p2.c2, p#p3.c2, div#p1.c2, prevObject: w.fn.init(1)]
console.log(c); //结果:[p#p1.c1, p#p2.c2, p#p3.c2, p#p4.c3, p#p1.c2, prevObject: w.fn.init(1)]
console.log(typeof a, a.length, a.html()); //结果:object 2 床前明月光
console.log(typeof b, b.length, b.html()); //结果:object 3 疑是地上霜
console.log(typeof c, c.length, c.html()); //结果:object 4 床前明月光
// 相邻兄弟选择器:$("selector1+selector2")
// 作用:匹配紧紧跟在selector1后面且满足selector2选择器的元素
var a1 = $("#p1+#p2");
var a2 = $("#p1+#p3");
var a3 = $("#p1+#p6");
var b1 = $("#p1+.c2");
var c1 = $("#p1+p");
console.log(a1); //结果:[p#p2.c2, prevObject: w.fn.init(1)]
console.log(a2); //结果:[prevObject: w.fn.init(1)]
console.log(a3); //结果:[p#p6.c4, prevObject: w.fn.init(1)]
console.log(b1); //结果:[p#p2.c2, prevObject: w.fn.init(1)]
console.log(c1); //结果:[p#p2.c2, p#p6.c4, prevObject: w.fn.init(1)]
console.log(typeof a1, a1.length, a1.html()); //结果:object 1 疑是地上霜
console.log(typeof a2, a2.length, a2.html()); //结果:object 0 undefined
console.log(typeof a3, a3.length, a3.html()); //结果:object 1 更上一层楼
console.log(typeof b1, b1.length, b1.html()); //结果:object 1 疑是地上霜
console.log(typeof c1, c1.length, c1.html()); //结果:object 2 疑是地上霜
// 通用兄弟选择器:$("selector1~selector2")
// 作用:匹配selector1后面所有满足selector2选择器的元素
var a1 = $("#p1~#p2");
var a2 = $("#p1~#p3");
var a3 = $("#p1~#p6");
var b1 = $("#p1~.c2");
var c1 = $("#p1~p");
console.log(a1); //结果:[p#p2.c2, prevObject: w.fn.init(1)]
console.log(a2); //结果:[p#p3.c2, prevObject: w.fn.init(1)]
console.log(a3); //结果:[p#p6.c4, prevObject: w.fn.init(1)]
console.log(b1); //结果:[p#p2.c2, p#p3.c2, div#p1.c2, prevObject: w.fn.init(1)]
console.log(c1); //结果:[p#p2.c2, p#p3.c2, p#p4.c3, p#p6.c4, prevObject: w.fn.init(1)]
console.log(typeof a1, a1.length, a1.html()); //结果:object 1 疑是地上霜
console.log(typeof a2, a2.length, a2.html()); //结果:object 1 举头望明月
console.log(typeof a3, a3.length, a3.html()); //结果:object 1 更上一层楼
console.log(typeof b1, b1.length, b1.html()); //结果:object 3 疑是地上霜
console.log(typeof c1, c1.length, c1.html()); //结果:object 4 疑是地上霜
// 附加:选择器
// 后代选择器:$("s1 s2)
$("#father p").css("backgroundColor", "pink");
// 子代选择器:$("s1>s2")
$("#father>p").css("backgroundColor", "blue");
// 交集选择器:$("s1s2")
$("div.red").css("backgroundColor", "red");
// 并集选择器:$("s1,s2")
$(".green, #green").css("backgroundColor", "green");
</script>
<!-- 3.基本过滤选择器:过滤选择器通常都会配合着其他的选择器一起使用 -->
<div id="main">
<p id="p1" class="c1">床前明月光</p>
<p id="p2" class="c2">疑是地上霜</p>
<p id="p3" class="c2">举头望明月</p>
<p id="p4" class="c3">低头思故乡</p>
<div id="p1" class="c2">
<p id="p1" class="c2">欲穷千里目</p>
<p id="p6" class="c4">更上一层楼</p>
<input class="form-control" name="title" id="title">
</div>
</div>
<script>
// 1、:first:只匹配一组元素中的第一个元素
var a1 = $("p:first");
console.log(a1); //结果:[p#p1.c1, prevObject: w.fn.init(1)]
console.log(typeof a1, a1.length, a1.html()); //结果:object 1 床前明月光
// 2、:last:只匹配一组元素中的最后一个元素
var a2 = $("p:last");
console.log(a2); //结果:[p#p6.c4, prevObject: w.fn.init(1)]
console.log(typeof a2, a2.length, a2.html()); //结果:object 1 更上一层楼
// 3、:not("selector"):在一组元素中,将满足selector选择器的元素排除出去
var a3 = $("p:not('#p1')");
console.log(a3); //结果:[p#p2.c2, p#p3.c2, p#p4.c3, p#p6.c4, prevObject: w.fn.init(1)]
console.log(typeof a3, a3.length, a3.html()); //结果:object 4 疑是地上霜
// 4、:odd:匹配 偶数行 元素(奇数下标)
var b1 = $("p:odd");
console.log(b1); //结果:[p#p2.c2, p#p4.c3, p#p6.c4, prevObject: w.fn.init(1)]
console.log(typeof b1, b1.length, b1.html()); //结果:object 3 疑是地上霜
// 5、:even:匹配 奇数行 元素(偶数下标)
var b2 = $("p:even");
console.log(b2); //结果:[p#p1.c1, p#p3.c2, p#p1.c2, prevObject: w.fn.init(1)]
console.log(typeof b2, b2.length, b2.html()); //结果:object 3 床前明月光
// 6、:eq(index):匹配 下标等于 index 的元素
var c1 = $("p:eq(2)");
console.log(c1); //结果:[p#p3.c2, prevObject: w.fn.init(1)]
console.log(typeof c1, c1.length, c1.html()); //结果:object 1 举头望明月
// 7、:gt(index):匹配 下标大于 index 的元素
var c2 = $("p:gt(2)");
console.log(c2); //结果:[p#p4.c3, p#p1.c2, p#p6.c4, prevObject: w.fn.init(1)]
console.log(typeof c2, c2.length, c2.html()); //结果:object 3 低头思故乡
// 8、:lt(index):匹配 下标小于 index 的元素
var c3 = $("p:lt(2)");
console.log(c3); //结果:[p#p1.c1, p#p2.c2, prevObject: w.fn.init(1)]
console.log(typeof c3, c3.length, c3.html()); //结果:object 2 床前明月光
// 9、:header(固定写法)。
// 用法: $(":header").css("background", "#EEE") 返回值 集合元素
// 说明: 匹配如 h1, h2, h3之类的标题元素,这个是专门用来获取h1,h2这样的标题元素。
// 10、:animated(固定写法) 返回值 集合元素
// 说明: 匹配所有正在执行动画效果的元素。
</script>
<!-- 4.属性过滤选择器:依托于html元素的属性来进行元素过滤的 -->
<div id="main" class="main">
<p id="p1" class="c1" name="n1">床前明月光</p>
<p id="p2" class="c2" name="n2">疑是地上霜</p>
<div id="p1" class="c2">
<p id="p3" class="c3" >欲穷千里目</p>
<p id="p4" class="c4" name="n2">更上一层楼</p>
</div>
</div>
<script>
// 1、[attribute]:匹配包含指定属性的元素
var a = $("p[name]");
console.log(a); //结果:[p#p1.c1, p#p2.c2, p#p4.c4, prevObject: w.fn.init(1)]
console.log(typeof a, a.length, a.html()); //结果:object 3 床前明月光
// 2、[attribute=value]:匹配attribute属性值为value的元素
// input[type=text] input[type=password]
var b1 = $("p[name=n2]");
var b2 = $("p[name=n3]");
console.log(b1); //结果:[p#p2.c2, p#p4.c4, prevObject: w.fn.init(1)]
console.log(b2); //结果:[prevObject: w.fn.init(1)]
console.log(typeof b1, b1.length, b1.html()); //结果:object 2 疑是地上霜
console.log(typeof b2, b2.length, b2.html()); //结果:object 0 undefined
// 3、[attribute!=value]:匹配attribute属性值不是value的元素
var c = $("p[name!=n2]");
console.log(c); //结果:[p#p1.c1, p#p3.c3, prevObject: w.fn.init(1)]
console.log(typeof c, c.length, c.html()); //结果:object 2 床前明月光
// 4、[attribute^=value]:匹配attribute属性值是以value字符开头的元素
var d = $("p[name^=n]");
console.log(d); //结果:[p#p1.c1, p#p2.c2, p#p4.c4, prevObject: w.fn.init(1)]
console.log(typeof d, d.length, d.html()); //结果:object 3 床前明月光
// 5、[attribute$=value]:匹配attribute属性值是以value字符结尾的元素
var e = $("p[name$=2]");
console.log(e); //结果:[p#p2.c2, p#p4.c4, prevObject: w.fn.init(1)]
console.log(typeof e, e.length, e.html()); //结果:object 2 疑是地上霜
// 6、[attribute*=value]:匹配attribute属性值中包含value字符的元素
</script>
<!-- 5.子元素过滤选择器 -->
<p id="p1">床前明月光</p>
<p id="p2">疑是地上霜</p>
<p id="p3">举头望明月</p>
<p id="p4">低头思故乡</p>
<div id="dd">
<p id="p5">白日依山尽</p>
<p id="p6">黄河入海流</p>
<p id="p7">欲穷千里目</p>
<p id="p8">更上一层楼</p>
</div>
<script>
// 1、:first-child:匹配属于其父元素中的首个子元素
var a = $("p:first");
var b = $("p:first-child");
console.log(a); //结果:[p#p1, prevObject: w.fn.init(1)]
console.log(b); //结果:[p#p1, p#p5, prevObject: w.fn.init(1)]
// 2、:last-child: 匹配属于其父元素中的最后一个子元素
var c = $("p:last-child");
console.log(c); //结果:[p#p8, prevObject: w.fn.init(1)]
// 3、:nth-child(n):匹配属于其父元素中第n个子元素
var d = $("p:nth-child(2)");
console.log(d); //结果:[p#p2, p#p6, prevObject: w.fn.init(1)]
</script>
<div id="cc">
<p id="p1">床前明月光</p>
<p id="p2">疑是地上霜</p>
<p id="p3">举头望明月</p>
<p id="p4">低头思故乡</p>
</div>
<div id="dd">
<p id="p5">白日依山尽</p>
<p id="p6">黄河入海流</p>
<p id="p7">欲穷千里目</p>
<p id="p8">更上一层楼</p>
</div>
<script>
// 1、:first-child:匹配属于其父元素中的首个子元素
var a = $("p:first");
var b = $("p:first-child");
console.log(a); //结果:[p#p1, prevObject: w.fn.init(1)]
console.log(b); //结果:[p#p1, p#p5, prevObject: w.fn.init(1)]
// 2、:last-child: 匹配属于其父元素中的最后一个子元素
var c = $("p:last-child");
console.log(c); //结果:[p#p4, p#p8, prevObject: w.fn.init(1)]
// 3、:nth-child(n):匹配属于其父元素中第n个子元素
var d = $("p:nth-child(2)");
console.log(d); //结果:[p#p2, p#p6, prevObject: w.fn.init(1)]
</script>
<div id="dd">
<p id="p5">白日依山尽</p>
<p id="p6">黄河入海流</p>
<p id="p7">欲穷千里目</p>
<p id="p8">更上一层楼</p>
</div>
<p id="p1">床前明月光</p>
<p id="p2">疑是地上霜</p>
<p id="p3">举头望明月</p>
<p id="p4">低头思故乡</p>
<script>
// 1、:first-child:匹配属于其父元素中的首个子元素
var a = $("p:first");
var b = $("p:first-child");
console.log(a); //结果:[p#p5, prevObject: w.fn.init(1)]
console.log(b); //结果:[p#p5, prevObject: w.fn.init(1)]
// 2、:last-child: 匹配属于其父元素中的最后一个子元素
var c = $("p:last-child");
console.log(c); //结果:[p#p8, p#p4, prevObject: w.fn.init(1)]
// 3、:nth-child(n):匹配属于其父元素中第n个子元素
var d = $("p:nth-child(2)");
console.log(d); //结果:[p#p6, p#p1, prevObject: w.fn.init(1)]
</script>