Javascript(2)-js进阶

1.JavaScript核心操作——DOM对象

  • window对象
通过window对象,可以操作和浏览器软件相关的信息
        // window.alert();//调用浏览器的对话框操作

        // history对象:项目中几乎不用
        //window.history.back();//后退操作,返回上一个访问历史
        //window.history.forward();//前进操作,访问下一个访问历史
        //window.history.go(2);//跳转到某一个访问历史

        // location对象:项目中的url操作
        /*console.log(location);
        console.log(location.href);// 获取当前网页的url地址
        console.log(location.protocol);//获取当前访问协议
        console.log(location.host);// 获取访问网页的主机地址
        console.log(location.hostname);
        console.log(location.post);// 访问端口*/


        // JS代码控制页面的指向
        /*setTimeout(function() {
            location.href="http://www.baidu.com"
        }, 2000)*/

        /*setTimeout(function() {
            location.reload()// 刷新网页
        }, 5000)*/


        // screen对象
        // screen表示电脑屏幕的意思
        // screen.width/height表示的是电脑屏幕的宽度和高度分辨率
        // screen.availWidth/screen.availHeight:屏幕的宽度和高度【不包含任务栏】
        // console.log(screen.width, screen.height);
        // console.log(screen.availWidth, screen.availHeight);

        // navigator对象:浏览器软件的信息
  • screen对象
  • history对象
  • location对象
  • navigator对象
  • document对象
  • window事件操作
  • onload页面数据加载事件
  • onscroll页面滚动条事件
  • 兼容问题:获取滚动条卷去网页高度

2.DOM基础API操作

  • 获取标签DOM对象

直接通过id属性值使用DOM对象 通过id属性值获取:document.getElementById() 通过标签名称获取:document.getElementsByTagName() 通过class属性值获取:document.getElementsByClassName() 通过name属性值获取:document.getElementsByName() 混合获取,通常是id模式和tagName模式混合获取

代码操作

        // 直接通过标签的id属性,得到标签对象【 不推荐】
        console.log(box);
        box.innerText = "可以通过标签的id属性直接使用标签"

        // 通过getElemnetById("id")函数,来通过id属性值获取标签,【推荐】
        var _box = document.getElementById("box2");
        _box.innerText = "通过ElementById()函数获取标签对象,进行操作"

        // 通过标签名称,可以获取到一组标签
        var _boxes = document.getElementsByTagName("div");
        console.log(_boxes);
        _boxes[2].innerText = "这是通过getElementsByTagName()获取的元素"

        // 通过标签的name属性,也可以获取到一组标签
        var _jerry = document.getElementsByName("jerry");
        console.log(_jerry);
        _jerry.innerText = "通过name属性获取标签"


        // 通过标签的class属性获取标签:IE8.0+
        var _container = document.getElementsByClassName("container");
        console.log(_container);
        _container[0].innerText = "这个是通过class属性获取到的标签对象"

操作标签的DOM对象属性

  • 标准函数操作

获取属性值:var x = getAttribute(name) 设置属性值:setAttribute(name, value) 移除属性:removeAttribute(name);

  • 方括号操作

获取属性值:var x = dom[“name”]; 设置属性值:dom[“name”]=value;

  • 连接符.操作

获取属性值:var x = dom.name; 设置属性值:dom.name = value; 备注:dom表示dom对象,name表示属性名称,value表示属性值 操作标签的DOM对象样式

  • 获取DOM对象样式

var x = document.currentStyle[name];兼容IE低版本的获取样式的方式 var x = getComputedStyle(dom)[name];获取样式存在兼容性问题【兼容IE9+ 和其他浏览器】 Window.getComputedStyle() 方法给出应用活动样式表后的元素的所有CSS属性的值,并解析这些值可能包含的任何基本计算。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS代码操作标签的样式</title>
    
    <style>
        #box{height: 200px;background:red;}
    </style>
</head>
<body>
    <div id="box" style="width:100px;"></div>
    <script>
    /*操作标签的样式*/
    /*增删改查*/
    /*获取样式、设置样式*/
    var _box = document.getElementById("box");

    /**************************************************/
    // 获取样式:有两种方式
    // 1. 获取样式的值  100px
    // 2. 获取样式的数值  100

    // 获取标签对象的样式【标签内嵌、页面内嵌、外部样式 都可以获取到】
    // 获取样式存在兼容性问题【兼容IE9+ 和其他浏览器】
    var _h = window.getComputedStyle(_box).height;
    var _w = window.getComputedStyle(_box).width;
    console.log(_w, _h);
    // 兼容IE低版本的获取样式的方式【我们只需要了解即可】
    // var _h1 = _box.currentStyle.height;
    // var _w1 = _box.currentStyle.width;
    // 获取样式的数值
    var _wvalue = _box.offsetWidth;
    var _hvalue = _box.offsetHeight;
    console.log(_wvalue, _hvalue);
    /**************设置样式************************************/
    // 标签对象.style.样式名称  使用这样的语法,是用来操作标签内嵌样式的!
    // 给标签设置样式,统一使用 标签对象.style.样式名称 = 样式值;
    _box.style.width = "300px";
    </script>
