山河博客Code-2

JQ伪类选择器笔记(补充)

大家好我是山河,今天我又开始总结笔记了。

常用的伪类选择器有六种。

“位置”伪类选择器。

“子元素”伪类选择器。

“可见性”伪类选择器。

“内容”伪类选择器。

“表单”伪类选择器。

“表单属性”伪类选择器。

在jQuery中,只有:nth-child()、:nth-of-type()这两个选择器的下标是从1开始的,其他所有的选择器和jQuery方法都是从0开始的。(重点)

笔记源于 《从0到1:jQuery快速上手》此书,推荐各位看,建议有基础者学习,能帮助补充大量jq的知识,评价中等,

山河博客Code

小案例解释Javascript栈内存

大家好我是山河,今天我将写一个小案例解释Javascript栈内存,例子很简单,而且容易理解,话不多说,直接上代码解释。

<script>
	var a = 1, b = a;
	a++;
	console.log(a);
	console.log(b);
</script>

输出结果

这个例子详解

我们声明了变量 a 定义值为1,

变量b = a

然后 a 进行递增

保存运行,查看控制台

a因为递增+1,控制台输出了2

而b还是原来的1

这是为什么?

山河告诉你们答案:

JS的变量都是保存在栈内存中,值与值都是独立存在,修改一个变量不会影响其他的变量

看懂了没?是不是很简单呢,下次山河给大家再把堆内存的例子做出来给大家。

下期再见,我是山河。

山河博客PC

JQuery选择器笔记

大家好,我是山河,最近有在学Javascript,感觉学得差不多了,就去学习JQuery,毕竟咱们自学的基础打好了之后主要是实战,最近也实战撸了原生js的几个小项目,但是感觉有点费力耗时间,然后就选择了JQuery。

本文是JQuery的笔记,接下来几天都会陆陆续续的从本地笔记转移进博客文章,作为云端记录,随时查看。

PS:我是黑马pink老师学的,笔记截图均是来自哔哩哔哩上的黑马Pink老师的视频。

另外附上JQuery在线手册 jquery 在线手册 | jQuery API 中文手册 | jQuery 速查表 | jQuery 参考手册 | jQuery CHM | jQuery 在线文档 | jQuery 1.12.1 (hemin.cn)

本文到此结束。

pink老师视频

https://www.bilibili.com/video/BV1Sy4y1C7ha

前端 CDN 公共库大全一览

大家好我是山河,今天给大家总结一个前端CDN公共库大全哈,帮助各位开发者快速找到适合你的最佳选择。

CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用。

https://www.jsdelivr.com/

使用最为广泛的CDN了,除了有静态库的加速外,还有npm\github\WordPress加速,2021年底国内备案被取消了,现在用cf的cdn,国内速度可想而知。

https://developers.google.com/speed/libraries

Google出品,必属精品了,谷歌CDN库,肯定很全,当然国内访问不了。

https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview

微软CDN库,该服务是免费的,不需任何注册,可用于商业性或非商业性用途

https://cdnjs.com/

站点是国外的,CDNJS 拥有非常完整的 JavaScript 库,你还可以提交 js库,审核通过就能用。

lib.sinaapp.com

新浪云计算CDN公共库,节点有北京和广州,国内速度飞快

http://jscdn.upai.com/

又拍云js库,又拍云提供了常用的JavaScript库CDN服务

http://staticfile.org/

七牛云提供的CDN库。

http://cdn.bytedance.com/

字节跳动静态资源公共库,国内大公司。

https://www.bootcdn.net

BootCDN 是猫云联合 Bootstrap 中文网 共同支持并维护的前端开源项目免费 CDN 服务,为Bootstrap、jQuery、React、Vue.js 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务,国内节点多。

PS:(官网通知)BootCDN 对外提供服务的域名已经于两年前(即 2020 年)变更为新域名 cdn.bootcdn.net,
老域名 cdn.bootcss.com 将于 2022 年 3 月 31 日下线。
请尽快切换到新域名,以免影响贵站功能!!!

https://cdnjs.net/

免费开源前端公共库,同步的cdnjs的资源,此公共库CDN加速服务始于2014年

