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. xpath 获取meta里的keywords及description的方法

    html中的head的meta元素中的keywords与description标签如下: <meta name="keywords" content="xxxx&q ...

  2. 9.1 Linux存储结构和文件系统

    1. 存储结构 Linux系统中的一切文件都是从"根"目录(/)开始的,并按照文件系统层次标准(FHS)采用倒树状结构来存放文件,以及定义了常见目录的用途. 目录名称 应放置文件的 ...

  3. C#/VB.NET 获取Excel中图片所在的行、列坐标位置

    本文以C#和vb.net代码示例展示如何来获取Excel工作表中图片的坐标位置.这里的坐标位置是指图片左上角顶点所在的单元格行和列位置,横坐标即顶点所在的第几列.纵坐标即顶点所在的第几行.下面是获取图 ...

  4. Idea使用入门

    jeecgboot推荐使用的idea是2019,原使用的2017在自动识别maven项目上有点问题,甚至2019在一些报错下仍然可以直接运行项目     idea的安装结构(卸载细节涉及) 下载文件位 ...

  5. EdgeFormer: 向视觉 Transformer 学习，构建一个比 MobileViT 更好更快的卷积网络

    ​  前言 本文主要探究了轻量模型的设计.通过使用 Vision Transformer 的优势来改进卷积网络,从而获得更好的性能. 欢迎关注公众号CV技术指南,专注于计算机视觉的技术总结.最新技术跟 ...

  6. Spring Security之短信登录

    实现短信验证码登录 前面实现了 用户名+密码 的登录方式,现在实现一下短信验证码登录. 开发短信验证码接口 短信验证码和图形验证码类似,用户从手机短信得到验证码和从图片得到验证码类似. 校验短信验证码 ...

  7. linux篇-linux awstats搭建

    1安装lnmp模式 2安装awstats 2# tar xf awstats-6.5.tar.gz 解压下载到/root下的压缩包 mkdir /var/lib/awstats chmod 755 / ...

  8. 每天一个 HTTP 状态码 103

    103 Early Hints 103 Earyly Hints 是被用于在最终 HTTP 消息前返回一些响应头,常和 HTTP Header: Link 一起使用,让客户端在服务器还在准备(当前的这 ...

  9. axios知识点总结

    是什么? 前端最流行的 ajax 请求库 基于Promise的HTTP客服端,可以在浏览器和服务器两个环境去运行. 特点 基于 xhr + promise 的异步 ajax 请求库 浏览器端/node ...

  10. 关于我学git这档子事(2)

    将本地main分支push到远程dev分支(不同名分支间的push) 远程dev分支还未创建 (在push同时创建远程dev分支,并将本地main分支内容上传) git push -u --set-u ...