day07

最新推荐文章于 2023-10-10 10:59:42 发布
最新推荐文章于 2023-10-10 10:59:42 发布
阅读量47 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chifuren/article/details/111832352
版权

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <button onclick='console.log("hello");'></button>
    <script>
        console.log('hello')
    </script>
    <script src="1.js"></script>
</body>
</html>

1.js

console.log('hello')

2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>访问非常规元素</title>
</head>
<body>
    <div id='myDiv'>test</div>
    <script>
        console.log(document.doctype)
        console.log(typeof document.doctype)
        console.log(document.documentElement)
        console.log(document.head)
        console.log(document.title)
        console.log(document.body)
    </script>
</body>
</html>

3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="myDiv" name="div1" class='test1'>
        <p id="myPara">test</p>
    </div>
    <script>
        const oDiv = document.getElementById('myDiv')
        const oDiv1 = document.getElementsByName('div1')
        const oDiv2 = document.getElementsByTagName('div')
        const oDiv3 = document.getElementsByClassName('test1')
        const oDiv4 = document.querySelector('#myDiv')
        const oDiv5 = document.querySelectorAll('#myDiv')
        console.log(oDiv,oDiv1,oDiv2,oDiv3)
        console.log(oDiv4,oDiv5)
        const oPara = oDiv.querySelector('#myPara')
    </script>
</body>
</html>

4.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
            border: 1px solid red;
        }
        .p2 {
            background-color:gray;
        }
        .p3 {
            visibility:hidden;
        }
    </style>
</head>

<body>
    <!-- 
    // 原生属性
    <div id="myDiv" class="test" style="border:1px solid red;"></div>
    <img src="" alt="">
    <label for="userName" >姓名：</label><input type="text" name="userName" id="">
    <script>
        const oDiv = document.querySelector('div')
        console.log(oDiv.id)
        console.log(oDiv.className)
        const oLabel = document.querySelector('label')
        console.log(oLabel.htmlFor)
        console.log(oDiv.style)
    </script> -->
    <!--ClassName-->
    <h1 class="p1 p2">this is a heading</h1>
    <button id='myButton'>Click</button>

    <script>
        const heading = document.querySelector('h1')
        const myButton = document.querySelector("#myButton")
        //console.log(heading.className)
        //heading.className += ' p3'
        //console.log(heading.className)
        //classList
        console.log(heading.classList)
        //heading.classList.add('p3')
        heading.classList.remove('p2')
        myButton.addEventListener('click',() =>{
            heading.classList.toggle('p3')
        })
    </script>

    <!--自定义属性-->
    <div id="myDiv1" ddd="user" eee="name">test</div>
    <script>
        const oDiv1 = document.querySelector('#myDiv1')
        let ddd = oDiv1.getAttribute('ddd')
        let id = oDiv1.getAttribute('id')
        console.log(ddd) //user
        console.log(id) //myDiv1
        oDiv1.setAttribute('eee', 'xiaojichao')
        let eee = oDiv1.getAttribute('eee')
        console.log(eee)
    </script>

    <!--HTML5 自定义数据属性-->
    <div id="myDiv2" data-user-name="Tianguiping" data-title="teacher">Test2</div>
    <script>
        const myDiv2 = document.querySelector('#myDiv2')
        console.log(myDiv2.dataset)
        console.log(myDiv2.dataset.userName)
        myDiv2.dataset.title = 'student'
        console.log(myDiv2.dataset.title)
    </script>
</body>

</html>

5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>this is a heading</h1>
    <p>this is <i>a little</i> sample</p>
    <script>
        const myPara = document.querySelector('p')

        // beforebegin、afterbegin、beforeend、 afterend
        myPara.insertAdjacentHTML('beforebegin','<i>test</i>')
        myPara.insertAdjacentHTML('beforeend','<i>test2</i>')
        myPara.insertAdjacentText('afterbegin','testsdasdfasdfa;sdjf')
        console.log(myPara.innerHTML)
        console.log(myPara.outerHTML)

        ///= 只访问里面的文本
        console.log(myPara.textContent)
        console.log(document.documentElement.textContent)
        console.log(myPara.innerText)
    </script>
