onblur:事件会在对象失去焦点时发生
onfocus:是onblur 相反事件 。
onKeyup: 表示键盘每输完一个字符之后触发,就是键盘上的按键被放开时。
onblur:事件会在对象失去焦点时发生
onfocus:是onblur 相反事件 。
onKeyup: 表示键盘每输完一个字符之后触发,就是键盘上的按键被放开时。
函数参数的使用细节,能够提升函数应用的灵活度。
// 设置参数默认值
function sayHi(name="小明", age=18) {
document.write(<p>大家好,我叫${name},我今年${age}岁了。</p>
);
}
// 调用函数
sayHi();
sayHi('小红');
sayHi('小刚', 21);
总结:
// 语法结构:条件表达式? 表达式1:表达式2
// 执行思路:如果条件表达式为真,则返回表达式1的值,如果假,返回2的值
var num = 1;
var result = num < 5 ? '是的' : '不是';//我们知道表达式是有返回值的
console.log(result);
var time = prompt('请输入0—59之间的一个数字')
var result = time < 10 ? '0' + time : time;
alert(result);
<input type="text" id="input-text" value="测试内容">
<button id="clear-btn">清空</button>
document.getElementById('clear-btn').addEventListener('click', function() {
document.getElementById('input-text').value = '';
});
当用户点击清空按钮时,会触发 click 事件,执行代码中的匿名函数。该函数会选中 id 为 input-text 的输入框,并将其 value 属性设置为空。这样,就可以实现点击清空按钮时清空 input 输入框的功能。
//检测指定字符串是否存在
//当检查字符串中是否出现特定的子字符串时,正确的检查方法是测试返回值是否为 - 1:
console.log("Blue Whale".indexOf("Blue") != -1);// true;在 'Blue Whale' 中找到 'Blue'
console.log("Blue Whale".indexOf("Red") != -1);// false;'Blue Whale' 中不存在 'Bloe'
// 下面的例子使用 indexOf() 来定位字符串 "Brave new world" 中的子字符串。
const str = "Brave new world";
console.log(str.indexOf("w")); // 8
console.log(str.indexOf("new")); // 6
// 字符串的索引从零开始:字符串的第一个字符的索引为 0,字符串的最后一个字符的索引为字符串长度减 1。
"Blue Whale".indexOf("Blue"); // 返回 0
"Blue Whale".indexOf("Blute"); // 返回 -1
"Blue Whale".indexOf("Whale", 0); // 返回 5
"Blue Whale".indexOf("Whale", 5); // 返回 5
"Blue Whale".indexOf("Whale", 7); // 返回 -1
"Blue Whale".indexOf(""); // 返回 0
"Blue Whale".indexOf("", 9); // 返回 9
"Blue Whale".indexOf("", 10); // 返回 10
"Blue Whale".indexOf("", 11); // 返回 10
// 使用 indexOf() 统计一个字符串中某个字母出现的次数
const str = "To be, or not to be, that is the question.";
let count = 0;
let position = str.indexOf('e');
// for (i = 1; i <= str.length; i++) {
// if (position != -1) {
// count++;
// position = str.indexOf('e', position + 1)
// }
// }
while (position != -1) {
count++;
position = str.indexOf("e", position + 1)
}
console.log(count);
有做过拖拽项目的前端小伙伴一定有遇到过这几个鼠标事件属性:clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY,WTF!一开始SEO禅看到这么多XY也是一头雾水头大的很,读了MDN的文档还是不是很清楚,后面看了几篇文章,又找到一些图片,终于再也不会把他们混在一起了,在这里记录分享给大家:
clientX/Y:当前鼠标点击位置相对于浏览器窗口左上角的X/Y值,不会随着文档滚动而变化
pageX/Y:当前鼠标点击位置相对于文档左上角的X/Y值,如果DOM文档,也就是页面滚动,这个值会变化
screenX/Y:当前鼠标点击位置相对于屏幕浏览器左上角的X/Y值,不会随着浏览器窗口变化或文档滚动而变化
offsetX/Y:当前鼠标点击位置相对于当前被点击DOM对象节点左上角X/Y值,这里注意是padding内边距的左上角
转自:https://www.seozen.top/javascript-clientx_y-pagex_y-screenx_y-offsetx_y.html
都是鼠标落上去的时候触发的。
onmousemove是javascript里面的,他可以触发js命令,但是hover做不到,hover只是css样式的类,只能定义样式。
比如说鼠标落上去实现一个弹出窗口的操作,就要用onmousemove,用hover的css定义是没办法的。除非在css里面再调用js,那就麻烦了。
hover包括了鼠标移到对象上,同时鼠标再移出对象的过程,相应的子类也被选中。
mouseover是鼠标经过对象时,不包含他的子类同时被选中。
主要区别在于 hover元素的子类上也有添加了事件驱动。而mouseover 只对当前元素添加事件驱动。
且 hover 事件包含mouseover 事件
mousemove(fn);
在每一个匹配元素的mousemove事件中绑定一个处理函数。
hover(over, out);
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(对子类的检测),如果是,则会继续保持“悬停”状态,而不触发移出事件(mouseout)。
public class Puppy{
int puppyAge;
public Puppy(age){
puppyAge = age;
}
public void say() {
System.out.println("汪汪汪");
}
}
var child = document.getElementById("child");// 获取子元素
var parent = document.createElement('parent');// 新建父元素
parent.className = 'parent';
child.parentNode.replaceChild(parent,child);// 获取子元素原来的父元素并将新父元素代替子元素
parent.appendChild(child);// 在新父元素下添加原来的子元素
1 . 跳转链接 在当前窗口打开
window.location.href="http://www.baidu.com"
1
等价于
<a href="baidu.com" target="_self">go baidu</a>
1
2、跳转链接 在新窗口打开
window.open("http://www.baidu.com")
1
等价于
<a href="baidu.com" target="_blank">go baidu</a>
1
3、跳转链接 返回上一页
window.history.back(-1);
1
4、跳转链接
self.location.href="baidu.com"
————————————————
版权声明:本文为CSDN博主「杨林伟」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_20042935/article/details/91040826