前端页面html

网页样式

1. 网页基本标签
   <p></p>段落标签
   <br/>换行标签
   <hr/>水平线标签
   <b></b>加粗标签
   <u></u>下划线标签
   <i></i>字体倾斜标签
   <span></span>空白标签

2. 文本样式
   标签

   <font 属性=“属性值”>文本标签

   属性：color:控制颜色；size:字体大小，范围1~7，1最小7最大；face字体

3. 图像
   标签

   < img src=“图像路径”/>

   src:图片路径（绝对路径和相对路径）
   alt:规定图片不显示时候替换图片现实的文字
   title:鼠标悬浮上提示的文字
   border:图片边框
   height:图片高度
   width:图片宽

4. 超链接
   标签
   < a href=“跳转目标” target=“目标窗口弹出方式”>

   href:用于指定链接目标url
   target:用于指定发来目标的当时：取值（_self在原窗口打开，_blank在新窗口打开）

   javascript:void(0);死超链接

   锚链接<a href="#锚点"></a>
   style="text-decoration: none; //超链接去下划线

5. • 列表

• 无序<ul><li></li></ul>
  type赋值
  disc项目符号显示为实体圆心（默认值）
  square项目符号显示为实体方心
  circle项目符号显示为空心圆
• 有序<ol><li></li></ol>
  type赋值
  1 使用数字作为项目符号
  A/a 使用大写/小写字母作为项目符号
  I/i 使用大写/小写罗马数字作为项目符号
• 自定义<dl><dt><dd></dd></dt></dl>
<dl>声明定义列表
  <dt>声明列表项
  <dd>定义列表内容

6. 表格

   < table>< tr>< td>内容< /td></ tr></ table>

   align水平对齐方式:left左对齐、center居中对齐、right右对齐

   valign垂直对齐方式:top顶端对齐、middle居中对齐、bottom低端对齐

   表格的夸列colspan=“n”~在要合并列的第一个单元格中加入colspan =“n”

   表格的跨行rowspan=“n” ~在要合并的地一个单元格中加入rowspan=“n”

   表格美化
   bgcololr=“整个表格背景的颜色” background=“背景图片的地址” border=“表格边框像素” width=“表格宽度” height=“表格高度”

   border 边框

   bordercolor边框颜色

   style="text-align:center;vertical-align:middle; 文字水平垂直居中

7. 提交即文本

   < form action=" " method =" “>
   < input type=” " name=" " value=" "/>
   ……………
   < input type=“submit”>
   < /form>

• action本文框数据提交给谁
  method（get,post）以那种方式提交