</body>
</html>

控制台输出结果

  • 设置DOM对象样式

直接通过style进行行内样式设置。 dom.style.样式名称 = 样式值; 样式名称可能是多个单词组成的 background-color,在JS中进行操作的时候需要将名称转换成驼峰命名法:backgroundColor 注意:尽量不要在JS中进行大量样式的设置。

  • 对于标签内容的操作,有三种方式

  1. innerText:给指定标签的开始标签和结束标签中增加文本内容【非W3C标准】
  2. textContent:dom操作,给标签的开始标签和结束标签中增加文本内容,W3C标准操作
  3. innerHTML:给标签的开始标签和结束标签中,增加一段HTML代码;慎重使用,容易造成代码注入漏洞! 扩展:所谓代码注入漏洞,是用于可以在客户端通过输入包含代码的字符串的方式,将带入注入到我们的网页中进行执行的过程 innerHTML的使用规则 对于数据的来源,完全信任的情况下使用它。其他时候禁止使用!

代码操作:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS操作标签属性</title>
    
</head>
<body>
    <!-- value是input标签的属性 -->
    输入年龄:<input type="text" id="uname" value="100">

    <script>
        
        var _name = document.getElementById("uname");
        // 1. 直接通过 [标签对象.属性]来操作标签的属性值
        _name.value = "120";
        _name.id = "age";
        console.log(_name.value, _name.id);
    
        // 2. 通过 标签对象.["属性名称"] 来操作标签的属性值
        _name["value"] = 110;
        _name["id"] = "phone";
        console.log(_name["value"], _name["id"]);

        
        // 3. DOM操作方式,通过getAttribute("属性名称")获取标签的属性值
        _name.setAttribute("value", 119);
        _name.setAttribute("id", "sex");
        // _name.className = "sex";
        _name.removeAttribute("value");
        console.log(_name.getAttribute("value"), _name.getAttribute("id"));

    </script>
</body>
</html>

备注:在使用原生JS操作标签的属性时,规则如下

  • id属性、title属性,建议通过 标签对象.属性名称 的语法进行处理。
  • class属性,建议通过标签对象.className 的语法进行处理。
  • 其他属性,建议使用set/getAttribute()的语法进行处理。

删除value属性。。。。:这样的语法是不能删除属性的 _name.value = null;

3.DOM核心API操作

节点属性API——获取元素定位

  • 元素的尺寸(宽度、高度)、位置(top.left)

属性/函数名称

描述

offsetWidth

获取元素宽度;包含padding值\border值

offsetHeight

获取元素高度;包含padding值\border值

offsetTop

获取元素距离浏览器顶部的距离

offsetLeft

获取元素距离浏览器左边的距离

备注:如果父元素进行了relative/absolute定位,offsetTop/offsetLeft就是相对父元素的顶部和左边的距离,如果父元素默认定位,就是相对浏览器窗口的距离

备注:获取网页可视区域宽度,高度
var clientWidth = 
window.innerWidth||document.documentElement.clientWidth;
var clientHeight = 
      window.innerHeight||document.documentElement.clientHeight;

获取网页文档的宽度、高度
var bodyWidth = document.body.clientWidth;
var bodyHeight = document.body.clientHeight;

