前端
我可能是个假开发
专注Java开发
展开
-
jQuery--DOM操作(一)
jQuery–DOM操作(一)通过jQuery的选择器可以方便的获取页面上的元素,通过选择器获取到的,不管是多个元素、零个元素还是一个元素,都会被封装到类数组的jQuery对象中,也称为jQuery对象集合或jQuery元素集合等。一、创建HTML1.DOM对象和jQuery对象 区别: • 检测DOM Object:if ( obj.nodeType )• 检测原创 2018-01-19 17:37:54 · 276 阅读 · 0 评论 -
jQuery事件
jQuery事件一、页面未加载执行失败<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面未加载执行失败</title> <script type="text/javascript"> document.get原创 2017-04-20 18:36:55 · 426 阅读 · 0 评论 -
JavaScript介绍
javascript 的介绍一、什么是javascriptJavaScript被设计用来向HTML页面添加交互行为JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语言)JavaScript由数行可执行计算代码组成JavaScript通常被直接嵌入HTML页面JavaScript是一种解释性语言(代码执行不进行预编译)所有人无需购买许可证均可使用JavaScriptJava与原创 2017-04-17 10:53:51 · 1436 阅读 · 0 评论 -
jQuery的选择器
jQuery的选择器一、基本选择器id选择器:$(“#id名称”);元素选择器:$(“元素名称”);类选择器:$(“.类名”);通配符:*多个选择器共用(并集)代码演示:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>基本选择器</title> <link rel原创 2017-04-20 09:00:05 · 372 阅读 · 0 评论 -
javascript总结
javascript总结ECMAScript1.语法2.变量:只能使用var定义,如果在函数的内容使用var定义,那么它是一个局部变量,如果没有使用var它是一个全局的。弱类型!3.数据类型:原始数据类型(undefined/null/string/number/boolean)4.语句:5.运算符:==与===的区别6.函数:两种写法(有命名称,匿名的)BOM对象window:aler原创 2017-04-20 08:52:02 · 427 阅读 · 0 评论 -
JavaScript的应用二
JavaScript的应用一、使用JS完成注册页面表单校验1.需求分析之前我们已经使用弹出框的方式实现了表单校验的功能,但是此种方式用户体验效果极差! 我们希望做成如下这种效果:2.步骤分析第一步:确定事件(onfocus 聚焦事件)并为其绑定一个函数第二步: 书写绑定函数(在输入框的后面给出提示信息)第三步: 确定事件(onblur 离焦事件)并为其绑定一个函数第四步: 书写函数(对数据原创 2017-04-18 20:49:28 · 443 阅读 · 0 评论 -
BOM 对象
BOM 对象一、Window 对象Window 对象表示浏览器中打开的窗口。setInterval():它有一个返回值,主要是提供给 clearInterval 使用。setTimeout():它有一个返回值,主要是提供给 clearTimeout 使用。clearInterval():该方法只能清除由 setInterval 设置的定时操作clearTimeout():该方法只能清除由 s原创 2017-04-18 15:08:31 · 550 阅读 · 0 评论 -
JavaScript的应用
javascript的应用校验表单一、步骤分析第一步: 确定事件(onsubmit)并为其绑定一个函数第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)第三步: 对用户输入的数据进行判断第四步: 数据合法(让表单提交)第五步:数据非法(给出错误提示信息, 不让表单提交)问题: 如何控制表单提交?关于事件 onsubmit: 一般用于表单提交的位置,那么需原创 2017-04-17 17:01:56 · 1032 阅读 · 0 评论 -
jQuery--案例--动态加载
ajax案例(动态加载)一、Insert title here $(document).ready(function(){ //1 创建10div for(var i = 0 ; i < 10 ; i ++){ createDiv(); } //2 浏览器添加滚动事件 $(window).scroll(function(){原创 2017-02-03 16:32:50 · 659 阅读 · 0 评论 -
jQuery--其他
一、表单序列化serialize() 将表单中所有选中项拼凑成一个字符串。类似get请求参数 例如:username=jack&password=1234&gender=man&....serializeArray()将表单中所有选中项拼凑一个json数组 $(document).ready(function(){ al原创 2017-02-03 14:34:00 · 323 阅读 · 0 评论 -
jQuery介绍
jQuery的介绍一、什么是jQueryjQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事原创 2017-04-20 08:54:58 · 1564 阅读 · 0 评论 -
jQuery的应用
jQuery的应用一、使用JQ完成首页的定时广告弹出1.需求分析在首页中(logo的上方)显示一个广告图片(页面加载后,间隔3秒弹出广告图片,再间隔3秒后隐藏广告图片)。【使用jQuery实现】2.技术分析使用jQuery中的相关技术3.实现步骤第一步:引入jQuery相关的文件第二步:书写页面加载函数第三步:在页面加载函数中,获取显示广告图片的元素。第四步:设置定时操作(显示广告图片的函数原创 2017-04-20 20:32:09 · 1660 阅读 · 0 评论 -
jQuery属性操作
jQuery属性操作属性attr操作<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>属性操作_attr</title> <script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>原创 2017-04-21 08:16:35 · 591 阅读 · 0 评论 -
网页布局
网页布局一、行布局1.基础的行布局<!DOCTYPE html><html><head> <title></title> <style type="text/css"> body{ margin: 0; padding: 0; color: #fff; text-ali原创 2017-12-28 10:53:14 · 458 阅读 · 0 评论 -
JavaScript语法
JavaScript语法一、JavaScript的组成完整的JavaScript是由ECMAScript(语法)、Browser Objects(DOM、BOM)(特性)组成的。二、javaScript的语法规则1.注释:单行:// 多行:/**/ 语句结束使用分号,如果省略,则由解析器确定语句的结尾 注:ECMAScript中的一切(变量、函数和操作符)都区分大小写2.标识符变量、函数、原创 2018-01-01 21:43:59 · 314 阅读 · 0 评论 -
jQuery中的validate校验
jQuery中的validate校验一、下载官网地址:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip帮助文档位置:http://jqueryvalidation.org/documentation/目录结构:二、导入validate是jQuery插件,其必须在jQuery的基础上进行运行。所以要导入jQuery库、vali原创 2017-04-20 19:51:02 · 653 阅读 · 0 评论 -
ajax应用
ajax应用一、异步校验用户名是否存在1.需求:2.代码:JQ代码:<script type="text/javascript"> $(function(){ //为输入框绑定事件 $("#username").blur(function(){ //1、失去焦点获得输入框的内容 var usernameInput原创 2017-04-22 09:38:34 · 480 阅读 · 0 评论 -
JavaScript Ajax和jQuery Ajax
JavaScript Ajax和jQuery Ajax一、Ajax概述1.1什么是同步,什么是异步同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随 意做其他事情,不会被卡死1.2Ajax的运行原理页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到 服原创 2017-04-22 09:36:24 · 723 阅读 · 0 评论 -
BootStrap的应用
BootStrap的应用编写商城首页<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <!--声明文档兼容模式,表示使用IE浏览器的最新模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2017-04-21 16:08:08 · 539 阅读 · 0 评论 -
BootStrap容器介绍
BootStrap容器介绍布局容器Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。.container 类用于固定宽度并支持响应式布局的容器。<div class="container"> ...</div>.container-fluid 类用于 100% 宽原创 2017-04-21 14:54:31 · 4558 阅读 · 0 评论 -
BootStrap基础入门
BootStrap基础入门一、BootStrap概述1.1什么是BootStrapBootStrap,基于HTML、CSS、JavaScript的前端框架(半成品)。其预定义一套CSS样式和与样式对应的jQuery代码,我们只需要提供固定HTML结构,添加固定的class样式,就可以完成指定效果的实现BootStrap在jQuery的基础工作,可以理解BootStrap就是jQuery的一个插件原创 2017-04-21 13:37:54 · 2049 阅读 · 4 评论 -
jQuery文档操作
jQuery文档操作插入操作<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>文档处理_插入操作</title> <script src="../../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"原创 2017-04-21 08:23:26 · 657 阅读 · 0 评论 -
jQuery--Ajax
Ajaxl ajax :异步请求,浏览器地址栏不改变,进行局部刷新。l ajax 流程分析l jQuery 的ajax 第一层:$.ajax(...)最底层ajax请求,编写最复杂,完成功能最全的。第二层:load() 、$.get() 、$.post() 开发中常用3个第三层:$.getJSON() 、$.getScript(原创 2017-02-03 11:26:33 · 503 阅读 · 0 评论 -
jQuery--效果|动画
效果|动画1、基本l 通过改变元素 高度和宽度 进行显示或隐藏show(speed,fn)显示 参数1:speed速度。显示的时间,单位:毫秒。固定字符串:("slow","normal", or "fast") 参数2:fn 回调函数。动画效果完成之后回调函数。hide() 隐藏toggle() 切换2、滑原创 2017-02-03 10:31:37 · 282 阅读 · 0 评论 -
jQuery--事件案例
文字提示文字提示 body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%;}p{ clear:both; margin:0; padding:.5em 0;}/* tooltip原创 2017-02-03 10:06:20 · 373 阅读 · 0 评论 -
图片轮播
Document #d{ position:relative; top:-30px; } label{ margin-left:15px; } .one{ width:10px; height:10px; border:1px solid black ; background-color: red ; }原创 2016-11-28 14:22:42 · 422 阅读 · 0 评论 -
document对象的集合属性
document对象 <!-- function fun(){ document.all[11].innerHTML = "你好" ; document.forms[1].username.value = "张无忌" ; document.images[2].src = "images/1.jpg" ; } //-->原创 2016-11-28 13:54:15 · 633 阅读 · 0 评论 -
JS中的常用事件
常用事件鼠标移动事件 onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定 onmouseover : 鼠标悬停事件鼠标悬停事件: 当鼠标移动到某个控件上面的时候发生this: 把this写在那个标签里面就代表那个标签对象this.style.backgroundColor : 当调用样式表中的属性的时候,如果属性中间有横杠,则应去掉.原创 2016-11-27 20:24:51 · 4700 阅读 · 0 评论 -
浏览器对象模型BOM之location对象
location对象1.href 属性: 是指要连接到其他的URL写法一、window.location.href='demo_window对象的close方法.html' ;写法二、window.location='demo_window对象的close方法.html' ;location对象 <!-- /* 掌握:1 href属性原创 2016-11-27 18:10:11 · 569 阅读 · 0 评论 -
浏览器对象模型BOM之history对象
a页面:history对象 <!-- /* history对象存储了访问过的页面。 */ function fun(){ history.forward(); } //--> aaaaaaaaaaaaaaaaaaaaaaaaaaa b.html b页面: <!--原创 2016-11-27 17:29:23 · 381 阅读 · 0 评论 -
浏览器对象模型BOM之window对象
1.BOM的概述 browser object modal :浏览器对象模型。 浏览器对象:window对象。 Window 对象会在 或 每次出现时被自动创建。2. window的属性 innerHeight: innerWidth: IE不支持通用写法:document.body.clientWidth原创 2016-11-27 13:56:20 · 1157 阅读 · 1 评论 -
JavaScript基础
一、Javascript概述(知道)a.一种基于对象和事件驱动的脚本语言b.作用: 给页面添加动态效果c.历史: 原名叫做livescript.W3c组织开发的标准叫ECMAscipt.d.特点: 1). 弱势语言 2). 由浏览器直接解析执行。(函数不能直接执行) 3). 是一个解释性语言 4). 交互性(它可以做的就是信息的动态交互) 5).原创 2016-11-27 09:39:52 · 384 阅读 · 0 评论 -
JavaScript
一、js的简介 1、js是什么js是可以嵌入到html中,是 基于对象 和 事件驱动 的 脚本语言特点:(1)交互性(2)安全性:js不能访问本地磁盘(3)跨平台:浏览器中都具备js解析器2、js能做什么(1)js能动态的修改(增删)html和css的代码(2)能动态的校验数据3、js历史及组成ECMAScript BOM(浏览器对象模型) D原创 2016-11-26 15:34:24 · 419 阅读 · 0 评论 -
CSS
一、css的简介1、什么是css层叠样式表,css是对html进行样式修饰语言层叠:就是层层覆盖叠加,如果不同的css样式对同一html标签进行修饰,样式有冲突的部分应用优先级高的,不冲突的部分共同作用样式表:就是css属性样式的集合2、css的作用(1)修饰html的 使其html样式更加好看(2)提高样式代码的复用性(3)html的内容与样式相分离 便于后期原创 2016-11-26 12:38:30 · 352 阅读 · 0 评论 -
文档对象模型DOM概述及DOM树
DOM技术1.Dom概述?* 什么是DOM? docuemnt object model 文档对象模型* 它的作用? 重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目* 分类? Core DOM : 定义了一套标准的针对任何结构化文档的对象 XML DOM : 定义了一套标准的针对 XML 文档的对象 HTML DOM : 定义原创 2016-11-28 14:27:39 · 3263 阅读 · 0 评论 -
javascript面向对象
<!-- function Person(){ var name = "张三" ; //是私有属性 this.age = 20 ; //定义公有属性 } var p = new Person() ; p.weight = "180" ; //私有属性,只有p对象有 //alert(p.name) ; //弹不出来 //alert(p.age);原创 2016-11-29 09:40:18 · 283 阅读 · 0 评论 -
javascript模拟类
1.定义类并创建类的实例对象function Person(){ } var p = new Person() ;2.定义公有属性和私有属性定义私有属性:1.在函数中: 用var 定义2.在函数外: 用对象.属性名定义定义公有属性:1.在函数中: 用this.属性名定义2.在函数外: 函数名.prototype.属性名 =原创 2016-11-29 13:00:43 · 433 阅读 · 0 评论 -
jQuery--事件
事件一、常见事件Insert title here #e02{ border: 1px solid #000000; height: 200px; width: 200px; } $(document).ready(function(){ $("#e01").blur(function(){ $原创 2017-02-03 09:47:25 · 399 阅读 · 0 评论 -
jQuery--筛选案例--QQ用户分组
筛选案例--QQ用户分组Insert title here $(document).ready(function(){ //1所有分组列表项默认都是隐藏的。 //2 分组(span)可以点击,控制下面的列表项显示或隐藏 //3 当前分组列表项显示,其他分页隐藏(同时只有一个显示) $("div").children("a").hide().p原创 2017-02-02 22:42:14 · 1050 阅读 · 0 评论 -
jQuery--筛选
筛选l 选择器可以完成功能,筛选提供相同函数。 选择器 :first 筛选 first()l 对比: $("div:first") 直接获得第一个div (永远只能操作第一个) $("div").first() 先获得所有的div,从所有的中筛选出第一个。 (可以操作第一个,也可以操作原创 2017-02-02 22:19:15 · 453 阅读 · 0 评论