Web前端学习笔记

Web前端学习笔记

1. 格式或命名问题

1. javascript 代码如果访问了页面中的元素需要将 script 代码放至最后，因为此时为页面还没有完全加载，获取元素有可能会失败

2. css 引入格式如下：

   <link rel="stylesheet" type="text/css" href="">
   

3. 向元素中添加事件时（如 button 中的点击时间），函数名不能与 window 中的自带函数重复，不然会导致函数不执行或其他错误，如：

   <input type="button" value="清空" onclick="clear()">
   

   此时点击按钮后函数不会执行，因为 clear 与 window 中的 clear 重名

2. 标签样式及属性问题

2.1 table

2.1.1 单元格合并

<td colspan="x"></td>	<!-- 表示将该单元格与前 x-1 个列单元格合并 -->
<td rowspan="x"></td>	<!-- 表示将该单元格与后 x-1 个行单元格合并 -->

2.1.2 表格居中

<talbe style="margin: 0 auto; text-align: center;"></table>

2.1.3 表格以及单元格边框

td {
   
    border: 1px solid;
}
table {
   
    border: 1px solid;
}

1px: 边框大小 solid: 直线

2.2 textarea

2.2.1 禁止拉伸样式

将其 style 样式中的 resize 设置为 none 即可

2.2.2 设置所填字符串最大/最小长度

<textarea minlength="3" maxlength="100"></textarea>

该属性只在其在表单中，且点击提交表单按钮时生效

2.2.3 设置为必填项

向其中加入 required属性

该属性只在其在表单中，且点击提交表单按钮时生效

2.3 form

2.3.1 提交问题

1. 传统提交方法

   <form action="" method=""></form>
   

   属性	值	描述
   accept	MIME_type	HTML 5 中不支持
   accept-charset	charset_list	规定服务器可处理的表单数据字符集
   action	URL	规定当提交表单时向何处发送表单数据
   autocomplete	on off	规定是否启用表单的自动完成功能
   enctype	见说明	规定在发送表单数据之前如何对其进行编码
   method	get post	规定用于发送 form-data 的 HTTP 方法
   name	form_name	规定表单的名称
   novalidate	novalidate	如果使用该属性，则提交表单时不进行验证
   target	_blank _self_parent _top framename	规定在何处打开 action URL

   2. 使用 Ajax

          $("form").submit(function() {
             
              $.ajax({
             
                  method: 'post',
                  url: '',
                  data: {
             },
                  success: function() {
             },
                  error: function(err) {
             },
                  ...
              });
          });
      

2.3.2 form表单提交的原生事件

form 表单在提交时会有一个原生事件，即自动刷新页面，此时如果你采用 ajax 方法想要在提交表单后进行其他处理，由于此时事件是异步的，有一定几率会先刷新页面，随后再执行你的函数

实例如下：

...
<script>
    function sendmessage() {
    
        $.ajax({
    
            method: 'post',
            url: '/SendMessage',
            data: {
    ...},
            success: function() {
    
                alert("提交成功");
                window.location = "/";
            },
            error: function(err) {
    
                alert("提交失败，请刷新重试");
                console.log(err);
            }
        });
    }
    $("form").submit(function() {
    
        sendmessage();
    });
</script>
...

此时 success 中的函数有一定几率被跳过

解决方法

使用 e.preventDefault() 函数阻止原生事件的发生

修改如下：

$("form").submit(function(e) {
   
    sendmessage();
    e.preventDefault();
});

2.4 input

<input placeholder="提示内容" type="text" autocomplete="off" required maxlength="10" minlength="6">

• placeholder

  提示内容

• type

  类型

• autocomplete

  是否记忆化

• required

  作为表单的必填项

• maxlength

  最大字符长度

• minlength

  最小字符长度

2.5 label

将两个元素绑定起来，经常与 checkbox 连用，增强用户体验，如：

<input type="checkbox" id="remember_me">
<label for="remember_me">下次自动登录</label>

2.6 ul(ol)

去除缩进

ul {
   
    margin: 0;
    padding: 0;
}

2.7 li

去除标签前的标识符

li {
   
    list-style: none;
    margin: 10px 0;
}

3. CSS

3.1 margin

/* 应用于所有边 */
margin: 1em;
margin: -3px;

/* 上边下边 | 左边右边 */
margin: 5% auto;

/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;

/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;

/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;

margin 属性接受 1~4 个值。每个值可以是 <length>，<percentage>，或 auto。取值为负时元素会比原来更接近临近元素

• 当只指定一个值时，该值会统一应用到全部四个边的外边距上
• 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边
• 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距
• 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距

length

​ 以固定值为外边距

percentage

​ 相对于包含块的宽度，以百分比值为外边距

auto

​ 让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中

3.2 vertical-align

用于设置元素标签在垂直方向上的位置，一般将其设置为 middle

3.3 display

值	描述
none	此元素不会被显示
block	此元素将显示为块级元素，此元素前后会带有换行符
inline	默认。此元素会被显示为内联元素，元素前后没有换行符
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示
run-in	此元素会根据上下文作为块级元素或内联元素显示
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）
table-row	此元素会作为一个表格行显示（类似 <tr>）
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

特别的，display: flex 表示弹性布局，是一种新特性，可以让父级元素内的元素禁止换行

3.4 border

border: 1px solid;	/* 边框大小1px 边框形状为直线 */
border-radius: 2px;	/* 设置边框角落圆弧半径 */

3.5 line-height

将其设置成和元素高度一致可使得文字垂直居中，如

div {
   
    height: 36px;
    line-height: 36px;
}

3.6 outline

设置 outline: none; 可以去除一些元素在被选中时的边框

3.7 cursor

设置鼠标指向该元素时的形状，如 cursor: pointer; 设置为指针状

3.8 自动计算宽度和高度

有时如果对元素指定宽度和高度会出现溢出问题（即使宽度或高度未超过父元素），此时我们可以设置 css 自动计算宽度和高度

...
<li>
    <input style="width: 60%;">
    <input style="width: calc(100% - 60%); height: auto;">
</li>
...

4. jQuery

4.1 Ajax

Ajax 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

Ajax 不是新的编程语言，而是一种使用现有标准的新方法

Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

Ajax 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行

一般语法：

$.ajax({
   
	method: 'post',
	url: '',
	data: {
   },
	success: function() {
   },
	error: function(err) {
   },
	...
});

4.2 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作

基础语法：$(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询"和"查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

实例:

• $(this).hide() - 隐藏当前元素
• $(“p”).hide() - 隐藏所有 <p> 元素
• $(“p.test”).hide() - 隐藏所有 class=“test” 的 <p> 元素
• $("#test").hide() - 隐藏 id=“test” 的元素

4.3 HTML相关

4.3.1 捕获元素相关属性

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值
• attr() 方法用于获取属性值

4.3.2 获取 checkbox 是否被选择

var checked = $('#checkbox').prop('checked');

4.4 JQuery实现简单搜索功能并设置关键词高亮

4.4.1 搜索功能

function search() {
   
    //获取关键词
    var value = $.trim($('#search_text').val());
    //获取要搜索处的父级元素
    var children = $('#comments_container').children();
    //对每一个子级元素进行关键词搜索
    children.each(function() {
   
        $(this).hide();		//先将其隐藏
        if($(this).text().indexOf(value) >= 0) {
   
            $(this).show();		//匹配成功，显示
        }
    }