WebAPI

DOM API

获取元素

querySelector参数就是一个css选择器,可以使用亲密学过的任意一种选择器来选中元素

<body>
    <div class="one">hello</div>
    <script>   
    let div = document.querySelector('.one') ;
    </script>
</body>
<body>
    <div id="div-id">hello</div>
    <script>   
    let div = document.querySelector('#div-id') ;
    </script>
</body>

使用console.dir()可以把元素以对象的形式打印出来:

<body>
    <div class="one" id="div-id">hello</div>
    <script>   
    let div = document.querySelector('#div-id') ;
    console.log(div);
    console.dir(div);
    </script>
</body>

多个同一标签名的对象在选择的时候只会得到第一个元素

<body>
    <div>hello</div>
    <div>hello2</div>
    <div>hello3</div>
    
    <script>   
    let div = document.querySelector('div') ;
    console.log(div);
    console.dir(div);
    </script>
</body>

可以使用querySelectorAll来选择全部元素

<body>
    <div>hello</div>
    <div>hello1</div>
    <div>hello2</div>

    <script>   
    let divs = document.querySelectorAll('div') ;
    console.log(divs);
    </script>
</body>

 事件

和用户操作密切相关的,例如用户在浏览器上左键点击鼠标,右键点击鼠标,鼠标移动,浏览器窗口大小调整,滚动窗口位置等。

<body>
    <div>hello</div>

    <script>   
        let div = document.querySelector('div');
        div.onclick = function() {
            //onclick就是针对cick这个点击事件提前准备好的事件处理程序
            console.log("按下鼠标");
        }
    </script>
</body> 

在控制台就会显示按下鼠标这四个字 右边会有按下鼠标的次数

更多事件示范:

    <script>   
        let div = document.querySelector('div');
        div.onclick = function() {
            //onclick就是针对cick这个点击事件提前准备好的事件处理程序
            console.log("按下鼠标");
        } 
        div.onmousemove = function(){
            console.log('鼠标移动');
        }
        div.onmouseenter = function(){
            console.log('鼠标进来了');
        }

        div.onmouseout = function(){
            console.log('鼠标出去了');
        }
    </script>

操作元素

元素就是html标签,操作元素就是在js中先获取到对应的html对象后再来操作其中的属性和内容(内容就是两个标签夹着的部分 例如<div>hello<div>中的hello)

<body>
    <div>hello</div>

    <script>
        let div = document.querySelector('div');
        console.log(div.innerHTML);
    </script>
</body>

 

同样可以获取到div内部的内容 

<body>
    <div>
        <h1>hello</h1>
    </div>

    <script>
        let div = document.querySelector('div');
        console.log(div.innerHTML);
    </script>
</body>

还可以修改元素里的内容(通过点击来给这个属性赋值)

<body>
    <div>
        <h1>hello</h1>
    </div>

    <script>
        let div = document.querySelector('div');
        console.log(div.innerHTML);

        //通过给这个属性赋值,来起到修改的作用
        div.onclick = function(){
            div.innerHTML = 'hello java';
        }
    </script>
</body>

在里面赋值不仅仅可以是文本,还可以是html片段

    <script>
        let div = document.querySelector('div');
        console.log(div.innerHTML);

        //通过给这个属性赋值,来起到修改的作用
        div.onclick = function(){
            //这里不仅仅可以赋值文本,还可以赋值html片段
            div.innerHTML = '<button>按钮</button>';
        }
    </script>

 

但是input是单标签所以当我们点击按钮的,时候获取不到input里面的信息

<body>
    <input type="text">
    <button>按我触发函数</button>

    <script>
        let input = document.querySelector('input');
        let button = document.querySelector('button');
        button.onclick = function(){
            console.log(input.innerHTML);
        }

    </script>
</body>

个时候,我们就需要把innerHTML换成value

获取/修改元素属性

修改的是开始标签里面写的那些键值对

<body>
    <img src="rose.png" alt="" width="200px">

    <script>
        let img = document.querySelector('img');
        console.log(img.src);
        console.log(img.width);
        console.log(img.alt);

    </script>
</body>

 打印出来的是图片的路径,宽度,以及没有设定所以为空的alt

同时,当我们使用点击修改图片功能的时候,对应的属性也会随之修改

    <script>
        let img = document.querySelector('img');
        console.log(img.src);
        console.log(img.width);
        console.log(img.alt);

        img.onclick = function(){
            img.src = 'miku.png'
        }
    </script>

 隐藏和显示密码功能

<body>
    
    <input type="password">
    <button>显示密码</button>

    <script>
        let input = document.querySelector('input');
        let button = document.querySelector('button');

        button.onclick = function() {
            if (input.type == 'password'){
            //一点击我们就可以显示密码
                input.type = 'text';
            //同时把文字内容更改    
                button.innerHTML = '隐藏密码';
            }
            else if (input.type == 'text'){
                //后面同理
                input.type = 'password';
                
                button.innerHTML = '显示密码';
            }
            else{
                //当不是密码类型的时候报错
                alert('type错误');
            }
        }
    </script>
</body>

计数器

<body>
    <input type="text" value="0">
    <button id="minus">-</button>
    <button id="add">+</button>

    <script>
        let input = document.querySelector('input');
        let addBtn = document.querySelector('#add');
        let minusBtn = document.querySelector('#minus');

        addBtn.onclick = function(){
            let oldValue = parseInt(input.value);
            //parseInt可以把字符串转化成数字
            //parseInt不仅仅是针对字符串操作,也能针对其他类型操作
            oldValue += 1;
            input.value = oldValue;
        }

        minusBtn.onclick = function(){
            let oldValue = parseInt(input.value);
            oldValue -= 1;
            input.value = oldValue;
        }
    </script>