</body>
</html>

6.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>Java</li>
        <li>JavaScript</li>
        <li>Python</li>
        <li>Swift</li>
    </ul>
    <script>
        const oList = document.querySelector('ul')
        console.log(oList.parentNode)
        console.log(oList.parentElement)
        // 得到 oList 元素的子节点
        console.log(oList.childNodes)
        console.log(oList.children)
        //访问第一个元素
        console.log(oList.firstChild)
        console.log(oList.firstElementChild)
        //访问最后一个元素
        console.log(oList.lastElementChild)
        // 访问相邻的元素
        console.log(oList.firstElementChild.nextElementSibling)
        console.log(oList.lastElementChild.previousElementSibling)
        // 元素节点的数目
        console.log(oList.childNodes.length)
        console.log(oList.childElementCount)
    </script>
</body>

</html>

7.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <ul>
        <li>Java</li>
        <li>JavaScript</li>
    </ul>
    <input type="text" id="txtItem" />
    <button id="btnAdd">+</button>
    <button id="btnDel">-</button>
    <script>
        const oList = document.querySelector('ul')

        document.querySelector('#btnAdd').addEventListener('click',() => {
            let strItem = document.querySelector("#txtItem").value
            let oE = document.createElement('li')
            oE.textContent = strItem
            oList.appendChild(oE)
            document.querySelector("#txtItem").value = ''
            if (oList.childElementCount > 0) {
                document.querySelector('#btnDel').classList.remove('p1')
            }
        })

        document.querySelector('#btnDel').addEventListener('click',() => {
            oList.removeChild(oList.lastElementChild)
            if (oList.childElementCount == 0) {
                document.querySelector('#btnDel').classList.toggle('p1')
            }
        })
    </script>
</body>
</html>

8.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <ul>
        <li>Java</li>
        <li>JavaScript</li>
    </ul>
    <input type="text" id="txtItem" />
    <button id="btnAdd">+</button>
    <button id="btnDel">-</button>
    <script>
        const oList = document.querySelector('ul')

        document.querySelector('#btnAdd').addEventListener('click',() => {
            let strItem = document.querySelector("#txtItem").value
            let oE = document.createElement('li')
            oE.textContent = strItem
            oList.appendChild(oE)
            document.querySelector("#txtItem").value = ''
            if (oList.childElementCount > 0) {
                document.querySelector('#btnDel').classList.remove('p1')
            }
        })

        document.querySelector('#btnDel').addEventListener('click',() => {
            oList.removeChild(oList.lastElementChild)
            if (oList.childElementCount == 0) {
                document.querySelector('#btnDel').classList.toggle('p1')
            }
        })
    </script>
