日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQuery 总结（5） 总结各种小应用

發(fā)布時(shí)間：2025/3/21 编程问答 14 豆豆
生活随笔 收集整理的這篇文章主要介紹了 JQuery 总结（5） 总结各种小应用 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一.點(diǎn)擊 右邊滾動(dòng)條跳轉(zhuǎn)，模仿汽車品牌查找滾動(dòng)條
主要知識(shí)點(diǎn)：
?
1.$(this).text() 查找當(dāng)前的文本內(nèi)容，用東西存起來

2.右邊的scrollTop() ?里面填寫 根據(jù)左邊text值在右邊查找到對(duì)應(yīng)的dom元素 然后再讀取頂部的距離


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

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

<!DOCTYPE?html>

<html?lang="en">

<head>

????<meta?charset="UTF-8">

????<title>Document</title>

??????<script?src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

??????<style>

??????*{padding: 0;margin:0;}

????????li{list-style: none;height: 40px;width: 180px;background-color: #76C825;border: 1px solid #5E606F;box-sizing: border-box;

????????????text-align: center;line-height: 40px;

????????????cursor: pointer}

????????ul{float: left;background-color: #B7ACAC;width: 200px;height: 320px;box-sizing: border-box}

??????.contentnext{

????????overflow: scroll;

?

??????}

??????.contentnext li,.contentnext p{

????????width: 100px;

?

??????}

??????.on{

????????background: orange;

??????}

??????</style>

</head>

<body>

????<ul?class="contentprev">

????????<li>1a</li>

????????<li>2a</li>

????????<li>3a</li>

????????<li>4a</li>

????????<li>5a</li>

????????<li>6a</li>

????????<li>7a</li>

????????<li>8a</li>

????</ul>

?

????<ul?class="contentnext">

????????<li>1a</li>

????????<div><p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p>

????????<p>sss</p></div>

?????????

????????<li>2a</li>

????????<div><p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p>

????????<p>sss</p></div>

????????<li>3a</li>

????????<div><p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p>

????????<p>sss</p></div>

????????<li>4a</li>

????????<div><p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p>

????????<p>sss</p></div>

????????<li>5a</li>

????????<div><p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p>

????????<p>sss</p></div>

????????<li>6a</li>

????????<div><p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p>

????????<p>sss</p></div>

????????<li>7a</li>

????????<div><p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p>

????????<p>sss</p></div>

????????<li>8a</li>

????????<div><p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p><p>sss</p>

????????<p>sss</p>

????????<p>sss</p></div>

????</ul>

?

<script>

????$(".contentprev li").click(function () {

????????var texta=$(this).text();

????????$(this).addClass("on").siblings().removeClass("on");

???????$(".contentnext").animate({

????????scrollTop:$(".contentnext").find("li:contains('"+texta+"')").prop("offsetTop")},100

????????)

???????console.log($(".contentnext").find("li:contains('"+texta+"')").offset().top)

?

???????console.log($(".contentnext").find("li:contains('"+texta+"')").prop("offsetTop"))

????})

</script>

</body>

</html>

二 選項(xiàng)卡切換

1.$(this).index() 這個(gè)可以查詢當(dāng)前的索引 i?
? ??$(".next li").eq($(this).index()).addClass("on")? 找到需要改變class的 li 通過索引改變其樣式?
2.碰到結(jié)構(gòu)不一致的
? ?在next li 里面 給每個(gè)li分別增加index屬性，index=0 按照我們理想的順序。

? ? ?$(".next li").filter("[index='"+i+"']").addClass("on");??
? ?var i=$(this).index();

? 在素有的li里面 查找 擁有的屬性 和 我們當(dāng)前的屬性一致的 給添加樣式.

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

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

<!DOCTYPE?html>

<html?lang="en">

<head>

????<meta?charset="UTF-8">

????<title>Document</title>

????<script?src="http://code.jquery.com/jquery-latest.js"></script>

????<style>

????????*{margin:0;padding: 0;list-style: none;}

????????.wrap{width: 600px;height: 400px;border: 1px solid red;margin:100px auto;overflow: }

????????.content{ float: left;box-sizing: border-box;

????????????width: 150px;height: 30px;background: #ACA9A9;border:1px solid #449556;text-align: center;line-height: 30px;

?

????????}

????????.con{

????????????display: none;

?

????????}

????????.on{

????????????display: block;

????????}

????????.flex{

????????????width: 400px;

????????????height: 200px;

????????????background-color: red;

????????????display: flex;

????????????align-items: justify;

?????????????

????????}

????</style>

</head>

<body>

????<div?class="flex">

????????<div>aaaa1</div>

????????<div>aaaa2</div>

????????<div>aaaa3</div>

????</div>

????<div?class="wrap">

???????<ul?class="contt">

????????<li?class="content">內(nèi)容提要01</li>

????????<li?class="content">內(nèi)容提要02</li>

????????<li?class="content">內(nèi)容提要03</li>

????????<li?class="content">內(nèi)容提要04</li>

??????</ul>

??????<ul?class="next">

????????<li?class=" con on" index="0" >內(nèi)容提要01</li>

????????<li?class="con" index="1">內(nèi)容提要02</li>???????

????????<li?class="con" index="2">內(nèi)容提要03</li>

????????<li?class="con" index="3">內(nèi)容提要04</li>

?

????</ul>??

????</div>

????<script>

$(".contt li").mouseover(function () {

????// console.log($(this).index())

?

????//? $(".next li").removeClass("on")

????// $(".next li").eq($(this).index()).addClass("on")

?

???var i=$(this).index();

?

?????$(".next li").removeClass("on")

????$(".next li").filter("[index='"+i+"']").addClass("on")

?

?

??

?

})

?

?

????</script>

</body>

</html>

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的JQuery 总结（5） 总结各种小应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。