jQuery布局
1. <!DOCTYPE html>
2. <html lang="en">
3.
4. <head>
5. <meta charset="UTF-8">
6. <title>jQuery布局</title>
7. <style>
8. div {
9. width: 300px;
10. height: 300px;
11. border: 8px solid red;
12. padding: 0;
13. margin: 50px;
14. }
15. </style>
16. </head>
17.
18. <body>
19. <div>
20. 中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文
21. </div>
22. <button>获取位置</button>
23. <script src="jquery.js"></script>
24. <script>
25. var div = document.querySelector('div')
26. var btn = document.querySelector('button')
27. btn.onclick = function () {
28. console.log(div.clientWidth)
29. }
30. console.log($('div').height())
31. console.log($('div').width())
32. console.log($('div').innerHeight())
33. console.log($('div').innerWidth())
34. console.log($('div').outerHeight())
35. console.log($('div').position())
36. // 相对于父元素的偏移
37. </script>
38. </body>
39.
40. </html>
jQuery效果
1. <!DOCTYPE html>
2. <html lang="en">
3.
4. <head>
5. <meta charset="UTF-8">
6. <title>jQuery效果</title>
7. <style>
8. div {
9. margin: 3px;
10. width: 40px;
11. height: 40px;
12. position: absolute;
13. left: 0px;
14. top: 30px;
15. background: green;
16. display: none;
17. }
18.
19. div.newcolor {
20. background: blue;
21. }
22.
23. span {
24. color: red;
25. }
26. </style>
27. </head>
28.
29. <body>
30. <h1>jQuery效果</h1>
31. <small>测试专用小标签</small>
32. <ul>
33. <li>第1项</li>
34. <li>第2项</li>
35. <li>第3项</li>
36. <li>第4项</li>
37. <li>第5项</li>
38. </ul>
39. <button id="show">Show Length of Queue</button>
40. <span></span>
41. <div></div>
42. <button id="ff">fff</button>
43. <script src="jquery.js"></script>
44. <script src="jqueryColor.js"></script>
45. <script src="index.js"></script>
46. </body>
47.
48. </html>
jQuery要实现动画中颜色的变化，需要加载jQuery.color.js插件
1. $('ul').click(function () {
2. // $('ul,small').toggle(5*1000,function () {
3. // alert($(this).text() + '动画完成')
4. // })
5. // $('ul,small').fadeToggle(5*1000,function () {
6. // alert($(this).text() + '动画完成')
7. // })
8. // $('ul,small').fadeTo(5*1000,0.5,'linear',function () {
9. // alert($(this).text() + '动画完成')
10. // })
11. // $('ul,small').fadeTo(5*1000,0.5,'linear',function () {
12. // alert($(this).text() + '动画完成')
13. // })
14. // $('ul,small').slideToggle(5*1000,'linear',function () {
15. // alert($(this).text() + '动画完成')
16. // })
17. // 自定义动画及链式动画
18. // 使用Jquery.color.js插件支持颜色动画
19. var coords = $('ul').offset()
20. // animate()方法执行css属性集的自定义动画
21. // $('ul').css('position','absolute').animate({
22. // 'left':400,
23. // 'line-height':32,
24. // 'color':'blue'
25. // },5*1000).animate({
26. // top:500,
27. // lineHeight:'120%',
28. // color:'red'
29. // },3*1000).animate({
30. // left:coords.left,
31. // top:coords.top,
32. // lineHeight:'1.5rem',
33. // color:'#000'
34. // },4*1000)
35.
36. // $('ul').css('position','absolute')
37. // .fadeTo(3*1000,0.3)
38. // .animate({
39. // left:'+=100',
40. // widht:['toggle','swing'],
41. // height:['toggle','linear']
42. // // left:300
43.
44. // },3*1000)
45. // delay方法延迟动画
46. // $('ul').slideToggle(2*1000)
47. // .delay(3*1000)
48. // .slideToggle(2*1000)
49.
50. // var color = 'red'
51. // function changeColor(){
52. // $('ul').animate({
53. // backgroundColor:color,
54. // },1000,function(){
55. // color = $.Color(color)
56. // color = color.hue(color.hue() +60)
57. // changeColor()
58. // })
59. // }
60. // changeColor()
61. // $('ul').css('position','absolute').animate({
62. // left:300,
63. // color:'blue'
64. // },10*1000,function () {
65. // alert('left动画完成')
66. // }).animate({
67. // top:400,
68.
69. // },5*1000,function(){
70. // alert('top动画完成')
71. // })
72. })
73. // $(':header').click(function(){
74. // console.log('ffffff')
75. // // $('ul').stop(true,true)
76. // // $('ul').finish()
77. // })
78.
79. $("#show").click(function () {
80. var n = $("div").queue("fx");
81. $("span").text("Queue length is: " + n.length);
82. });
83. function runIt() {
84. $("div").show("slow");
85. $("div").animate({left:'+=200'},2000);
86. $("div").slideToggle(1000);
87. $("div").slideToggle("fast");
88. $("div").animate({left:'-=200'},1500);
89. $("div").hide("slow");
90. $("div").show(1200);
91. $("div").dequeue()
92. // $("div").slideUp("normal", runIt);
93. }
94.
95.
96. $('#ff').click(function(){
97. runIt();
98. })