Html + Js

2016-05-31  本文已影响21人  有思想的火柴

1.HTML常见的属性

text-size :字体的大小
color:文字的颜色
background:背景
display:显示的类型(block 、inline、inline-block、none)
padding:内边距 四个参数(上右下左)
margin:外边距 四个参数同上
border:边框
width:宽度
height:高度

2.常见选择器

标签选择器:tagName
类选择器:.className
id选择器:#id

3.节点的基本操作

1、増

var div = document.createElement('div');
document.body.appendChild('div');

2、删

var img = document.getElement('div');
img.parentNode.removeChild('div');

3、改

var img = document.getElement('div');
img.src = "images/imge01.jpg";

4、查

var div = document.getElementById('logo');
var div = document.getElementByTagName('div')[0];
var div = document.getElementByClassName('div')[0];

4、事件绑定

1>

var button = document.getElementById('login');
button.onclick = function(){
//实现点击后的效果
};

2>直接写到标签内部

<button onclick = "var sex = man; alert(sex);">登录</button>

5.jQuery

1、通过选择器查找元素

$('img')找出所有的img标签

2、属性操作

获得属性:$('选择器').attr('属性名');
设置属性:$('选择器').attr('属性名','属性值');

3、显示和隐藏

显示:$('选择器').show();
隐藏:$('选择器').hide();
显示和隐藏切换:$('选择器').toggle();

4、事件绑定

1.常规用法
$('选择器').click(function(){

});
2.链式编程
$('选择器').click(function(){

}).mouseover(function(){

});
注释:click完成事件会返回选择器

关于HTML 5

上一篇 下一篇

猜你喜欢

热点阅读