zoukankan html css js c++ java

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{
			 100px;
			height: 100px;
			border:1px solid;
			background-color: teal;
			margin-bottom: 10px;
		}
		.b{
			 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>

查看全文

相关阅读:
Android 自定义seekbar中，thumb被覆盖掉一部分问题
 Android SeekBar实现音量调节
 Android 设置thumb图片大小
 Android 图片处理方法
 Android 三档自定义滑动开关，禁止点击功能的实现，用默认的seekbar组件实现
 Android SeekBar自定义使用图片和颜色显示
 Android 使控件各占屏幕的一半
 Android ExpandableListView使用+获取SIM卡状态信息
 Android的5样的调试信息
 Js创建对象的做法

原文地址：https://www.cnblogs.com/huyuqing/p/14428716.html