null - 程序员宅基地

原生JavaScript操作DOM标签的笔记_js 操作dom添加标签-程序员宅基地

技术标签：笔记前端 javascript

DOM

获取元素

根据ID获取

语法：document.getElementById(’id‘)

返回值：元素对象或 null

根据标签名获取元素

语法：document.getElementsByTagName(‘标签名’)

或者 element.getElementsByTagName(‘标签名’)

返回值：元素对象集合（伪数组，数组元素）

根据类名获取元素

语法：document.getElementsByClassName(‘类名’)

返回值：元素对象集合（伪数组，数组元素）

根据指定选择器获取元素

语法：document.querySelector(‘.类名或标签名’) *如果html里类名重复，只获取第一个

返回值：元素对象或 null

根据指定选择器获取全部元素

语法：document.querySelectorAll(‘.类名或标签名’)

返回值：元素对象集合（伪数组，数组元素）

获取特殊元素

获取body

document.body

获取html

document.documentElement

通过子节点获取父节点

子名.parentNode *获取的就是父

var 属性名 = document.querySelector('子名')
属性名.parentNode  // 获取的就是父标签

通过父节点获取子节点

父名.children *获取子节点

var 属性名 = document.querySelector('父名')
console.log(属性名.children);  //获取的就是子标签

兄弟节点

nextSibling *下一个兄弟节点包含元素文字节点

nextElementSibling *下一个兄弟元素节点

previousSibling *上一个兄弟节点包含元素文字节点

previousElementSibling *上一个兄弟元素节点

获取第一个节点和最后一个

两种常用方式

var ol = document.querySelector('ol');
console.log(ol.children[0]);    // 第一个子
console.log(ol.children[ol.children.length - 1]); // 最后一个子

var ol = document.querySelector('ol');
var lis = ol.querySelectorAll('li')
console.log(lis[0]);  // 第一个子
console.log(lis[lis.length-1]);  //最后一个子

传统的鼠标事件（绑定事件）

onfocus 获得焦点

onblur 失去焦点

onclick 鼠标点击后

ondblclick 鼠标双击

有文字时双击会选中文字解决方法
span.ondblclick=function(){
// 双击禁止选定文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}

onmousemove 鼠标移动

onmouseup 鼠标弹起

onmousedown 鼠标按下

onmouseover 鼠标经过

onmouseout 鼠标离开

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发

mouseenter 鼠标进入 *不会冒泡

mouseleave 鼠标离开 *不会冒泡

禁止选中文字和禁止右键菜单

<body>
    我是一段不愿意分享的文字
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
        })
        // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>

传统键盘事件

onkeyup 按键弹起的时候触发

onkeydown 按键按下的时候触发

onkeypress 按键按下的时候触发 *不能识别功能键比如 ctrl shift 左右箭头

//传统键盘事件写法
document.onkeyup=function() {
      alert('我弹出了')
 }

滚动事件

scroll 滑轮滚动是触发

窗口事件

window.onload 窗口加载事件

DOMContentLoaded 窗口加载事件

window.onresize 调整窗口大小加载事件

window.innerWidth 当前屏幕的宽度

表单事件

onsubmit

$('from').on('submit', function (e) {  
   alert('监听到了表单的提交事件2')
   e.preventDefault()
})

事件侦听（注册事件）

