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. 攻防世界-MISC：a_good_idea

    这是攻防世界高手进阶区的第十题,题目如下: 点击下载附件一,解压后得到一张图片,把图片放到kali用binwalk查看一下,果然包含了几个文件, 用命令把文件分离出来, 得到一个misc文件和一个压缩 ...

  2. LintCode-1173 · 反转字符串 III-题解(istringstream简单使用)

    题目链接:https ://www.lintcode.com/problem/1173/?_from=collection&fromId=208描述:给定一个字符串句子,反转句子中每一个单词的 ...

  3. Linux服务器如何识别移动硬盘？

    序言 通常我们使用的移动硬盘或U盘一般都是ntfs或fat32的文件系统,常跟服务器打交道的小伙伴,会经常遇到把移动硬盘或U盘上的数据拷贝到Linux服务器上.绝大多数Linux发行版内核支持fat3 ...

  4. JuiceFS 在数据湖存储架构上的探索

    大家好,我是来自 Juicedata 的高昌健,今天想跟大家分享的主题是<JuiceFS 在数据湖存储架构上的探索>,以下是今天分享的提纲: 首先我会简单的介绍一下大数据存储架构变迁以及它 ...

  5. 异步编程利器：CompletableFuture

    一.一个示例回顾Future 一些业务场景我们需要使用多线程异步执行任务,加快任务执行速度. JDK5新增了Future接口,用于描述一个异步计算的结果.虽然 Future 以及相关使用方法提供了异步 ...

  6. Java学习笔记-基础语法Ⅶ-集合

    集合 集合类特点:提供一种存储空间可变的存储模型,存储的数据容量可以随时发生改变 这里需要回顾一下,因为数组和字符串一旦创建,就不可改变,需要区分一下 import java.util.ArrayLi ...

  7. form表单，css简介，css选择器，css样式操作

    form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...

  8. 使用 VS Code + Markdown 编写 PDF 文档

    背景介绍 作为一个技术人员,基本都需要编写技术相关文档,而且大部分技术人员都应该掌握 markdown 这个技能,使用 markdown 来编写并生成 PDF 文档将会是一个不错的体验,以下就介绍下如 ...

  9. leetcode 643. Maximum Average Subarray I 子数组最大平均数 I

    一.题目大意 https://leetcode.cn/problems/maximum-average-subarray-i/ 给你一个由 n 个元素组成的整数数组 nums 和一个整数 k . 请你 ...

  10. linux篇-新建svn仓库

    1昨天需要在服务器上新建一个仓库,解决方法是把已有的仓库拷贝出来,库删除在放进去 2然后今天想看看有没有命令的方法 find / -name project 首先查看一下项目的位置 3创建仓库 svn ...