html+js+jQuery

Posted 2021-02-13 houchen

WEB01  html

一、网站信息页面显示案例

Html标签

标题标签 <hn>   </hn>

注释     <!--   -->

水平线   <hr>

段落标签 <p></p>

字体标签 <font></font>

 

 

二、网站图片显示页面

<img/>

Src：

绝对路径

相对路径

1.如果是同级

2.如果是上级：../文件名称

3.如果是下一级：目录名称/文件名称

 

 

三、网站友情链接显示页面

有序列表：<ol type=”1” start=”4”><li></li></ol>

属性：

type：5个取值

 

 

无序列表：<ul type=”circle”><li></li></ul>

属性：

Type:3个取值

 

 

超链接：<a href=”http://www.baidu.com”  target=”_self、_blank”>百度</a>

 

 

 

 

 

四、网站首页显示页面

表格标签：<table><table/>

属性：

1边框 border

2.背景颜色：bgcolor

3.边框与边框：cellspacing

4.边框与内容：cellpadding

 

表格的跨行和跨列 colspan   rowspan

 

 

 

五、网站后台系统页面

框架集结构标签：<frameset></frameset>

属性：

cols:左右划分

rows:上下切割

 

 

<frame><frame/>

 

 

 

 

 

WEB02  HTML

表单标签：所有提交到服务器端的表单必须使用<form></from>括起来

 

Form标签属性：

action:整个表单提交的位置（可以是一个页面，也可以是一个java后台）

method:表单提交的方式

 

 

提交按钮：<input type=”submit”  value=”注册”/><br/>

普通按钮:  <input type=”button”  value=”注册”/>

重置按钮：<input type=”reset”/>

 

 

 

Div

是一个html标签，一个快级元素（单独显示一行）。它单独使用没有意义

必须结合css来使用，用于页面的布局

 

Span是一个html标签，一个内联元素（显示一行），它单独使用没有意义，必须结合css来使用，它主要用于对括起的内容进行样式的修饰

 

 

 

Css:层叠样式表

1作用：使网站的内容和表现相分离

2语法规范：

选择器{

    属性名1：属性值

属性名1：属性值

属性名1：属性值

 

}

3.css选择器（重要定位元素）

1）元素选择器           div{}

2）类选择器（class）     .div2{}

3）id选择器（id）      #div5{}     设置id时要唯一

 

（其他选择器）

4）层级选择器   div p{}

 

5）属性选择器   input[type=‘text’]{}

 

 

4.css的引入方式

内部引入

<style type=”text/css”>

 

</style>

 

行内引入

<div style=”font-size:40px;   color:blue;”>  就近原则

 

外部引入

新建一个css文件

<link rel=”stylesheet”    href=”style.css”    type=”text/css”/>

        层叠样式表      引入的文件    类型

 

 

Css的浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动的边框为止

 

 

盒子模型：

手机：content

泡沫：padding

包装盒：border

外包装边距：margin

 

 

 

 

 

Content

 

 

 

 

 

 

 

 

                                              

 

 

 

 

 

 

WEB_03 javascript

1 使用JS完成简单的数据校验

2.使用js完成图片轮播效果

3，使用JS完成页面定时弹出广告

4，使用JS完成表单检验

 

 

JavaScript 组成

1.ECMAScript

2.DOM:文档对象模型     包含（整个html部分）

3.BOM：浏览器对象模型，包含（整个浏览器相关的内容）

 

 

特点：

1 区分大小写

2. 变量是弱类型的

 

WEB_04 JavaScript  

学习目标

1.使用JS获得指定元素

2.使用JS创建元素

3.使用JS对元素的属性进行操作

4.使用JS对文件的标签体进行操作

5.使用JS对指定元素的样式进行操作（获得或者修改）

 

 

 

新标签的学习

<thead>

<tr>

<th>

</th>

</tr>

</thead>

<tbody>

<tr>

<td>

</td>

</tr>

 

</tbody>

 

 

锁定事件（页面加载事件）

 

获取元素:获取表格+表格里面的行数

 

Tbody里面的行数（rows.length）

 

JS的遍历

 

获取奇数行和偶数行

 

设置背景颜色

 

 

 

实现一个表格的高亮显示

1.确定事件（onmouseover  和onmouseout）并分别为其绑定一个函数

2.获取鼠标移上去的那行，设置背景颜色

 

回顾事件:

Onsubmit()

 

Onclick()

Ondblclick()

 

Onload()

 

Onfocus()  鼠标聚焦、失焦事件

Onblur()         

 

 

Onmouseover()

Onmouseout()

Onmousemove()

 

 

Onkeydown()

Onkeypress()

 

