前端零碎知识点

第一部分 JSON的使用

JSON声明

1.JSON的声明方式一
var istype=[{'id':'字段值','text':'字段值'},
{'id':'字段值','text':'字段值'}
]

2.JSON的声明方式二
var parmas={}
parmas['id']=字段值    #其实这里是parmas[0]['id']
parmas['text']=z字段值


JSON的格式

{
    "employees": [
        {
            "id": "Bill",
            "text": "Gates"
        },
        {
            "id": "George",
            "text": "Bush"
        }
    ]
}

将字符串对象 或者字符串数组转化成JSON

a.官方提供的方式
var jsonString = '{"bar":"property","baz":3}';
var jsObject = JSON.parse(jsonString); //转换为json对象
var st = JSON.stringify(jsObject); //转换为json类型的字符串　

b.JQuery提供的获取json类型的字符串
var st= $.parseJSON('{"testing":"1\\t2\\n3"}')  

c.JS提供将json类型的字符串转化成json（为了更好对属性值进行操作）
var jsonString = '{"bar":"property","baz":3}';
var dataObj=eval("("+data+")");

补充：
1.@RequestBody接受的是一个json格式的字符串
2.json对象可以使用 对象.属性 的方式获得参数，而字符串不可以

第二部分 获取jsp或者html的标签及其属性

https://www.runoob.com/jquery/jquery-dom-get.html

JQuery选择器
1.JQuery 或者$(别名)
2.使用HTML标签选择器
$(‘标签名’)
3.使用ID选择器
$('#id名')
4.类选择器
$('.类名')
5.多类选择器
$(‘.类名a .类名b’) 选择既属于a类 也属于b类的标签
6.子元素选择器
$('body > p') 选择body 的直接子元素p
7.后代元素选择器
$(‘标签a 标签b’) 获取标签a 中的所有标签b
8.组合选择器（根据业务需求 进行合理搭配）

选择标签后的操作：

1.显示与隐藏：
$('#id').show();
$('#id').hide();

2.获取内容  前两个可以是任何标签 最后一个只能是input 
$("#test").text()  #纯文本
$("#test").html() #会对html标签进行转义
$("#test").val()

3.获取标签属性值
$("#runoob").attr("href")

html document对象:
https://www.cnblogs.com/zrifq/p/6245540.html

1.通过document对象获取标签
document.getElementById('iframeId')
document.getElementByName('iframeName')
document.getElementsByName('classname') #class不是唯一的，所以获取的元素是存放在一个数组当中

2.获取标签的值
document.getElementById('iframeId').value  #针对input
或者
document.getElementById('iframeId').innerText #针对其他标签

3.设置标签的值
document.getElementById('iframeId').value = "设置新的值"
或
document.getElementById('iframeId').innerText = "设置新的值"

4.获取\设置\移除标签的属性值
document.getElementById('iframeId').getAttribute("url") #获取
document.getElementById('iframeId').setAttribute("url","/test/getName")  #设置
document.getElementById('iframeId').removeAttribute("url") #移除

5.获取/设置内联样式 （如：style中的width属性）
document.getElementById('iframeId').style.width
document.getElementById('iframeId').style.width = 150px

第三部分 JSP与后台服务器交互的方式

1.load()  方法从服务器加载数据，并把返回的数据放入被选元素中。
load()中的参数可以是文本或者URL
$("button").click(function(){ $("#div1").load("demo_test.txt",function(data){ 
if(data.statusTxt=="success")
 alert("外部内容加载成功!"); 
if(data.statusTxt=="error") 
alert("Error: "+data.status+": "+data.statusText); }); 
});

如果结合datagrid 中url属性
这里会直接访问后台服务器，并把获取的数据填充到datagrid中
data的数据格式是json格式字符串
$('#datagrid1').load() ; 
location.reload()  #用于刷新界面

2.ajax发送异步请求
$.ajax({ 
url: "test.html", 
context: document.body, 
success: function(data){ #通常后台要将返回结果封装成json对象  使得前端可以 对象.属性 方式获取值
       alert(data.result);
}});