val获取到的值转换html,localStorage使用、val()和text()取值的区别、通过js将html文档加入页面中、js(jquery)实时监听input输入框值的变化、路径传参、代码提...-CSDN博客

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

console.log(key);

}

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

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

text()返回所有匹配元素(如p、div等)的组合文本内容。val()用于获取输入元素的值(例如输入、选择等)

$("#drop").val() #获取文本内容

$("#drop").text("设置内容") #设置文本内容

$("#drop").attr("title") #获取属性title的值

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

1、静态界面当中：

2、在js当中写入

$("#test").append(html文档内容)：

html文档即你要写入的内容

代码示例：

#需要添加的html页面 " 前面需要加 \

var text = "

" +

"" + "tokenize" + "" + "

$("#navbar").append(text);

#需要添加进html页面的数据，可以通过拼接的方式加入var results = ‘‘;for (var i inresult_token) {

results+=result_token[i]

}var content = "" +results + "";

$("#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/ #浏览器显示路由：127.0.0.1:5000/label_detail/肺癌def label_detail(label_name): #label_name="肺癌" #通过路径将参数传入视图函数中

pass3.通过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 dev3.提交之前先git pull,将本地代码更新到最新版本4.提交：git add . git commit -m ‘提交信息‘git push

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

原文：https://www.cnblogs.com/wangcuican/p/13208131.html