</body>
</html>
chi夫人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE PC端项目px转为rem适应屏幕
张杰伦的博客
11-05 486
安装lib-flexible和postcss-pxtorem，这两个版本亲测可用 npm install --save autoprefixer@^9 npm install postcss-pxtorem@5.1.1 在main.js中引入 import 'lib-flexible/flexible' 修改node_modules中的lib-flexible/flexible文件中 原来的是适配移动端，修改为下面这样 function refreshRem(){ var w
day07-Elasticsearch03
12-13
在本课程"day07-Elasticsearch03"中，我们将深入探讨Elasticsearch这一强大的分布式搜索引擎和数据分析工具。Elasticsearch（ES）是基于Lucene构建的，它以其高效、可扩展性和实时分析能力而备受青睐。在这个阶段的...
PC端页面切换成手机模式后，出行了一个莫名其妙的980px
webFront的博客
07-03 2003
移动端的默认布局视口宽一般是980px，所以body的100%才是980px。 可以加这个<meta name="viewport" content="width=1200, initial-scale=1.0">
pc网页响应式在手机网页宽度980px问题方案
weixin_45527741的博客
05-09 764
pc网页响应式在手机网页宽度980px问题方案 html中加上如下代码： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 来源网页
手机端的屏幕自适应(一)
weixin_30674525的博客
11-28 196
通过rem布局 只要引入这个代码： (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { ...
flexible.js适配pc端、移动端并自动将px转换rem 或者PC端px自动转vw
xiaoqin5的博客
10-10 1803
flexible.js适配pc端、移动端并自动将px转换rem 或者PC端px自动转vw
学习JavaEE的day07
02-28
在“学习JavaEE的day07”这个主题中，我们主要会探讨Java企业级开发的一些核心概念和技术。JavaEE（Java Platform, Enterprise Edition）是Java技术在企业应用开发中的一个框架，它为构建分布式、多层的企业级应用...
day07todo
03-06
第07天 该项目是使用版本10.2.0生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component ...
day07.md
07-13
day07.md
python-Day07.rar
最新发布
04-07
在Python编程语言的学习过程中，"Day07"可能代表着一个教学日程或者课程模块，重点关注的是第七天所涉及的主题和概念。在这个阶段，学生通常会深入理解Python的基础知识，并逐步接触更高级的话题。以下是根据这个...
Chrome调试模拟iPhone6时body显示980*1742
MeiBlog
07-25 139
原因 由于我们大部分移动设备默认的viewport都是980px 解决 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
vue+three+layui 实现后台登陆页面
qq_42683219的博客
05-03 1481
效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1200, initial-scale=1.0, minimum-scale=1.0, maximum-scal...
【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-22 1947
一、meta 视口标签简介 二、meta 视口标签参数详解 - 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 三、meta 视口标签代码示例 1、不设置 meta 视口标签代码示例 2、设置 meta 视口标签代码示例
使网页按照web端版面显示在手机上 最大宽度1200px
Celeste of Jesus的博客
11-10 769
<meta name="viewport" content="width=1200px"> 加在head里即可
认识视口viewport
weixin_43951015的博客
02-20 109
认识视口viewport：布局视口（layout viewport） 视觉视口（visual layout）理想视口（ideal layout）
viewport,html,body在pc和移动的差异
weixin_33898233的博客
12-26 453
2019独角兽企业重金招聘Python工程师标准>>> ...
PC端和移动端自适应问题解决方法
HanXiaoXi_yeal的博客
01-07 2535
1、最小尺寸分辨率1024*768（传统17寸显示器），则可以采用940px、960px、或者常用的980px作为最小宽度。 简单理解为可视区域最大宽度为600px，即大于600px下不生效。 @media screen and (max-width: 600px) { .class { background: #fff; } } 简单理解为可视区域最小宽度为900px，即大于900px下生效。 @media screen and (min-width: 900px) { .class { b
把PC端网页放在手机端打开，会被整体缩小，为什么？如何不让它缩小？
weixin_44761231的博客
05-01 3889
把PC端网页放在手机端打开，会被整体缩小，为什么？如何不让它缩小？ 1、首先我们要知道把一个PC端的网站放到手机端需要经过两步： 第一步：把电脑端的网站放到虚拟容器中。（一个概念——视口：这个虚拟容器就叫做视口。） 这个虚拟容器的宽度是980px。这个980px是人为规定的，在手机出厂时就设置好的。 为什么是980px？因为早期的PC端显示器宽度是980px。 如果PC端网站宽度小于980px，完全可以放进这个虚拟容器里面。 如果PC端网站宽度等于980px，刚好可以放进这个虚拟容器里面。 如果PC
pc网页调整为手机模式
热门推荐
m0_60402142的博客
06-22 1万+
pc网页调整为手机模式
@PostMapping("filters") public Map<String, List<String>> getFilters(@RequestBody RequestParams params){ return hotelService.getFilters(params); }这里调用了HotelService中的getFilters方法，尚未实现。请在下函数中实现：package com.chinasoft.day07index.service; import com.chinasoft.day07index.pojo.Hotel; import com.chinasoft.day07index.pojo.Params; import com.chinasoft.day07index.pojo.SearchResult; import java.util.List; import java.util.Map; public interface HotelService { List<Hotel> getAllHotel(); Hotel getOneHotel(Long id); SearchResult searchMatchHotel(Params params); Map<String, List<String>> filters(Params params); }
07-14
package com.chinasoft.day07index.service; import com.chinasoft.day07index.pojo.Hotel; import com.chinasoft.day07index.pojo.Params; import com.chinasoft.day07index.pojo.SearchResult; import java.util...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值