8. type本文框类型（submit提交框,text文本框，radio单选框，checkbox多选框(checked=“checked"默认选中)，password密码框，hidden隐藏框，button按钮，email邮件框，url网址框）
   name本文框名字
   value文本框默认值
   placeholder 提示文字
   disabled 使所有input框(按钮)失效
   按钮改图片
   锁定input的值 readonly=“readonly”
   只能输入数字 οnkeyup=“value=value.replace(/[^\d]/g,’’)”
   生成随机数value=”<%=(int)(Math.floor(Math.random()*9999999))%>"
   不为null: required
   div用css样式
   style=“float:left” 浮动
   给div加背景颜色
   background: 颜色;
   给div里面的字体加颜色
   color：颜色；
   div宽: n px;
   div高: n px;

• enctype=“multipart/form-data”

  提交图片

9. 下拉选

• 标签

< select id=a>
< option>选择</ option>
</ select>

• 属性
  selected=“selected” 下拉框中的默认选中

• js
  a.add(new Option)
  使用js添加选项
  a.options.length = 0;清空option

• jq
  添加select
  $("#select1").append("")
  清除select
  a2.empty();

10. < style>< /style>

• 图片: style=“display: 属性;”
  默认值：block；
  隐藏属性：none;

• 边框:style=border:"表边框粗细程度"px 边框类型 颜色
  边框类型:虚线(dashed)实线(solid)

• 字体颜色 type=color:颜色；

• 鼠标悬浮-改变鼠标的样式
  $("#a").css(“cursor”,“not-allowed”) 鼠标不能用的样式
  $("#a").css(“cursor”,“pointer”)鼠标手指的样式

11. 幕布前后顺序：z-index: n
    n大在前面

js

• 介绍
  js:javaScripr:浏览器直译式脚本语言
  弱类型语言。var代表所有类型
  事件驱动语言

• 事件：
  页面加载成功事件（onload）
  鼠标单击事件（onclick）
  鼠标悬浮事件（onmouseover）
  鼠标不悬浮事件 (onmouseout)
  提交事件（onsubmit）需要返回值return 状态改变事件(onchange)
  属性改变事件(onchange)

• 语法：
  与java代码相似

• 获取dom对象：
  var i= document.getElementById(“id”);
  //获取每个id的元素
  i.属性=属性值；//修改属性值
  document.getElementsByTagName(“标签”) //以数组的形式获取每个标签

• 创建元素
  var a= document.createElement(“标签”)

• 设置属性
  a.属性=属性值

• 把创建的标签放到xx中（xx指某一个元素）
  xx.appendChild(a)

• 使用bom方法：
  提示框（alert）
  文本框（promrt）//有返回值
  提问框（confirm）//返回Boolean类型
  详情解析

• 定时任务
  var timer = setInterval(“方法”，时间（毫秒）);//循环定时器
  clearInterval(timer)//停止循环定时器

  一次性定时器 setTimeout()

• 定义方法
  function 方法名（）{
  }

• html中id不能以“阿拉伯数字”开头

jq

• JQery：是一个优秀的js库

1. 代码/文本/值

• 获取div文本,赋值可以直接写代码
  html() --有参 赋值(编译) --无参 取值(获取文本)

• 获取div内容,赋值只能付文本
  text() --有参 赋值(不编译) --无参 取值(获取全部包括标签)

• 获取input值
  val() --有参 赋值 --无参 取值

2. 转换

• jq转换成js

$()[0]

js转换成jq

$(dom)

3. 初始化 事件
   $(document).ready(function(){})

   简化版$(function(){})

4. each 遍历

• $(“tr”).each(function(index,ele){ }) --index索引 ， ele元素 --写一个参数 “索引” --不写参数用 $(this)

• $ .each($ (“tr”),function(index,ele){ })–index索引 ， ele元素 --写一个参数 “索引” --不写参数用 $(this)

5. 插入
   $().append("") --内部后插入

   $().prepend("") --内部前插入

   $().after("") --外部后插入

   $().before("") --外部前插入

   $().apped() --吧后面的放前面

   $().appedTo() – 把前面的放后面

6. 清空
   $().empty() --清空(不删除本身)

   $().remove() --移出(直接删除)

7. 判断
   is() 返回 boolean

8. 动画

   滑入
   show() 把隐藏的显示出来
   滑出
   hide() 把显示的隐藏起来
   淡入
   fadein() 把隐藏的显示起来
   淡出
   fadeout() 把显示的隐藏起来

9. 事件

   blur：文本框失去焦点事件
   focus：文本获取焦点事件
   keydown：键盘按下事件（只要按下）
   keypress:键盘按事件（只要获取值）
   keyup：键盘弹起
   mouseover：鼠标悬浮事件
   mousemove：鼠标移动事件
   mouseout：鼠标移出
   mousedown：鼠标按下
   mouseup：鼠标弹起
   click：单击事件
   dblclick：双击事件
   change：状态改变事件

10. 查找
    children(): 找制定元素的子元素
    $("#two").children()

    find(): 找符合条件的指定元素
    $("#two").find("[title=other]")

    next(): 找元素后第一个兄弟元素
    $("#two").next()

    nextAll(): 找元素后所有的兄弟元素
    $("#two").nextAll()

    prev(): 找元素前第一个兄弟元素
    $("#two").prev()

    prevAll(): 找元素前所有的兄弟元素
    $("#two").prevAll()

    siblings(): 找元素所有的兄弟元素
    $("#two").siblings()

    parent(): 找元素的父辈元素
    $("#two").parent()

11. 选择器

    id:根据特定 的id找元素 $("#id")
    element：根据"标签"找所有的元素 $(“标签”)
    class:根据class找所有的元素 $(".class")
    selector1,selector2,selectorN: 找多种特定的标签 $("#id,#id");
    ancestor descendant:找特定标签里的特定标签 $(“div #a2”)
    parent > child:解释同上 $(“div > input”)
    prev + next : prev后第一个next $(“标签 + 标签”)
    prev ~ siblings：prev之后所有的siblings $(“div ~ input”)
    :first :标签后出现的第一个元素 $(“标签:first”)
    :not(selector)：找不符合此标签的元素 $(“input:not(#a2)”)
    :even:找到索引为偶数的元素 $(“input:even”)
    :odd:找到索引为奇数的元素 $(“input:odd”)
    :eq(index):找到一个给定索引值的元素
    :gt(index):找指定索引后的所有元素 $(“input:gt(0)”)
    -----------------------------:lang：不会
    :last :获取最后一个指定的元素 $(“input:last”)
    ：lt(index):找指定索引前的所有元素 $(“input:lt(3)”)
    :header :找h1,h2之类的元素 $(":header")
    :animated：找正在执行动画的元素
    :focus：找当前获取焦点的元素
    :root：找本页面的根元素 $(":root")
    :target：选择由文档URI的格式化识别码表示的目标元素。
    :contains(text)：找指定元素，指定文本的元素
    :empty ：找到所有不包含子元素或者文本的“空元素”
    :has(selector)：找到含有 选择器匹配的元素 的元素
    :parent：找到含有子元素或者文本的元素
    :hidden ：找到所有不可见的元素
    :visible：找到所有可见的元素
    [attribute] ：找到元素中有此属性的元素 $(“input[id]”)
    [attribute=value]：找到给定属性的某个特定的元素 $(“input[value=123]”)

    [attribute!=value]：同上相反
    [attribute^=value]：找到给定的属性是以某值开始的元素
    [attribute$=value]：找到给定的属性以某些值结尾的元素
    [attribute*=value]：找到给定的属性，包含特定的值的元素
    [selector1][ selector2][selectorN]：复合属性选择器
    :first-child：找到第一个子元素
    :first-of-type：找到所有相同的元素的第一个兄弟元素
    :last-child：找到最后一个子元素
    :last-of-type：选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
    :nth-child()：匹配其父元素下的第N个子或奇偶元素 $(“div input:nth-child(1)”)
    :nth-last-child()：选择所有他们父元素的第n个子元素。“计数从最后一个元素开始到第一个。”
    :nth-last-of-type(n|even|odd|formula)：选择所有他们的父级元素的N个子元素，“计数从最后一个元素开始到第一个。”
    :nth-of-type(n|even|odd|formula)：选择同属于一个父元素之下，并且标签名相同的子元素中的第n个
    :only-child：找父元素中只有一个子元素的元素
    :only-of-type：选择所有没有兄弟元素，且具有相同的元素名称的元素。
    :input：找到所有input,textarea,select,button元素
    :text：找到所有的单行文本框
    :password：找到所有的密码框
    :redio：找到所有单选按钮
    :checkbox：找到所有复选框
    :submit：找到所有提交按钮
    :image：找到所有的图像域
    :reset：找到所有的重置按钮
    :button：找到所有按钮
    :file：找到所有的文件域
    :enabled：找到所有的可用元素
    :disabled：找到所有的不可用元素
    :checked：找到所有被选中元素(复选框、单选框等，不包括select中的option)
    :selected：找到所有选中的option元素

ajax异步

• 介绍
  Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

• eval(obj) 此方法能将String转换成我们想要的类型 (例如:String a=“true” eval(a)相当于boolean a=true)

• $.ajax
  $.ajax({
  type:“请求方式”，//post,get
  async:false, //同步加载 true异步加载
  url:“请求的路径”,
  data:"{参数}",
  dataType:“json”,
  success:function(obj){ //当请求正常响应的时候运行此方法
  //变量obj代表后端传进来的参数

},
error:function(){ //当请求异常的时候运行此方法

}
})

• $.get
  $.get(“路径”,{参数},function(obj){
  //当请求正常响应的时候运行此方法
  },“json”)

• $.post

  同$.get操作一样