简单前端知识
凡人1995
这个作者很懒,什么都没留下…
展开
-
简单前端知识——HTML01
HTML Hyper Text Markup Language 超文本标记语言超文本:比普通文本功能更加强大,可以添加各种样式<!DOCTYPE html> //文档声明H5<html> <head> //头部份,网络配置信...原创 2019-03-26 15:45:38 · 90 阅读 · 0 评论 -
简单前端知识——jQuery的基本知识——01
jQueryjquery是一个快速、简洁的JavaScript框架,是一个优秀的JavaScript代码库。jQuery作用1.写更少、做更多2.将JS代码和HTML页面代码分离入门案例1.把JQ文件放入项目中2.再JavaScript引入JQ文件ready(当DOM载入就绪可以查询及操作时绑定一个要执行的函数),替代了window.load作用:是非常重要的一...原创 2019-03-28 10:08:54 · 104 阅读 · 0 评论 -
简单前端知识——jQuery的JS和JQ之间的转换——02
JS和JQ之间的转换1.从下面的代码可以看出jq的基本语法就是$();2.需要用到对象,都是用$("标记名")的语法和元素ID来获取的3.在这里不需要考虑函数同名的问题了,因为都已经绑定(已经限定了使用范围,不能通用了就不会出现同名问题了)了元素对象的事件,function(){}<!DOCTYPE html><html> <head...原创 2019-03-28 10:49:46 · 144 阅读 · 0 评论 -
简单前端知识——jQuery的学习和定时器——03
jQuery的函数和事件的学习可以通过jQuery手册速查表来进行jquery的图片隐藏和现实<script> $(function(){ $("#btn2").click(function(){ $("#img1").hide(); }); ---------------------------...原创 2019-03-28 11:19:46 · 85 阅读 · 0 评论 -
简单前端知识——jQuery的选择器使用案例和CSS文件的引用——04
jQuery的选择器使用案例<script> $(function(){ //ID选择器 $("#btn1").click(function(){ $("#two").css("background-color","palegreen"); }); ------------------...原创 2019-03-28 11:57:08 · 103 阅读 · 0 评论 -
简单前端知识——jQuery的层级选择器使用案例和过滤案例——05
jQuery的层级选择器使用案例<script> $(function(){ //找出body下面的子div,父子选择器 $("#btn1").click(function(){ $("body > div").css("background-color","palegreen"); }); ...原创 2019-03-28 12:21:41 · 162 阅读 · 0 评论 -
简单前端知识——bootstrap入门——01
bootstrap基于HTML、CSS、JavaScript前端开发框架,使得 Web 开发更加快。响应式:能够在各种设备上显示正常提升用户体验1.使用方法下载bootstrap的核心文件(全部拷贝)2.引入核心CSS文件、引入JQuery文件、引入核心JavaScript文件(也可以直接用官网上的网络连接)3.只支持H5,确认创建是H54.bootstrap的官网的全局cs...原创 2019-03-28 15:23:12 · 112 阅读 · 0 评论 -
简单前端知识——bootstrap栅格系统——02
栅格系统全局css样式页面,栅格系统有实际用例(看图看代码一看就懂)<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">....原创 2019-03-28 15:45:48 · 94 阅读 · 0 评论 -
简单前端知识——bootstrap表格——03
在bootstrap网页有表格样式的使用实例只需要引用css组件(使用很简单)以后的前端表格最起码也能做到这种程度bootstrap的组件页面提供了很多可以之间粘贴复制的代码,如果对于一开始页面要求不高的话,bootstrap的粘贴复制真的是一个好东西。总结来说:对于后端的开发人员,如果要制作简单的前端页面,又不想太过粗糙的话,使用bootstrap来复制粘贴也是个不错的选择...原创 2019-03-28 16:18:40 · 274 阅读 · 0 评论 -
简单前端知识——jQuery的load方法使用案例——06
jQuery的load()方法的使用案例javaScript代码function load(){ $("#aaa").load("/day16/DemoServlet02",function(responseText,statusTXT,xhr)){ $("#aaa").val(responseText); }}html代码<input...转载 2019-04-09 16:14:05 · 521 阅读 · 0 评论 -
简单前端知识——jQuery的get方法使用案例——07
jQuery的get方法使用案例JavaScript代码设置val html text,其中html能修改颜色字体、样式处理。function get(){ $.get("/Test/DemoServlet",function(data,status){ alert("结果是:"+data); $("#div01").text("text:...原创 2019-04-09 16:36:08 · 381 阅读 · 2 评论 -
简单前端知识——jQuery的post方法使用案例——08
jQuery的post方法使用案例post(URL,data,callback)其中的data和callback是可选的function posr(){ $.post("Test/DemoServlet",{name:"zhangsna",age:18},function(data,status){ $("#div01").html(data); });...原创 2019-04-09 17:15:26 · 174 阅读 · 0 评论 -
简单前端知识——JavaScript07
表格的隔行换色(通过获取tab对象,tab对象有相应的成员可以使用)说明HTML的标签其实是对象获得所有的行 table.rows[]修改行的颜色 row.bgColor = "red" row.style.backgroundColor = "black"<!DOCTYPE html><html> <head> &...原创 2019-03-27 21:05:32 · 136 阅读 · 0 评论 -
简单前端知识——JavaScript06
JavaScript函数可以有参数的<!DOCTYPE html><html> <head> <meta charset = "utf-8"> <title></title> <script> function showTip...原创 2019-03-27 18:04:46 · 83 阅读 · 0 评论 -
简单前端知识——HTML02
<b>加粗</b><i>斜体</i><strong>加粗</strong> 带语义 搜索引擎友好<em>斜体</em> 带语义 搜索引擎友好<img src = "./img/图片.jpg" />常用属性src:指定图片路径 ./ 当前路径...原创 2019-03-26 09:57:56 · 69 阅读 · 0 评论 -
简单前端知识——HTML03
<table border = "1px" width = "400px" bgcolor = "yellow"><tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> <td> 1 </td...原创 2019-03-26 11:12:24 · 90 阅读 · 0 评论 -
简单前端知识——CSS01
css: 由于表格布局存在缺陷,使用DIV+CSS来优化表格布局的缺陷: 1:嵌套太多,容易错乱 2:不够灵活HTML的块标签 div标签:默认占一行,自动换行 span标签:内容显示在同一行CSS概述: Cascading Style Sh...原创 2019-03-26 15:44:59 · 78 阅读 · 0 评论 -
简单前端知识——CSS02
ID选择器以#号开头,ID在整个页面中必须是唯一的#ID名称{ 属性名称:属性的值; 属性名称:属性的值;}类选择器以 。开头.类的名称{ 属性名称:属性的值 属性名称:属性的值}<style> .shuiguo{ color:yellow; ...原创 2019-03-26 16:37:38 · 84 阅读 · 0 评论 -
简单前端知识——CSS03
CSS浮动:浮动的元素会脱离正常的文档流,在正常的文档流中不占空间float属性 left right流式布局<div style = "float:left; width:200px;height:200px;background-color:red;"></div>clear属性:清除浮动 b...原创 2019-03-26 18:01:13 · 81 阅读 · 0 评论 -
简单前端知识——CSS04
CSS盒子模型(Box Model)Margin(外边距):与其他盒子的距离margin-topmargin-rightmargin-bottommargin-leftBorder(边框):边界的厚度Padding(内边距):内容于边框距离padding-toppadding-rightpadding-bottompadding-leftCont...原创 2019-03-26 20:45:41 · 103 阅读 · 0 评论 -
简单前端知识——JavaScript01
JavaScript概述JavaScript是一种直译式脚本语言(码源——>解释执行)js由我们的浏览器来解释执行HTML:决定了页面的框架CSS:用来美化我们的界面JS:提供用户的交互的JS的组成ECMAScript:核心部分,定义了js的语法规范DOM:document Object Model 文档对象模型,主要是用来管理页面的BOM:Browser...原创 2019-03-27 09:38:44 · 114 阅读 · 0 评论 -
简单前端知识——JavaScript02
引用类型内置对象:基于对象编程JS的运算符和语句运算符和java一样===全等号:值和类型都必须相等语句和java一样JS的输出alert()直接弹框document.write()向页面输出Cosole.log()向控制台输出innerHTML:向页面输出获取页面的元素 document.getElementById("d的名称");JS的声明变量...原创 2019-03-27 10:09:27 · 79 阅读 · 0 评论 -
简单前端知识——JavaScript03
利用函数来修改HTML内容<!DOCTYPE html><html> <head> <meta charset = "utf-8"> <title></title> <script> function dianwo(){ ...原创 2019-03-27 11:15:40 · 91 阅读 · 0 评论 -
简单前端知识——JavaScript04
自动轮播图(看代码回忆)1.确定事件:文档加载完成的事件onload2.事件要触发:init()3.函数里面要做一些事情<!DOCTYPE html><html> <head> <meta charset = "utf-8"> <title></title> ...原创 2019-03-27 11:49:04 · 80 阅读 · 0 评论 -
简单前端知识——JavaScript05
广告自动显示和自动关闭<!DOCTYPE html><html> <head> <meta charset = "utf-8"> <title></title> <script> function hideAD(){ ...原创 2019-03-27 17:00:41 · 83 阅读 · 0 评论 -
JSON的简单使用案例
JSON的使用案例json就是用来前后端传输数据的1.需要导包2.后端Servlet的简单代码int pid = Integer.parseInt(request.getParameter("pid"));CityDao dao = new CityDaoImp();List<CityBean> list = dao.findCity(pid);JSONArr...原创 2019-04-09 20:10:10 · 523 阅读 · 0 评论