1 jquery 操作属性
2 attr("属性名") 拿到属性值或者键值对应设置属性
3
4 attr("属性名","要写入的值") # 属性写入
5
6 removeAttr("属性名") 从所有匹配的元素中移除指定的属性、
7
8
9
10 // 写入属性
11
12 $(‘ul a‘).attr(‘href‘,href);
13
14 // 移除属性
15
16 $(‘a‘).eq(2).removeAttr(‘href‘);
17
18 // 获取元素文本
19
20 jquery 操作元素
21
22 text() 设置或返回所选元素的文本内容
23
24 html() 设置或返回所选元素的内容(包括HTML标记)
25
26 val() 设置或返回表单字段的值
27
28 # 实例
29
30 # 获取元素文本
31
32 console.log($(".div1").text());
33
34 // 获取元素内容 html都会打印出来
35
36 console.log($(".div1").html());
37
38 // val 一般会用在获取表单的值
39
40 console.log($(".div1").val());
41
42
43
44 # 写个复杂的获得提交的账号密码信息
45
46 $("#btn").click(function () {
47
48 // 获取到账号的值
49
50 var user = $(‘#user‘).val();
51
52 var pwd = $(‘#pwd‘).val();
53
54 // 使用js代码进行校验等操作
55
56 });
57
58 jquery 添加新的html内容
59
60 append() 在备选元素的结尾插入内容,最尾部添加内容
61
62 prepend()在备选元素的开头插入内容，最开头处添加
63
64 after() 在备选元素之后插入内容，
65
66 before() 在备选元素之前插入内容
67
68 # 实例
69
70 $(‘.div1‘).append(‘<h1>python</h1>‘);
71
72 // 在该元素开始的位置添加内容 在元素内部
73
74 $(‘.div1‘).prepend(‘<h1>python</h1>‘);
75
76 // 元素之后添加 在所选元素之外
77
78 $(‘.div1‘).after(‘<div>这是在元素之后添加</div>‘);
79
80 // 元素之前添加 ，在所选元素之外
81
82 $(‘.div1‘).before(‘<div>元素之前添加</div>‘);
83
84 删除 元素/内容
85
86 remove() 删除被选元素(及其子元素） 相当于彻底清除
87
88 empty() 从被选元素中删除子元素 相当于清空下面的子元素
89
90 # 实例
91
92 // 删除元素 选中的节点和子节点一并被删掉 移除
93
94 $(‘ul‘).remove();
95
96 // ul 在页面上仍然存在，但是ul下面的子节点全部被删掉 子元素置空
97
98 $(‘ul‘).empty();
1 ajax 的技术目的是让js发送http请求，与后台进行通信
2
3 获取数据源和信息，ajax技术原理是实例化xmlhttp对象
4
5 使用此对象与后台通信，ajax通信过程不会影响后续js代码的执行
6
7 从而实现异步
8
9 同步与异步，
10
11 同步即指一件事干完之后再干下一件事，
12
13 异步，干一件事的同事进行另外一件事
14
15 局部刷新和无刷新
16
17 ajax可以实现局部刷新，也叫做无刷新，无刷新值得是整个页面不刷新，只是局部刷新
18
19 ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新
20
21 ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新
22
23 同源策略
24
25 ajax 请求的页面或资源只能是同一个域下的资源，不能是其他域的资源
26
27 这是在设计ajax时基于安全的考虑，
28
29
30
31 ajax使用方法
32
33 常用参数
34
35 1 url请求地址
36
37 2 type 请求方式 默认是GET 常用的还有POST
38
39 3 dataType 设置返回的数据格式，常用的事json格式，也可以设置为html
40
41 4 data 设置为发送给服务器的数据
42
43 5 success 设置请求成功后的回调函数
44
45 6 error 设置请求失败后的回调函数
46
47 7 async 设置是否异步，默认 true 表示异步
48
49
50
51 主要涉及jquery.ajax
52
53 其实就相当于从页面上发送http请求，
54
55 应用实例
56
57 加密传输数据， submit提交表单是不会进行加密的
58
59 先通过js代码加密，然后通过ajax发送请求。
60
61 ajax实例
62
63 // JS
64
65 // 页面加载完成之后执行的的代码
66
67 $(function () {
68
69 // ajax请求
70
71 //给前端页面上的提交按钮绑定方法
72
73 $(‘#btn‘).click(function () {
74
75 // 先获取账号
76
77 var acc = $(‘#user‘).val();
78
79 // 获取密码
80
81 var pwd = $(‘#pwd‘).val();
82
83 之后进行加密方法(略过） 发送ajax请求
84
85 花括号括起来的事一个js对象
86
87 $.ajax({
88
89 url: "/login", # 发送请求目标地址
90
91 data:{ # 如果有要求的数据就需要写
92
93 ‘user‘:acc,
94
95 ‘pwd‘:pwd
96
97 },
98
99 type:‘POST‘, # 也可以使用method关键字传
100
101 dataType:‘json‘, // 期望后台返回的数据类型，按照json的格式解析浏览器返回的数据
102
103 # 如果对方是可以允许跨域请求的接口，返回的类型要设置成jsonp
104
105 success:function (data) {
106
107 # data是后台返回的数据，通过一个形参传入匿名函数进行逻辑处理
108
109 // 请求成功的时候 success之后的函数会被触发 请求成功之后，后台返回数据会作为参数传入到
110
111 // success 后的回调函数中
112
113 //data.code // 就相当于取返回结果的json中的code字段
114
115 if (data.code == "1"){
116
117 alert(data.msg);
118
119 }else{
120
121 // this代表当前节点位置，当前绑定按钮，即按钮next的节点，
122
123 // append 在元素内部添加内容 达到异步发送请求返回结果给页面
124
125 $(this).next().append(data.msg);
126
127 alert(data.msg); // 编写的时候可以直接使用alert弹框来校验功能
128
129 }
130
131 },
132
133 error:function () {
134
135 //失败的话调用此处的回调函数，与下面的done跟fail一样
136
137 }
138
139
140
141 })
142
143 上面写法是方式1， 接着看方式2
144
145 ajax在发送请求的时候除了传递参数之外会自动生成两个参数传递过去
146
147 1个是回调函数，另一个是_=后面跟的一串数字的数据
148
149 如果目标后面是可以接受跨域请求的话，会将返回的数据与回电函数名称，字符串数据打包成一个jsonp格式的数据返回
150
151 # 如果需要跨域请求的话 dataType需要携程jsonp
152
153 下面来看第二种写法
154
155 $.ajax({
156
157 url: ‘/login‘,
158
159 type: ‘POST‘,
160
161 data: {
162
163 ‘user‘: acc,
164
165 ‘pwd‘: pwd
166
167 },
168
169 dataType: ‘json‘
170
171 }).done(function (data) { // 成功会进入done方法
172
173 if (data.code == "1") {
174
175 alert(data.msg)
176
177 } else {
178
179 $(this).next().append(data.msg)
180
181 }
182
183 }).fail(function () { // 失败会进入fail方法
184
185 alert(‘请求失败‘)
186
187 })
188
189
190
191 });
192
193 看一个案例
194
195 $.ajax({
196
197 url: ‘pro_list‘,
198
199 method: ‘get‘,
200
201 dataType: ‘json‘,
202
203 }).done(function (data) {
204
205 var pro = $(‘#pro‘);
206
207 var res = data.data;
208
209 for (i in res) {
210
211 // res结构为 列表，内含对象
212
213 // 直接打印i的话是下标
214
215 console.log(res[i]); // 拿到的事对象
216
217 var option = ‘<option value=‘ + res[i].id + ‘>‘ + res[i].title + ‘</option>‘;
218
219 pro.append(option)
220
221 }
222
223 console.log(data);
224
225 // change 事件 监测元素值是否发生变化
226
227 pro.change(function () {
228
229 // 往接口列表发送ajax请求
230
231 // 参数 pro_id
232
233 var pro_id = pro.val();
234
235 console.log(pro_id);
236
237 $.ajax({
238
239 url: ‘/interface‘,
240
241 data: {
242
243 "pro_id": pro_id
244
245 },
246
247 method: ‘POST‘,
248
249 dataType: ‘json‘
250
251 }).done(function (data) {
252
253 // 首先获取到目标下拉框的元素
254
255 var interface = $(‘#interface‘);
256
257 // 成功的话就往option里面进行添加
258
259 if (data.code === "1") {
260
261 var res = data.data;
262
263 // 在添加到下拉框之间先清空
264
265 interface.empty();
266
267 for (i in res) {
268
269 var option = ‘<option value=>‘ + res[i].name + ‘</option>‘;
270
271 interface.append(option)
272
273 }
274
275 }
276
277 })
278
279 })
280
281
282
283 });