谁.addEventListener(‘鼠标(键盘)事件’, function() { }

鼠标(键盘)事件：就是把传统鼠标(键盘)事件前的 on 去掉

// 事件侦听鼠标事件写法
btn.addEventListener('click', function (){
    alert('hi-')
})

// 事件侦听键盘事件写法
document.addEventListener('keyup', function () {
       console.log('我弹出了')
})

解绑事件（删除事件）

传统注册事件的解绑方式

鼠标事件 = null;

var div = document.querySelector('div');
        div.onclick = function() {
                alert(11);
                // 1. 传统方式删除事件
                divs.onclick = null;
  }

事件侦听注册事件的解绑方式

removeEventListener(‘鼠标事件去掉on’, 函数名);

*只有将函数分开写的时候才能解绑事件

divs[1].addEventListener('click', fn) 
 function fn() {
         alert(22);
         divs[1].removeEventListener('click', fn);
 }

事件委托

*可以给未来动态创建的元素绑定事件

//click 是绑定在ol 身上的，但是 触发的对象是 ol 里面的小li
var ol = document.querySelector('ol');
ol.on('click', 'li', function () {
     console.log(22);
}) 
// 可以给未来动态创建的元素绑定事件
var li = $("<li>我是后来创建的</li>")
$('ol').append(li)

操作元素

改变元素内容

innerHTML * 常用

innerText

改元素类名

获取的元素名字.className =‘新类名’

改元素样式

获取的元素名字.style.需要改的样式名=‘新样式’

改变图片

获取的元素名字.src=‘新图片地址’

名字.alt=‘ ’

名字.title=‘ ’

跳转页面

location.href=’ ’

增加类名

元素对象.className = ‘旧类名新类名’; *这样旧类名不会被覆盖掉

计数

flag

当前

this

音频播放

audio.play() // 播放

audio.pause(); //暂停

//单个网页实现单击屏幕发出声音
        function playSound(){
            var audio=document.getElementById("audio");
            if(audio.paused) {  //如果音频是暂停状态
                audio.load;     //加载音频文件
                audio.play();	//播放
            }else {             //否则，也就是说音频是播放状态
                audio.pause();  //就暂停
            }
        }
        //调用
        window.onclick=function () {
            playSound();
        }

操作表单元素

可操作属性

type 表单类型

value 显示的内容

disabled 禁用

checked 默认选中

selected

input.select() // 文本框内容处于选中状态

清除字符串前后空格

.trim()

重置表单

reset()

document.querySelector('form表单名').reset()

自定义属性操作

获取属性值

getAttribute()

div.getAttribute(‘class’) *获取class的类名

更改属性的值

setAttribute()

div.setAttribute(‘id’, 2) *把div 的id名改成2

*如果没有这个属性就增加这个属性并设置值为2 不提倡，见H5自定义属性规范。

移除属性

removeAttribute()

div.removeAttribute(‘class’) *移除class类名

H5自定义属性规范

H5规定自定义属性data-开头作为属性名并赋值

// // h5新增的获取自定义属性的方法它只能获取data-开头的

增加自定义属性

div.setAttribute(‘data-a’,1)

获取自定义属性

div.getAttribute(‘data-a’);

自定义属性集合

dataset

// // dataset 是一个集合里面存放了所有以data开头的自定义属性

console.log(div.dataset.a);

排他思想

 <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
    
            btns[i].onclick = function() {
    
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
    
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }

标签（节点）操作

创建标签（节点）

var 元素名 = document.createElement(‘标签名’);

元素名.innerHTML = ‘’ // 在这个元素里创建一个标签

添加标签

添加到后面

appendChild()

添加到谁的名.appendChild(创建标签的元素名)

var li = document.querySelector(‘li’); //创建li标签
ul.appendChild(li); // 添加到ul里

添加到前面

insertBefore()

添加到谁的名.insertBefore(创建标签的元素名,添加到谁的名.[添加的位置索引号])

var lili = document.createElement(‘li’) //创建li标签
ul.insertBefore(lili,ul.children[0]) //添加到ul 里最前索引号为0的位置

添加标签创建字符串的标签

创建

var li = '<li class=""><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';

添加

ul.insertAdjacentHTML('beforeend', li); // 插入元素内部的最后一个子节点之后。          //添加到后面

‘beforebegin’：元素自身的前面。
‘afterbegin’：插入元素内部的第一个子节点之前。
‘beforeend’：插入元素内部的最后一个子节点之后。
‘afterend’：元素自身的后面。

删除标签

removeChild()

父名.removeChild(父.children[0]) *删除谁里面的（谁）

ul.removeChild(ul.children[0])  //删除ul里的第一个孩子

remove（）删除所有元素

ul.remove() // 删除ul和里的所有

复制标签

cloneNode() *谁.cloneNode() 复制谁然后再添加

var lili = ul.children[0].cloneNode(true)   //复制ul里的第一个
ul.appendChild(lili)  	//添加到ul 最后

// 1. 谁.cloneNode(); 括号为空或者里面是false 浅拷贝只复制标签不复制里面的内容

// 2. 谁.cloneNode(true); 括号为true 深拷贝复制标签复制里面的内容

DOM事件流

*子盒子和父盒子都有点击事件

三个阶段

捕获阶段
当前目标阶段
冒泡阶段

<div class="father">
        <div class="son">son盒子</div>
</div>
    <script>
        var son = document.querySelector('.son')
        var father = document.querySelector('.father')
        father.addEventListener('click',function(){
            alert('father')
        },true)
        son.addEventListener('click',function(){
            alert('son')
        },true)
     </script>

子盒子和父盒子都有点击事件
写true 为捕获阶段，就是点击子盒子先执行父盒子的事件会再执行子盒子的事件
写false为冒泡阶段，就是点击子盒子先执行子盒子的事件会再执行父盒子的事件

*传统绑定事件只有冒泡阶段

事件对象

var div = document.querySelector('div');
div.onclick=function(e) {
     console.log(e);
}     //   e  就是写一个形参来接收事件对象

e.target 返回触发事件的对象 *就是谁触发的这个事件

e.target.nodeName 返回触发这个事件的标签的字母大写

e.type 返回鼠标事件类型，比如鼠标经过，鼠标点击 *去掉on

 <ul>
        <li>abc</li>
        <li>def</li>
        <li>ghi</li>
 </ul>
 <script>
        var ul = document.querySelector('ul')
        ul.onclick = function (e) {
    
            console.log(e.target);  //点哪个li  就返回哪个li
             console.log(e.target.nodeName);  // LI
            console.log(e.type);  //  click
        }
</script>

阻止默认行为（事件）让链接不跳转或者让提交按钮不提交

e.preventDefault()

return false；也可以实现这个效果，但是return false以下的代码就不执行了，所以用他的时候需将他写在最后

<a href="http://www.baidu.com">百度</a>
  <script>
        var a = document.querySelector('a')
        a.onclick = function (e) {
            e.preventDefault();  //阻止默认行为
  }</script>

阻止冒泡

e.stopPropagation()

<div class="father">
        <div class="son">son儿子</div>
</div>
 <script>
     var son = document.querySelector('.son')
     var father = document.querySelector('.father')
     son.onclick = function (e) {
    
        alert('hi')
        e.stopPropagation(); // 阻止冒泡 子盒子弹出后 父盒子就不在弹出了
     }
     father.onclick = function () {
    
        alert('hi1')
        e.stopPropagation(); //如果父盒子还有父并且也绑定了事件，也需要阻止
 }</script>

鼠标事件对象（位置坐标）

鼠标点击时在页面的位置

 <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>

键盘事件对象

e.key * 判断用户按下哪个键

e.keyCode 使用keyCode属性判断用户按下哪个键 ASCLL值判断

// 键盘事件 keyup 和 keydown 不区分字母大小写按a 得到的都是65
// keypress 区分大小写 a:97 A:65

document.addEventListener('keyup', function(e) {
   console.log(e.keyCode); }   //返回ascll值

 <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            // keyup 和 keydown 不区分字母大小写 按a 得到的都是65
            // keypress  区分大小写  a:97  A:65
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }
        })
        document.addEventListener('keypress', function(e) {
            console.log('press:' + e.keyCode);
        })
    </script>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

