原生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事件流

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

三个阶段
  1. 捕获阶段

  2. 当前目标阶段

  3. 冒泡阶段

<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 当前屏幕的宽度

  1. 只要窗口大小发生像素变化,就会触发这个事件。

  2. 我们经常利用这个事件完成响应式布局。

定时器(两种)
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框里的内容发生改变 就会执行函数
} )
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Guard_56/article/details/135859109

智能推荐

分布式光纤传感器的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告_预计2026年中国分布式传感器市场规模有多大-程序员宅基地

文章浏览阅读3.2k次。本文研究全球与中国市场分布式光纤传感器的发展现状及未来发展趋势,分别从生产和消费的角度分析分布式光纤传感器的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场份额。主要生产商包括:FISO TechnologiesBrugg KabelSensor HighwayOmnisensAFL GlobalQinetiQ GroupLockheed MartinOSENSA Innovati_预计2026年中国分布式传感器市场规模有多大

07_08 常用组合逻辑电路结构——为IC设计的延时估计铺垫_基4布斯算法代码-程序员宅基地

文章浏览阅读1.1k次,点赞2次,收藏12次。常用组合逻辑电路结构——为IC设计的延时估计铺垫学习目的:估计模块间的delay,确保写的代码的timing 综合能给到多少HZ,以满足需求!_基4布斯算法代码

OpenAI Manager助手(基于SpringBoot和Vue)_chatgpt网页版-程序员宅基地

文章浏览阅读3.3k次,点赞3次,收藏5次。OpenAI Manager助手(基于SpringBoot和Vue)_chatgpt网页版

关于美国计算机奥赛USACO,你想知道的都在这_usaco可以多次提交吗-程序员宅基地

文章浏览阅读2.2k次。USACO自1992年举办,到目前为止已经举办了27届,目的是为了帮助美国信息学国家队选拔IOI的队员,目前逐渐发展为全球热门的线上赛事,成为美国大学申请条件下,含金量相当高的官方竞赛。USACO的比赛成绩可以助力计算机专业留学,越来越多的学生进入了康奈尔,麻省理工,普林斯顿,哈佛和耶鲁等大学,这些同学的共同点是他们都参加了美国计算机科学竞赛(USACO),并且取得过非常好的成绩。适合参赛人群USACO适合国内在读学生有意向申请美国大学的或者想锻炼自己编程能力的同学,高三学生也可以参加12月的第_usaco可以多次提交吗

MySQL存储过程和自定义函数_mysql自定义函数和存储过程-程序员宅基地

文章浏览阅读394次。1.1 存储程序1.2 创建存储过程1.3 创建自定义函数1.3.1 示例1.4 自定义函数和存储过程的区别1.5 变量的使用1.6 定义条件和处理程序1.6.1 定义条件1.6.1.1 示例1.6.2 定义处理程序1.6.2.1 示例1.7 光标的使用1.7.1 声明光标1.7.2 打开光标1.7.3 使用光标1.7.4 关闭光标1.8 流程控制的使用1.8.1 IF语句1.8.2 CASE语句1.8.3 LOOP语句1.8.4 LEAVE语句1.8.5 ITERATE语句1.8.6 REPEAT语句。_mysql自定义函数和存储过程

半导体基础知识与PN结_本征半导体电流为0-程序员宅基地

文章浏览阅读188次。半导体二极管——集成电路最小组成单元。_本征半导体电流为0

随便推点

【Unity3d Shader】水面和岩浆效果_unity 岩浆shader-程序员宅基地

文章浏览阅读2.8k次,点赞3次,收藏18次。游戏水面特效实现方式太多。咱们这边介绍的是一最简单的UV动画(无顶点位移),整个mesh由4个顶点构成。实现了水面效果(左图),不动代码稍微修改下参数和贴图可以实现岩浆效果(右图)。有要思路是1,uv按时间去做正弦波移动2,在1的基础上加个凹凸图混合uv3,在1、2的基础上加个水流方向4,加上对雾效的支持,如没必要请自行删除雾效代码(把包含fog的几行代码删除)S..._unity 岩浆shader

广义线性模型——Logistic回归模型(1)_广义线性回归模型-程序员宅基地

文章浏览阅读5k次。广义线性模型是线性模型的扩展,它通过连接函数建立响应变量的数学期望值与线性组合的预测变量之间的关系。广义线性模型拟合的形式为:其中g(μY)是条件均值的函数(称为连接函数)。另外,你可放松Y为正态分布的假设,改为Y 服从指数分布族中的一种分布即可。设定好连接函数和概率分布后,便可以通过最大似然估计的多次迭代推导出各参数值。在大部分情况下,线性模型就可以通过一系列连续型或类别型预测变量来预测正态分布的响应变量的工作。但是,有时候我们要进行非正态因变量的分析,例如:(1)类别型.._广义线性回归模型

HTML+CSS大作业 环境网页设计与实现(垃圾分类) web前端开发技术 web课程设计 网页规划与设计_垃圾分类网页设计目标怎么写-程序员宅基地

文章浏览阅读69次。环境保护、 保护地球、 校园环保、垃圾分类、绿色家园、等网站的设计与制作。 总结了一些学生网页制作的经验:一般的网页需要融入以下知识点:div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点,网页的风格主题也很全面:如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题,学生、新手可参考下方页面的布局和设计和HTML源码(有用点赞△) 一套A+的网_垃圾分类网页设计目标怎么写

C# .Net 发布后,把dll全部放在一个文件夹中,让软件目录更整洁_.net dll 全局目录-程序员宅基地

文章浏览阅读614次,点赞7次,收藏11次。之前找到一个修改 exe 中 DLL地址 的方法, 不太好使,虽然能正确启动, 但无法改变 exe 的工作目录,这就影响了.Net 中很多获取 exe 执行目录来拼接的地址 ( 相对路径 ),比如 wwwroot 和 代码中相对目录还有一些复制到目录的普通文件 等等,它们的地址都会指向原来 exe 的目录, 而不是自定义的 “lib” 目录,根本原因就是没有修改 exe 的工作目录这次来搞一个启动程序,把 .net 的所有东西都放在一个文件夹,在文件夹同级的目录制作一个 exe._.net dll 全局目录

BRIEF特征点描述算法_breif description calculation 特征点-程序员宅基地

文章浏览阅读1.5k次。本文为转载,原博客地址:http://blog.csdn.net/hujingshuang/article/details/46910259简介 BRIEF是2010年的一篇名为《BRIEF:Binary Robust Independent Elementary Features》的文章中提出,BRIEF是对已检测到的特征点进行描述,它是一种二进制编码的描述子,摈弃了利用区域灰度..._breif description calculation 特征点

房屋租赁管理系统的设计和实现,SpringBoot计算机毕业设计论文_基于spring boot的房屋租赁系统论文-程序员宅基地

文章浏览阅读4.1k次,点赞21次,收藏79次。本文是《基于SpringBoot的房屋租赁管理系统》的配套原创说明文档,可以给应届毕业生提供格式撰写参考,也可以给开发类似系统的朋友们提供功能业务设计思路。_基于spring boot的房屋租赁系统论文