HTML

超链接访问顺序

a:link-->a:visited-->a:hover-->a:active.（有顺序）

	link:表示从未访问过的链接的样式

	visited：表示已经访问过的链接样式

	hover：表示当鼠标放在上面的链接样式

	active：表示点击链接时的样式

HTML选择器

1.标记选择器：形如：

<style type="text/css">

    h1{

        color: red;

        font-size: 15px;

    }

</style>

2.类别选择器，形如：

<style type="text/css">

    .red{

        color: red;

    }

</style>

    <p class="red">用了类别选择器</p>

3.ID选择器,形如：

<style type="text/css">

    #red{

        color: red;

    }

</style>

    <p id="red">用了ID选择器</p>

总结：#：ID，‘.’：class

复合选择器

1

<style>

    p.special{

        color:red

    }

</style>

<p class="special">只有p标签中 class 是special时，该标签起作用</p>

2.并集选择器

<style>

    h1,h2,h3{

        color:red

    }

    *{

        color:red

    }

</style>

<h1>代表了h1, h2, h3都有公共的样式，红色, *带表的是这个页面整体字体颜色是红色</h1>

3.后代选择器

<style>

    p span{

        color:red

    }

</style>

<p>

    <span>p的后带只要有span，则字体都显示红色</span>

</p>

<p>

    <a href="http://www.baidu.com"><span>这里的字体也是红色的</span></a>

</p>

4.子选择器：

<style>

    p>span{

        color:red

    }

</style>

<p>

    <span>这有这中类型才显示样式</span>

</p>

<p>

    <a href="http://www.baidu.com"><span>这里的样式不显示</span></a>

</p>

盒子模型

margin属性 |

margin 解释
margin:20px (外边距) 上、下、左、右各20px
margin: 20px 40px (外边距)上、下20px；左、右40px
margin: 20px 40px 60px 上20px；左、右40px；下60px
margin: 20px 40px 60px 80px 上20px；右40px；下60px；左80px

overflow属性

当盒子里面的内容超过盒子范围，可以使用overflow来设置。

属性值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

垂直方向盒子叠加问题

标准文档流中，两个盒子，分别有上下外边距，竖直方向的margin不叠加，只取较大的值作为margin(水平方向的margin是可以叠加的)。

例：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>margin叠加</title>

	<style>

		*{

			padding: 0;

			margin: 0;

		}

		.a{

			width: 100px;

			height: 100px;

			border:1px solid;

			background-color: teal;

			margin-bottom: 10px;

		}

		.b{

			width: 100px;

			height: 100px;

			border:1px solid;

			background-color: red;

			margin-top: 20px;

		}

	</style>

</head>

<body>

	<div class="a"></div>

	<div class="b"></div>

</body>

</html>

上下两个盒子的距离不是30px；而是20px

div独占一行

盒子居中

margin:0px auto;第一个参数任意，第二个参数浏览器会自动解析，并让盒子水平居中显示，即margin-left和margin-right的数值一样。

文档流定位

block

独占一行，元素的`height`，`width`，`margin`,`padding`都可以设置

常见的有：<div>,<ol>,<ul>,<p>,<h1>...<h6>,<table>,<form>

可以将元素显示为block的样式：

display:block;

inline

  • 不独占一行.
  • width,height,不可设置,

    但是margin的左右修改可以生效，上下修改无效

    padding的左右修改可以生效（范围变大了，对周围元素没有影响），上下修改无效
  • width就是它包含的文字或者图片宽度，不可改变
  • 常见的inline元素：<span>,<a>
  • 可以将元素显示为inline的样式：display:inline;

inline-block

  • 不独占一行
  • 元素的height，width，margin,padding都可设置
  • 常见的有<img>
  • 可以将元素显示为inline-block的样式：
display:inline-block;

总结：元素可以进行类型转换:使用display属性

inline元素间隙问题：给父级设置：font-size:0即可

CSS

CSS书写顺序

位置属性(position, top, right, z-index, display, float等)

大小(width, height, padding, margin)

文字系列(font, line-height, letter-spacing, color- text-align等)

背景(background, border等)

其他(animation, transition等)

JS

== 和 === 的区别

等于： == 等于是简单的做字面值的比较

全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型

如

<script type="text/javascript">

        var a = "2";

        var b = 2;

        alert(a == b); //true

        alert(a === b); //false

    </script>

JS的特殊值: undifined,NAN...

① undefined：js中变量未赋值则显示undefined

② null：空值

③ NAN:(not a number)非数字类型

④ Javascript中所有变量都可以当作boolean类型处理

其中0,null,undefined,NaN,""(空串)当作false处理

如

    <script type="text/javascript">

        var a = null;

        if (a)

            alert("null是true")

        else

            alert("null是false") //结果输出这句

       var b = NaN;

        if (b)

            alert("NaN是true")

        else

            alert("NaN是false") //结果输出这句

    </script>