Onchange:当用户改变内容时使用的这个事件

 

 

 

 

 

六、使用JS完成全选和选不选操作

 

1确定事件（鼠标单击事件onclick）,事件绑定到复选框上

2.获取编号前面复选框的状态

获取复选框：var checkAllEle = Document.getelementbyid(“id”);

获取复选框的状态：checkAllEle.checked?

 

3.获取下面的所有复选框

Document.getelementbyname(“name”);

 

 

 

Document:整个html文件都成为一个document 文档

Element:  所有的标签都是Element元素

Attribute：属性

Text :文本

Node: 文档的任意内容

 

1.document

创建文本结点：document.createTextNode

创建元素结点：document.createElement()

 

 

2.element

Element.appendChild()   向元素添加新的子节点，作为最后一个子节点

Element.firstChild()      返回元素的首个子节点

Element.getAttribute()    获取元素的属性值

Element.innerHtml()    

 

3.Attribute: 属性

 

 

Dom练习

在页面中使用列表来显示一些城市

<ul>

<li>北京<li>

<li>上海<li>

<li>广州<li>

</ul>

希望通过点击一个按钮实现动态添加城市

 

分析：

事件（onclick）

获取ul结点

创建一个城市的文本结点

创建一个li元素结点

将文本结点添加到li元素结点中去

使用element里面的appendChild()来添加子节点

 

 

 

 

七、使用JS完成省市二级联动

 

1.确定事件（onchange）

2.使用一个二维数组来存储省份和城市（二维数组的创建）

3.获取用户选择的省份（使用方法传参的方式 this：当前的操作对象）

4.遍历数组（获取该省份 对应的所有城市）

5.创建文本结点和元素结点并进行添加操作

 

 

步骤

1.确定事件（onchange）并为其绑定一个函数

2.创建一个二维数组

3.获取用户选择的省份

4.遍历二位数组中的省份

5.将遍历的省份与用户选择的省份比较

6.如果相同。遍历该省份下的所有城市

7.创建城市文本结点

8.创建option 元素结点

9.将城市文本结点添加到option元素结点中去

10.获取第二个下拉列表，并将option元素添加进去

 

 

知识点：

1.This.value

2.数组的创建

长度：最大角标+1

 

3.createTextNode()

4.createElement()

 

 

 

WEB_05 jQuery  

1.JS页面加载与JQuery页面加载的区别

1）JS：window.onload() 页面加载较慢   会出现覆盖

2）JQ：页面加载较快                  不会出现覆盖

 

2.jQuery的获取：

$(“#***”) 

$("#btn").click(function(){

                   location.href="02_JS页面加载与jQuery的区别.html";

});

 

3.Dom对象与JQ对象之间的转换

1）JQ向DOM对象的转换

//JQ对象向DOM对象的转化 （方式一）

$("#span1").get(0).innerHTML="美美哒";

//JQ对象向DOM对象的转换 （方式二

$("#span1")[0].innerHTML="棒棒哒";

 

 

2）Dom向JQ对象的转换

var spanEle=document.getElementById("span1");

//DOM对象转化为JQ对象               

$(spanEle).html("思密达");

 

 

 

 

4.JQuery的选择器

1）基本选择器

元素选择器

Id选择器

类选择器

 

2）层级选择器

子孙选择器   $(“dy div”)

儿子选择器   $(“body>div”)

选择id为two的下一个同级div元素:  $(“#two +div”)

选择id为one的其余所有同级div元素:$(“#two ~div”)

 

3）基本过滤选择器

:first

:last

:even

:odd

 

4)属性选择器

选择有id属性的div :  $(“div[id]”)

选择有id属性且值为two的div   $(“div[id=two]”)

 

5)表单选择器

$(“：input”)  匹配所有的input  textarea select  button

 

 

5.  .show()

设置属性：attr(“属性”，“属性值”)

设置某个标签的内容：.html()

设置某个标签的css样式：css(“属性”，“属性值”)

给某个标签添加属性  addclass()

 

 

 

 

 

 

 

WEB_06 jQuery

1. 能够使用jQuery为标签添加属性或样式

2.能够为指定标签添加字标签或兄弟标签

3.学会给标签绑定时间

 

1.遍历函数：each

   $("img").each(function(i){

   this.src = "test" + i + ".jpg";

 });

 

$.each( [0,1,2], function(i, n){

  alert( "Item #" + i + ": " + n );

});

 

 

2.插入：append       appendto

 

 

3.事件：

改变下拉列表的状态：$(“#provice”).change()

事件切换： A.hover(fn1,fn2) 等效于A.mouseover(fn1).mouseout(fn2);

 

 

4.js的vaildate()方法

Validate需要手动的声明，对那个表单进行校验