BOM

顶级对象window

window的加载事件

页面加载事件（两种）

window.onload

是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

window.onload = function() {
      alert(22);
}    //传统注册方式只能写一次  如果有多个就会一最后一个为准

window.addEventListener('load', function() {
      alert(22);
})   //侦听注册事件没有限制

DOMContentLoaded

仅当DOM加载完成，不包括样式表，图片，flash等等。就可以触发

document.addEventListener('DOMContentLoaded', function() {
      alert(33);
})

// load 等页面内容全部加载完毕，包含页面dom元素图片 flash css 等等

// DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行加载速度比 load更快一些

调整窗口大小事件

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

window.innerWidth 当前屏幕的宽度

只要窗口大小发生像素变化，就会触发这个事件。
我们经常利用这个事件完成响应式布局。

定时器（两种）

setTimeout( )

setInterval( )

setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器

setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

var timer = *给定时器一个标识符

var timer = setTimeout(function() {
     alert('时间到了')
},毫秒数)      //传统写法

var timer = setTimeout(要执行的函数的名, 延迟多少毫秒后执行)
function callback() {  //要执行的函数内容
    console.log('爆炸了');
}     //侦听写法

清除（停止）定时器

clearTimeout( );

clearInterval( )

绑定一个btn 当点击这个的时候停止定时器

var btn = document.querySelector('button')
var timer = setTimeout(function () {
    console.log('要爆炸了');
}, 3000)
btn.onclick = function () {
     clearTimeout(timer)
}

location 对象属性

location.href *获取整个 URL 地址

location.search *获取参数

location.host *获取主机（域名）

location.port *获取端口号

location.pathname *获取路径

location.hash *获取片段 #后面的内容常用于链接锚点

元素偏移量

offset 系列

.offsetTop *返回元素相对带有定位的父盒子上方的距离

.offsetLeft *返回元素相对带有定位的父盒子左侧的距离

