jQuery属性和样式操作
回顾
1. jquery基本使用
<script src="jquery.min.js"></script>
<script>
$(function(){
$('li').css().css().attr().find()
})
</script>
js 原生dom 和 jQuery DOM
$(原生DOM) $(this)
jQuery的本质是 由 原生dom组成 的类数组 对象
2 选择器
# 基本选择器
# 层级选择器
# 基本筛选器
:first
:last
:eq(index) 从0开始
:lt(index) <
:gt(index) >
:odd 奇数
:even 偶数
:not()
# 内容选择器
:contains(text)
:has(选择器)
:empty
:parent
# 可见性选择器
:hidden
:visible
# 属性选择器
[attr!=value] 不等
少了 [attr|=val] [attr~=val]
# 子元素选择器
# 表单选择器
:input
# 表单对象选择器
:disabled
:enabled
:checked
:selected
筛选器（jquery DOM 的方法）
# 过滤
first() $('li').first()
last()
eq(index)
filter(选择器)
not(选择器)
slice(start, end)
# 查找
find(选择器) 后代元素
children([选择器]) 子元素
parent([选择器]) 父元素
parents([选择器]) 祖先元素
parentsUntil([选择器结束条件])
offsetParent() 第一个定位祖先元素
next([选择器])
nextAll([选择器])
nextUntil([选择器])
prev([选择器])
prevAll([选择器])
prevUntil([选择器])
siblings([选择器])
closest([选择器]) 从自己开始向上找，知道找到满足条件的
# 串联
add(选择器)
addBack() $('ul').find('li').addBack()
end() 返回最近破坏性操作 $(dom).find('li').end()
笔记
1 jQuery DOM操作
插入的整个流程：获得点击元素的jQuery对象，并给对象绑定事件，然后定义事件触发时的方法，
方法里先获得元素对象，对象调用不同的方法来实现不同的效果。
1.1 内部插入
这些用法取决于获取的元素是子元素还是父元素，子元素一般使用appendto，prependto这些方法
父元素直接使用append和prepend
append() 在父元素内部插入一个子元素在内部其他元素的后面
appendTo() 子元素插入到指定的元素内已有元素的后面
prepend() 父元素中其他元素的前面插入
prependTo() 子元素插入到父元素其他元素的前面
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>DOM操作</title>
6 <style>
7 #box {
8 width: 800px;
9 min-height: 300px;
10 padding: 10px;
11 border: 2px solid #ccc;
12 }
13 #box img {
14 box-sizing: border-box;
15 width:100px;
16 height:100px;
17 }
18
19 #box img.active {
20 border: 2px solid green;
21 }
22
23 p {
24 width: 600px;
25 padding: 20px;
26 border: 2px dotted pink;
27 }
28 </style>
29 </head>
30 <body>
31 <h1>jQuery DOM 操作</h1>
32 <hr>
33 <h2>内部插入</h2>
34 <button id="append_btn">添加新的图片 append</button>
35 <button id="appendTo_btn">添加新的图片 appendTo</button>
36 <button id="prepend_btn">添加新的图片 prepend</button>
37 <button id="prependTo_btn">添加新的图片 prependTo</button>
38 <h2>外部插入</h2>
39 <button id="after_btn">after</button>
40 <button id="insertAfter_btn">insertAfter</button>
41 <button id="before_btn">before</button>
42 <button id="insertBefore_btn">insertBefore</button>
43 <h2>包裹</h2>
44 <button id="wrap_btn">wrap</button>
45 <button id="wrapAll_btn">wrapAll</button>
46 <button id="wrapInner_btn">wrapInner</button>
47 <button id="unwrap_btn">unwrap</button>
48 <h2>替换</h2>
49 <button id="replaceWith_btn">替换选中的图片</button>
50 <button id="replaceAll_btn">替换选中的图片repalceAll</button>
51 <h2>删除</h2>
52 <button id="empty_btn">empty</button>
53 <button id="remove_btn">remove 删除选中的图片</button>
54
55
56 <br>
57 <br>
58 <br>
59 <br>
60
61 <div id="box">
62 <img src="../dist/images_one/1.jpg" alt="">
63 <img src="../dist/images_one/2.jpg" alt="">
64 <img src="../dist/images_one/3.jpg" alt="">
65 <img src="../dist/images_one/4.jpg" alt="">
66 </div>
67
68 <img src="../dist/images_one/10.jpg" id="newImg" alt="" style="width:200px">
69
70
71 <script src="../jquery-3.3.1.js"></script>
72 <script>
73 $(function(){
74 //内部插入
75 $('#append_btn').on('click', function(){
76 //创建img 元素 万能的$
77 /*var newImg = $('<img>')
78 newImg.attr('src', '../../dist/images_one/8.jpg');*/
79
80 //var newImg = $('<img src="../../dist/images_one/9.jpg">')
81
82 //给box追加一个子元素
83 $("#box").append('<img src="../dist/images_one/9.jpg">');
84
85 });
86
87 $('#appendTo_btn').on('click', function(){
88 $('<img src="../dist/images_one/9.jpg">').appendTo('#box');
89 });
90
91 $('#prepend_btn').on('click', function(){
92 $('#box').prepend('<img src="../dist/images_one/10.jpg">')
93 });
94
95
96 //外部插入
97 $('#after_btn').on('click', function(){
98 $('#box').after('<p>我爱你</p>')
99 })
100 $('#insertAfter_btn').on('click', function(){
101 $('<p>你爱我</p>').insertAfter('#box');
102 })
103 $('#before_btn').on('click', function(){
104 $('#box').before('<p>哈哈哈哈</p>')
105 });
106
107 //包裹
108 //每个img被li元素包裹
109 $('#wrap_btn').on('click', function(){
110 $('#box img').wrap('<li>');
111 })
112 //移除了父元素，并用一个li元素包裹了所有的img
113 $('#wrapAll_btn').on('click', function(){
114 $('#box img').wrapAll('<li>');
115 })
116 //被p元素包裹在里面
117 $('#wrapInner_btn').on('click', function(){
118 $('#box').wrapInner('<p>');
119 })
120 //不被包裹，外部的div元素消失
121 $('#unwrap_btn').on('click', function(){
122 $('#box img').unwrap();
123 });
124 //替换
125 $('#replaceWith_btn').on('click', function(){
126 //alert('ok')
127 //$('#box img.active').replaceWith('<img src="../../dist/images_one/meinv02.jpg">')
128 //用newimg替换box下的选中的img。.active表示被选中的
129 //加clone方法只是复制了图片，原图片还在
130 $('#box img.active').replaceWith($('#newImg').clone())
131 })
132 $('#replaceAll_btn').on('click', function(){
133 //alert('ok')
134 //$('#box img.active').replaceWith('<img src="../../dist/images_one/meinv02.jpg">')
135 //用钱买你指定的图片替换后面指定的所有图片
136 $('<img src="../dist/images_one/meinv02.jpg">').replaceAll('#box img.active')
137 });
138
139
140 //删除
141 //第一个是删除所有的，第二个是删除选中的
142 $('#empty_btn').on('click', function(){
143 $('#box').empty();
144 });
145 $('#remove_btn').on('click', function(){
146 $('#box img.active').remove();
147 });
148
149
150
151 //克隆
152
153
154
155
156
157
158
159 //给所有的图片绑定 事件
160 $('#box img').on('click', function(){
161 $(this).toggleClass('active');
162 })
163 })
164 </script>
165 </body>
166 </html>
1.2 外部插入
after()
insertAfter()
before()
insertBefore()
1.3 包裹
wrap()
wrapAll()
wrappInner()
unwrap()
1.4 替换
replaceWith() a.replaceWith(b) 用b 替换掉 a
replaceAll()
1.5 删除
empty()
remove()
1.6 克隆
clone()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jquery TODOList</title>
6 <style>
7 .list {
8 list-style: none;
9 padding:0;
10 width:600px;
11 }
12 .list li {
13 padding:20px;
14 border:1px solid #ccc;
15 background:#f5f5f5;
16 margin:5px 0px;
17 }
18 .list li::after{
19 content:'';
20 display: block;
21 clear:both;
22 }
23 .list li p {
24 margin:0;
25 float:left;
26 }
27 .list li span {
28 float:right;
29 cursor: pointer;
30 }
31 input{
32 width: 300px;
33 padding:10px;
34 border:1px solid #ccc;
35 font-size:16px;
36 }
37 button {
38 padding:10px 20px;
39 border:1px solid #ccc;
40 background: #f5f5f5;
41 }
42
43 .list li input {
44 border:none;
45 padding:0;
46 outline: none;
47 background: #f5f5f5;
48 }
49 </style>
50 </head>
51 <body>
52 <h1>TODOList</h1>
53 <hr>
54 <input type="text" id="content">
55 <button id="btn">添加</button>
56 <ul class="list" id="todoList">
57 <li>
58 <p>Lorem ipsum dolor sit amet.1</p>
59 <span>×</span>
60 </li>
61 <li>
62 <p>Lorem ipsum dolor sit amet.2</p>
63 <span>×</span>
64 </li>
65 <li>
66 <p>Lorem ipsum dolor sit amet.3</p>
67 <span>×</span>
68 </li>
69 <li>
70 <p>Lorem ipsum dolor sit amet.4</p>
71 <span>×</span>
72 </li>
73
74 </ul>
75
76
77 <script src="../jquery-3.3.1.js"></script>
78 <script>
79 $(function(){
80 //按钮单击事件
81 $('#btn').on('click', function(){
82 $('<li>')
83 //{$("#content").val()获得输入的值
84 .append(`<p>${$("#content").val()}</p>`)
85 .append('<span>×</span>')
86 .appendTo('#todoList');
87
88 });
89
90 //给span绑定单击事件 委派
91
92 $("#todoList").on('click', 'span', function(){
93 $(this).parent().remove();
94 });
95
96 //给所有的li>p元素 单击事件
97 $("#todoList").on('click', 'p', function(){
98 //$(this).replaceWith('<input type="text" value=>')
99 $('<input>').val($(this).text()).replaceAll(this);
100 });
101
102 //给li下的 input 绑定 失去焦点的时间
103 $('#todoList').on('blur', 'input', function(){
104 $('<p>').text($(this).val()).replaceAll(this);
105 })
106
107
108
109 })
110 </script>
111 </body>
112 </html>
2 jquery 属性操作
2.1 属性
attr(attrName[, value]) 获取属性的值 或者 设置属性的值 内置属性和自定义属性
prop(attrName[, value]) 获取属性的值 或者 设置属性的值 只能用于内置属性
removeAttr(attrName)
removeProp(attrName)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jQuery 属性操作</title>
6 <style>
7 #myImg {
8 display: block;
9 width: 400px;
10 height: 300px;
11 border: 1px solid #ccc;
12 }
13
14 </style>
15 </head>
16 <body>
17 <h1>属性操作</h1>
18 <hr>
19 <button id="btn">属性操作</button>
20 <button id="remove_btn">移除属性</button>
21 <br>
22 <br>
23 <img alt="" id="myImg" loadImg='a.png'>
24
25 <script src="../jquery-3.3.1.js"></script>
26 <script>
27 $(function(){
28 $('#btn').on('click', function(){
29 $('#myImg').attr('src', '../dist/images_one/meinv02.jpg');
30
31 //获取属性的值
32 console.log($('#myImg').attr('src'))
33 console.log($('#myImg').attr('id'))
34 console.log($('#myImg').prop('title')); //专门设置或者获取 元素的内置属性
35 console.log($('#myImg').attr('loadImg')); //专门设置或者获取 元素的内置属性
36
37 });
38
39
40 $('#remove_btn').on('click', function(){
41 $('#myImg').removeAttr('src');
42 //$('#myImg').attr('src', '');
43 })
44 })
45 </script>
46 </body>
47 </html>
2.2 类
addClass()
removeClass()
toggleClass()
hasClass() 返回布尔值 <p class="item active"> p.hasClass('item')
2.3 文本值
html([html]) 等同于innerHTML 没有参数 就是获取， 有参数就是设置
text([text]) 等同于innerText 获取或者设置
val([val]) 用于表单控件 设置或获取
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>自定义数作用 图片懒加载</title>
6 <style>
7 .imglist img {
8 width: 400px;
9 height: 300px;
10 border: 1px solid #ccc;
11 }
12 </style>
13 </head>
14 <body>
15 <h1>图片懒加载</h1>
16 <hr>
17
18 <div class="imglist">
19 <img loadpic='../dist/images_one/meinv02.jpg'>
20 <img loadpic='../dist/images_one/2.jpg'>
21 <img loadpic='../dist/images_one/3.jpg'>
22 <img loadpic='../dist/images_one/4.jpg'>
23 </div>
24
25 <script src="../jquery-3.3.1.js"></script>
26 <script>
27
28 //console.log($('.imglist img').attr('loadpic'))
29 //单次定时
30 setTimeout(function(){
31 $('.imglist img').each(function(index, item){
32 $(item).attr('src', $(item).attr('loadpic'))
33 })
34 }, 2000)
35 </script>
36 </body>
37 </html>
3 jquery 样式操作
3.1 CSS操作
css('属性', '值')
css('属性')
3.2 元素位置
offset() 相对于视口 可以获取可以设置 返回对象{left: ,top:}
position() 相对于第一个定位的祖先元素，margin减掉。 只能获取
scrollLeft() 控制里面内容的滚动 水平
scrollTop() 控制里面内容的滚动 垂直
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>样式操作</title>
6 <style>
7 #box {
8 width: 400px;
9 height: 200px;
10 border:2px solid #ccc;
11 position: relative;
12 }
13
14 .inner {
15 width:100px;
16 height:100px;
17 /*margin:50px;*/
18 background: pink;
19 }
20 </style>
21 </head>
22 <body>
23 <h1>同志加油</h1>
24 <hr>
25 <button id="btn">设置位置</button>
26 <div id="box">
27 <div class="inner"></div>
28 </div>
29
30 <script src="../jquery-3.3.1.js"></script>
31 <script>
32
33 console.log($('#box').css('width'));
34
35 //元素的位置
36 console.log($('.inner').offset())
37 //以视口 为参照
38 console.log($('.inner').offset().left, $('.inner').offset().top)
39
40 console.log($('.inner').position())
41 console.log($('.inner').position().left, $('.inner').position().top)
42
43
44 $('#btn').click(function(){
45 //只有offset 才能设置
46 $('.inner').offset({left:10, top:10})
47 })
48 </script>
49 </body>
50 </html>
3.3 尺寸
width() / height()
innerWidth() / innerHeight()
outerWidth() / outerHeight()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>获取元素尺寸</title>
6 <style>
7 #box {
8 width:200px;
9 height:300px;
10 padding:15px;
11 border: 3px solid #ccc;
12 }
13 </style>
14 </head>
15 <body>
16 <h1>获取元素尺寸</h1>
17 <hr>
18
19
20 <div id="box"></div>
21
22 <script src='../jquery-3.3.1.min.js'></script>
23 <script>
24 $(function(){
25 console.log($('#box').width(), $('#box').height()) //内容的大小
26 console.log($('#box').innerWidth(), $('#box').innerHeight()) //内容大小+padding
27 console.log($('#box').outerWidth(), $('#box').outerHeight()) //内容大小+padding+border 实际大小
28
29
30 //设置
31 $('#box').width(300); //设置 内容的宽是300
32 $('#box').outerWidth(300) //设置 盒子 总的宽 是 300
33
34 })
35 </script>
36 </body>
37 </html>
小米网页需要用到的滚动操作和轮播图
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>滚动</title>
6 <style>
7 #box {
8 width:800px;
9 height:200px;
10 border:2px solid orange;
11 overflow: hidden;
12 }
13 .wrapper {
14 width:2200px;
15 }
16 #box p {
17 margin:0;
18 width:198px;
19 height:198px;
20 float:left;
21 border:1px solid #ccc;
22 background: #369;
23 color:#fff;
24 }
25
26 </style>
27 </head>
28 <body>
29 <div id="box">
30 <div class="wrapper">
31 <p>lorem1</p>
32 <p>lorem2</p>
33 <p>lorem3</p>
34 <p>lorem4</p>
35 <p>lorem5</p>
36 <p>lorem6</p>
37 <p>lorem7</p>
38 <p>lorem8</p>
39 <p>lorem9</p>
40 <p>lorem10</p>
41 <p>lorem11</p>
42 </div>
43 </div>
44
45
46
47 <br>
48
49 <button id="left_btn"> < </button>
50 <button id="right_btn"> > </button>
51
52
53 <script src="../jquery-3.3.1.js"></script>
54 <script>
55 $(function(){
56
57 $('#left_btn').on('click', function(){
58 //console.log($('#box').scrollLeft())
59 //$('#box').scrollLeft(800);//是把 scrollLeft 设置为800
60
61 $('#box').scrollLeft($('#box').scrollLeft() + 800);
62 });
63
64 $('#right_btn').on('click', function(){
65 $('#box').scrollLeft($('#box').scrollLeft() - 800 )
66 })
67 })
68 </script>
69 </body>
70 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>轮播图效果</title>
6 <style>
7 .play {
8 margin: 100px auto;
9 width: 1226px;
10 height: 460px;
11 border: 1px solid #999;
12 position: relative;
13 }
14 ul {
15 list-style: none;
16 margin:0;
17 padding:0;
18 }
19 .play img {
20 display: block;
21 width: 1226px;
22 height:460px;
23 }
24 .imglist li {
25 position: absolute;
26 left:0;
27 top:0;
28 opacity: 0;
29 transition: opacity 1s;
30 }
31 .imglist li.current {
32
33 opacity: 1;
34 }
35
36 .control-list {
37 position: absolute;
38 bottom:20px;
39 right:20px;
40 }
41 .control-list span {
42 font-size:0px;
43 float:left;
44 margin-right:5px;
45 width:12px;
46 height:12px;
47 border:1px solid #999;
48 border-radius: 7px;
49 background: #999;
50 cursor: pointer;
51 }
52 .control-list span.current {
53 background: #fff;
54 }
55 .slide {
56 position: absolute;
57 top:50%;
58 transform: translate(0, -50%);
59 width:40px;
60 height:80px;
61 background:rgba(0,0,0,.6);
62 color:#fff;
63 font-size: 20px;
64 font-weight: bold;
65 text-align: center;
66 line-height: 80px;
67 cursor: pointer;
68 opacity: .5;
69 transition: .3s;
70 }
71 .slide:hover {
72 opacity: 1;
73 }
74 .slide-left{
75 left:0;
76 }
77 .slide-right {
78 right:0;
79 }
80 </style>
81 </head>
82 <body>
83 <div id="play" class="play">
84
85 <ul class="imglist">
86 <li class="current">
87 <a href="#">
88 <img src="./images/play01.jpg" alt="">
89 </a>
90 </li>
91
92 <li>
93 <a href="#">
94 <img src="./images/play02.jpg" alt="">
95 </a>
96 </li>
97
98 <li>
99 <a href="#">
100 <img src="./images/play03.jpg" alt="">
101 </a>
102 </li>
103
104 <li>
105 <a href="#">
106 <img src="./images/play04.jpg" alt="">
107 </a>
108 </li>
109
110 <li>
111 <a href="#">
112 <img src="./images/play05.jpg" alt="">
113 </a>
114 </li>
115 </ul>
116
117 <div class="control-list">
118 <span class="current">1</span>
119 <span>2</span>
120 <span>3</span>
121 <span>4</span>
122 <span>5</span>
123 </div>
124
125
126 <div class="slide-list">
127 <span class="slide slide-left"><</span>
128 <span class="slide slide-right">></span>
129 </div>
130
131 </div>
132
133
134 <script src="../jquery-3.3.1.js"></script>
135 <script>
136 //轮播图效果
137 $(function(){
138 var m = 0; //循环变量
139 var delay = 3000; //轮播的时间间隔
140 var length = 5; //轮播的数量
141
142 //设置定时
143 var runTime = setInterval(runPlay, delay);
144
145
146 //鼠标悬浮 定时停止
147 $('#play').on('mouseenter', function(){
148 clearInterval(runTime);
149 }).on('mouseleave', function(){
150 runTime = setInterval(runPlay, delay)
151 });
152
153 //给控制按钮 绑定 单击事件
154 $('.control-list span').on('click', function(){
155 //console.log($(this).index())
156 m = $(this).index();
157 controlImage(m);
158 });
159
160 //向右
161 $('.slide-right').on('click', function(){
162 m ++;
163 if (m >= length) {
164 m = 0;
165 }
166 controlImage(m)
167 });
168
169 //向左 上一个
170 $('.slide-left').on('click', function(){
171 m --;
172 if (m < 0) {
173 m = length-1
174 }
175 controlImage(m)
176 })
177
178 //定时函数
179 function runPlay() {
180 //循环变量累加
181 m ++;
182 //判断
183 if (m >= length) {
184 m = 0;
185 }
186 //调用函数 控制图片
187 controlImage(m)
188 }
189
190 //控制图片的变化
191 // n表示 要第几个显示
192 function controlImage(n) {
193 $('.imglist li').removeClass('current').eq(n).addClass('current');
194 $('.control-list span').removeClass('current').eq(n).addClass('current');
195 }
196
197
198 })
199 </script>
200 </body>
201 </html>
越是困难的事越要立即去做，这样收益才会最大！！！
