前端

内联标签(a、span等)设置height、width没有效果

a标签去掉下划线:text-decoration: none;

for循环中添加序号

从1开始

{{ forloop.counter }}

从0开始

{{ forloop.counter0 }}

反向开始

{{ forloop.revcounter }}

反向从0结束

{{ forloop.revcounter0 }}

判断是否是最后一个循环

{{ forloop.last }}  # 如果是最后一个循环返回True,不是则返回false

判断是否是第一个循环

{{ forloop.first }}  # 如果是第一个循环返回True,不是则返回false

判断外层循环到了第几层

{{ forloop.parentloop  }}

js刷新前端页面

location.reload()

前端json字符串转化为对象

str = JSOn.parse(data)

前端对象(字典、列表、元组等)转化为字符串

JSON.stringfy(data)

在一个标签中查找某一个样式,并且为其赋值

$('#edit_form').find('select').val(bid);

$('#edit_form').find('input[name="nid"]').val(nid);

表单中添加行数

var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = "11.11.11.11";
var td2 = document.createElement('td');
td2.innerHTML = "8001";

$(tr).append(td1);
$(tr).append(td2);

$('#tb').append(tr);



ajax默认只能提交json和字符串,但是也可以提交列表
$.ajax({
  url: '/xxxx',
  data: {'user': 123, 'hostlist': [1,2,3,4]},
  type: 'POST',
  dataType: 'JSON',  # 添加这个参数,在回调函数内部会自动将server端传递过来的json处理成对象,不用再使用JSON.parse(str)将值复制给一个对象。
  traditional: true,  # 使用此参数,ajax便可将列表传递给server端
  success: function(obj){
    console.log(obj);
  }
}) 

JQuery serialize()方法
将form表单当中的值取出
# 将表单中的值取出,并赋值给div
$("div").text($("form").serialize());


Query slideDown()
演示 jQuery slideDown() 方法。

jQuery slideUp()
演示 jQuery slideUp() 方法。

jQuery slideToggle()
演示 jQuery slideToggle() 方法。

js中的for循环与 python相同,遇到break会终止整个循环,continue会跳过当前循环。

for (var item in [11,22,33]){

  console.log(item);

  continue;

}

var arry = [11,22,33]

for (var i=0;i<arry.length;i++){

  break;

}

document、this均为dom对象,无法直接使用js方法,需要加上"()",例如$(document).ready、$(this).val()

# 巨坑无比的button

button按钮标签,需要加上type="button",否则虽然可以提交,但是页面的url地址也会发生变化,变为"url+csrf_token",相当于发送了一个GET请求,通过ajax提交的post返回值会被马上覆盖,导致页面会被重新刷新一次。

# 前端中常用小图标

fontawesom

# 网站排版塌陷

css样式    clear: both;    // 可以让float排版的页面元素禁止塌陷

a标签抛锚

a标签添加href代表跳转,添加域名www.*.com后可以实现页面跳转,如果添加"#id名称或者class名称"会实现焦点转移到相应的标签上,类似js中的focus转移。

js文件中

s="hello world"

console.log(s.CharAt(3)) #通过索引找到对应的字符串

console.log(s.IndexOf("w")) #通过字符串找到对应的下表索引

console.log(s.slice(2,-2)) #字符串切片,切从第三个字符串到倒数第二个字符串,同python相同

#js中,索引的开头仍然是下标0

# 内边框添加阴影

box-shadow: inset 2px 2px 2px rgba(0,0,0,.1);

# checkbox标签全选或全部取消

<input id="choice" type="checkbox">
<input class="choice_item" type="checkbox">
$("#choice").click(function () {

if($(this).prop("checked")){
$(".choice_item").prop("checked",true)
}else {
$(".choice_item").prop("checked",false)
}

})
原文地址:https://www.cnblogs.com/ttyypjt/p/10320421.html