</body>

 自动勾选

<body>
    <h3>请选择你的需要</h3>
    <div>
        <input type="checkbox" class="fruit"> 苹果
    </div>
    <div>
        <input type="checkbox" class="fruit"> 香蕉
    </div>
    <div>
        <input type="checkbox" class="fruit"> 橘子
    </div>
    <div>
        <input type="checkbox" class="all"> 全都要
    </div>

    <script>
        let all = document.querySelector('.all');
        let fruit = document.querySelectorAll('.fruit')

        //针对all来处理,用户点击all就可以全选
        all.onclick = function(){
            console.log('all.checked: ' + all.checked);
            for(let i = 0 ; i < fruit.length; i++){
              
                fruit[i].checked = all.checked;
            }
        }
    </script>
</body>

 变大的字体

<body>
    <h3 style="font-size: 20px;">请选择你的需要</h3>

    <script>
        let h3 = document.querySelector('h3');
        //每次点击可以使字体放大
        h3.onclick = function(){
            let oldSize = h3.style.fontSize;
            //h3.style本身就是一个对象,因此可以继续获取属性

            oldSize = parseInt(oldSize);

            //因为这里oldsize的值不是只有20 后面还带着px
            //parselnt是从左往右进行转换,过程中如果遇到了非字母的数字就会停止

            oldSize += 10;
            //设置样式的值的时候需要把单位带上
            h3.style.fontSize = oldSize + 'px' ;
            
        }
    </script>
</body>

开关灯

<body>
    <style>
        .light {
            color: black;
            background-color: white;
        }

        .dark {
            color: white;
            background-color: black;
        }

        div{
            height: 100%;
        }

        body {
            height: 100%;
        }

        html {
            height: 100%;
        }
    </style>

    <div class="light">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus perferendis dolores veritatis iusto omnis eos itaque totam architecto tempora natus, cum modi voluptatibus, nobis fugiat similique. Numquam repudiandae fugit impedit?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus perferendis dolores veritatis iusto omnis eos itaque totam architecto tempora natus, cum modi voluptatibus, nobis fugiat similique. Numquam repudiandae fugit impedit?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus perferendis dolores veritatis iusto omnis eos itaque totam architecto tempora natus, cum modi voluptatibus, nobis fugiat similique. Numquam repudiandae fugit impedit?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus perferendis dolores veritatis iusto omnis eos itaque totam architecto tempora natus, cum modi voluptatibus, nobis fugiat similique. Numquam repudiandae fugit impedit?
    
    </div>

    <script>
        let div = document.querySelector('div');
        div.onclick = function(){
            //通过classname属性来获取到html元素中的class属性
            //div.className = div class = "light"
            //因为class是一个关键字,不能作为属性名,变量名,函数名
            if(div.className == 'dark' ){
                div.className == 'light';
            }else if (div.className == 'light' ){
                div.className == 'dark';
            }else{
                alert('类名错误');
            }

        }

    </script>
</body>

 新增节点

<body>
    <div class="'parent">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </div>

    <script>
        let div = document.querySelector('div');
        childDiv = document.createElement('div');
        //针对哪个需要增加元素
        childDiv.innerHTML = '44';
        //具体增加元素的内容
        div.appendChild(childDiv);
        //执行增加元素

    </script>


</body>

删除节点

<body>
    <div class="parent">
        <div>11</div>
        <div>22</div>
        <div class="toDelete">33</div>
    </div>

    <script>
        let div = document.querySelector('.parent');
        let toDelete = document.querySelector('.toDelete');
        div.removeChild(toDelete);



    </script>


</body>

 

WPF(Windows Presentation Foundation)是一种用于创建Windows应用程序的框架,它提供了丰富的图形性能和交互性能,使得开发人员可以轻松地构建现代化且具有吸引力的用户界面。WPF具有强大的UI设计和布局功能,能够自定义样式、主题和动画效果,使应用程序的用户界面更加吸引人。 WebAPI是一种用于构建Web服务的框架,它可以通过HTTP协议实现与客户端之间的通信。WebAPI基于REST原则,使用简洁的HTTP方法(如GET、POST、PUT、DELETE等)来执行各种操作。它能够返回各种格式的数据,如XML、JSON等,并支持身份验证和授权等常见的Web开发功能。 将WPF和WebAPI结合使用可以实现丰富的客户端-服务器应用程序。WPF作为客户端应用程序的前端,负责呈现用户界面、处理用户交互和数据展示。WebAPI作为后端服务,负责处理客户端的请求,执行业务逻辑并提供数据。两者之间通过HTTP通信进行数据传输,可以实现实时数据更新和双向通信。 借助于WPF的强大的UI设计和交互性能,开发人员可以创建直观而灵活的用户界面,与WebAPI进行数据交互,并实现数据的展示和操作。通过WPF的数据绑定机制,可以轻松地将WebAPI返回的数据绑定到UI元素上,实现数据的实时更新和展示。 总之,WPF和WebAPI相互结合能够实现流畅且响应迅速的客户端-服务器应用程序。WPF提供了强大的UI设计和交互性能,而WebAPI则提供了灵活的后端服务,通过这种结合可以满足各种复杂的应用程序需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值