切换导航
{{systemName}}
{{ info.Title }}
{{info.Title}}
{{ menu.Title }}
{{menu.Title}}
登录
|
退出
搜索
秘籍列表
ASP.NET基础及企业项目应用
必备工具的安装及C#基础的介绍
ASP.NET高级
数据库操作
Web前端基础
ASP.NET建站核心
ASP.NET MVC
.Net项目
ASP.NET 数据库及各种ORM使用教程
面试
Web前端基础
[TOC] 大家学习这一门语言以后端为主,但也要了解前端基础,方便解决在实际开发中遇到的问题,一般公司也是比较喜欢全栈的工程师,因为一个人可以做更多的事情。 前端的学习和后端的不同是先快后慢,前端入门门槛低,后期需要掌握的东西也挺多,我这里传授给大家的是哪些常用的必备知识,大家感兴趣可以通过查阅资料或上网去扩展自己这一方面的知识。 前端视觉性较强,可以随时将自己设计的页面呈现出来,根据审美观点来修改页面,相对于后台代码要更直观、更生动;经过学习web前端技术,我们也可以制作出像QQ空间、微博主页这种绚丽多彩的页面来。 [【第四章Web基础(前端编程教学)视频】](https://www.bilibili.com/video/BV1uW411o7dY/?share_source=copy_web&vd_source=160a6bb7aac774f8784a54ccad1255a1 "【第四章Web基础(前端编程教学)视频】") ####第一节Html #####1、最简单html的结构 ``` <html> // Html 开始标示 <head> // Html 头标示 <meta charset="utf-8" /> //规定 HTML 文档的字符编码 <title>Hello</title> // 设置网页标题 </head> // 头结束标示 <body> // 主体开始标示 <p>Hello world!!!</p> // 放置Hello word!!!文本 </body> // 主体结束标示 </html> // Html结束标示 ``` #####2、html的常用标签(常用标蓝) ``` 标签|描述 -|- <!--...-->|定义注释。 <!DOCTYPE>|定义文档类型。 <a>|定义锚。 <abbr>|定义缩写。 <acronym>|定义只取首字母的缩写。 <address>|定义文档作者或拥有者的联系信息。 <applet>|不赞成使用。定义嵌入的 applet。 <area>|定义图像映射内部的区域。 <article>|定义文章。 <aside>|定义页面内容之外的内容。 <audio>|定义声音内容。 <b>|定义粗体字。 <base>|定义页面中所有链接的默认地址或默认目标。 <basefont>|不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 <bdi>|定义文本的文本方向,使其脱离其周围文本的方向设置。 <bdo>|定义文字方向。 <big>|定义大号文本。 <blockquote>|定义长的引用。 <body>|定义文档的主体。 <br>|定义简单的折行。 <button>|定义按钮 (push button)。 <canvas>|定义图形。 <caption>|定义表格标题。 <center>|不赞成使用。定义居中文本。 <cite>|定义引用(citation)。 <code>|定义计算机代码文本。 <col>|定义表格中一个或多个列的属性值。 <colgroup>|定义表格中供格式化的列组。 <command>|定义命令按钮。 <datalist>|定义下拉列表。 <dd>|定义定义列表中项目的描述。 <del>|定义被删除文本。 <details>|定义元素的细节。 <dir>|不赞成使用。定义目录列表。 <div>|定义文档中的节。 <dfn>|定义定义项目。 <dialog>|定义对话框或窗口。 <dl>|定义定义列表。 <dt>|定义定义列表中的项目。 <em>|定义强调文本。 <embed>|定义外部交互内容或插件。 <fieldset>|定义围绕表单中元素的边框。 <figcaption>|定义 figure 元素的标题。 <figure>|定义媒介内容的分组,以及它们的标题。 <font>|不赞成使用。定义文字的字体、尺寸和颜色。 <footer>|定义 section 或 page 的页脚。 <form>|定义供用户输入的 HTML 表单。 <frame>|定义框架集的窗口或框架。 <frameset>|定义框架集。 <h1> to <h6>|定义 HTML 标题。 <head>|定义关于文档的信息。 <header>|定义 section 或 page 的页眉。 <hr>|定义水平线。 <html>|定义 HTML 文档。 <i>|定义斜体字。 <iframe>|定义内联框架。 <img>|定义图像。 <input>|定义输入控件。 <ins>|定义被插入文本。 <isindex>|不赞成使用。定义与文档相关的可搜索索引。 <kbd>|定义键盘文本。 <keygen>|定义生成密钥。 <label>|定义 input 元素的标注。 <legend>|定义 fieldset 元素的标题。 <li>|定义列表的项目。 <link>|定义文档与外部资源的关系。 <map>|定义图像映射。 <mark>|定义有记号的文本。 <menu>|定义菜单列表。 <meta>|定义关于 HTML 文档的元信息。 <meter>|定义预定义范围内的度量。 <nav>|定义导航链接。 <noframes>|定义针对不支持框架的用户的替代内容。 <noscript>|定义针对不支持客户端脚本的用户的替代内容。 <object>|定义内嵌对象。 <ol>|定义有序列表。 <optgroup>|定义选择列表中相关选项的组合。 <option>|定义选择列表中的选项。 <output>|定义输出的一些类型。 <p>|定义段落。 <param>|定义对象的参数。 <pre>|定义预格式文本。 <progress>|定义任何类型的任务的进度。 <q>|定义短的引用。 <rp>|定义若浏览器不支持 ruby 元素显示的内容。 <rt>|定义 ruby 注释的解释。 <ruby>|定义 ruby 注释。 <s>|定义加删除线的文本。 <samp>|定义计算机代码样本。 <script>|定义客户端脚本。 <section>|定义 section。 <select>|定义选择列表(下拉列表)。 <small>|定义小号文本。 <source>|定义媒介源。 <span>|定义文档中的节。 <strike>|不赞成使用。定义加删除线文本。 <strong>|定义强调文本。 <style>|定义文档的样式信息。 <sub>|定义下标文本。 <summary>|为 <details> 元素定义可见的标题。 <sup>|定义上标文本。 <table>|定义表格。 <tbody>|定义表格中的主体内容。 <td>|定义表格中的单元。 <textarea>|定义多行的文本输入控件。 <tfoot>|定义表格中的表注内容(脚注)。 <th>|定义表格中的表头单元格。 <thead>|定义表格中的表头内容。 <time>|定义日期/时间。 <title>|定义文档的标题。 <tr>|定义表格中的行。 <track>|定义用在媒体播放器中的文本轨道。 <tt>|定义打字机文本。 <u>|定义下划线文本。 <ul>|定义无序列表。 <var>|定义文本的变量部分。 <video>|定义视频。 <wbr>|定义视频。 <xmp>|定义预格式文本。 ``` ####第二节DIV+CSS布局 以案例讲一下div+css布局 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上中下DIV+CSS布局案例</title> <style type="text/css"> #container { background-color: darkgray; text-align: center; width: 800px; height: 600px; } #top { background-color: antiquewhite; width: 780px; height: 100px; } #main { background-color: #00FF00; width: 780px; height: 400px; } #bottom { background-color: aqua; width: 780px; height: 100px; } </style> </head> <body> <!--需要兼容客户屏幕宽度,布局应该使用固定尺寸--> <!--p,h,div属于块状元素,前后会自动换行--> <!--div会自动占据整个父容器的宽度--> <center> <div id="container"> <center> <div id="top">TOP</div> <div id="main">MAIN</div> <div id="bottom">BOTTOM</div> </center> </div> </center> </body> </html> ``` ####第三节DOM操作 #####1. DOM树介绍 文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树,通过对节点进行操作,实现对文档内容的添加、删除、修改、查找等功能。 #####2. DOM查找节点 代码|介绍 -|- document.getElementById('id属性值');|返回拥有指定id的第一个对象的引用 document/element.getElementsByClassName('class属性值');|返回拥有指定class的对象集合 document/element.getElementsByTagName('标签名');|返回拥有指定标签名的对象集合 document.getElementsByName('name属性值');|返回拥有指定名称的对象结合 document/element.querySelector('CSS选择器');|仅返回第一个匹配的元素 document/element.querySelectorAll('CSS选择器');|返回所有匹配的元素 document.documentElement|返回拥有指定名称的对象结合 document.body|获取页面中的BODY标签 document.all['']|获取页面中的所有元素节点的对象集合型 #####3. DOM新建节点 代码|介绍 -|- document.createElement('元素名');|创建新的元素节点 document.createAttribute('属性名');|创建新的属性节点 document.createTextNode('文本内容');|创建新的文本节点 document.createComment('注释节点');|创建新的注释节点 document.createDocumentFragment( );|创建文档片段节点 #####4. DOM添加新节点 代码|介绍 -|- parent.appendChild( element/txt/comment/fragment );|向父节点的最后一个子节点后追加新节点 parent.insertBefore( newChild, existingChild );|向父节点的某个特定子节点之前插入新节点 element.setAttributeNode( attributeName );|给元素增加属性节点 element.setAttribute( attributeName, attributeValue );|给元素增加指定属性,并设定属性值 #####5. DOM删除节点 代码|介绍 -|- parentNode.removeChild( existingChild )|删除已有的子节点,返回值为删除节点 element.removeAttribute('属性名')|删除具有指定属性名称的属性,无返回值 element.removeAttributeNode( attrNode )|删除指定属性,返回值为删除的属性 #####6. DOM修改节点 代码|介绍 -|- parentNode.replaceChild( newChild, existingChild );|用新节点替换父节点中已有的子节点 element.setAttributeNode( attributeName );|若原元素已有该节点,此操作能达到修改该属性值的目的 element.setAttribute( attributeName, attributeValue );|若原元素已有该节点,此操作能达到修改该属性值的目的 #####7. DOM事件 代码|介绍 -|- onclick 事件|当用户点击时 onload 事件|用户进入 onunload 事件|用户离开 onmouseover事件|鼠标移入 onmouseout事件|鼠标移出 onmousedown事件|鼠标按下 onmouseup 事件|鼠标抬起 ####第四节Jquery jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 #####1、取值与赋值操作 ``` $("#ID").val(); //取value值 $("#ID").val("xxx"); //赋值 $("#ID").text(); //相当于取innerText $("#ID").text(""); //相当于赋值给innerText $("#ID").html(); //相当于取innerHTML $("#ID").html(""); //相当于赋值给innerHTML ``` #####2、属性设置 ``` $("#ID").attr(key, value);//取得或设置匹配元素的属性值 ``` #####3、显示和隐藏 ``` $("#ID").hide(); //隐藏 $("#ID").show(); //显示 ``` #####4、事件处理 ``` $(document).ready(fn); $("#ID").bind(type, [data], fn); //绑定事件处理器函数 $("#ID").toggle(fn, fn);//注册每次点击时切换要调用的函数 ``` #####5、外观效果 ``` $("#ID").addClass(class);//添加样式 $("#ID").removeClass(class);//移除样式 $("#ID").css(name, value);//设置一个样式属性的值 ``` #####6、查找和遍历筛选 ``` $("#ID").map(callback);//将一组元素转换成其他数组 $("#ID").find(expr);//搜索所有与指定表达式匹配的元素 $("#ID").children();//获得匹配元素集合中每个元素的所有子元素 $("#ID").parent();//获得当前匹配元素集合中每个元素的祖先元素 $("#ID").parents();//获得当前匹配元素集合中每个元素的父元素 $("#ID").filter();//将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素 $("#ID").not();//从匹配元素集合中删除元素 $("#ID").add();//将元素添加到匹配元素的集合中 $("#ID").slice();//将匹配元素集合缩减为指定范围的子集 $("#ID").siblings(); //获得匹配元素集合中所有元素的同辈元素 $("#ID").prev() & prevAll();//获得匹配元素集合中每个元素紧邻的前一个/所有同辈元素 $("#ID").next() & nextAll();//获得匹配元素集合中每个元素紧邻的一个/所有同辈元素 ``` #####7、元素节点操作 ``` $("#ID").wrap(html);//把所有匹配的元素用其他元素的结构化标记包裹起来 $("#ID").empty();//删除匹配的元素集合中所有的子节点 ``` #####8、Ajax操作 ``` $("#ID").load(url, [data], [callback]);//载入远程 HTML 文件代码并插入至 DOM 中 //url (String) : 待装入 HTML 网页网址。 //data (Map) : (可选) 发送至服务器的 key/value 数据。 //callback (Callback) : (可选) 载入成功时回调函数。 jQuery.ajax();//返回其创建的XMLHttpRequest对象。只有一个参数,参数是key/value 对象,包含各配置及回调函数信息。 ``` #####9、序列化 ``` $("form").serialize();//序列化表格内容为字符串 ``` #####10、工具方法(jQuery可以使用$代替) ``` jQuery.each(obj,callback);//遍历对象和数组 jQuery.map();//修改数据 jQuery.grep();//数据筛选,返回一个经过筛选后的数组 jQuery.inArray(value,array);//查找元素的下标 jQuery.merge(array1,array2);//合并两个数组 jQuery.unique(dom);//去除重复DOM元素 jQuery.makeArray(obj);//将类数组对象转换为数组对象 jQuery.trim(str);//去掉字符串起始和结尾的空格 jQuery.contains(dom1,dom2);//dom1节点是否包含dom2节点 jQuery.type();//返回对象的数据类型 jQuery.isArray();//是否为数组。 jQuery.isEmptyObject();//是否为空对象(不含可枚举的属性)。 jQuery.isFunction();//否为函数。 jQuery.isNumeric();//是否为数组。 jQuery.isPlainObject();//是否为使用“{}”或“new Object”生成的对象,而不是浏览器原生提供的对象。 jQuery.isWindow();//是否为window对象。 jQuery.isXMLDoc();//判断一个DOM节点是否处于XML文档之中。 jQuery.param(object);//将对象的键值对转化为URL键值对字符串形式 jQuery.proxy();//调整this的指向 ``` #### 课程附件 [附件](https://movie.aaoit.com/upload/VIP/Video/chang//2018/7/27/709c2ad281845327b37c0d7694ed2348.zip "附件")
上一篇
下一篇
版权所有:机遇屋在线 Copyright © 2021-2025 jiyuwu Co., Ltd.
鲁ICP备16042261号-1