.offsetWidth 返回元素的宽度包含边框宽度和内边距

.offsetHeight 返回元素的高度包含边框宽度和内边距

.offsetParent *返回元素的带有定位的父亲否则返回的是body

.parentNode *返回父亲是最近一级的父亲不管有没有定位

元素可视区

client 系列

.clientWidth 返回元素的宽度包含内边距 *但不包含边框

.clientHeight 返回元素的高度包含内边距 *但不包含边框

.clientTop *返回上边框的宽度

.clientLeft *返回左边框的宽度

元素滚动

scroll 系列

.scrollHeight 返回元素实际的高度包含内边距 *但不包含边框

scrollWidth 返回元素实际的宽度包含内边距 *但不包含边框

scrolltop *返回盒子被卷去的上侧距离

scrollLeft *返回盒子被卷去的左侧距离

window.pageYOffset *返回页面被卷去的上侧距离

window.pageXOffset *返回页面被卷去的左侧距离

自执行函数

(function(){ })()；

(function a (){ }())

移动端（DOM）

移动端触屏事件 touch

touchstart *手指触摸到一个dom元素时触发

touchmove *手指在一个dom元素上滑动时触发

touchend *手指从一个dom元素上离开时触发

移动端触屏事件对象

e.touches *正在触摸屏幕的所有手指的列表

e.targetTouches *正在触摸当前DOM元素的手指列表

e.changedTouches *手指状态发生了改变的列表从无到有或者从有到无

e.targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标等等

移动端监听事件

过渡监听

*监听某个元素的过渡效果

元素名.addEventListener('transitionend', function () {  })

移动端添加类名

classList 属性

var div = document.querySelector('div');
console.log(div.classList);  // 返回div 的类名 是伪数组形式

.classList.add（’类名’）； *追加类名

var div = document.querySelector('div');
div.classList.add('three');

.classList.remove（’类名’）; *删除类名

var div = document.querySelector('div');
div.classList.remove('one');

.classList.toggle（’类名’）; *切换类名

var btn = document.querySelector('button')
btn.addEventListener('click', function () {
    document.body.classList.toggle('bg')
})
// 如果div 本身有这个类名 就把这个类名删除  如果没有就添加这个类名

会话存储

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

存储数据：

