js&json操作
//基本用法==============================================================================================================================================================================
$(".abc").*** =>
$("#abc").*** =>
$(".abc.def").*** =>
$(".abc.def a").*** =>
$(".abc.def .ghi").*** =>
123
获取值：
$(".abc").val();
$(".abc").text();
$(".abc").html();
设置值：
$(".abc").val("123");
$(".abc").text("123");
$(".abc").html(" getVal(string name，string city)
{
//。。。
return Json("{result:NG}");
//或
return Json(json);
}
1、页面加载后初始化方法==========================================================================
或者
2、按钮初始化click================================================================================
$("p").unbind("click"); //如有可能多次设置click方法，那这里需要unbind一次，不然会多次触发
$("p").click(function(){
$(this).hide();
});
3、获取控制器传的ViewBag=========================================================================
"@ViewBage.abc"或'@ViewBage.abc'
4、获取控制器传的Json数据=======================================================================
=》控制器处理：
using Newtonsoft.Json;
使用ViewBag:
json = JsonConvert.SerializeObject(_context.UrlRecords.ToList(), Formatting.Indented);
ViewBag.urls = json;
使用post请求（ajax）
json = JsonConvert.SerializeObject(_context.UrlRecords.ToList(), Formatting.Indented);
return Json(json);
=>视图
@using Newtonsoft.Json;
使用viewBag：
var urlList = @Html.Raw(JsonConvert.SerializeObject(ViewBag.urls));
var urlJsonList = eval('(' + urlList + ')');
遍历：
for (var i in urlJsonList)
{
urlJsonList[i].UserName
}
如果需要转字符串：
JSON.stringify(urlJsonList)或者在for中JSON.stringify(urlJsonList[i])
使用Ajax post:
$.post("/Home/urlSave",
{
Id: $(".id").text().trim(),
UserId: $(".UserId").text(),
UrlName: $(".UrlName").val(),
UrlInfo: $(".UrlInfo").val(),
UrlClass: $(".UrlClass").val(),
UrlString: $(".UrlString").val()
},
function (data, status) {
urlJsonList = eval('(' + data + ')');
divPageFunction(currentPage);
$(".second.modal .description").text(status == "success" ? "操作成功" : "操作失败");
$(".second.modal").modal('show');
$(".second.modal .button").unbind("click");
$(".second.modal .button").click(function () {
$(".second.modal").modal('hide');
});
//alert("Data: " + data + "\nStatus: " + status);
});
//分页、过滤、查询====================================================================================
//过滤部分================
var u = window.u || {};
u.isArray = function (o) {
return typeof o == 'object' && Object.prototype.toString.call(o).slice(8, -1).toLowerCase() == 'array';
};
u.search = function (array, value) {
if (!u.isArray(array)) throw new Error('第一个参数必须是数组类型');
var arr = [];
arr = array.filter(function (a) {
return JSON.stringify(a).indexOf(value) != -1;//遍历JSON的每条数据，如果包含字符串就取出
});
return arr;
};
//用法：JsonAfterFilter = u.search(urlJsonList, JsonFilterStr);
//===========================
//在这里初始化js中的全局变量
var urlList = @Html.Raw(JsonConvert.SerializeObject(ViewBag.urls));//从viewbag中拿到JSON数据
var urlJsonList = eval('(' + urlList + ')'); //转换一次
var TotalUrlCount = urlJsonList == null ? 0 : urlJsonList.length; //总记录数量
var numPerPage = 15; //每页显示的数量
var TotalUrlPage = parseInt((TotalUrlCount - 1) / numPerPage + 1); //总共的页数
var sortName = ""; //按照那个参数排序
var sortSerial = false; //排序是倒序还是顺序
var JsonAfterFilter; //过滤后的JSON数据
var JsonFilterStr = ""; //过滤关键字
var htmlStr = ""; //用于动态显示的html字符串
var currentPage = 1; //当前页数
var shownum = 5; //标签上显示1 2 3 4 5 的个数
//在这里处理刚加载后的第一页
$(function(){
if ("@ViewBag.page" == "urlConfig") {
var currentPage = 1; //首次进入为第一页
divPageFunction(currentPage); //显示分页标签
}
})
//分页的标签显示
function divPageFunction(pageNow) {
//先过滤需要显示的数据
if (JsonFilterStr != "") //是否有过滤字符串
JsonAfterFilter = u.search(urlJsonList, JsonFilterStr);
else
JsonAfterFilter = urlJsonList;
//因为可能过滤后总数编号，需要重新计算总页数
TotalUrlCount = JsonAfterFilter == null ? 0 : JsonAfterFilter.length;
TotalUrlPage = parseInt((TotalUrlCount - 1) / numPerPage + 1);
//赋值当前也，以供其他地方使用
currentPage = pageNow;
//part1:分页标签显示，加首页显示
htmlStr = "";
//显示出来
$("#divPages").html(htmlStr);
//根据当前页显示table信息
divTableFunction(pageNow);
}
//根据数据量获取标签上需要显示的页数。思路是循环判断当前页数-1、+1、-2、+2、-3、+3...，存储满足要求的序号到数组，直到数量超过需要显示的2倍或者达到显示的数量就返回
function getShowPageIndexs(pageNow,totalPage,showNum) {
var ListIndexs = [];
var count = 1;
var step = 1;
ListIndexs.push(pageNow);
while (count < showNum && step < showNum * 2) {
if (pageNow - step > 0 && count < showNum) { ListIndexs.splice(0, 0, pageNow - step); count++; }
if (pageNow + step <= totalPage && count < showNum) { ListIndexs.splice(ListIndexs.length, 0, pageNow + step); count++; }
step++;
}
return ListIndexs;
}
//页面的数据处理
function divTableFunction(pageNow) {
htmlStr = ""; //清空显示字符串
var index = 1; //标记当前的序号
JsonAfterFilter.sort(sortBy(sortName == "" ? "UrlName" : sortName, sortSerial, String)); //对过滤后的数据进行排序
//遍历并显示过滤后的数据JsonAfterFilter
for (var i in JsonAfterFilter) {
if (index > (pageNow - 1) * numPerPage && index <= pageNow * numPerPage) { //序号index在当前页内
var jsonStr1 = JSON.stringify(JsonAfterFilter[i]).replace(/\"/g, """); //将双引号改成" 并传给JSONStr1，以便html中点击时，把这个json传给弹出框使用
htmlStr += "";
@* @users.First(user => user.Id == u.UserId).UserName *@
htmlStr += " " + JsonAfterFilter[i].UserName + " ";
htmlStr += " " + JsonAfterFilter[i].UrlName + " ";
htmlStr += " " + JsonAfterFilter[i].UrlInfo + " ";
htmlStr += " " + JsonAfterFilter[i].UrlClass + " ";
htmlStr += " " + JsonAfterFilter[i].UrlString + " ";
htmlStr += " ";
htmlStr += " ";
htmlStr += " ";
htmlStr += " ";
}
index++;
}
$(".tableShow").html(htmlStr);
}
//显示模态框 查看的处理====================================
function showModal(obj) {
var url = JSON.parse(obj); //将字符串转成Json
$(".first.modal .header").text(url.UrlName); //修改第一个框标题
$(".first.modal .description").html( //修改第一个框的描述
" "
);
$("#urlEdit").show(); //编辑按钮显示出来
$("#urlEdit").unbind("click"); //编辑按钮解绑点击事件
$("#urlEdit").click(function() {
$(".first.modal input").attr("disabled", false);
}); //点击就把页面中input打开
$("#urlSave").unbind("click"); //解绑保存点击事件
$("#urlSave").click(function () {
$.post("/Home/urlSave",
{
Id: $(".id").text().trim(),
UserId: $(".UserId").text(),
UrlName: $(".UrlName").val(),
UrlInfo: $(".UrlInfo").val(),
UrlClass: $(".UrlClass").val(),
UrlString: $(".UrlString").val()
},
function (data, status) {
if (status == "success") {
urlJsonList = eval('(' + data + ')');//更新这个数据，不需要重新请求一次
divPageFunction(currentPage); //修改不会影响页数，就不需要更新页数
}
$(".second.modal .description").text(status == "success" ? "操作成功" : "操作失败");
$(".second.modal").modal('show'); //显示第二个modal
$(".second.modal .button").unbind("click");
$(".second.modal .button").click(function () { //第二个modal点击按钮，就关闭第二个modal
$(".second.modal").modal('hide');
});
});
}); //保存按钮，ajax post给控制器，控制器返回data（json数据），再更新显示
$('.coupled.modal').modal({
allowMultiple: true
}); //modal支持多框
$(".first.modal").modal({ blurring: true }).modal('show'); //设置和事件绑定完成后，弹框
}
//双按钮的模态框，删除按钮弹出
function showDoubleButtonModal(opreType, obj) {
$("#cancelButton").unbind("click");
$("#cancelButton").click(function () {
$(".ui.small.modal.doubleButtonModal").modal("hide");
});
$("#sureButton").unbind("click");
$("#sureButton").click(function () {
$(".ui.small.modal.doubleButtonModal").modal("hide");
switch (opreType) {
case "deleteUrl":
var url = JSON.parse(obj);
$.post(
"/Home/urlDelete",
{
id: url.Id
},
function (data, status) {
if (status == "success") {
urlJsonList = eval('(' + data + ')');//更新这个数据，不需要重新请求一次
TotalUrlCount = urlJsonList == null ? 0 : urlJsonList.length;
TotalUrlPage = parseInt((TotalUrlCount - 1) / numPerPage + 1);
divPageFunction(currentPage);
}
$(".second.modal .description").text(status == "success" ? "操作成功" : "操作失败");
$(".second.modal").modal('show');
$(".second.modal .button").click(function () {
$(".second.modal").modal('hide');
});
}
)
break;
}
});
if (opreType == "deleteUrl") {
var url = JSON.parse(obj);
$(".ui.small.modal.doubleButtonModal .header").text("确认删除");
$(".ui.small.modal.doubleButtonModal .description").text("是否删除" + url.UrlName + "的记录？");
}
$(".ui.small.modal.doubleButtonModal").modal("show");
}
//新增按钮打开modal框
function addUrlModal(userId) {
$(".first.modal .header").text("新增URL信息");
$(".first.modal .description").html(
" "
);
$("#urlEdit").hide();
$("#urlSave").unbind("click");//一定要先注销调，不然会处理多次
$("#urlSave").click(function () {
$.post("/Home/urlAdd",
{
UserId: userId,
UrlName: $(".UrlName").val(),
UrlInfo: $(".UrlInfo").val(),
UrlClass: $(".UrlClass").val(),
UrlString: $(".UrlString").val()
},
function (data, status) {
if (status == "success") {
urlJsonList = eval('(' + data + ')');//更新这个数据，不需要重新请求一次
TotalUrlCount = urlJsonList == null ? 0 : urlJsonList.length;
TotalUrlPage = parseInt((TotalUrlCount - 1) / numPerPage + 1);
divPageFunction(currentPage);
}
$(".second.modal .description").text(status == "success" ? "操作成功" : "操作失败");
$(".second.modal").modal('show');
$(".second.modal .button").unbind("click");
$(".second.modal .button").click(function () {
$(".second.modal").modal('hide');
});
//alert("Data: " + data + "\nStatus: " + status);
});
});
$('.coupled.modal').modal({
allowMultiple: true
});
$(".first.modal").modal({ blurring: true }).modal('show');
}
//modal的定义
//排序方法 用户 直接在html中调用
function sortChange(name) {
sortName = name; //修改排序的名称
sortSerial = !sortSerial; //每次调用就反序
divPageFunction(1); //跳到第一页 在加载第一页时就会根据排序名来处理
}
123....
");* *
隐藏、显示
$(".abc").hide();
$(".abc").show();
json的筛选：
var materialBymaterCode = materialJson.filter(function(e){return e.MaterialCode == “123”;});
//Ajax用法：===========================================================================================
$(selector).load(URL,data,callback);//URL 是加载的url，data是获取的数据，callback为方法 function(){} 暂无具体例子
$("#div1").load("demo_test.txt");//加载指定文档
$("#div1").load("demo_test.txt #p1"); //加载指定文档中id为p1的部分
$("button").click(function(){
$.get("/home/getVal",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});//向对应url获取信息，home是控制器，getVal是方法，（控制器中可以使用return Json(json);）data是拿到的数据；status：如果成功就是success
$("button").click(function(){
$.post("/home/getVal",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
//控制器中：
public async Task
模态框标题
描述可以出现在右边
提示
描述可以出现在右边
提示
描述可以出现在右边
ES6 教程
JSON解析格式化
JS在线运行
JAVA8新特性教程
jsfiddle中国国内版本
屏幕坏点检测工具
subline官方下载
JS在线运行编译
PHP在线运行编译
Java在线运行编译
C语言在线运行编译
Bash在线运行编译
C++在线运行编译
Ruby在线运行编译
Lua在线运行编译
Python在线运行编译
Go语言在线运行编译
Groovy在线运行编译
Dart在线运行编译
JSRUN前端笔记， 是针对前端工程师开放的一个笔记分享平台，是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的
MarkDown 语法 （极客专用语法）， 这里属于IT工程师。