本文章主要总结了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. APIO 2010 特别行动队 斜率优化DP

    Description 你有一支由 n 名预备役士兵组成的部队,士兵从 1 到 n 编号,要将他们拆分 成若干特别行动队调入战场.出于默契的考虑,同一支特别行动队中队员的编号 应该连续,即为形如 (i ...

  2. 经验分享:如何搞定Personal Statement?

    最近又到申请季啦,如何自己DIY申请,如何准备文书成为众多留学生关心的问题.不管是你申请本科,硕士,还是博士,相信这篇文章都能帮助到你.下面来说一下文书中一个很重要的组成,就是个人陈述Personal ...

  3. 漫谈计算机组成原理(七)I/O系统

    本文讲什么? 这个系列的文章其实可以分成两个部分,计算机系统的其他硬件结构和CPU. 而我们今天要讲述的内容,就是其他硬件结构中的最后一个部分--I/O(输入输出)系统. 这篇文章主要讲述的就是I/O ...

  4. 四个因素决定Essay写作段落长度

    段落是一篇Essay的基石,写好Essay应从写好段落开始.那么Essay写作中一个段落多长为好?英语和修辞学教授理查德·诺德奎斯特著文介绍了一些专家的观点.从以下的译文可以看到,段落长度虽然没有固定 ...

  5. Postgres psql: 致命错误: 角色 "postgres" 不存在

    问题再现 当前环境: postgresql: 11.5 windows 10 企业版LTSC 64位 当运行"C:\Program Files\PostgreSQL\11\scripts\r ...

  6. bestphp's revenge

    0x00 知识点 1利用PHP原生类来构造POP链 本题没有可以利用的类,没有可以利用的类就找不到POP链所以只能考虑PHP原生类 我们先来解释一下什么是POP链 POP:面向属性编程 在二进制利用时 ...

  7. 移动端主页内容 part4 axios

    ajax  可以动态获取数据内容 vue中发送ajax有很多工具可用 浏览器自带的fetch 现在推荐: axios第三方模块(vue中发送ajax) 特点: 跨平台的数据请求 浏览器中xhr请求 n ...

  8. 51nod 1305:Pairwise Sum and Divide

    1305 Pairwise Sum and Divide 题目来源: HackerRank 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 有这样一段 ...

  9. Notepad++配置

    笔记来源于视频: http://baidu.iqiyi.com/watch/498601896985630918.html?page=videoMultiNeed notepad++ 有个很重要问题, ...

  10. C++的一些知识点汇总

    数组形参 数组形参 void test(const int arr[]); //arr中的值不能被改变 void test(const int *arr); //arr中的值不能被改变,包括arr[1 ...