css,js,jquery的载入方式和属性控制
html和css共同组成了一个最基础的网页,js为标签样式提供动态效果
⦁ 使用标签的style属性,在对应标签内书写样式:<div style="width:100px;height:100px"></div>,该内联式载入方式,会直接在检查元素的时候查看到,不方便观察标签的动态效果(但是内联式有1000的权重)
⦁ 通过style标签,在网页上创建嵌入的样式表(使用css选择器选择对应的标签)。
<style>
div{width:100px;height:100px}
</style>
⦁ 通过link标签,链接到外部的样式文件(工作中使用外链式的css样式,整个项目的css文件共同放在一个css文件夹下)
<link rel='stylesheet' href='css/main.css'>
被引入的css文件中可以直接写div{width:100px;height:100px,html和css同时加载
css布局常用的样式属性
width:100px;height:100px;
background:gold;设置元素背景色为金色,
background:背景颜色|背景图像|背景重复|背景附件|背景位置 背景:不填为默认值
设置元素四周边框是1像素宽的黑色实线
border-top:10px solid red;
border-left:10px solid blue;
border-right:10px solid green;
border-bottom:10px solid pink;
padding:20px;设置四中的内边距为20px
margin:20px;设置四中的外边距为20px
float:left;
float:right;
文本常用样式属性一:
color 设置文字的颜色,如: color:red;
font-size 设置文字的大小,如:font-size:12px;
font-family 设置文字的字体,如:font-family:'微软雅黑';为了避免中文字不兼容,一般写成:font-family:'Microsoft Yahei';
font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高,如:line-height:24px; 表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px
css显示特性
display属性是用来设置元素的类型及隐藏的,常用的属性有:
1、none 元素隐藏且不占位置
2、inline 元素以行内元素显示
3、block 元素以块元素显示
css元素溢出
当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。
1、visible 默认值。内容不会被修剪,会呈现在元素框之外。
2、hidden 内容会被修剪,并且其余内容是不可见的。
3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
<input type="button" name="" onclick="alert('ok!');">
2、页面script标签嵌入
<script type="text/javascript">
alert('ok!');
</script>
3、外部引入
<script type="text/javascript" src="js/index.js"></script>
外部的js文件内需要写在html和css加载完成的触发函数内部
window.onload = function(){
var oDiv = document.getElementById('div1');
}
操作元素属性
获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。
操作元素属性
var 变量 = 元素.属性名 读取属性
元素.属性名 = 新属性值 改写属性
属性名在js中的写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”
innerHTML
innerHTML可以读取或者写入标签包裹的内容
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//读取
var sTxt = oDiv.innerHTML;
alert(sTxt);
//写入
oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
}
</script>
.....
<div id="div1">这是一个div元素</div>
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
再载入用js函数库jQuery编写的js文件
<script type="text/javascript" src="js/index.js"></script>
在js文件内部也需要写加载完再执行的代码,由于jQuery提供了比js更快速的函数
$(document).ready(function(){ ......});可简写为$(function(){ ......});
1、html() 取出或设置html内容
// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字</span>');
2、prop() 取出或设置某个属性的值
// 取出图片的地址
var $src = $('#img1').prop('src');
// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });
css,js,jquery的载入方式和属性控制的更多相关文章
- Web基础 HTML CSS JS JQuery AJAX
1. Web基础 网页的骨骼HTML 什么是HTML超文本标记语言:Hyper Text Markup Language 这都不重要,重要的是:HTML是Web网页的基本组成部分HTML中定义的元素, ...
- 了解HTML/CSS/JS/JQuery/ajax等前端知识
什么是HTML 超文本标记语言 浏览器通过识别相应的标签来加载页面 通过HTTP协议传输,不是编程语言 HTML常用标签 title script style link meta link body ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏
<!doctype html><html> <head> <meta charset="utf-8"> <title>j ...
- 区域及分离、Js压缩、css、jquery扩展
后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...
- js jquery css 选择器总结
js jquery css 选择器总结 一.原始JS(Document 对象)选择器. id选择器:document.getElementById("test"); name选择器 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- 动态加载js和css的jquery plugin
一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include ...
- 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
随机推荐
- HDU_4939 stupid tower defense 2014多校7 多变量型DP
意思是有个塔防游戏,有三种塔,红塔在怪物经过的时候每秒会产生攻击力大小的伤害,绿塔对怪物经过以及经过之后每秒产生攻击力大小的伤害,还有种蓝塔,对怪物进行减速,即怪物从此之后经过一个单位都会减慢c秒 最 ...
- 留学生如何把控好Essay写作结构
留学生在国内写过作文,但是对于essay写作到底了解多少呢?大家觉得essay写作太难是语言问题,但是大家要明白,老师对于内容的考察远重于对语言的考察.同学们的essay写作如果能做到言之有理,自圆其 ...
- Scanner类的next()方法和nextLine()方法的区别(简)
1. 空白符:回车.空格.tab等 2. next()方法读取到空白符就结束 3. nextLine()方法读取到回车结束,也就是 "\r"
- distpicker.js 根据当前位置初始化select
学习参考的地址放在最醒目的地方: https://blog.csdn.net/idea_boy/article/details/58280076 百度官方实例:http://developer.bai ...
- 1.求子集,2.动态创建action
功能待完善 #ifndef MYMAINWINDOW_H #define MYMAINWINDOW_H #include <QMainWindow> #include <QTable ...
- ZOJ - 3635 Cinema in Akiba(树状数组+二分)
题意:已知有n个人,从第一个人开始每个人被安排在第ai个空座上,有m组询问,问某人所坐的位置. 分析: 1.用树状数组维护空座的个数,方法: 将所有的空座初始化为1,sum(x)则表示从座位1到座位x ...
- python 将数组中取某一值的元素全部替换为其他元素的方法
这里的问题是在做House Price Prediction的时候遇到的,尝试对GarageArea做log转化,但是由于有些房子没有车库,所以GarageArea = 0,再通过log转化变成-in ...
- POJ 1408:Fishnet
Fishnet Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 1921 Accepted: 1234 Descripti ...
- VM15上安装macOS操作系统
(该篇博客已经成功安装上Xcode,放心下载) 因为要开学了,需要学习mac操作系统,自己没有苹果电脑只能虚拟机上下载喽 我在电脑上安装的VM15虚拟机,不会安装的可以来这里下载软件VM15虚拟机 ...
- idea~创建maven webapp项目
1.选择 org.apache.maven.archtypes:maven-archtype-webapp 2.禁止远程下载 archetypeCatalog=internal 目的是不远程下载,否则 ...