个人HTML学习记录

年纪大了就很多东西记不住,这里仅记录学习过程中遇到的问题以供后期查阅

HTML及CSS篇

  • Web开发者通常用lorem ipsum text来做占位符,占位符就是占着位置的一些文字,没有实际意义
  • alt属性,也被称为alt text, 是当图片无法加载时显示的替代文本
  • 占位符(placeholder text)是输入框中的预定义文本。例:

    <input type="text" placeholder="this is placeholder text">

  • 下面是一个最基本的表单:
<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL">
  <button type="submit">Submit</button>
</form>
  • required指定某些选项为必填项。例:

    <input type="text" required>

  • 单选按钮例子:

    <label><input type="radio" name="indoor-outdoor">Indoor</label>

  • 复选按钮例子:

    <label><input type="checkbox" name="personality">Loving</label>

  • checked设置复选按钮或单选按钮默认被选中。例:

    <input type="radio" name="test-name" checked>

  • CSS覆盖优先度:!important>行内样式>id属性>最后的 CSS 声明

Bootstrap篇

  • containercontainer-fluid是bootstrap用于支持响应式布局的容器
  • btn是bootstrap的按钮风格,btn-block可以让按钮变成块级元素
  • Bootstrap自带一些预定义的按钮颜色,例:
btn-primary
btn-success
btn-info
btn-warning
btn-danger
  • 同上文字也有相应的颜色风格,如:text-primaytext-success等,例:这是一段基于bootstrap的绿色文字
  • Font Awesome 是一个非常方便的图标库,图标将会继承其父HTML元素的字体大小
  • Bootstrap有非常多方便漂亮的类,这里只列举部分学习过程中遇到的案例,关于bootstrap的更多用法可以参考bootstrap 4中文文档

JQuery篇

  • 所有jQuery方法都是由$开始,jQuery通过选择器来选择一个元素,然后操作元素做改变
  • 按钮弹回效果:$("button").addClass("animatedbounce");,用$("button")来选中按钮,然后用.addClass("animated bounce")给按钮加CSS class,需要先在头部引入jQuery库和Animate.css库
  • 根据id属性来获取元素:$("#target"),就像CSS一样,在id的名字前加上 #,其他同理
  • addClass()给元素添加class,removeClass()去掉元素的class;.css()改变元素CSS样式,如:$(".text-color").css("color", "blue");
  • jQuery还能改变除了CSS以外的属性。如让按钮变不可选:$("button").prop("disabled", true);
  • jQuery的.html()方法可以添加HTML标签和文字到元素,而元素之前的内容都会被方法的内容所替换掉,如可用:$("h3").html("<em>jQuery Playground</em>");
  • .remove()移除HTML元素,例:$("button").remove();appendTo()把元素加到其他元素中,例:$("#target4").appendTo("#left-well");
  • clone()拷贝元素,例:$("#target2").clone().appendTo("#right-well");两个jQuery方法合在一起使用叫方法链
  • parent()访问指定元素的父元素,例:让left-well元素的父元素parent()的背景色变成蓝色:$("#left-well").parent().css("background-color", "blue")
  • 与上相对应的,children()访问指定元素的子元素,例:让left-well元素的子元素children()的文本颜色变成蓝色:$("#left-well").children().css("color", "blue")
  • jQuery 用CSS选择器来选取元素,class:nth-child(n),CSS按照索引顺序(从1开始)选择目标元素的所有子元素。例:给目标元素的第三个子元素添加bounce class:$(".target:nth-child(3)").addClass("animated bounce");
  • .class:odd选取索引为奇数的所有元素,.class:even选取索引为偶数的所有元素
  • addClass()通过animated可以添加很多酷炫的动画效果,如:.addClass("animated fadeOut");(淡出效果),.addClass("animated hinge");(掉出屏幕效果)

JavaScript篇

  • 记录一个让我蛋疼半天的单引号和双引号运用的问题:

    var myStr = '<a href="http://www.example.com" target="_blank">Link</a>';

单引号放在外面以保证里面所有的双引号被正确的识别,比转义符号方便

  • .pop() “抛出”一个数组末尾的值,可以把这个“抛出”的值赋给一个变量存储起来。例:对于这段代码 var oneDown = [1, 4, 6].pop(); 现在oneDown的值为6,数组变成了[1, 4]
  • 同理shift()的工作原理就像.pop(),但它移除的是第一个元素,而不是最后一个
  • .unshift()类似.push(), 但不是在数组的末尾添加元素,而是在数组的头部添加元素
  • 获取被数组抛出的值: var a = arr.shift();
  • 21点游戏算法:
var count = 0;               //定义变量count

  function cc(card) {
    if (card < 7) {
      count++;                 //如果card的值小于7,count自增1
    } else if (card > “9”) {
      count--;                 //如果card的值大于9,count自减1
    }
    if (count > 0) {
      return count + " Bet";
    } else if (count <= 0) {
      return count + " Hold";
    }
}

cc(2); cc(3); cc(7); cc('K'); cc('A');     //调用函数cc并传递实参
  • .hasOwnProperty(propname)检查对象是否有该属性。如果有返回true,反之返回false
  • Json对象用{}包括,数组用[]包括
  • 访问数组里的对象里的数组例子:var a = arr[1].list[1];
  • for ([初始化]; [条件判断]; [计数器])
  • 迭代输出数组每个元素并求和例子:
var myArr = [ 2, 3, 4, 5, 6];
 
var total = 0;
for (var i = 0; i < myArr.length; i++) {
   total += myArr[i];
}
  • 遍历二维数组
var arr = [[1, 2], [3, 4], [5, 6]];
 
for (var i = 0; i < arr.length; i++) {
   for (var j = 0; j < arr[i].length; j++) {
     console.log(arr[i][j]);
   }
}
  • 生成随机数在两个指定的数之间
function myFunction(Min, Max) {
 
  return Math.floor(Math.random() * (Max - Min + 1)) + Min;
}
 
myFunction(1, 9);
  • 找到字符串The dog chased the cat中单词 the,可以使用正则表达式: /the/gi

/ 是这个正则表达式的头部,the 是想要匹配的模式,/ 是正则表达式的尾部,g 代表着 global(全局),意味着返回所有的匹配而不仅仅是第一个,i 代表着忽略大小写,意思是寻找匹配的字符串的时候忽略掉字母的大小写。

  • /\d+/g表示正则表达式匹配一个或更多数字。没有+表示只匹配一个数字,\d表示匹配数字
  • /\s+/g表示正则表达式匹配字符串中的空白。空白字符有 " " (空格符)、\r (回车符)、\n (换行符)、\t (制表符) 和 \f (换页符)。
  • 可以用正则表达式选择器的大写版本 来转化任何匹配,如\s 匹配任何空白字符,\S 匹配任何非空白字符
  • 一个构造函数传参例子
var Car = function(wheels, seats, engines) {
  this.wheels = wheels;
  this.seats = seats;
  this.engines = engines;
}
 
var myCar = new Car(1, 2, 3);

最后修改:2019 年 09 月 19 日 12 : 42 AM
如果觉得我的文章对你有用,请随意赞赏

1 条评论

  1. 罗木、

    泪目(´இ皿இ`)

发表评论