https://cdn.baomitu.com/

60前端资源库是由奇舞团支持并的开源项目CDN,支持HTTPS和HTTP/2,囊括上千个前端资源库维护和Google均等库。同步cdnjs的资源。

本篇文章是由山河整理的前端CDN库大全。

本站采用创作共用版权 CC BY-NC-SA 3.0 CN 许可协议,转载或复制请注明出处

山河博客-404错误页图片

分享一个自定义好看的二次元风格的404错误页HTML5单页

大家好我是山河,今天我给大家分享一个二次元风格的404错误页。

山河好不容易修复了那位网友发给我的404错误页,结果刚把文章发出去没半天,又给我找事情做了,这次发了一个二次元风格的404错误页,山河修复了一些没用的代码,还剩下一小段CSS代码没修复,那段是动画的,我试了一下,能正常运行,我也就不管了,但是山河的代码编辑器居然显示警告⚠,浏览器里打开f12一看,没毛病报错,那就不管了。

不说了,先上个效果图片给大家看看长啥样

对了,这款404错误页是有音乐的,但是山河没法录制给大家听。

山河博客-二次元404错误页
山河博客-二次元404错误页

页面是有动态效果的,头像触碰会旋转,文字会跳动,就像这样

山河博客-二次元404错误页
山河博客-二次元404错误页

好了,介绍就到这里,文章结束

PS:本页面为网友分享给山河,山河仅做了修复,页面如有联系信息则为原作者,另外,如有侵犯您的权益,请联系山河删除。

分享一个自定义好看的404错误页HTML5单页

分享一个自定义好看的404错误页HTML5单页

大家好我是山河,今天山河啊来分享一个好看的404错误页。

大家在开发网站的时候,是不是为了404错误页而烦恼呢?有许多网友叫山河折腾几个好看的404错误页出来,山河最近有时间折腾了,就在抓紧时间做页面,正写着呢,就有朋友发了一个404错误页给我,让我修复,山河修复好了,分享给大家,先给大家上效果图。

404错误页-山河博客
404错误页-山河博客

页面不是禁止的噢,页面有动画效果,只是山河没空做gif图

好了,这次就讲到这里,下班!

PS:本页面为网友分享给山河,山河仅做了修复,页面如有联系信息则为原作者,另外,如有侵犯您的权益,请联系山河删除。

blog.shanhe.info_mouse_code

Javascript | Js实现网站中隐藏鼠标改为自定义图片

大家好我是山河,今天给大家带来Javascript | Js实现网站中隐藏鼠标改为自定义图片,

有很多网友想把网页上的浏览鼠标换成自己喜欢的图片显示,今天山河就来给大家实现这个功能。

代码由 Javascript + html + css 实现 山河把代码注释都标齐全,轻轻松松学会

我换成了这个

shanhe鼠标效果图
鼠标图片

效果图,我录屏拍摄的帧率不高,

shanhe鼠标效果图
shanhe鼠标效果图

是不是鼠标没了换成了这个更好看了呢,最重要的是自定义了,想变啥变啥

话不多说,直接上代码

注释也给大家写好了,一看就明白

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山河教程blog.shanhe.info-网站中隐藏鼠标改为自定义图片</title>
    <style>
        /* 默认外边距内边距为0 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 将图片默认设置为隐藏 */
        .shanhe-website-mouse {
            display: none;
            position: absolute;
            width: 30px;
        }
    </style>
</head>
<body>
    <!-- 页面要有元素撑开 -->
    <div style="height: 100vh;width: 100%;">
        <!-- 替换鼠标的自定义图片 -->
        <img class="shanhe-website-mouse" id="img" src="./MC.png" alt="MC鼠标">
    </div>
    <!-- 山河教程网站原创文章-blog.shanhe.info -->
    <script>
        // 页面加载完成执行函数
        window.addEventListener('load', function(){
            // 获取body
            var body = document.body;
            // 窗口绑定鼠标移动事件
            window.onmousemove = function(m) {
                // 隐藏鼠标
                body.style.cursor = 'none';
                // 鼠标坐标
                var m = m || window.event;
                console.log(m);
                // 获取鼠标横坐标与纵坐标
                var x = m.pageX;
                var y = m.pageY;
                // 设置自定义图片位置(由于本案例是替换鼠标,所以不更改)
                // 获取自定义图片并设置显示再设置位置
                document.getElementById('img').style.display = 'block';
                document.getElementById('img').style.left = x - 29 + 'px';
                document.getElementById('img').style.top = y + 'p
            }
        });
    </script>