sessionStorage.setItem('key', value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

清空数据：(所有都清除掉)

sessionStorage.clear()

<input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
		// 存储数据
        set.addEventListener('click', function () {
    
            // var val = ipt.value
            sessionStorage.setItem('uname', ipt.value)
            sessionStorage.setItem('set', ipt.value)
            sessionStorage.setItem('gey', ipt.value)
        })
		// 获取数据
        get.addEventListener('click', function () {
    
            console.log(sessionStorage.getItem('uname'));
        })
		// 删除数据
        remove.addEventListener('click', function () {
    
            sessionStorage.removeItem('uname')
        })
 		// 清空数据
        del.addEventListener('click', function () {
    
            sessionStorage.clear()
        })
     </script>

本地存储

1、声明周期永久生效，除非手动删除否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

3、以键值对的形式存储使用

存储数据：

localStorage.setItem('key', value)

获取数据：

localStorage.getItem('key')

删除数据：

localStorage.removeItem('key')

清空数据：(所有都清除掉)

localStorage.clear()

存储事件

change * 状态发生改变的时候

只存在表单元素里

 <input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        if (localStorage.getItem('username')) {
    
            username.value = localStorage.getItem('username');
            remember.checked = true; // 复选框的选中状态
        }
		// 事件
        remember.addEventListener('change', function() {
    
            if (this.checked) {
    
                localStorage.setItem('username', username.value);
            } else {
    
                localStorage.removeItem('username');
            }
        })
    </script>

input事件

oninput

输入框名.addEventListener('input', function() { 
	// 当input框里的内容发生改变 就会执行函数
} )

删除数据：

localStorage.removeItem('key')

清空数据：(所有都清除掉)

localStorage.clear()

存储事件

change * 状态发生改变的时候

只存在表单元素里

 <input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        if (localStorage.getItem('username')) {
    
            username.value = localStorage.getItem('username');
            remember.checked = true; // 复选框的选中状态
        }
		// 事件
        remember.addEventListener('change', function() {
    
            if (this.checked) {
    
                localStorage.setItem('username', username.value);
            } else {
    
                localStorage.removeItem('username');
            }
        })
    </script>

input事件

oninput

输入框名.addEventListener('input', function() { 
	// 当input框里的内容发生改变 就会执行函数
} )

本文链接：https://blog.csdn.net/Guard_56/article/details/135859109

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

oracle 12c 集群安装后的检查_12c查看crs状态-程序员宅基地

文章浏览阅读1.6k次。安装配置gi、安装数据库软件、dbca建库见下：http://blog.csdn.net/kadwf123/article/details/784299611、检查集群节点及状态：[root@rac2 ~]# olsnodes -srac1 Activerac2 Activerac3 Activerac4 Active[root@rac2 ~]_12c查看crs状态

解决jupyter notebook无法找到虚拟环境的问题_jupyter没有pytorch环境-程序员宅基地

文章浏览阅读1.3w次，点赞45次，收藏99次。我个人用的是anaconda3的一个python集成环境，自带jupyter notebook，但在我打开jupyter notebook界面后，却找不到对应的虚拟环境，原来是jupyter notebook只是通用于下载anaconda时自带的环境，其他环境要想使用必须手动下载一些库：1.首先进入到自己创建的虚拟环境(pytorch是虚拟环境的名字)activate pytorch2.在该环境下下载这个库conda install ipykernelconda install nb__jupyter没有pytorch环境

国内安装scoop的保姆教程_scoop-cn-程序员宅基地

文章浏览阅读5.2k次，点赞19次，收藏28次。选择scoop纯属意外，也是无奈，因为电脑用户被锁了管理员权限，所有exe安装程序都无法安装，只可以用绿色软件，最后被我发现scoop，省去了到处下载XXX绿色版的烦恼，当然scoop里需要管理员权限的软件也跟我无缘了（譬如everything）。推荐添加dorado这个bucket镜像，里面很多中文软件，但是部分国外的软件下载地址在github，可能无法下载。以上两个是官方bucket的国内镜像，所有软件建议优先从这里下载。上面可以看到很多bucket以及软件数。如果官网登陆不了可以试一下以下方式。_scoop-cn

Element ui colorpicker在Vue中的使用_vue el-color-picker-程序员宅基地

文章浏览阅读4.5k次，点赞2次，收藏3次。首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker>在data里面data() { return {headcolor: ’ #278add ’ //这里可以选择一个默认的颜色} }然后在你想要改变颜色的地方用v-bind绑定就好了，例如：这里的:sty..._vue el-color-picker

迅为iTOP-4412精英版之烧写内核移植后的镜像_exynos 4412 刷机-程序员宅基地

文章浏览阅读640次。基于芯片日益增长的问题，所以内核开发者们引入了新的方法，就是在内核中只保留函数，而数据则不包含，由用户（应用程序员）自己把数据按照规定的格式编写，并放在约定的地方，为了不占用过多的内存，还要求数据以根精简的方式编写。boot启动时，传参给内核，告诉内核设备树文件和kernel的位置，内核启动时根据地址去找到设备树文件，再利用专用的编译器去反编译dtb文件，将dtb还原成数据结构，以供驱动的函数去调用。firmware是三星的一个固件的设备信息，因为找不到固件，所以内核启动不成功。_exynos 4412 刷机

Linux系统配置jdk_linux配置jdk-程序员宅基地

文章浏览阅读2w次，点赞24次，收藏42次。Linux系统配置jdkLinux学习教程，Linux入门教程（超详细）_linux配置jdk

随便推点

matlab(4)：特殊符号的输入_matlab微米怎么输入-程序员宅基地

文章浏览阅读3.3k次，点赞5次，收藏19次。xlabel('\delta');ylabel('AUC');具体符号的对照表参照下图：_matlab微米怎么输入

C语言程序设计-文件(打开与关闭、顺序、二进制读写)-程序员宅基地

文章浏览阅读119次。顺序读写指的是按照文件中数据的顺序进行读取或写入。对于文本文件，可以使用fgets、fputs、fscanf、fprintf等函数进行顺序读写。在C语言中，对文件的操作通常涉及文件的打开、读写以及关闭。文件的打开使用fopen函数，而关闭则使用fclose函数。在C语言中，可以使用fread和fwrite函数进行二进制读写。‍ Biaoge 于2024-03-09 23:51发布阅读量：7 ️文章类型：【 C语言程序设计】在C语言中，用于打开文件的函数是____，用于关闭文件的函数是____。

Touchdesigner自学笔记之三_touchdesigner怎么让一个模型跟着鼠标移动-程序员宅基地

文章浏览阅读3.4k次，点赞2次，收藏13次。跟随鼠标移动的粒子以grid（SOP）为partical（SOP）的资源模板，调整后连接【Geo组合+point spirit（MAT)】，在连接【feedback组合】适当调整。影响粒子动态的节点【metaball(SOP)+force(SOP)】添加mouse in（CHOP)鼠标位置到metaball的坐标，实现鼠标影响。..._touchdesigner怎么让一个模型跟着鼠标移动

【附源码】基于java的校园停车场管理系统的设计与实现61m0e9计算机毕设SSM_基于java技术的停车场管理系统实现与设计-程序员宅基地

文章浏览阅读178次。项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。_基于java技术的停车场管理系统实现与设计

Android系统播放器MediaPlayer源码分析_android多媒体播放源码分析时序图-程序员宅基地

文章浏览阅读3.5k次。前言对于MediaPlayer播放器的源码分析内容相对来说比较多，会从Java-&amp;gt;Jni-&amp;gt;C/C++慢慢分析，后面会慢慢更新。另外，博客只作为自己学习记录的一种方式，对于其他的不过多的评论。MediaPlayerDemopublic class MainActivity extends AppCompatActivity implements SurfaceHolder.Cal..._android多媒体播放源码分析时序图

java 数据结构与算法 ——快速排序法-程序员宅基地

文章浏览阅读2.4k次，点赞41次，收藏13次。java 数据结构与算法 ——快速排序法_快速排序法

原生JavaScript操作DOM标签的笔记_js 操作dom添加标签-程序员宅基地

DOM

获取元素

根据ID获取

根据标签名获取元素

根据类名获取元素

根据指定选择器获取元素

根据指定选择器获取全部元素

获取特殊元素

获取body

获取html

通过子节点获取父节点

通过父节点获取子节点

兄弟节点

nextElementSibling *下一个兄弟元素节点

previousElementSibling *上一个兄弟元素节点

获取第一个节点和最后一个

传统的鼠标事件（绑定事件）

onfocus 获得焦点

onblur 失去焦点

onclick 鼠标点击后

ondblclick 鼠标双击

onmousemove 鼠标移动

onmouseup 鼠标弹起

onmousedown 鼠标按下

onmouseover 鼠标经过

onmouseout 鼠标离开

mouseenter 鼠标进入 *不会冒泡

mouseleave 鼠标离开 *不会冒泡

禁止选中文字和禁止右键菜单

传统键盘事件

onkeyup 按键弹起的时候触发

onkeydown 按键按下的时候触发

onkeypress 按键按下的时候触发 *不能识别功能键 比如 ctrl shift 左右箭头

滚动事件

scroll 滑轮滚动是触发

窗口事件

window.onload 窗口加载事件

DOMContentLoaded 窗口加载事件

window.onresize 调整窗口大小加载事件

window.innerWidth 当前屏幕的宽度

表单事件

onsubmit

事件侦听（注册事件）

解绑事件（删除事件）

传统注册事件的解绑方式

事件侦听注册事件的解绑方式

事件委托

操作元素

改变元素内容

改元素类名

改元素样式

改变图片

跳转页面

增加类名

计数

当前

音频播放

audio.play() // 播放

audio.pause(); //暂停

操作表单元素

可操作属性

type 表单类型

value 显示的内容

disabled 禁用

checked 默认选中

selected

清除字符串前后空格

重置表单

reset()

自定义属性操作

获取属性值

更改属性的值

移除属性

H5自定义属性规范

增加自定义属性

获取自定义属性

自定义属性集合

排他思想

标签（节点）操作

onkeypress 按键按下的时候触发 *不能识别功能键比如 ctrl shift 左右箭头

创建标签（节点）

添加标签创建字符串的标签

remove（）删除所有元素

e.target.nodeName 返回触发这个事件的标签的字母大写

e.type 返回鼠标事件类型，比如鼠标经过，鼠标点击 *去掉on

阻止默认行为（事件）让链接不跳转或者让提交按钮不提交

.offsetWidth 返回元素的宽度包含边框宽度和内边距

.offsetHeight 返回元素的高度包含边框宽度和内边距

.offsetParent *返回元素的带有定位的父亲否则返回的是body

.parentNode *返回父亲是最近一级的父亲不管有没有定位

.clientWidth 返回元素的宽度包含内边距 *但不包含边框

.clientHeight 返回元素的高度包含内边距 *但不包含边框

.scrollHeight 返回元素实际的高度包含内边距 *但不包含边框

scrollWidth 返回元素实际的宽度包含内边距 *但不包含边框