前端网页样式与交互技巧速览-优快云博客

web最后突击点

1.要把ul中li前面的黑点换成指定的图片，就在ul下：list-style: url();，要是不想要前面的黑点：list-style: none;。

2.居中的问题

ps：flex可以解决80%的问题，要是不会，就先display: flex;再说。

让外部大的div水平居中：margin: 0 auto
让内部的整个div在外部div里水平垂直居中，以下操作都在外部div执行。
- 先开启flex：display: flex;
- 水平居中：justify-content: center;
- 垂直居中：align-items: center;
想让文本居中
- 垂直居中：则让line-height和父元素的高度相等
- 水平居中：text-align: center;

3.关于给文本添加点状虚线的问题

可以用border设置dotted，简单好用。
text-decoration设置，先text-decoration: underline;设置出下划线，再更改下划线的样式text-decoration-style: dotted;
- text-decoration-color设置下划线颜色
- text-underline-offset设置下划线与文本的间隔

4.margin只对块元素有效（行内块元素都不行

5.判断首字符是不是英文字符

先获取首字符：var k = value.charCodeAt(0)
判断是不是英文字符：(k < 65 || (k > 90 && k < 97) || k > 122)，如果满足则不是英文字符。

6.table表格问题

在table中去除td之间的间隔，在table中写：border-collapse: collapse;
- 在考试的时候不让另外在style里写，直接就写<table border = '1' cellspacing = '0'>
colspan表示列合并，rowspan表示行合并。
在td里让文字水平垂直居中：<td valign = 'middle' align = 'center'>
caption是表格的标题，写在table之中，tr之前。

7.表格内容过滤

（1）在查询栏中绑定keyup函数：$('#filter').keyup(function(){}
（2）排他思想：把全部tr隐藏起来：$('tbody tr').hide()
（3）把包含查询字的tr显现出来：$('tbody tr').filter(":contains('" + $(this).val() + "')").show();（contains 动态类名，进行渲染。

8.只要是参数里面要加具体值的时候就“+ 具体值 +”（引引加加中间写值

可以先写常规的，再把中间的值替换成我们在用户那获取得到的。

9.script代码放在head标签里

js是用的：window.onload = function(){}
jq用的：$(function(){})，是$(document).ready(function(){})的简写。

10.掌握jq和ajax的请求

$.ajax()是jq中Ajax请求的核心方法，所有的其他方法都是在其内部使用。
一些参数说明
- async：表示请求是否异步处理，默认是true。
- contentType：发送数据到服务器时所使用的内容类型，可以不写。
- data：规定要发送到服务器的数据，多数是json。
- dataType：期望从服务器响应的数据类型。
- error()：请求失败要运行的函数。
- success(resp)：请求成功时运行的函数，resp是自定义的参数名，表明服务器返回端返回的数据。
- type：规定请求的类型，默认是get，不区分大小写。
- url：规定发送请求的url。
$.get(url, data, function(resp), dataType)
- url必需。
$.post(url, data, function(resp), dataType)

11.考试不让在原来的页面上添加id或class，需要掌握:nth-child()的用法。

12.常见的使用jq

设置文本内容：$().text("")
设置css样式：$().css("", "")
在里面添加标签，例如在里面添加span标签：$().html("<span style='color:#ff0000'>产品名称中不能有数字</span>");
在表单中获取相关元素（前面是冒号来代替的）：
- $(":text")：选取所有的单行文本框
- $(":checkbox")：选取所有的多选框
在表单中的过滤器
- 选择指定下拉列表的被选中元素：$("选择器 > option:selected")
遍历：
- $.each(要遍历的对象,function(index,element){})(index：数组的下标，element：数组的对象
- jq对象.each(function(index,element){})

13.跳转页面：window.location.href = "xxx.html";

14.在success函数中打印传过来的json字串：document.write(JSON.stringify(jsonData));

15.在下拉列表多选框中，size="x"是决定在框中显示多少个列表。

16.对于tab栏转换的jq实现方法

$(function(){
            $(".top span").mouseover(function(){
                $(this).addClass("choose").siblings().removeClass("choose");
                var index = $(this).index();
                $(".content p").eq(index).show().siblings().hide();
            })
        })

掌握siblings()方法，以及下面匹配的内容用index()来获取。

17.表单form问题

在radio中，同一组的单选框name属性要一样，checked表示默认选中。
必须要有name属性。否则提交不了信息。

18.添加内容

js一般就是innerHTML、innerTEXT添加或者appedChild。
jq是append或者是html。

19.关于js和jq一些语法的不同

js是appendChild、parentNode，jq是append、parent。
js是innerTHML、innerTEXT，jq是html、text。
js是value。jq是val。

20.display: inline-block会导致一些问题的出现，能不用就不用哈

去除inline-block的左右间距：给父元素设置：font-size=0
元素在一行中不能整齐排列，解决方法：float：left

21.记住：行内元素不能设置宽高，它是由文字撑开的，要设置记得display换一下。

22.onclick和click的区别

onclick是绑定事件，在鼠标点击的时候告诉应该做什么。写法：onclick = function(){}，用[]来选择第几个标签。
click是方法，它是触发onclick事件，只要执行这个方法就会触发onclick事件，相当于是模拟了一次鼠标点击。写法：click(function(){})，用eq()来选择第几个标签。
- 如果click括号内定义了其他可执行语句，那click是先执行完onclick事件后再去执行括号内部的语句。

23.方法和事件的区别