jquery 操作属性

  1. attr("属性名") 拿到属性值或者键值对应设置属性
  2. attr("属性名","要写入的值") # 属性写入
  3. removeAttr("属性名")  从所有匹配的元素中移除指定的属性、
  5. // 写入属性
  6. $('ul a').attr('href',href);
  7. // 移除属性
  8. $('a').eq(2).removeAttr('href');
  9. // 获取元素文本

jquery 操作元素

  1. text() 设置或返回所选元素的文本内容
  2. html() 设置或返回所选元素的内容(包括HTML标记)
  3. val() 设置或返回表单字段的值
  4. # 实例
  5.  #  获取元素文本
  6. console.log($(".div1").text());
  7.  // 获取元素内容  html都会打印出来
  8.  console.log($(".div1").html());
  9.  // val  一般会用在获取表单的值
  10.  console.log($(".div1").val());
  12. # 写个复杂的获得提交的账号密码信息
  13.  $("#btn").click(function () {
  14.     // 获取到账号的值
  15.     var user = $('#user').val();
  16.     var pwd = $('#pwd').val();
  17.     // 使用js代码进行校验等操作
  18. });

jquery 添加新的html内容

  1. append() 在备选元素的结尾插入内容,最尾部添加内容
  2. prepend()在备选元素的开头插入内容，最开头处添加
  3. after()  在备选元素之后插入内容，
  4. before() 在备选元素之前插入内容
  5. # 实例
  6. $('.div1').append('<h1>python</h1>');
  7. // 在该元素开始的位置添加内容 在元素内部
  8. $('.div1').prepend('<h1>python</h1>');
  9. // 元素之后添加 在所选元素之外
  10. $('.div1').after('<div>这是在元素之后添加</div>');
  11. // 元素之前添加 ，在所选元素之外
  12. $('.div1').before('<div>元素之前添加</div>');