&&和||的特殊情况

  • &&且运算有两种特殊情况

    第一种：当表达式全为真的时候。返回最后一个表达式的值。

    第二种：当表达式中，有一个为假的时候，返回第一个为假的表达式的值
  • ||或运算有两种特殊情况

    第一种：当表达式全为假时，返回最后一个表达式的值

    第二种：只要有一个表达式为真。就会返回第一个为真的表达式的值

    如
    <script type="text/javascript">

        var a = "abc"; //所有类型变量都可当作boolean处理

        var b = true;

        var c = false;

        var d = null;

        alert(a && b);//true

        alert(b && a);//abc

        alert(a && c && d);//false

        alert(c || d);//null

        alert(d || c);//false

        alert(a || b || d);//abc

    </script>

数组

    <script type="text/javascript">

        var a = [];//空数组

        alert(a.length)//0

        a[0] = 3; //java中数组长度为0 则a[0]会报下标异常，js中不会

        a[2] = "abc";

        for (var i=0; i<a.length; i++){

            alert(a[i]);//结果a[0]=3;a[1]=undefined;a[2]=abc

        }

    </script>

函数

        <script type="text/javascript">

        /*

           方式一

        */

        //无参函数

        function hello(){

            alert("你好");

        }

        hello(); //调用

        //有参函数,且带返回值

        function sum(a,b){

            return a + b;

        }

        alert(sum(3,5));

        /*

          方式二

         */

        var fun = function (a,b){

            return a + b;

        }

        alert("方式二："+fun(3,8));

    </script>

隐藏参数

    <script type="text/javascript">

        function fun(){

            alert(arguments.length); //结果是2,就是传入的a,b

        }

        <!--调用-->

        fun('a','b');

    </script>

自定义对象

    <script type="text/javascript">

        var obj = { //定义一个对象

          name: 'marry', //属性值

          age: 18,

          fun1: function (){ //定义一个方法

              alert("我是方法1");

          },

            fun2: function (){

              alert("我是方法2");

            }

        };

        //调用

        obj.fun2();

    </script>

js常用事件onload,onclick,onblur...

  • onload的静态注册
    <script type="text/javascript">

        function onloadFun() {

            alert("静态注册");

        }

    </script>

<body onload="onloadFun();">

</body>
  • onload的动态注册
<script type="text/javascript">

        window.onload = function (){

            alert("动态注册");

        }

</script>

<body>

</body>
  • onclick的静态动态操作
<script type="text/javascript">

        //静态注册

        btn1 = function(){

            alert("点击了按钮1");

        };

        //动态注册

        window.onload = function (){

            //1.获取标签对象

            let btn2 = document.getElementById("btn2");

            // alert(btn2); //结果：[object HTMLButtonElement]

            //2.通过标签对象.事件名 = function(){};

            btn2.onclick = function (){

                alert("点击了按钮2");

            }

        };

    </script>

<body>

<button onclick="btn1();">按钮1</button>

<button id="btn2">按钮2</button>

</body>
  • onblur函数
    <script type="text/javascript">

        //静态注册

        let blurFun = function (){

            alert("用户名框失去焦点")

        }

        //动态注册

        window.onload = function (){

            //1.获取标签对象

            let pwd = document.getElementById("pwd");

            //2.标签对象.函数名 = function(){};

            pwd.onblur = function (){

                alert("密码框失去焦点")

            }

        }

    </script>

<body>

用户名：<input type="text" onblur="blurFun()"><br>

密码：<input id="pwd" type="password">

</body>

DOM

如：

  • getElementsByName的使用
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript">

        //全选

        function checkAll(){

            //1.根据name获取dom对象，getElementsByName返回的是一个集合

            let hobby = document.getElementsByName("hobby");

            // alert(hobby[0]); //集合中每个元素都是一个对象 【[object HTMLInputElement]】

            //2.让其全选

            for (let i=0;i<hobby.length;i++)

                //checked:可读可写，既可以读取，也可以赋值

                hobby[i].checked = true;

        }

        //全不选

        function checkNo(){

            let hobby = document.getElementsByName("hobby");

            for (let i=0;i<hobby.length;i++)

                hobby[i].checked = false;

        }

        //反选

        function checkReverse(){

            let hobby = document.getElementsByName("hobby");

            for (let i=0;i<hobby.length;i++){

                hobby[i].checked = !hobby[i].checked;

            }

        }

    </script>

</head>

<body>

爱好：

<input type="checkbox" name="hobby" value="aa">aa

<input type="checkbox" name="hobby" value="bb">bb

<input type="checkbox" name="hobby" value="cc">cc

<br>

<button onclick="checkAll();">全选</button>

<button onclick="checkNo();">全不选</button>

<button onclick="checkReverse();">反选</button>

</body>

</html>

jQuery

  • 可以通过cdn引入jQuery

    如：
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

    </script>

    <script type="text/javascript">

        alert($); //测试用

    </script>
  • 也可以下载jquery（略），自行引入

    如
<script src="根据下载的jquery引入">

