web最后突击点

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.方法和事件的区别

• 事件名前一般以on开头，事件不需要程序员调用。

  • 事件通常与函数结合使用，函数不会在事件发生前被执行。

• 方法是程序员写语句直接调用，即显示调用：可以触发事件。

24.click是回调函数，一打开页面加载好就会执行。

突击习题

1.登录页面表单

2.留言板功能

3.新闻卡片功能

4.奇偶数行表格

5.表格内容过滤

6.省份级联选择框