一、JQuery对象与DOM对象
1、jQuery中得到顶级对象
jquery—-可以用$符号来代替,为了方便jQuery(jQuery)中的js文件中的所有东西都是jquery或者都是$符号下的
2、知识点
(1)网页开关灯的实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .cls{ background-color: black } </style> </head>
<body> <input type="button" value="关灯" id="btn"> <script src="./jquery.min.js"></script> <script> $('#btn').click(function () { if ($("body").hasClass("cls")) { $("body").removeClass("cls"); } else { $("body").addClass("cls") } }); $('#btn').click(function(){ if($(this).val()=="关灯"){ $("body").css("backgroundColor","black"); $(this).val("开灯") }else{ $("body").css("backgroundColor",""); $(this).val("关灯") } }) </script> </body> </html>
|
知识点
jquery中元素样式的操作方式:
- jQuery对象.css(“css的属性名字”,”属性的值”);—->设置元素的样式属性值
( 注意:
.css(“属性”,”值”);属性的写法可以是DOM操作中的js写法,也可以是css中的写法
)
- 类样式的方法
.hadclass(“cls”):有无样式
. removeclass(“cls”): 移除样式
. addclass(“cls”): 增加样式
.toggleClass(“cls”):切换类样式
其他:
- jQuery对象.val();——-表示的是获取该元素的value属性值
- jQuery对象.val(“值”);—-表示的是设置该元素的value属性
(2)页面加载的不同办法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.1.js"></script> <script> $(window).load(function () { console.log("小苏好帅"); }); $(window).load(function () { console.log("小样好帅"); }); $(document).ready(function () { console.log("1"); }); $(document).ready(function () { console.log("2"); }); jQuery(function () { console.log("页面加载111") }); jQuery(function () { console.log("页面加载222") }); $(function () { console.log("lala") }); $(function () { console.log("哈哈哈") }); </script> </head> <body> </body> </html>
|
二三四比一快,建议使用四
(3)获取元素的方法
DOM作用:操作页面的元素
1 2 3 4 5 6 7 8 9 10 11 12 13
| * DOM中获取元素方式: * 根据id获取元素 * document.getElementById("id属性的值"); * 根据标签名字获取元素 * document.getElementsByTagName("标签名字"); * 根据name属性获取元素 * document.getElementsByName("name属性的值"); * 根据类样式名字获取元素 * document.getElementsByClassName("类样式的名字"); * 根据选择器获取元素 * document.querySelector("选择器");---->id选择器,类选择器,标签选择器...一个 * document.querySelectorAll("选择器");多个的
|
jQuery中获取元素的方式:
(4)选择器
1> 基本选择器
1 2 3 4 5 6 7 8 9 10 11
| * id选择器 * $("#id属性的值")---->某个元素 * 标签选择器 * $("标签名字")------>多个元素或者是某个元素 *类选择器 *$(".类样式的名字")---某个或者是多个 .css("属性","值");-----设置某个元素的css样式属性值 * 交集选择器 标签名.类样式的名字 * 并集选择器 选择器,选择器,选择器...
|
2> 层次选择器
1 2 3 4 5
| 层次选择器 $("选择器 选择器");======>$("#dv span") 后代选择器 $("选择器>选择器");======>$("#dv span") 子代选择器,直接的子代 $("选择器~选择器");======>$("#dv span") 后面的索引兄弟元素 $("选择器+选择器");======>$("#dv span") 相邻的后面的第一个兄弟元素
|
3>奇偶选择器
奇:old
偶:even
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul { list-style-type: none; 200px; position: absolute; left: 500px; } ul li {< 大专栏 jquery复习1/span> margin-top: 10px; cursor: pointer; text-align: center; font-size: 20px; } </style> <script src="jquery-1.12.1.js"></script> <script> $(function () { $("#btn").click(function () { $("#uu>li:odd").css("backgroundColor","yellow"); $("#uu>li:even").css("backgroundColor","red"); }); }); </script> </head> <body> <input type="button" value="隔行变色" id="btn"/> <ul id="uu"> <li>乔峰:降龙十八掌</li> <li>张无忌:乾坤大挪移</li> <li>段誉:鳞波微步</li> <li>丁棚:天外流星贱</li>
<li>张三丰:太极掌</li> <li>段飞:极乐神功</li> <li>云飞扬:天馋功</li> <li>杨过:黯然销魂掌</li> <li>那谁谁:如来神掌</li> <li>孟星魂:流星蝴蝶剑</li> <li>楠哥:少女萌萌拳</li> </ul> </body> </html>
|
效果
4>索引选择器
.index()方法—->当前这个元素的索引
:eq(索引值)—->选择器—对应索引的元素
:lt(索引值)—小于索引值的索引元素
:gt(索引值)—大于索引值的所有元素
:gt(索引值1):lt(索引值2)—大于索引值1的所有元素之后,从索引值0开始,再找小于索引值2的元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| <script> $(function () { $("#left>li").mouseenter(function () { var index=$(this).index(); $("#center>li").hide(); $("#center>li:eq("+index+")").show(); }); $("#right>li").mouseenter(function () { var index=$(this).index()+9; $("#center>li").hide(); $("#center>li:eq("+index+")").show(); }); });
|
(5)方法总结
1 2 3 4 5 6 7 8 9
| * .val();----设置或者是获取表单标签的value属性值 * .text();----设置或者是获取标签中的文本内容---就相当于DOM中innerText * .css();-----设置元素的css样式属性值 * .html();----设置或者是获取标签中的html内容---就相当于DOM中innerHTML * .hide();----设置元素隐藏,括号中可以写数字,表示毫秒 * .show();----设置元素显示,括号中可以写数字,表示毫秒 * .stop();----停止当前的动画
|
(6)获取其他兄弟元素的方法
1 2 3 4 5 6 7 8 9 10
| $("#three").prev("li").css("backgroundColor","yellow");
$("#three").prevAll("li").css("backgroundColor","yellow")
$("#three").next("li").css("backgroundColor","yellow")
$("#three").nextAll("li").css("backgroundColor","yellow")
$("#three").parent().css("backgroundColor","yellow")
|
(7)链式编程
断链–对象使用方法后返回来的不是之前的对象了,那么此时就叫断链,也就不能再链式编程了,如何解决?在断链位置直接使用end()方法,内部会帮助我们自动的修复断链
1
| $(this).prevAll.css("backgroundColor","yellow").end().nextAll().css("backgroundColor","red");
|
(8)动画的相关方法
三组基本动画
1> show和hide
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| $(function () { $("#btn1").click(function () { $("#dv").show(5000,function () { alert("完了"); }); }); $("#btn2").click(function () { $("#dv").hide(5000,function () { alert("好了"); }); }); });
|
2> slideUp,slideDown ,slideToggle() 参数一样
slideUp:滑入
slideDown :滑出
slideToggle() :切换
1 2 3 4 5 6 7 8 9 10
| $(function(){
$("#btn1").click(function(){ $("#dv").slideUp(); }); $("#btn2").click(function(){ $("#dv").slideDown(); }); });
|
3> fadeIn(),fadeOut(),fadeToggle() 淡入,淡出,切换
自定义动画