删除 元素/内容

  1. remove() 删除被选元素(及其子元素） 相当于彻底清除
  2. empty()  从被选元素中删除子元素     相当于清空下面的子元素
  3. # 实例
  4. // 删除元素  选中的节点和子节点一并被删掉  移除
  5. $('ul').remove();
  6. // ul 在页面上仍然存在，但是ul下面的子节点全部被删掉 子元素置空
  7. $('ul').empty();

ajax

ajax 的技术目的是让js发送http请求，与后台进行通信
获取数据源和信息，ajax技术原理是实例化xmlhttp对象
使用此对象与后台通信，ajax通信过程不会影响后续js代码的执行
从而实现异步

同步与异步，

同步即指一件事干完之后再干下一件事，
异步，干一件事的同事进行另外一件事

局部刷新和无刷新

ajax可以实现局部刷新，也叫做无刷新，无刷新值得是整个页面不刷新，只是局部刷新
ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新
ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新

同源策略

ajax 请求的页面或资源只能是同一个域下的资源，不能是其他域的资源
这是在设计ajax时基于安全的考虑，

ajax使用方法

常用参数
1 url请求地址
2 type 请求方式 默认是GET 常用的还有POST
3 dataType 设置返回的数据格式，常用的事json格式，也可以设置为html
4 data 设置为发送给服务器的数据
5 success 设置请求成功后的回调函数
6 error 设置请求失败后的回调函数
7 async 设置是否异步，默认 true 表示异步

主要涉及jquery.ajax

其实就相当于从页面上发送http请求，
应用实例
加密传输数据， submit提交表单是不会进行加密的
先通过js代码加密，然后通过ajax发送请求。
ajax实例

  1. // JS
  2. // 页面加载完成之后执行的的代码
  3. $(function () {
  4.     // ajax请求
  5.     //给前端页面上的提交按钮绑定方法
  6.     $('#btn').click(function () {
  7.         // 先获取账号
  8.         var acc = $('#user').val();
  9.         // 获取密码
  10.         var pwd = $('#pwd').val();
  11.         之后进行加密方法(略过）  发送ajax请求
  12.         花括号括起来的事一个js对象
  13.         $.ajax({
  14.             url: "/login",  # 发送请求目标地址
  15.             data:{          # 如果有要求的数据就需要写
  16.                 'user':acc,
  17.                 'pwd':pwd
  18.             },
  19.             type:'POST',    # 也可以使用method关键字传
  20.             dataType:'json',  // 期望后台返回的数据类型，按照json的格式解析浏览器返回的数据
  21.             # 如果对方是可以允许跨域请求的接口，返回的类型要设置成jsonp
  22.             success:function (data) {
  23.                 # data是后台返回的数据，通过一个形参传入匿名函数进行逻辑处理
  24.         // 请求成功的时候 success之后的函数会被触发  请求成功之后，后台返回数据会作为参数传入到
  25.                 // success 后的回调函数中
  26.                 //data.code // 就相当于取返回结果的json中的code字段
  27.                 if (data.code == "1"){
  28.                     alert(data.msg);
  29.                 }else{
  30.                     // this代表当前节点位置，当前绑定按钮，即按钮next的节点，
  31.                     // append  在元素内部添加内容 达到异步发送请求返回结果给页面
  32.                     $(this).next().append(data.msg);
  33.                     alert(data.msg); // 编写的时候可以直接使用alert弹框来校验功能
  34.                 }
  35.             },
  36.             error:function () {
  37.         //失败的话调用此处的回调函数，与下面的done跟fail一样
  38.             }
  40.         })

上面写法是方式1， 接着看方式2
ajax在发送请求的时候除了传递参数之外会自动生成两个参数传递过去
1个是回调函数，另一个是_=后面跟的一串数字的数据
如果目标后面是可以接受跨域请求的话，会将返回的数据与回电函数名称，字符串数据打包成一个jsonp格式的数据返回
# 如果需要跨域请求的话 dataType需要携程jsonp
下面来看第二种写法

  1.  $.ajax({
  2.         url: '/login',
  3.         type: 'POST',
  4.         data: {
  5.             'user': acc,
  6.             'pwd': pwd
  7.         },
  8.         dataType: 'json'
  9.     }).done(function (data) {  // 成功会进入done方法
  10.         if (data.code == "1") {
  11.             alert(data.msg)
  12.         } else {
  13.             $(this).next().append(data.msg)
  14.         }
  15.     }).fail(function () {  // 失败会进入fail方法
  16.         alert('请求失败')
  17.     })
  19. });

看一个案例

  1. $.ajax({
  2.     url: 'pro_list',
  3.     method: 'get',
  4.     dataType: 'json',
  5. }).done(function (data) {
  6.     var pro = $('#pro');
  7.     var res = data.data;
  8.     for (i in res) {
  9.         // res结构为 列表，内含对象
  10.         // 直接打印i的话是下标
  11.         console.log(res[i]); // 拿到的事对象
  12.         var option = '<option value=' + res[i].id + '>' + res[i].title + '</option>';
  13.         pro.append(option)
  14.     }
  15.     console.log(data);
  16.     // change 事件 监测元素值是否发生变化
  17.     pro.change(function () {
  18.         // 往接口列表发送ajax请求
  19.         // 参数 pro_id
  20.         var pro_id = pro.val();
  21.         console.log(pro_id);
  22.         $.ajax({
  23.             url: '/interface',
  24.             data: {
  25.                 "pro_id": pro_id
  26.             },
  27.             method: 'POST',
  28.             dataType: 'json'
  29.         }).done(function (data) {
  30.             // 首先获取到目标下拉框的元素
  31.             var interface = $('#interface');
  32.             // 成功的话就往option里面进行添加
  33.             if (data.code === "1") {
  34.                 var res = data.data;
  35.                 // 在添加到下拉框之间先清空
  36.                 interface.empty();
  37.                 for (i in res) {
  38.                     var option = '<option value=>' + res[i].name + '</option>';
  39.                     interface.append(option)
  40.                 }
  41.             }
  42.         })
  43.     })
  45. });