Jquery属性和元素操作，ajax

jquery属性和元素操作

jquery 操作属性
attr("属性名") 拿到属性值或者键值对应设置属性

attr("属性名","要写入的值") # 属性写入

removeAttr("属性名")  从所有匹配的元素中移除指定的属性、



// 写入属性

$('ul a').attr('href',href);

// 移除属性

$('a').eq(2).removeAttr('href');

// 获取元素文本

jquery 操作元素

text() 设置或返回所选元素的文本内容

html() 设置或返回所选元素的内容(包括HTML标记)

val() 设置或返回表单字段的值

# 实例

 #  获取元素文本

console.log($(".div1").text());

 // 获取元素内容  html都会打印出来

 console.log($(".div1").html());

 // val  一般会用在获取表单的值

 console.log($(".div1").val());

 

# 写个复杂的获得提交的账号密码信息

 $("#btn").click(function () {

    // 获取到账号的值

    var user = $('#user').val();

    var pwd = $('#pwd').val();

    // 使用js代码进行校验等操作

});

jquery 添加新的html内容

append() 在备选元素的结尾插入内容,最尾部添加内容

prepend()在备选元素的开头插入内容，最开头处添加

after()  在备选元素之后插入内容，

before() 在备选元素之前插入内容

# 实例

$('.div1').append('<h1>python</h1>');

// 在该元素开始的位置添加内容 在元素内部

$('.div1').prepend('<h1>python</h1>');

// 元素之后添加 在所选元素之外

$('.div1').after('<div>这是在元素之后添加</div>');

// 元素之前添加 ，在所选元素之外

$('.div1').before('<div>元素之前添加</div>');

删除 元素/内容

remove() 删除被选元素(及其子元素） 相当于彻底清除

empty()  从被选元素中删除子元素     相当于清空下面的子元素

# 实例

// 删除元素  选中的节点和子节点一并被删掉  移除

$('ul').remove();

// ul 在页面上仍然存在，但是ul下面的子节点全部被删掉 子元素置空

$('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实例

// JS

// 页面加载完成之后执行的的代码

$(function () {

    // ajax请求

    //给前端页面上的提交按钮绑定方法

    $('#btn').click(function () {

        // 先获取账号

        var acc = $('#user').val();

        // 获取密码

        var pwd = $('#pwd').val();

        之后进行加密方法(略过）  发送ajax请求

        花括号括起来的事一个js对象

        $.ajax({

            url: "/login",  # 发送请求目标地址

            data:{          # 如果有要求的数据就需要写

                'user':acc,

                'pwd':pwd

            },

            type:'POST',    # 也可以使用method关键字传

            dataType:'json',  // 期望后台返回的数据类型，按照json的格式解析浏览器返回的数据

            # 如果对方是可以允许跨域请求的接口，返回的类型要设置成jsonp

            success:function (data) {

                # data是后台返回的数据，通过一个形参传入匿名函数进行逻辑处理

        // 请求成功的时候 success之后的函数会被触发  请求成功之后，后台返回数据会作为参数传入到

                // success 后的回调函数中

                //data.code // 就相当于取返回结果的json中的code字段

                if (data.code == "1"){

                    alert(data.msg);

                }else{

                    // this代表当前节点位置，当前绑定按钮，即按钮next的节点，

                    // append  在元素内部添加内容 达到异步发送请求返回结果给页面

                    $(this).next().append(data.msg);

                    alert(data.msg); // 编写的时候可以直接使用alert弹框来校验功能

                }

            },

            error:function () {

        //失败的话调用此处的回调函数，与下面的done跟fail一样

            }



        })

上面写法是方式1， 接着看方式2

    ajax在发送请求的时候除了传递参数之外会自动生成两个参数传递过去

    1个是回调函数，另一个是_=后面跟的一串数字的数据

    如果目标后面是可以接受跨域请求的话，会将返回的数据与回电函数名称，字符串数据打包成一个jsonp格式的数据返回

    # 如果需要跨域请求的话 dataType需要携程jsonp

    下面来看第二种写法

   $.ajax({

        url: '/login',

        type: 'POST',

        data: {

            'user': acc,

            'pwd': pwd

        },

        dataType: 'json'

    }).done(function (data) {  // 成功会进入done方法

        if (data.code == "1") {

            alert(data.msg)

        } else {

            $(this).next().append(data.msg)

        }

    }).fail(function () {  // 失败会进入fail方法

        alert('请求失败')

    })



});

    看一个案例

$.ajax({

    url: 'pro_list',

    method: 'get',

    dataType: 'json',

}).done(function (data) {

    var pro = $('#pro');

    var res = data.data;

    for (i in res) {

        // res结构为 列表，内含对象

        // 直接打印i的话是下标

        console.log(res[i]); // 拿到的事对象

        var option = '<option value=' + res[i].id + '>' + res[i].title + '</option>';

        pro.append(option)

    }

    console.log(data);

    // change 事件 监测元素值是否发生变化

    pro.change(function () {

        // 往接口列表发送ajax请求

        // 参数 pro_id

        var pro_id = pro.val();

        console.log(pro_id);

        $.ajax({

            url: '/interface',

            data: {

                "pro_id": pro_id

            },

            method: 'POST',

            dataType: 'json'

        }).done(function (data) {

            // 首先获取到目标下拉框的元素

            var interface = $('#interface');

            // 成功的话就往option里面进行添加

            if (data.code === "1") {

                var res = data.data;

                // 在添加到下拉框之间先清空

                interface.empty();

                for (i in res) {

                    var option = '<option value=>' + res[i].name + '</option>';

                    interface.append(option)

                }

            }

        })

    })



});