前端开发笔记

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/kxbk100/article/details/88254109

aria-expanded=“false”

• aria-expanded表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的

aria-hidden字符串

• 可选值为true和false，true表示元素隐藏(不可见)，false表示元素可见

快捷键

• Ctrl + Enter 光标不在末尾回车
• Ctrl + Backspace 删除一个词
• Ctrl + -> 以词为单位后移

col-xs-n中放图片不生效

img {
  display: block;
  max-width: 100%;
}

display

• block 默认，此元素将显示为块级元素，此元素前后会带有换行符
• inline 此元素会被显示为内联元素，元素前后没有换行符
• inline-block 行内块元素

使用col就要在母元素上清除浮动，因为col栅格也是浮动的

使用flag覆盖叠加新的属性

• css中使用.side-bar-card.flag {}来调用
• html中用<div class="side-bar-card flag clearfix">

a标签链接不带下划线，并列换行写

a,
a:hover,
a:visited,
a:link,
a:active {
  text-decoration: none;
}

line-heigh不要写px

表格居中

<table align="center">

bootstrap响应式表格

<div class="table-responsive">

表格内容水平垂直居中

<!-- 水平居中 -->
<th style='text-align: center;'>host</th>
<!-- 垂直居中 -->
<td rowspan=$row_host1 style='vertical-align: middle;'>host1</td>
<!-- 既水平又垂直居中 -->
<td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>hello</td>

图片撑满

background-size: cover;

input/select/textarea/… + .form-control

.form-group

• 单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%;。将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列

响应式表格

• 将任何.table元素包裹在<div class="table-responsive">元素内

垂直方向的内容截断

• 响应式表格使用了overflow-y: hidden属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件

.form-inline

• 输入框和单选/多选框控件默认被设置为width: 100%;。在内联表单，我们将这些元素的宽度设置为width: auto;，因此，多个控件可以排列在同一行。根据布局需求，手动设置宽度
• 一定要添加label标签，对于内联表单，可以通过为label设置.sr-only类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如aria-label、aria-labelledby或title属性

.form-horizontal

• 无需再添加.row了

margin对span无效

display: block;
line-height: 1.5;

button后退

<button class="btn btn-danger ycx" onclick="javascript :history.back(-1);">返回</button>

居中

• 文本内容居中：text-center
• 图片居中：center-block
• 其他类型元素居中：col-md-offset-X

在form标签上加novalidate属性，可以禁用h5默认的表单验证效果

div置顶的方法

position: relative;
z-index: 99999;

margin:auto实现绝对定位元素的居中

