- CSS outline-width 属性 11-25
- 《小白H5成长之路15》与网页中的文本框的第一次相见 11-25
- 《小白H5成长之路14》横布局使用css的float 11-25
- jQuery炫酷特效之遮罩移动效果 11-25
- jQuery 基础 11-25
- JQuery笔记(下) 11-25
- jQuery入门杂谈 11-25
- jquery方法总结 11-25
- 《小白H5成长之路17》终于可以说说网页中图片的事情 11-25
- 利用jquery实现双向数据绑定 11-25
CSS outline-width 属性
发布者: superzhang | 发布时间:2017-11-25实例
设置轮廓的宽度:
p{outline-style:dotted; outline-width:5px;}
属性定义及使用说明
outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围。
outline-width指定轮廓的宽度。
注意: 请始终在outline-width属性之前声明outline-style属性。元素只有获得轮廓以后才能改变其轮廓的宽度。
默认值:medium继承:no版本:CSS2JavaScript 语法:object.style.outlineWidth="thin"浏览器支持
表格中的数字表示支持该属性
《小白H5成长之路15》与网页中的文本框的第一次相见
发布者: superzhang | 发布时间:2017-11-25“小白,你知道文本框么?”
“知道,就是网页里面输入文字的地方!”
“哦,那你知道表单么?”
“不知道,表单是什么啊?”
“文本框就是一个表单元素,在HTML语言里面表单主要用来收集用户输入。比如文本框、单选框、复选框等等。其他的表单你目前学了也用不到,文本框是表单中最重要的一个,今天咱聊一聊文本框吧,文本框以后会成为你练习的常用元素。”
“首先文本框是一个行内元素,行内元素跟块级元素不同之处在于它前后没有换行。现在我们在一个div中写上几个文字再放一个文本框看看它的效果”
“小白啊!今天来的这么早?”
“恩,昨天看了纵布局以后,今天已经着急学横布局怎么实现了,这两个布局会做了,我是不是就可以做任意的网页布局了?”
“普通的页面布局肯定一点问题没有,改天我再跟你探讨一些关于css的position的问题,今天我们还是说横布局吧!”
老朱接着说道:“小白,你知道为啥叫div容器么?”
“不知道!为什么呢?”
“最简单的原因就是它的里面可以放东西!另外它还可大、可小、可自由变形还可固定不变,昨天咱俩谈布局的时候说到了块容器前后默认是有换行符的,可是有时候我们希望两个块容器在一行,这怎么办?总部能用table来做吧!”
“你可以想象一下,有一个盒子他的里面可以放很多的东西,假如现在给你拿来宽度是这个盒子内径一半的小盒,让你放到大盒子里面并且尽可能不要浪费盒子的空间,你会怎么放?”
炫酷遮罩层
一、准备工作
先想一想这样到一个效果该如何实现呢?HTML结构该怎么搭建?
......
来看看基本到HTML结构是如何到:
HTML结构
CSS:
8.2、滑动
slideDown(speed,[callback]):向下滑动(显示)slideUp(speed,[callback]):向上滑动(隐藏)slideToggle(speed,[callback]):滑动切换jQuery入门杂谈
发布者: superzhang | 发布时间:2017-11-25简单的介绍一下 jQuery 的一些知识,大致的讲下jQuery的使用方法,有js基础的学期jquery那是分分钟的事。
一. 代码风格
在jQuery程序中,不管是找对象还是内置的功能函数等,都是以符号“$”来起始的(神奇的符号^_^)。这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写:
在执行功能函数的时候,我们发现.css()这个功能函数并不是直接被“$”或jQuery对象调用执行的,而是先获取元素后,返回某个对象再调用.css()这个功能函数。那么也就是说,这个返回的对象其实也就是jQuery对象。
$().css(‘color’, ’red’);
jquery方法总结
发布者: superzhang | 发布时间:2017-11-25jQuery DOM 操作
设置内容 - text()、html() 以及 val()
添加/删除元素
获取并设置 CSS 类
尺
《小白H5成长之路17》终于可以说说网页中图片的事情了
发布者: superzhang | 发布时间:2017-11-25“小白,图片在网页里面的重要性不言而喻,今天咱聊聊最常见的图片吧!网页中插入图片使用img标签,img标签不是图片,它只是图片的占位容器,我们需要通过src属性告诉img容器图片的链接。”
“哦~那是不是通过jQuery改变img标签的src属性就可以实时改变一个img标签的图案?”
“嗯,说的不错,比如鼠标移到一个图片上后让图片变成另一个图,就可以通过jQuery更改img标签的src属性。这个我们一会说,先来看看img是个什么类型的容器吧!”
利用jquery实现双向数据绑定
发布者: superzhang | 发布时间:2017-11-25首先我们要明确数据绑定的定义:数据绑定指的是将一个用户界面元素(控件)的属性绑定到一个类型(对象)实例上的某个属性,当对象的属性发生变化时能够同时改变对应的UI。
在不了解原理就直接使用过前端框架的开发者眼中,数据绑定的效果即是某个变量和某个输入框的数据能保持同步,一者变另一者随之改变,这种效果用简单的js语句即可实现,1是当变量改变时将变量赋值给输入框,2是给输入框添加change或input事件。这仅仅是实现数据绑定的基础,真正意义上的数据绑定是封装内部操作过程,做到当变量变化时绑定了该变量的所有元素都自动更新。
目前主流的框架都实现了单向数据绑定,而双向数据绑定不过是在单向数据绑定的基础上,给可输入元素添加change或input事件。
实现数据绑定的方式大致有如下三种:1、观察者模式,2、脏值检查,3、数据劫持。本文采用第一种方式实现数据绑定。观察者模式又名发布-订阅模式,GOF给观察者模式如下定义:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。
通过jQuery实现数据双向数据绑定的方法就是使用自定义的data属性作为HTML代码中需要绑定的属性,所有被绑定在一起的JavaScript对象和DOM元素都会订阅一个PubSub对象。只要JavaScript对象或者