实例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            position:static;// relative
            width:800px;
            height:400px;
            margin-left:100px;
            margin-top:100px;
            background-color: #069;
            padding:1px;
        }
        #box{
            padding:50px;
            width:100px;
            height:100px;
            /*position:absolute;
            top:50px;
            left:50px;
            margin:50px 0 0 50px;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="box"></div>
</div>
<script>
    function getStyle(dom, styleName) {
        if(dom.currentStyle) {
            return dom.currentStyle[styleName];
        } else {
            return getComputedStyle(dom)[styleName];
        }
    }

    var box = document.getElementById("box");
    console.log(getStyle(box,"width") + "---" + box.offsetWidth);
    console.log(getStyle(box, "height") + "---" + box.offsetHeight);
    console.log(getStyle(box, "margin-left") + "---" + box.offsetLeft);
    console.log(getStyle(box, "margin-top") + "---" + box.offsetTop);
    // 获取网页可视区域高度、宽度
console.log(window.innerHeight + "--" + window.innerWidth);
console.log(document.documentElement.clientHeight + "--" + document.documentElement.clientWidth);
// 获取网页文档的高度、宽度
console.log(document.body.clientHeight + "--" + document.body.clientWidth);

</script>
</body>
  • 节点查询API

属性/函数名称

描述

hasChildNodes()

判断是否包含子节点,返回一个布尔值

children

获取元素所有的子元素节点集合/数组

childNodes

获取元素所有的子节点集合/数组

firstChild

获取元素第一个子节点

firstElementChild

获取元素第一个子元素节点

lastChild

获取元素最后一个子节点

lastElementChild

获取元素最后一个子元素节点

previousSibling

获取元素前一个兄弟节点

previousElementSibling

获取元素前一个兄弟元素节点

nextSibling

获取元素后一个兄弟节点

nextElementSibling

获取元素后一个兄弟元素节点

parentNode

获取元素的父节点

textContent

操作(获取/设置)元素内容

  • 节点创建/添加API

属性/函数名称

描述

createElement(tagName)

根据名称创建一个元素节点

createTextNode(text)

根据文本创建一个文本节点

insertBefore(new,old)

在指定的节点前面添加节点

appendChild(child)

在子节点的末尾追加节点

replaceChild(new,old)

使用新的节点替换指定的节点

removeChild(child)

移除指定的子节点

className

设置标签class属性样式值

代码操作

<body>
    <div id="container">
        <div id="box">
            原有标签
        </div>
    </div>
    <script>
        var container = document.getElementById("container");
        var box = document.getElementById("box");
        // 创建第一个元素节点
        var d = document.createElement("div");
        // 创建文本节点
        var t = document.createTextNode("这是div文本");

        // 创建第二个元素节点
        var d2 = document.createElement("p");
        var t2 = document.createTextNode("这是p文本");

        // 添加元素节点到指定节点中
        d.appendChild(t);
        // 追加节点到指定节点前面
        container.insertBefore(d, box);

        // 追加节点到子节点末尾
        d2.appendChild(t2);
        d2.className = "test";
        container.appendChild(d2);
    </script>
</body>

4.简单特效开发

  • 抽奖
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>抽奖</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        .container{
            width: 500px;height: 600px;background: white;border:solid 2px orange;margin: auto;border-radius: 10px;}
        .box,.show,.show_active{width: 450px;height: 450px;border-radius: 50%;}
        .box{border:2px orange solid;padding: 10px;margin: 10px auto;}
        .show{background-color: pink;font-size: 70px;line-height: 450px;text-align: center;}
        .show_active{background-color: #D0D0D0;color:#fff;font-size: 70px;line-height: 450px;text-align: center;}
        #btn{width: 200px;height: 40px;background-color:pink;display: block;margin: auto;font-size: 20px;}
        
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <div id="show" class="show">
                等待抽奖
                </div>
        </div>
        <button id="btn" onclick="playGame()">开始抽奖</button>
    </div>

    <script type="text/javascript">
        var _names=["iphone7 plus","iPad Pro","apple watch","iPad mini4","iphone6","apple"]
        //获取页面中要使用的标签对象
        var _btn=document.getElementById("btn");
        var _show=document.getElementById("show");
        var _timer;
        var _flag=false;

        function playGame(){
            if (!_flag){
                _flag=true;
                _timer=setInterval(function(){
                    // 获取随机下标
                    var _no=Math.floor(Math.random(_names)*_names.length);
                    // 获取中奖礼品
                    var _n=_names[_no];
                    // 展示中奖礼品
                    _show.textContent=_n;
                    // 修改按钮的文本
                    _btn.textContent="停止抽奖";
                    // 修改展示的样式
                    _show.className="show_active"   
                },50);
            }else{
                _flag=false;
                clearInterval(_timer);
                // 修改按钮的文本
                _btn.textContent  = "开始抽奖";
                // 修改展示的样式
                _show.className = "show";
            }
        }


    </script>
</body>
</html>

效果展示:

抽奖

  • 飞机飞行进度演示
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>飞机飞行进度演示</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        #nav{position: relative;
            height: 128px;
            width: 1200px;
            border:solid 1px #8E8E8E; 
        }
        #nav img{
            position: absolute;
            left: 0px;
            top:0px;
        }

        #process{
            height: 128px;
            background:#FFA042;
            width: 0px;
        }
    </style>
</head>
<body>
    <div id="nav">
        <div id="process"></div>
        ![](images/flystart.png)
    </div>
    <button onclick="start()">开始飞行</button>
    <script type="text/javascript">
        // 获取小飞机图片
        var _plane=document.getElementById("plane");
        var _process=document.getElementById("process");
        // 定义一个变量,用来存放计时器
        var _timer;

        // start()函数
        function start(){
            _timer=setInterval(function(){
                // 获取left的样式数值
                var _left=_plane.offsetLeft;
                var _width=_process.offsetWidth;
                // 飞行过程left的值增加
                _left+=10;
                _width+=10;

                // 设置随着飞机的飞行 飞机的图片发生改变
                if (_left>200 && _left<800) {
                    _plane.setAttribute("src","images/flying.png");
                    _process.style.background="#6FB7B7";

                }else if(_left>800){
                    _plane.setAttribute("src","images/flyend.png");
                    _process.style.background="#02DFB2"
                }

                // 边界的判断
                if (_left>=1200){
                    // 停止计时函数
                    clearInterval(_timer);
                }

                // 设置样式
                _plane.style.left=_left+"px";
                _process.style.width=_width+"px";

            },100)
        }

    </script>

</body>
</html>

效果展示:

飞机飞行进度演示

5.JavaScript事件——Event

事件操作: 事件就是一种发生在网页上的行为;鼠标单击、鼠标双击、键盘按下、键盘抬起、获得焦点、失去焦点等等各种行为 常见的事件:

  • 鼠标事件

属性/函数名称

描述

onmouseout

鼠标离开

onmouseenter

鼠标进入

onabort

图像的加载被中断。

onblur

元素失去焦点。

onchange

域的内容被改变。

onclick

当用户点击某个对象时调用的事件句柄。

ondblclick

当用户双击某个对象时调用的事件句柄。

onerror

在加载文档或图像时发生错误。

onfocus

元素获得焦点。

onkeydown

某个键盘按键被按下。

onkeypress

某个键盘按键被按下并松开。

onkeyup

某个键盘按键被松开。

onload

一张页面或一幅图像完成加载。

onmousedown

鼠标按钮被按下。

onmousemove

鼠标被移动。

onmouseout

鼠标从某元素移开。

onmouseover

鼠标移到某元素之上。

onmouseup

鼠标按键被松开。

onreset

重置按钮被点击。

onresize

窗口或框架被重新调整大小。

onselect

文本被选中。

onsubmit

确认按钮被点击。

onunload

用户退出页面。

  • 键盘事件

属性/函数名称

描述

altKey

返回当事件被触发时,"ALT" 是否被按下。

button

返回当事件被触发时,哪个鼠标按钮被点击。

clientX

返回当事件被触发时,鼠标指针的水平坐标。

clientY

返回当事件被触发时,鼠标指针的垂直坐标。

ctrlKey

返回当事件被触发时,"CTRL" 键是否被按下。

metaKey

返回当事件被触发时,"meta" 键是否被按下。

relatedTarget

返回与事件的目标节点相关的节点。

screenX

返回当某个事件被触发时,鼠标指针的水平坐标。

screenY

返回当某个事件被触发时,鼠标指针的垂直坐标。

shiftKey

返回当事件被触发时,"SHIFT" 键是否被按下。

焦点事件:常用于表单元素标签

onfocus 获取焦点事件【获得光标事件】 onblue 失去焦点事件 onchange 内容修改事件,

事件的绑定方式: 1.标签属性绑定 2.dom元素绑定

  • 鼠标拖拽功能
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标拖动</title>
    <style type="text/css">
        #box{
            position:absolute;
            width: 336px;
            height: 300px;
            background-image:url("images/mv33.jpg"); }

    </style>
</head>
<body>
    <div id="box">
        
    </div>
    <script type="text/javascript">
        var _box=document.getElementById("box");

        // event事件对象,可以通过事件对象,获取到鼠标的位置
        _box.onmousedown=function(event){
            var _clientX = event.clientX;
            var _clientY = event.clientY;

            var _boxl = _box.offsetLeft;
            var _boxt = _box.offsetTop;

            var _left = _clientX - _boxl;
            var _boxt = _clientY - _boxt;

            document.onmousemove = function(event){
                var _clientX1 = event.clientX;
                var _clientY1 = event.clientY;

                var _l = _clientX1 - _left;
                var _t = _clientY1 - _boxt;

                _box.style.left = _l + "px";
                _box.style.top = _t + "px"
            }

            document.onmouseup=function(event){
                document.onmousemove=null;
            }
        }
    </script>
</body>
</html>

效果展示:

鼠标拖拽

扩展

  • 瀑布流式布局
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style>
    *{margin:0px;padding:0px;}
    #container{width: 1200px;margin:auto;position:relative;}
    .box{padding:5px;float:left;position:absolute;left:0;top:0;}
    .item{padding:5px;border:solid 1px #888;width:190px;border-radius:5px;}
    .item > img{border:none;width:190px;border-radius:5px;vertical-align:bottom;}
    </style>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="item">![](image/1.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/2.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/3.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/4.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/5.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/6.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/7.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/8.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/9.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/10.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/11.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/12.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/13.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/14.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/15.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/16.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/17.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/18.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/19.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/20.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/21.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/22.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/23.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/24.png)</div>
        </div>
        <div class="box">
            <div class="item">![](image/25.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/26.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/27.png)</div>
        </div>
        <div class="box">
            <div class="item">![](image/28.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/29.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/30.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/31.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/32.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/33.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/34.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/35.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/36.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/37.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/38.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/39.jpg)</div>
        </div>
        <div class="box">
            <div class="item">![](image/40.jpg)</div>
        </div>
    </div>

    <script>
        // 网页中的标签和图片加载
        // 等待网页中的所有数据加载完成,再执行代码
        // window.onload 页面数据加载事件

        window.onload = function() {
            var _container = document.getElementById("container");

            // 获取所有的图片
            var _imgs = document.getElementsByClassName("box");

            // 计算一行可以存放多少张图片
            var _containerWidth = _container.offsetWidth;
            var _imgWidth = _imgs[0].offsetWidth;
            var _cols = Math.floor(_containerWidth / _imgWidth);

            // 声明一个记录高度的数组
            var _height = [];

            // 遍历所有的图片,开始定位
            for(var i = 0; i < _imgs.length; i++) {
                if(i < _cols) {
                    // 保存第一行中每一张图片的高度
                    _height.push(_imgs[i].offsetHeight);
                    _imgs[i].style.left = _imgWidth * i + "px";
                } else {
                    // 计算数组中的最小值
                    var _minHeight = Math.min.apply(null, _height);
                    console.log(_minHeight);

                    var _minIndex = getMinIndex(_minHeight, _height);
                    console.log(_minIndex);

                    // i 指的是循环到else的 i与function getMinIndex函数返回值 i不是一个值
                    _imgs[i].style.top = _minHeight + "px";
                    _imgs[i].style.left = _minIndex * _imgWidth + "px";

                    // 更新最小高度
                    _height[_minIndex] += _imgs[i].offsetHeight;
                }
            }
        }
        /*value是最小值, arr是这个值所在的数组*/
        function getMinIndex(value , arr){
            for(var i = 0; i < arr.length; i ++) {
                if(value == arr[i]){
                    return i;
                }
            }
        }
    </script>
