前端--再遇jQuery
一.属性
属性(如果你的选择器选出了多个对象,那么默认只会返回第一个属性)
attr(属性名|属性值)
--一个参数是获取属性的值,两个参数是设置属性值
--点击图片加载示例
removeattr(属性名)
--删除属性的值
prop(属性名|属性值)
--属性的返回值是布尔类型
--单选,反选,取消的栗子
removeprop(属性名)
--删除属性的值
循环:each(两种循环示例)
--$.each(数组/对象,function(i,v){ })
--$("div").each(function( ){ })
css类
--addclass 添加类属性
--removeclass 移除类属性
--toggleclass 开关|切换(有就移除,没有就添加)
html代码相关/文本/值
没有参数就是获取对应的值
有参数就是设置对应的值
--.html() 添加html标签 .html("<span>哈哈哈</span>")
--.text() 添加文本 .text("哈哈哈")
--.val()
input:一个参数,获取的是input框里的值
checkbox:一个参数,获取的是value的值
select:
单选:获取值
多选:得到的是一个数组,设置的时候也要是数组
二,示例图片
1.attr
(1).得到属性和设置属性的值
(2).设置自定义属性值
2.removeattr
3.prop
4.removeprop
三.jquery中循环的两种方式
// 方式一 li = [11,22,33]; $.each(li,function (i,v) { console.log(i,v)// 0 11 // 1 22 // 2 33 }) // 方式二 $(".c1").each(function (i,v) { console.log(i,v) //这里的v拿到的是标签 // 0 <div class="c1">hah</div> // 1 <div class="c1">年</div> // 2 <div class="c1">娃的</div> console.log(v.innertext) //拿到文本 }) </script>
退出循环=================
四.文档操作
内部插入:
a.append(b) 把b添加到a的后面
a.appendto(b) 把a添加到b的后面
a.prepend(b) 把b添加到a的前面
a.prependto(b) 把a添加到b的前面
外部插入:
a.after(b) 把b添加到a的后面
a.insertafter(b) 把a添加到b的后面
a.before(b) 把b添加到a的前面
a.insertbefore(b) 把a添加到b的前面
包裹:
wrap(html|ele|fn)
a.wrap(b) --> b包a
unwarp() 不包
--不要加参数
wrapall(html|ele) 都包(作为整体包),只包你选中的那个
wrapinner(html|ele|fn) 里面包
替换:
replacewith(content|fn)
a.replacewith(b) --> b替换a
replaceall(selector)
a.replaceall(b) --> a替换b
删除和清空
empty
--清空,内部清空
remove([expr])
--剪切 多保存在变量中,方便再次使用
clone([event[,deepevent]])
--克隆
五.动画
基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
滑动
slidedown([s],[e],[fn])
slideup(s,[e],[fn])
slidetoggle([s],[e],[fn])
淡入淡出
fadein([s],[e],[fn])
fadeout([s],[e],[fn])
fadeto([[s],[e],[fn]])
fadetoggle([[s],[e],[fn])
六.事件处理
之前绑定事件的方法:
1.onclick=clickme(); function clickme() {}
2.ele.onclick = function(){}
3.ele.addeventlistener("click", function(){}) js事件委托
jquery绑定事件的方式:
1.$(ele).on("click",function(){})
七.具体代码示例
1.返回首页
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>返回首页</title> </head> <style> .c1{ height: 100px; } button{ position: fixed; right: 15px; bottom: 15px; background-color: #336699; } .hide{ display: none; } </style> <body> <div class="c1">1</div> <div class="c1">2</div> <div class="c1">3</div> <div class="c1">4</div> <div class="c1">5</div> <div class="c1">6</div> <div class="c1">7</div> <div class="c1">8</div> <div class="c1">9</div> <div class="c1">10</div> <div class="c1">11</div> <div class="c1">12</div> <div class="c1">13</div> <div class="c1">14</div> <div class="c1">15</div> <div class="c1">16</div> <div class="c1">17</div> <div class="c1">18</div> <div class="c1">19</div> <div class="c1">20</div> <div class="c1">21</div> <div class="c1">22</div> <div class="c1">23</div> <div class="c1">24</div> <div class="c1">25</div> <div class="c1">26</div> <div class="c1">27</div> <div class="c1">28</div> <div class="c1">29</div> <div class="c1">30</div> <div class="c1">31</div> <div class="c1">32</div> <div class="c1">33</div> <div class="c1">34</div> <div class="c1">35</div> <div class="c1">36</div> <div class="c1">37</div> <div class="c1">38</div> <div class="c1">39</div> <div class="c1">40</div> <div class="c1">41</div> <div class="c1">42</div> <div class="c1">43</div> <div class="c1">44</div> <div class="c1">45</div> <div class="c1">46</div> <div class="c1">47</div> <div class="c1">48</div> <div class="c1">49</div> <div class="c1">50</div> <div class="c1">51</div> <div class="c1">52</div> <div class="c1">53</div> <div class="c1">54</div> <div class="c1">55</div> <div class="c1">56</div> <div class="c1">57</div> <div class="c1">58</div> <div class="c1">59</div> <div class="c1">60</div> <div class="c1">61</div> <div class="c1">62</div> <div class="c1">63</div> <div class="c1">64</div> <div class="c1">65</div> <div class="c1">66</div> <div class="c1">67</div> <div class="c1">68</div> <div class="c1">69</div> <div class="c1">70</div> <div class="c1">71</div> <div class="c1">72</div> <div class="c1">73</div> <div class="c1">74</div> <div class="c1">75</div> <div class="c1">76</div> <div class="c1">77</div> <div class="c1">78</div> <div class="c1">79</div> <div class="c1">80</div> <div class="c1">81</div> <div class="c1">82</div> <div class="c1">83</div> <div class="c1">84</div> <div class="c1">85</div> <div class="c1">86</div> <div class="c1">87</div> <div class="c1">88</div> <div class="c1">89</div> <div class="c1">90</div> <div class="c1">91</div> <div class="c1">92</div> <div class="c1">93</div> <div class="c1">94</div> <div class="c1">95</div> <div class="c1">96</div> <div class="c1">97</div> <div class="c1">98</div> <div class="c1">99</div> <div class="c1">100</div> <button class="hide">返回顶部</button> <button class="cc hide">返回底部</button> <script src="jquery-3.2.1.min.js"></script> <script> $(":button").on("click",function () { $(window).scrolltop(0);// 给一个滚动条位置 // $(window).scrolltop(500) }); $(window).scroll(function () { //滚动的时候做的操作 if ($(window).scrolltop()>100){ $(":button").removeclass("hide") } else{ $(":button").addclass("hide") } }); </script> </body> </html>
2.查看尺寸
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>尺寸</title> <style> .c1{ height: 100px; width: 80px; background-color: red; } </style> </head> <body> <div class="c1"></div> <script src="jquery-3.2.1.min.js"></script> <script> // 没设置前 console.log($(".c1").height); console.log($(".c1").width); console.log($(".c1").innerheight()); //100 // 设置后 innerheight() $(".c1").css("padding","20px"); console.log($(".c1").innerheight()); //140(自己的高度+padding(内边距) console.log($(".c1").innerwidth()); //120(自己的高度+padding(内边距) // 测试margin $(".c1").css("margin","20px"); //和外边距没有关系,高度还是140 console.log($(".c1").innerheight()); // outerheight() console.log($(".c1").outerheight()); //140(自己的高度+padding(内边距) $(".c1").css("border","10px solid yellow")//120(自己的高度+padding(内边距) console.log($(".c1").outerheight()); //160(自己的高度+padding(内边距)+border的宽度 // 测试margin $(".c1").css("margin","30px"); //和外边距没有关系,高度还是160 console.log($(".c1").outerheight()); </script> </body> </html>
3.文档操作
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>文档操作</title> </head> <ul id="u1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> <p>苍茫的大海是我的哎</p> <ul id="u2"> <li>第一章</li> <li>第二章</li> <li>第三章</li> <li>第四章</li> </ul> <body> <script src="jquery-3.2.1.min.js"></script> <script> // 在内部插入 // append:往后添加 $("#u1").append("<li>456</li>"); var li =document.createelement("li"); $(li).text(666); $(li).appendto($("#u1")); $("#u1>li:first").appendto($("#u1")); //吧第一个添加到这个列表中。注意是挪动,不是复制 $("#u1>li:last").appendto($("#u1")); // prepend :往前添加 $("#u2").prepend("<li>啦啦啦</li>"); //吧啦啦啦添加到列表的前面 var tem = document.createelement("li"); tem.innertext = "哗啦啦。呼啦啦"; $(tem).prependto($("#u2")) ;//吧啦啦啦添加到列表里(先创建) // 在外部插入 // after $("#u2").after("<div>哈啊好好</div>"); //在列表的后面插入 var tem = document.createelement("div"); $(tem).text("哎哎呀"); $(tem).css("color","red"); $(tem).insertafter($("#u2")); //插入到列表的后面 // before $("#u2").before("<div>111</div>"); //在列表的前面插入 var tem = document.createelement("div"); $(tem).text("six"); $(tem).css("color","blue"); $(tem).insertbefore($("#u2")) //插入到列表的后面 // 包裹 // wrap和unwrap var tem = document.createelement("div"); $(tem).css("border","1px solid #ff0000"); $("#u1").wrap($(tem)); //让tem吧列表包起来 $("#u1").unwrap() ;//不包,不需要加参数 // wrapall和wrap和wrapinner var tem = document.createelement("div"); $(tem).css("border","1px solid yellow"); $("ul").wrapall($(tem)); //都包 $("ul").wrap($(tem)); //单个包 $("ul").wrapinner($(tem));//里面包 // 替换 // replacewith和replaceall $("ul").replacewith("<p>你愁啥?<p>") ;//吧所有的列表替换成你愁啥? var ele = document.createelement("p"); $(ele).text("你愁啥?"); $(ele).replaceall($("ul")); // 删除 $("ul:first").empty() ;//吧第一个ul清空 $("ul>li:first").empty() ;//只是清空内容 $("ul>li:last").remove();//都清空 var a = $("#u1>li:first").detach(); //删除以后还保留着,可以再次使用 a.appendto($("#u1")) </script> </body> </html>
4.克隆
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>克隆</title> </head> <body> <button class="c1">点我点我</button> <script src="jquery-3.2.1.min.js"></script> <script> $(".c1").on("click",function () { $(this).clone(true).insertafter($(this)) }) </script> </body> </html>
5.动画
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>动画</title> <style> .hide{ display: none; } </style> </head> <body> <img src="z.png" alt=""> <script src="jquery-3.2.1.min.js"></script> <button class="c1">召唤</button> <button class="c2">淡出</button> <button class="c3">淡入</button> <button class="c4">淡出到0.66透明度</button> <button class="c5">淡入淡出</button> <button class="c6">动画:图片变小</button> <script> $(".c1").on("click",function () { // $("img").hide(); // $("img").show(); $("img").toggle(); }); // 淡出 $(".c2").on("click",function () { $("img").fadeout(); $("img").fadeout("fast"); //快速的淡出 }); // 淡入 $(".c3").on("click",function () { // 增加淡入的时间 $("img").fadein(3000,function () { // alert(123) }); }); // 淡出到0.66透明度 $(".c4").on("click",function () { $("img").fadeto(3000,0.66,function () { // alert(123) }) }); // 淡入淡出 $(".c5").on("click",function () { $("img").fadetoggle(3000,function () { // alert(123) }) }) // 动画-图片变小 $(".c6").on("click",function () { $("img").animate( { width:"80px", height:"80px" },3000,function () { //这是一个回调函数 alert(123) } ) }) </script> </body> </html>