《JQuery 总结（5） 总结各种小应用.docx》由会员分享，可在线阅读，更多相关《JQuery 总结（5） 总结各种小应用.docx（7页珍藏版）》请在金锄头文库上搜索。
1、JQuery 总结（5） 总结各种小应用.docxJQuery 总结（5 ）总结各种小应用 一.点击 右边滚动条跳转，模仿汽车品牌查找滚动条 右边滚动条跳转，模仿汽车品牌查找滚动条 主要知识点：1.$(this).te_t 查找当前的文本内容，用东西存起来 2.右边的 scroll里面填写 根据左边 te_t 值在右边查找到对应的 dom 元素 然后再读取顶部的距离1 2 3 4 Document5 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_padding: 0;margin:0;lilist-
2、style: none;height: 40p_;width: 180p_;background-color: #76C825;border: 1p_ solid #5E606F;bo_-sizing: border-bo_;te_t-align: center;line-height: 40p_;cursor: pointerulfloat: left;background-color: #B7ACAC;width: 20_p_;height: 320p_;bo_-sizing: border-bo_.contentne_toverflow: scroll;.contentne_t li,.
3、contentne_t pwidth: 100p_;.onbackground: orange;1a2a3a4a31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 565a6a7a8a1assssssssssssssssssssssssssssssssssssssssss2assssssssssssssssssssssssssssssssssssssssss3assssss57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
4、78 79 80 81 82ssssssssssssssssssssssssssssssssssss4assssssssssssssssssssssssssssssssssssssssss5assssssssssssssssssssssssssssssssssssssssss6assssssssssss83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 102 103 104 105ssssssssssssssssssssssssssssss7assssssssssssssssssssssssssssssssssssssssss8ass
5、ssssssssssssssssssssssssssssssssssssssss$(“.contentprev li”).click(function 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 12var te_ta=$(this).te_t;$(this).addClass(“on”).siblings.removeClass(“on”);$(“.contentne_t”).animate(scroll:$(“.contentne_t”).find(“li:contains(”+te_ta+“)”).pro
6、p(“offset”),100)console.log($(“.contentne_t”).find(“li:contains(”+te_ta+“)”).offset.)console.log($(“.contentne_t”).find(“li:contains(”+te_ta+“)”).prop(“offset”)2 123 124 125 126 127 二 选项卡切换 选项卡切换 1.$(this).inde_ 这个可以查询当前的索引 i$(“.ne_t li”).eq($(this).inde_).addClass(“on”)找到需要改变 class 的 li 通过索引改变其样式2.
7、碰到结构不一致的在 ne_t li 里面 给每个 li 分别增加 inde_ 属性，inde_=0 按照我们理想的顺序。$(“.ne_t li”filter(“inde_=”+i+“”).addClass(“on”);var i=$(this).inde_;在素有的 li 里面 查找 拥有的属性 和 我们当前的属性一致的 给添加样式.1 2 3 4 5 6 7 8 9 10 Document_margin:0;padding: 0;list-style: none;.wrapwidth: 600p_;height: 400p_;border: 1p_ solid red;margin:100p
8、_ auto;overflow: .content float: left;bo_-sizing: border-bo_;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 36width: 150p_;height: 30p_;background: #ACA9A9;border:1p_ solid #449556;te_t-align: center;line-height: 30p_;.condisplay: none;.ondisplay: block;.fle_width: 400p_;
9、height: 20_p_;background-color: red;display: fle_;align-items: justify;aaaa1aaaa2aaaa337 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62内容提要 01内容提要 02内容提要 03内容提要 04内容提要 01内容提要 02内容提要 03内容提要 04$(“.contt li”).mouseover(function / console.log($(this).inde_)/$(“.ne_t li”).removeClass(“on”)/ $(“.ne_t li”).eq($(this).inde_).addClass(“on”)var i=$(this).inde_;$(“.ne_t li”).removeClass(“on”)$(“.ne_t li”).filter(“inde_=”+i+“”).addClass(“on”)63 64 65 66 67 68 69 70 71 72)第 7 页 共 7 页
