Jquery属性和元素操作，ajax

Posted 2020-12-12 呓语落花

jquery属性和元素操作

 

 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();

 

 

ajax 

  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 });