</body>
</html>

效果展示:

瀑布流式布局

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第79天:jQuery事件总结(二)

       上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。

1182
来自专栏python3

tkinter -- Menu

程序每次打印出当前选中的语言,与 Checkbutton 不同的是,同一个组内只有一个处于选中状态

873
来自专栏天天

20171024

1173
来自专栏小古哥的博客园

Vue入门

一、引入vue 方法一:下载vue.js,然后像引用jquery一样,在HTML中使用script标签引入 <script src="https://unpkg...

3978
来自专栏小狼的世界

jQuery的animate函数

jQuery提供了一个animate函数,可以通过改变CSS属性来实现一些动画效果。

1133
来自专栏菜鸟计划

我的HTML总结之常用基础便签

HTML:是Hyper Text Markup Language(超级文本标记语言)的缩写,HTML不是一种程序,只是一种控制网页中数据显示的标识语言。 HTM...

3815
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例全选、全不选、及反选

        3.2当第一个按钮--全选--被单击 会 触发一个函数,此函数涉及到复选框全部选中功能,但是复选框一共有多少个是未知的,所以我们要去做一个循环,...

662
来自专栏前端儿

让动态的 iframe 内容高度自适应

注意到这里的 this.contentWindow 其实就类似与下方的 name值对应的iframe2,两种引用方式是等价的

3153
来自专栏积累沉淀

JavaScript 事件对象

一.事件对象 事件处理三部分组成:对象.事件处理函数=函数。例如:单击文档任意处。 document.onclick = function () { alert...

20810
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式

1374

扫码关注云+社区

领取腾讯云代金券