本文章主要总结了css,js,jQuery在编写程序时的载入方式,与属性控制方式
html和css共同组成了一个最基础的网页,js为标签样式提供动态效果
一,css的载入方式与属性控制
1.1,css引入html页面的方式有三种
⦁ 使用标签的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同时加载
1.2,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属性来设置。
overflow的设置项:
1、visible 默认值。内容不会被修剪,会呈现在元素框之外。
2、hidden 内容会被修剪,并且其余内容是不可见的。
3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
二,js的载入方式与属性控制
 JavaScript嵌入页面的方式
1、行间事件(主要用于事件)
<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>
 
三,jQuery的载入方式和属性控制
需要在载入js文件的时候先载入jQuery函数库
<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(){ ......});
jquery属性操作
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()方法
$("p").css("background-color","yellow");
 $("p").css({"background-color":"yellow","font-size":"200%"});
 

css,js,jquery的载入方式和属性控制的更多相关文章

  1. Web基础 HTML CSS JS JQuery AJAX

    1. Web基础 网页的骨骼HTML 什么是HTML超文本标记语言:Hyper Text Markup Language 这都不重要,重要的是:HTML是Web网页的基本组成部分HTML中定义的元素, ...

  2. 了解HTML/CSS/JS/JQuery/ajax等前端知识

    什么是HTML 超文本标记语言 浏览器通过识别相应的标签来加载页面 通过HTTP协议传输,不是编程语言 HTML常用标签 title script style link meta link body ...

  3. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  4. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

  5. 区域及分离、Js压缩、css、jquery扩展

    后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...

  6. js jquery css 选择器总结

    js jquery css 选择器总结 一.原始JS(Document 对象)选择器. id选择器:document.getElementById("test"); name选择器 ...

  7. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  8. 动态加载js和css的jquery plugin

    一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include ...

  9. 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

随机推荐

  1. HDU_4939 stupid tower defense 2014多校7 多变量型DP

    意思是有个塔防游戏,有三种塔,红塔在怪物经过的时候每秒会产生攻击力大小的伤害,绿塔对怪物经过以及经过之后每秒产生攻击力大小的伤害,还有种蓝塔,对怪物进行减速,即怪物从此之后经过一个单位都会减慢c秒 最 ...

  2. 留学生如何把控好Essay写作结构

    留学生在国内写过作文,但是对于essay写作到底了解多少呢?大家觉得essay写作太难是语言问题,但是大家要明白,老师对于内容的考察远重于对语言的考察.同学们的essay写作如果能做到言之有理,自圆其 ...

  3. Scanner类的next()方法和nextLine()方法的区别(简)

    1.  空白符:回车.空格.tab等 2.  next()方法读取到空白符就结束 3. nextLine()方法读取到回车结束,也就是 "\r"

  4. distpicker.js 根据当前位置初始化select

    学习参考的地址放在最醒目的地方: https://blog.csdn.net/idea_boy/article/details/58280076 百度官方实例:http://developer.bai ...

  5. 1.求子集,2.动态创建action

    功能待完善 #ifndef MYMAINWINDOW_H #define MYMAINWINDOW_H #include <QMainWindow> #include <QTable ...

  6. ZOJ - 3635 Cinema in Akiba(树状数组+二分)

    题意:已知有n个人,从第一个人开始每个人被安排在第ai个空座上,有m组询问,问某人所坐的位置. 分析: 1.用树状数组维护空座的个数,方法: 将所有的空座初始化为1,sum(x)则表示从座位1到座位x ...

  7. python 将数组中取某一值的元素全部替换为其他元素的方法

    这里的问题是在做House Price Prediction的时候遇到的,尝试对GarageArea做log转化,但是由于有些房子没有车库,所以GarageArea = 0,再通过log转化变成-in ...

  8. POJ 1408:Fishnet

    Fishnet Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 1921   Accepted: 1234 Descripti ...

  9. VM15上安装macOS操作系统

    (该篇博客已经成功安装上Xcode,放心下载) 因为要开学了,需要学习mac操作系统,自己没有苹果电脑只能虚拟机上下载喽 我在电脑上安装的VM15虚拟机,不会安装的可以来这里下载软件VM15虚拟机   ...

  10. idea~创建maven webapp项目

    1.选择 org.apache.maven.archtypes:maven-archtype-webapp 2.禁止远程下载 archetypeCatalog=internal 目的是不远程下载,否则 ...