</body>
</html>
代码图片

好了,教程结束

本文是山河博客原创文章,转载请注明

下载地址在最下方

swapidc程序模板

山河今天整理东西的时候发现一个当年存的模板文件,现在应该还能用,

这个模板当时很火,当时是网友分享给我的,我保存收藏了一个,大家自己测试吧

不知道还有没有用,不过保存了挺久的,swapidc程序的模板。

下载后仅供学习使用参考,请24h内删除,商用请买正版,如果出现什么问题本站概不负责。

分享几个好网站,网站开发者必备

大家好我是山河,今天我分享几个不错的网站,制作网站,颜色调色板啊,素材啊,LOGO啊必不可少,但是LOGO,素材这些东西都有版权,像我们这些新手小白,哪舍得开始就花费大量金钱财力去购买版权,这就造成了一部分人就离开了这个行业。还有就是颜色调试不舒服,没有灵感。

这里呢,山河给大家分析几个网站。

满满的都是干货哈,话不多说,上网站

  1. Palettes | Flat UI Colors ? 280 handpicked colors ready for COPY & PASTE

这个网站,帮你选好颜色了,点击你喜欢的就会自动复制颜色代码,很舒服,上手难度:傻瓜式操作。

点击你喜欢的就会自动复制颜色代码,很舒服。

2. Dopely Colors – A Free Solution to all your Color Problems

这个网站,可以让你很方便的进行调色和色彩对比,色彩鲜明,上手难度:容易简单。

3. Colordot – A color picker for humans (hailpixel.com)

这个网站,跟2号网站差不多,不过扩展多,上手难度:中等,功能多需要自己研究。

4. Beautiful Free Images & Pictures | Unsplash

这个网站,国外免费图片,全世界的爱好者上传的,基本上所有图片都是免费的,允许商用和非商用!每个图片下面都有是否免费的一句话。如果不相信是否免费,请看图。

License | Unsplash

5. Logo Design – Create Your Own Logo, It’s Free! – Free Logo Design

这个网站是,免费LOGO生成网站,功能超多,自行研究,看这个网站昵称和标题还有他的LOGO名就知道,这是一个免费LOGO网站,功能真的很多!山河本人也一直在用,本网站LOGO是这个网站生成的。

好了,本次分享就到这里了,

最后认识一下:

哔哩哔哩: https://space.bilibili.com/442772630 up主:山河web    UID:442772630

制作一个在页面任意位置的网页小广告图

大家好我是山河,今天我带给大家一个HTML5+CSS3+Javascript的小案例

制作一个网页广告图,其实很简单,网页广告图在各大购物网站,门户网站等都容易见到,有大广告也有小广告。

那些网站一打开就会自动显示广告,但是又给了一个 × 按钮

那么该如何制作呢

话不多说,上代码

<div class="banner">
	<p id="btn" title="点我关闭广告">×</p>
	<img src="images/banner.png" alt="广告图"/>
	<!--广告图的路径位置-->
</div>

//样式文件我就不写了,你们需要在哪个位置就自己调,如果需要覆盖其他元素上面,用相对定位 position: relative;

// 山河web 

//下面是JS代码

<script>
	//绑定元素
	var btn = document.getElementById('btn');
	var imgs = document.querySelector('.banner');
        //这个banner就是那个div里的类
			
	//点击事件触发匿名函数
	btn.onclick = function(){
	//修改元素的样式为不会显示
	/*
	 * display:none 隐藏元素,不占实际空间。
	 */
	imgs.style.display = 'none';
	}
			
</script>

看了代码之后是不是觉得很简单?

确实如此,简单的代码达到最极致的效果。

最后认识一下:

哔哩哔哩: https://space.bilibili.com/442772630 up主:山河web    UID:442772630