localStorage使用、val()和text()取值的区别、通过js将html文档加入页面中、js(jquery)实时监听input输入框值的变化、路径传参、代码提交流程

一、localStorage使用   参考链接:https://www.cnblogs.com/st-leslie/p/5617130.html

1.localStorage写入数据,三种方法

var storage=window.localStorage;  #需要先定义一个storage对象
//方法一:写入a字段
storage["a"]=1;
//方法二:写入b字段
storage.b=1;
//方法三:写入c字段
storage.setItem("c",3);    #一般使用这个写入
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);

注意:localStorage使用的也是遵循同源策略,所以不同的网站不能共用相同的localStorage,localStorage只支持string类型的存储。

2.localStorage读取数据三种方法

//第一种方法读取
var a=storage.a;
console.log(a);
//第二种方法读取
var b=storage["b"];
console.log(b);
//第三种方法读取
var c=storage.getItem("c");   #一般使用这个读取
console.log(c);

3.localStorage修改数据

就是获取到数据然后重新赋值

storage.a=4;

4.localStorage删除数据

1.将localStorage的所有内容删除

storage.clear();

2.将localStorage的某个键值对删除

storage.removeItem("a");

5.localStorage的键获取

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            for(var i=0;i<storage.length;i++){
                var key=storage.key(i);
                console.log(key);
            }

使用key()方法,向其中出入索引即可获取对应的键

二、val()和text()取值的区别

text()返回所有匹配元素(如p、div等)的组合文本内容。val()用于获取输入元素的值(例如输入、选择等)
$("#drop").val()     #获取文本内容
$("#drop").text("设置内容")    #设置文本内容
$("#drop").attr("title")   #获取属性title的值

三、通过js将html文档加入到页面中(js append方法)

1、静态界面当中:
     <div id="test"></div>
2、在js当中写入
     $("#test").append(html文档内容):
     html文档即你要写入的内容

代码示例:

#需要添加的html页面  " 前面需要加 \
var text = "<li role=\"presentation\" class=\"active\">" + "<a href=\"#home\" aria-controls=\"home\" role=\"tab\" data-toggle=\"tab\">" + "tokenize" + "</a>" + "</li>"; $("#navbar").append(text);
#需要添加进html页面的数据,可以通过拼接的方式加入
var results = ‘‘; for (var i in result_token) { results += result_token[i] } var content = "<textarea class=\"form-control\" id=\"message-text\" style=\"height:350px\" class=\"tokenize\">" + results + "</textarea>"; $("#tab-content").append(content);

四、js(jquery)实时监听input输入框值的变化

使用jquery的input事件

$("#input1").on("input propertychange",function(){
       console.log($("#input1").val())
});

jquery事件绑定:on()
/bind()/delegate(),在jq1.7版本之后是使用on() 事件绑定就是在被选元素上添加一个或多个事件 上面的就是在input1上绑定input和propertychange事件 一、分清以下几个概念: onchange事件:此事件会在元素内容发生改变,且失去焦点的时候触发。浏览器支持度较好 onpropertychange事件:此事件会在元素内容发生改变时立即触发,即便是通过js改变的内容也会触发此事件。元素的任何属性改变都会触发该事件,不止是value。只有IE11以下浏览器支持此事件 oninput事件:此事件会在value属性值发生改变时触发,通过js改变value属性值不会触发此事件。只有IE8以上或者谷歌火狐等标准浏览器支持。
二、然后我们主要是结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。 oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,
不像 onchange 事件需要失去焦点才触发。不过oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代。所以就有了以上的写法。

五、路径传参

项目中涉及到的几种路径传参

以下都是在视图函数获取数据:
1.通过路径传参:页面跳转路径/search?label=label_name   #get请求能获取路径?后面的值,在浏览器上显示路由127.0.0.1:5000/search?label=value = request.values["label"]        #value="肺"
2.路径传参:视图函数上路径设置/label_detail/<string:label_name>   #浏览器显示路由:127.0.0.1:5000/label_detail/肺癌
def label_detail(label_name):   #label_name="肺癌"        #通过路径将参数传入视图函数中
       pass
3.通过ajax传递参数:json格式参数
        在视图函数中通过value = request.get_data()获取ajax传递过来的参数data
        value = json.loads(value)    #反序列化value

注意:在ajax中如果写了dataType:json,说明服务器返回给前端页面的数据是json格式
前端页面就需要返回json格式字符串,可以通过json.dumps()
ajax的success接收的返回数据可以直接使用

六、真实环境代码提交流程

1.尽量做完一个功能就提交一次
2.如果不是在dev分支最好先切换到dev分支再提交:git checkout dev
3.提交之前先git pull,将本地代码更新到最新版本
4.提交:git add .      git commit -m 提交信息     git push 

将dev的代码合并到master提交代码流程
1.从dev切换到master:git checkout master
2.合并dev分支的代码:git merge dev 
3.git push

 

localStorage使用、val()和text()取值的区别、通过js将html文档加入页面中、js(jquery)实时监听input输入框值的变化、路径传参、代码提交流程

上一篇:mysql从一张表查出数据存到另一张表和inner join的用法


下一篇:net core 3.1 swagger