Web-Lesson09-jQuery
一、认识以及引入jquery
1.jquery是什么
jquery是一种新的javascript库。jq是用js写的，能用jq实现的，用js都可以实现。
jq的API只对自己开放，jq不能用js的API，js也不能用jq的API。
2.引入方式
script标签引入
网络调用
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
本地调用
<script src="jquery.js的本地地址"></script>
3.常用方法
jQuery $ 传字符串/选择器/尖括号标签的形式/函数/object
var $box = $("#box");
$box.html(999);
$("#box").html("<em>拉拉</em>");
jq里的html相当于js里的innerHTML
var obj = $("<em>哈哈</em>");
$("#box").append(obj);
var $p = $("p");
$p.html("xxxx"); //改变所有p标签
二、jq和js的相互转换
js转jq
var oBox = document.getElementById("box");
$(oBox).html("xxxxx"); //加$() 把js对象转为jq对象，调用jq的接口
jq转js
var $p = $("#box p");
$p.html("666"); //jq正常规范使用
$p[0].innerHTML = "666"; //把jq对象转为js对象，调用js的接口
$p.get(1).innerHTML = "777"; //把jq对象转为js对象，调用js的接口
jq转特定的jq
var $p = $("#box p");
$p.eq(1).html("88"); //eq(i)相当于jq加下标，调用特定的jq对象
三、jq的遍历
$("#box p").each(function(n){ //第一个参数默认遍历的序号，n就是p标签下标
this.innerHTML = "555";
$(this).html("我是" + n + n + n)
});
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <div id="box"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </div> <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script> <script> $("#box p").each(function (n) { $(this).html("我是"+n+n+n+n); }); </script> </body> </html>
演示结果：
四、操作属性
attr 设置/获取 标签属性
prop 设置/获取 标签属性 废除
removeAttr 移除标签属性
removeProp 废除属性
var $box = $("#box");
alert($box.attr("class"));//读操作
$box.attr("class","zidingyi");
$box.attr("tz","py");
$box.removeAttr("class");
addClass 如果没有设置class如果有就添加class 例：class = "aa bb";两个class以空格隔开
removeClass 如果没有值，清除所有class的值，class属性还在，如果传入classname，则删除该classname
toggleClass 有值则删除，没有则添加（操作classname）
var $p = $("#box p");
$p.addClass("bb cc vv");
$p.removeClass();
$p.removeClass("bb");
$p.toggleClass("on");
在jq里，如果没有设置下标，设置某个值的时候，一般自带遍历（设置所有）；获取某个值的时候，一般获取第一个
jq js
html() innerHTML
text() innerText
val() value
五、操作样式
添加一个样式
$("#box").css("height","300px");
.width()
.height()
添加多个样式
$("#box").css({
height: "300px"
width: "100px"
});
添加的样式，左边的key可以不加双引号，右边的value必须添加双引号
innerWidth() / innerHeight //算了padding outerWidth() / outerHeight //算了 padding+border$("#box").outerWidth();
$("#box").offset().top; //到浏览器窗口上边的距离
$("#box").offset().left; //到浏览器窗口左边的距离
$("#box").position().top; //到父级元素上边的距离
$("#box").position().left; //到父级元素左边的距离
box的边框图：
box1的边框图：
打印他们的部分属性：
六、scroll
scrollTop() 如果有值，设置滚动条高度，没有值，则获取滚动条高度
scrollLeft() 如果有值，设置滚动条宽度，没有值，则获取滚动条宽度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body style="width: 1000px;height: 2000px"> <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script> <script> $(document).click(function () { console.log("滚动高度" + $(this).scrollTop()); console.log("滚动宽度" + $(this).scrollLeft()); }); $(document).click(function () { $(this).scrollTop(1000); $(this).scrollLeft(500); }); </script> </body> </html>
七、append
添加子元素，可以是标签，文本，js对象，jq对象
append 添加在子元素列表末尾
prepend 添加在子元素列表开头
获取到的子元素，添加后，原来的被消除。
var oB = document.getElementsByTagName("b")
$("#box").append(oB);
$("#box").append($(oB));
appendTo 添加在子元素列表末尾，作用同append，写法不同
prependTo 添加在子元素列表开头
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <div id="box"> <p>我是已经存在的</p> </div> <b>我是在外面的</b> <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script> <script> /* 添加子元素 可以是标签、文本、js对象、jq对象 append prepend appendTo prependTo */ $("#box").append("<em>来打我呀1</em>"); $("#box").prepend("<em>来打我呀2</em>"); $("#box").append("来打我呀3"); // var oB = document.getElementsByTagName("b"); // $("#box").append(oB); // $("#box").append( $(oB)); $("<em>hahah</em>").appendTo($("#box")); </script> </body> </html>
结果： 
看页面布局：
八、before after
添加兄弟元素，下面两对效果相同，使用方式不一样
after/before
insertAfter/insertBefore
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <div id="box">111</div> <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script> <script> /* 添加兄弟元素 after before insertAfter insertBefore */ $("#box").before("<b>我是before</b>"); $("#box").after("<b>我是after</b>"); $("<b>我是insertAfter</b>").insertAfter($("#box")); $("<b>我是Before</b>").insertBefore($("#box")); </script> </body> </html>
结果：
九、wrap
wrap 给每个元素添加一个父元素
unwrap 删除元素的父元素
wrapAll 给所有子元素添加一个父元素，该父元素包起来所有子元素
wrapInner 给该标签的内容添加一个标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <div id="box"> <p>001</p> <p>002</p> <p>003</p> </div> <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script> <script> /* wrap 给每个元素添加一个父元素 unwrap 删除元素的父元素 wrapAll 给子元素添加一个父元素都包起来 wrapInner */ $("#box p").wrap("<div></div>"); $("#box p").unwrap(); $("#box p").wrapAll("<div></div>"); $("#box p").wrapInner("<em></em>"); </script> </body> </html>
看运行后的结构：
十、empty
empty 清空子节点
remove 移除自己（不保留数据和事件）
detach 移除自己（保留数据和事件）
三个效果对比
十一、筛选
eq 寻找一组里的元素坐标 $("body").find("div").eq(2).addClass("blue");
hasClass 检查当前的元素是否含有某个特定的类，如果有，则返回true。否则返回false
children 找儿子 可以不传参数
find 不传参，默认不找 传参的话就找符合参数的后代
parent
parents (".show")找到名字叫做show的祖先
siblings 不传参 对所有兄弟有效 传参 所有兄弟按照参数筛选出合格的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <div id="box" class="show"> <p>1</p> <p class="box">2</p> <div> <p>3</p> <p>4</p> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script> <script> /* eq 寻找一组里的元素坐标 $("body").find("div").eq(2).addClass("blue"); hasClass 检查当前的元素是否含有某个特定的类，如果有，则返回true。否则返回false children 找儿子 可以不传参数 find 不传参，默认不找 传参的话就找符合参数的后代 parent 不需要参数 parents(".show")找到名字叫做show的祖先 siblings 不传参 所有兄弟 传参 所有兄弟按照参数筛选出合格的 */ console.log($("p").hasClass("box1"));//false console.log($("p").hasClass("box"));//true*/ console.log($("#box").children()); console.log($("#box").children("p")); console.log($("#box").find("p")); console.log($(".box").parent());//只找一个 找爸爸 console.log($(".box").parents());//找所有的祖先 console.log($(".box").parents(".show")); //$("p").siblings().css("color","red"); $("p").siblings(".box").css("color","red"); </script> </body> </html>
结果：
$("p").siblings(".box").css("color","red");效果：
十二、事件
都是函数形式的，去掉on的那种
此方式与js不同，不会存在覆盖的情况
$("#box").click(function(){
alert(111);
});
jq事件绑定，解绑
on绑定单个事件
$("#box").on("click", "li", function(){
alert($(this).index()); //index()在jq里是方法，对应下标
});
on绑定多个事件
$("#box").on({
"click1":fn,
"click2":function(){
},
"click3":function(){
},
});
function fn(){
}
移除事件
$("#box").off("click1"); //移除单个事件
$("#box").off(); //移除该标签全部事件
hover 移入，移出 如果hover方法里只有一个函数，就默认移入和移出都响应；要是有两个，前面的默认移入，后边的默认移出方法
$("#box").hover(function(){
},function(){
}
);
十三、动画
show 显示 不传参数，直接显示，传参数（整数毫秒）时间渐渐显示（逐渐放大，透明度加深逐渐显示）
hide 隐藏 不传参数，直接隐藏，传参数（整数毫秒）时间渐渐隐藏（逐渐缩小，透明度变浅逐渐消失）
fadeIn 显示 淡入淡出 传参数（整数毫秒）控制淡入淡出的时间
fadeOut 隐藏 淡入淡出
fadeTo 两个参数，第一个时间（整数毫秒），表示变化时间快慢，第二个表示变化的透明度
slideDown 从上向下显示
slideUp 从下向上隐藏
toggle
slideToggle
