css,js,jquery的载入方式和属性控制

本文章主要总结了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%"});