jquery-html(),val(),text()用法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>

        我是div。<span>我是div中的span</span>

    </div>

    <input id="input">

    <button id="btn">点我</button><br>

    单选

    <input type="radio" name="sex" value="1">男

    <input type="radio" name="sex" value="2">女<br>

    多选

    <input type="checkbox" name="intrest" value="1">a

    <input type="checkbox" name="intrest" value="2">b

    <input type="checkbox" name="intrest" value="3">c<br>

    下拉框

    <select id="select">

        <option value="1">a</option>

        <option value="2">b</option>

    </select>

<!--引入jQuery-->

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">

    // html(): 获取和设置起始标签和结束标签之间的内容，带HTML

    // text(): 获取和设置起始标签和结束标签之间的纯文本，不带HTML样式

    // val(): 获取和设置表单项中value属性值之间的纯文本，不带HTML样式

        //val可以设置单选，复选，下拉框选中值

    // 以上三个方法 不传参值是获取值，传参是赋值操作

    $(function (){ //页面初试化

        alert($('div').html());  //结果：我是div。<span>我是div中的span</span>

        alert($('div').text());  //结果：我是div。我是div中的span

        //设置选中值

        $(':radio').val(['1'])； //让value=1的选中

        $(':checkbox').val(['1','2'])   //让value=1，2的选中

        $('#select').val(['2'])    //让value=2的选中

    });

    $('#btn').click(function (){

        alert($('#input').val()); //在框里输入abc。结果弹出abc

    });

</script>

</body>

</html>

HTML,CSS,JS,DOM,jQuery的更多相关文章

  1. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  2. 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  3. day15 CSS JS DOM初探

    居中  line-hight  是上下          text-line  是左右    实现一个返回顶部的功能: 1 先写好CSS 2 写动作JS 写一个悬浮菜单: <!DOCTYPE h ...

  4. python2.0_s12_day13_javascript&Dom&jQuery

    今天主要内容:JavaScriptDomjQuery http://www.cnblogs.com/wupeiqi/articles/5369773.html 今天主要内容大致了解:javascrip ...

  5. jQuery中的ready方法及实现按需加载css,js

    模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...

  6. Web基础 HTML CSS JS JQuery AJAX

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

  7. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

  8. js，jquery和dojo操作dom

    最近想学习arcgis javascript api,拦路虎就是dojo,为了便于理解dojo,在学习dojo的同时参考原生js和jquery,下午学习了下dom操作,mark下! 一.获取元素 js ...

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

    本文章主要总结了css,js,jQuery在编写程序时的载入方式,与属性控制方式html和css共同组成了一个最基础的网页,js为标签样式提供动态效果 一,css的载入方式与属性控制 1.1,css引 ...

随机推荐

  1. [翻译] 使用 TensorFlow 进行分布式训练

    本文以两篇官方文档为基础来学习TensorFlow如何进行分布式训练,借此进入Strategy世界.

  2. css加载动画（纯css和html）

    从jq官网上摘抄下来的一个简单加载动画,个人比较喜欢使用~存在这里,作为记录 话不多说~上代码 <!DOCTYPE html> <html lang="en"&g ...

  3. canvas基础简单易懂教程（完结，多图）

    目录 Canvas学习 一. Canvas概述 1.1 Hello world 1.2 Canvas的像素化 1.3 Canvas的动画思想 1.4 面向对象思维实现canvas动画 二.Canvas ...

  4. 2021.07.26 P1011 车站（斐波那契数列）

    2021.07.26 P1011 车站(斐波那契数列) [P1011 NOIP1998 提高组] 车站 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 重点: 1.改变形式的斐波那契 ...

  5. Revit二次开发之创建风管

      在Revit中,风管用于连接管件,风道末端和机械设备,今天简单尝试了下使用RevitAPI创建风管,现分享下我的方法.   风管从类型上可分为三类:一般风管,软风管和风管占位符:从形状上也分为三类 ...

  6. 合并csv文件保存到一个csv文件中-保留表头

    主要实现功能: 在同一文件夹下的所有csv文件全部合并到同一个csv文件中,并将csv文件的表头保留 1 import os 2 import pandas as pd 3 path = os.get ...

  7. k8s入门之PV和PVC(八)

    某些应用是要持久化数据的,如果直接持久化在pod所在节点,当pod因为某种原因重建或被调度另外一台节点,是无法访问到之前持久化的数据,所以需要一个公共存储数据的地方,无论pod删除重建或重新调度到其他 ...

  8. 深度好文：Linux文件系统剖析

    一个执着于技术的公众号 Linux 文件系统体系结构是一个对复杂系统进行抽象化的有趣例子.通过使用一组通用的 API 函数,Linux 可以在许多种存储设备上支持许多种文件系统.例如,read 函数调 ...

  9. Docker 日志管理最佳实践

    开源Linux 回复"读书",挑选书籍资料~ Docker-CE Server Version: 18.09.6 Storage Driver: overlay2 Kernel V ...

  10. asp.net swagger的使用

    最近要从其他系统获取一些数据,准备写个接口让别人把数据塞进来,顺便学习一下如何使用Swagger. 参考大神的教程:asp.net  https://mp.weixin.qq.com/s/SHNNQo ...