HTML,CSS,JS,DOM,jQuery

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的更多相关文章

Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】
一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...
形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）
HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
day15 CSS JS DOM初探
居中 line-hight 是上下 text-line 是左右实现一个返回顶部的功能: 1 先写好CSS 2 写动作JS 写一个悬浮菜单: <!DOCTYPE h ...
python2.0_s12_day13_javascript&Dom&jQuery
今天主要内容:JavaScriptDomjQuery http://www.cnblogs.com/wupeiqi/articles/5369773.html 今天主要内容大致了解:javascrip ...
jQuery中的ready方法及实现按需加载css,js
模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...
Web基础 HTML CSS JS JQuery AJAX
1. Web基础网页的骨骼HTML 什么是HTML超文本标记语言:Hyper Text Markup Language 这都不重要,重要的是:HTML是Web网页的基本组成部分HTML中定义的元素, ...
模拟jQuery中的ready方法及实现按需加载css,js实例代码
这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...
js，jquery和dojo操作dom
最近想学习arcgis javascript api,拦路虎就是dojo,为了便于理解dojo,在学习dojo的同时参考原生js和jquery,下午学习了下dom操作,mark下! 一.获取元素 js ...
css,js,jquery的载入方式和属性控制
本文章主要总结了css,js,jQuery在编写程序时的载入方式,与属性控制方式html和css共同组成了一个最基础的网页,js为标签样式提供动态效果一,css的载入方式与属性控制 1.1,css引 ...

随机推荐

Java学习day4
今天学习了String以及StringBuider 其中较为重点的除了用法以外,还有,String对象以""方式给出的字符串,只要字符序列相同(即顺序和大小写)无论在代码中重复几次 ...
JavaScript基础第01天笔记
JavaScript基础第01天 1 - 编程语言 1.1 编程编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...
CDN绕过
信息收集_CDN绕过什么是CDN?为什么要绕过? CDN全称是内容分发网络(content delivery network).其目的是让用户能够更快速的得到请求的数据. 网上找了一张图片, ...
原生js 复选框全选案例
注 : 本文章主要写功能代码示例 : <body> <input type="checkbox" id="che" /><br& ...
css 动画 (2)
1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
-2.输入加速(cin,cout)
+ ios::sync_with_stdio(false);//加速几百毫秒 cin.tie(0); // 接近scanf cout.tie(0);
GO 前后端分离开源后台管理系统 Gfast v2.0.4 版发布
更新内容:1.适配插件商城,开发环境从后台直接安装插件功能:2.代码生成细节修复及功能完善(支持生成上传文件.图片及富文本编辑器功能):3.增加swagger接口文档生成:4.更新goframe版本至 ...
vmware ubuntu 忘记密码
1.进入recovery模式修改root密码 1.启动ubuntu系统,一开始在有进度条的时候按下shift键,出现GRUB选择菜单,选择Advanced options for Ubuntu 按回 ...
Spring Boot 启动源码解析结合Spring Bean生命周期分析
转载请注明出处: 1.SpringBoot 源码执行流程图 2. 创建SpringApplication 应用,在构造函数中推断启动应用类型,并进行spring boot自动装配 public sta ...
MybatisCodeHelperPro简单使用
1.idea安装 2.连接mysql 3.创建实体等关联类 ,选择数据库表右键选择如图 4配置生成后的 5简单应用可以直接生成xml 总结:非常的方便快捷.