.element {
  width: 600px;
  height: 400px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

ajax中dataType为预期服务器返回的数据类型，不写有默认值，开发过程中不要写

服务器只返回单个String类型数据，则一定要写dataType: 'text'

ajax表单序列化传输

$("#submit").on('touchstart', function () {
  var form = $("#handouts").serialize();
  $.ajax({
    url: 'http://192.168.1.111:8686/EAnnotation/addPassage',
    type: "post",
    data: form,
    cache: false,
    success: function (data) {
      window.location.href = "course.html"
    },
    error: function (e) {
    }
  })
  return false;
 });

ajax表单传递键值对

$.ajax({
  url: ip + "/scm",
  type: 'POST',
  cache: false,
  data: {
     username: username,
     password: password
  },
  success: function (data) {
    console.log(1)
    if (data == 0) {
      alert("密码错误");
    } else if (data == -1) {
      alert("账号不存在")
    } else {
      console.log(data)
      // window.location.href = "index.html"
      localStorage.name = data;
    }
  },
  error: function (e) {
  }
})

ajax传递formData

formData既可以传键值对，也可以传文件

$("#submit").on('touchstart', function () {
  var form = new FormData($('#homework')[0]);
  $.ajax({
    url: 'https://bitcandy.one/EAnnotation/addPassage',
    type: 'POST',
    cache: false,
    data: form,
    processData: false,
    contentType: false,
    success: function (data) {
      window.location.href = "classteacher.html"
      console.log(form);
    },
    error: function (e) { }
  })
  return false;
});

ajax拿到json后如何使用

$.ajax({
  url: 'http://192.168.1.111:8686/EAnnotation/getAllPassages',
  type: "post",
  cache: false,
  success: function (data) {
    console.log(data);
    $.each(data, function (i, item) {
      var time = getDateDiff(item.releaseTime);
      if (item.photo) {

      } else {
        $("ul[class=index]").append(
          `<div class="card">
            <div class="card-header">` + item.title + `</div>
            <div class="card-content card-content-padding">
              <p class="date index">` + item.theme + `·` + time + `</p>
              <a href="www.baidu.com" class="link" style="color: black"><p style="margin-top: 0; margin-bottom: 0;">` + getcontent(item.content).substring(0, 70) + ` ...</p></a>
            </div>
            <div class="card-footer">
              <a href="#" class="link" style="color">
                <i class="f7-icons size-18">heart_fill</i>` + 1 + `喜欢</a>
              <a href="#" class="link">
                ` + 22 + `人批注过，共计` + 44 + `条批注
                  </a>
            </div>
          </div>`
        )
      }
    })

  },
  error: function (e) {
  }
 })

多行文字限制字数显示…

.text_overflow{
  /* width:27rem; */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

单行文字限制字数显示…

.text_overflow{
  width:27em;
  white-space:nowrap;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis; 
  overflow:hidden;
}

从html代码中获取纯文本函数

function getcontent(text) {
  var html = text;
  return html.replace(/<[^>]*>|/g, "");
}

时间戳转化函数

// 2014-05-08 00:22:11
function getDateDiff(dateTimeStamp) {
  var dateTimeStamp = new Date(Date.parse(dateTimeStamp.replace(/-/g, "/")));
  dateTimeStamp = dateTimeStamp.getTime();
  var result;
  var minute = 1000 * 60;
  var hour = minute * 60;
  var day = hour * 24;
  var halfamonth = day * 15;
  var month = day * 30;
  var now = new Date().getTime();
  var diffValue = now - dateTimeStamp;
  if (diffValue < 0) {
    return;
  }
  var monthC = diffValue / month;
  var weekC = diffValue / (7 * day);
  var dayC = diffValue / day;
  var hourC = diffValue / hour;
  var minC = diffValue / minute;
  if (monthC >= 1) {
    if (monthC <= 12)
      result = "" + parseInt(monthC) + "个月前";
    else {
      result = "" + parseInt(monthC / 12) + "年前";
    }
  }
  else if (weekC >= 1) {
    result = "" + parseInt(weekC) + "周前";
  }
  else if (dayC >= 1) {
    result = "" + parseInt(dayC) + "天前";
  }
  else if (hourC >= 1) {
    result = "" + parseInt(hourC) + "小时前";
  }
  else if (minC >= 1) {
    result = "" + parseInt(minC) + "分钟前";
  } else {
    result = "刚刚";
  }
  return result;
};

js变量生命周期

• 全局变量

var n=999;
function f1(){
  alert(n);
}
f1(); // 输出999,说明全局变量n在函数内部被读取

• 函数中的全局变量：在函数内部声明变量没有使用var，实际上是声明了一个全局变量，前提是需要先调用函数

var func1 = function(){
  a1 = 1;
  console.log(a1); //输出:1
  function func2() {//func2()是一个闭包
    a2 = 2;
    console.log(a2);
  }
  func2()；//闭包函数中的变量在调用函数之后，变量也是全局变量
  console.log(a2);//输出2
};
func1();//调用函数，才会使变量生效
console.log(a1);//输出1
console.log(a2);//输出2，说明闭包中没有用var声明的变量也是全局变量。

• 局部变量：在函数内部声明的变量。函数内部的变量，外部无法读取。

function f1(){
  var n=999;
}
alert(n); // 没有定义，说明函数内部的变量，外部无法读取。

• JavaScript解释器在执行脚本时，是按块来执行的。通俗地说，就是浏览器在解析HTML文档流时，如果遇到一个<script>标签，则JavaScript解释器会等到这个代码块都加载完后，先对代码块进行预编译，然后再执行。执行完毕后，浏览器会继续解析下面的HTML文档流，同时JavaScript解释器也准备好处理下一个代码块。由于JavaScript是按块执行的，所以如果在一个JavaScript块中调用后面块中声明的变量或函数就会提示语法错误。虽然说，JavaScript是按块执行的，但是不同块都属于同一个全局作用域，也就是说，块之间的变量和函数是可以共享的。

jquery获取radio被选中的值

三种方法都可以

$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

jquery获取select被选中的值

• 获取选中项的value值

$('select#sel option:selected').val();
或者
$('select#sel').find('option:selected').val();

• 获取选中项的text值

$('select#seloption:selected').text();
或者
$('select#sel').find('option:selected').text();

• 获取当前选中项的索引值

$('select#sel').get(0).selectedIndex;

jquery获取checkbox被选中的值

• 获取单个checkbox选中项

$("input:checkbox:checked").val() 
或者 
$("input:[type='checkbox']:checked").val(); 
或者 
$("input:[name='ck']:checked").val(); 

• 获取多个checkbox选中项

$("input[name='favour']:checked").each(function () {
  alert($(this).val());
});

jquery获取span和input的值

$("span").html();
$("input").val();

jquery数组对象获取value值

• 需将数组对象再次封装为jquery对象

// 错误
$("input[name='jQueryArray']")[0].val();
// 正确
$($("input[name='jQueryArray']")[0]).val();0

this必须用$包装成JQuery对象才能使用

用let和const的声明可以产生块级作用域，解决闭包循环事件绑定

for (var i = 0; i < 2; i++)  
{     
  let ii = i;   //const也可以，块级作用域  
  var bt = document.getElementById('bt'+ii);  
  bt.onclick = function(){  
    console.log(ii);  
  };  
}  

JavaScript中有5种简单数据类型（也称为基本数据类型）： Undefined、Null、Boolean、Number和String 。还有1种复杂数据类型—— Object ，Object本质上是由一组无序的名值对组成的。

backgroundColor要加.style属性设置元素的背景颜色；bgcolor不用加.style

json中key也是个字符串，要加引号，key和value之间是用:号来表示的

CSS样式表和选择器

• CSS和HTML结合的三种方式：行内样式表、内嵌样式表、外部样式表
• CSS四种基本选择器：标签选择器、类选择器、ID选择器、通用选择器
• CSS几种扩展选择器：后代选择器、交集选择器、并集选择器、伪类选择器