码迷,mamicode.com
首页 > Web开发 > 详细

html+js+jQuery

时间:2019-03-14 23:34:30      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:返回   获取元素   padding   show   function   elf   class   案例   css   

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需要手动的声明,对那个表单进行校验

html+js+jQuery

标签:返回   获取元素   padding   show   function   elf   class   案例   css   

原文地址:https://www.cnblogs.com/houchen/p/10534359.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!