HTML+CSS+JS日常问题和技巧1(删除某select下除第一个以外的option、双击删除本身、select的change()方法失效问题、实现div高度随背景图片的大小进行改变、实现禁止右键和键盘按键，以打开控制台为例)
1.删除某select下除第一个以外的option：
1 $("#selectId option:not(:first)").remove()
2.JS实现双击事件（双击删除本身）
1 function removeThis(obj){
2 var rangeId = obj.id;
3 debugger
4 $("#"+rangeId).each(function(index){
5 $(this).dblclick(function(){
6 $("#"+rangeId).remove();
7 });
8
9 });
10
11 }
3.select的change()方法失效问题
先上个简单代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>例子</title>
6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
7 </script>
8 <script>
9 $("#selectId").change(function(){
10 alert($('#selectId option:selected').val());
11 });
12 </script>
13 </head>
14 <body>
15 <select id="selectId" name="example">
16 <option value="option1">option1</option>
17 <option value="option2">option2</option>
18 <option value="option3">option3</option>
19 <option value="option4">option4</option>
20 </select>
21 </body>
22 </html>
这是错误的代码，所以无效，应该调用ready()：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>例子</title>
6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
7 </script>
8 <script>
9 $(document).ready(function(){
10
11 $("#selectId").change(function(){
12 alert($('#selectId option:selected').val());
13 });
14
15 });
16 </script>
17 </head>
18 <body>
19 <select id="selectId" name="example">
20 <option value="option1">option1</option>
21 <option value="option2">option2</option>
22 <option value="option3">option3</option>
23 <option value="option4">option4</option>
24 </select>
25 </body>
26 </html>
4.js实现div高度随背景图片的大小进行改变
主要是tongguojs来进行获取和设置，代码案例如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <style>
4 body {
5 background: black;
6 }
7
8 .divClass {
9 width: 1000px;
10 height: 1000px;
11 margin: 0 auto;
12 background-image: url('https://kanjiantu.com/images/2019/06/16/-ID_5942171e4cc697c94698b.md.jpg');
13 background-repeat: no-repeat;
14
15 }
16 </style>
17 <head>
18 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
19 <script>
20 $(document).ready(function () {
21
22 var image_url = $('#divId').css('background-image'),
23 image;
24 image_url = image_url.match(/^url\("?(.+?)"?\)$/);
25
26 if (image_url[1]) {
27 image_url = image_url[1];
28 image = new Image();
29 // just in case it is not already loaded
30 $(image).load(function () {
31 var bgHeight = image.height;
32 var bgWidth = image.width;
33 var divWidth = $('#divId').width();
34 var divHeight = (divWidth*bgHeight)/bgWidth;
35 $('#divId').height(divHeight+"px");
36 });
37 image.src = image_url;
38 }
39
40 });
41 </script>
42 </head>
43 <body>
44 <div id="divId" class="divClass">
45 </div>
46 </body>
47 </html>
5.实现禁止右键和键盘打开控制台
1 <script type='text/javascript'>
2 //禁用右键
3 window.οncοntextmenu=function(){return false;}
4 //禁止任何键盘敲击事件
5 window.onkeydown = window.onkeyup = window.onkeypress = function () {
6 window.event.returnValue = false;
7 return false;
8 }
9 </script>
HTML+CSS+JS日常问题和技巧1(删除某select下除第一个以外的option、双击删除本身、select的change()方法失效问题、实现div高度随背景图片的大小进行改变、实现禁止右键和键盘按键，以打开控制台为例)的更多相关文章
- css3-11 如何改变背景图片的大小和位置
css3-11 如何改变背景图片的大小和位置 一.总结 一句话总结:css3相对css2本身就支持改变背景图片的大小和位置. 1.怎么设置背景不填充padding部分? background-orig ...
- background-size 设置背景图片的大小
background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: background-size: auto | <长度值 ...
- background-size （设置背景图片的大小）
设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...
- CSS3设置背景图片的大小
设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. background-size 语法详解: 要在插入图片之后进行设置背景图片的大小 backgroun ...
- 在div 底部显示背景图片
下面代码实现div层背景图片在底部显示: div { background : url (/images/bg.jpg) no-repeat fixed ; background-position-y ...
- iOS开发 改变UINavigationController的UINavigationBar的高度和背景图片
1.改变高度 自定义UINavigationBar的新类别: //UINavigationBar+BackgoundImage.h #import <Foundation/Foundation. ...
- 使用padding代替高度实现背景图片高度按比例自适应
本篇文章由:http://xinpure.com/use-padding-instead-of-highly-adaptive-background-image-height-proportionat ...
- react给一个div行内加背景图片并实现cover覆盖模式居中显示
具体background简写可以参考这篇文章. 这里注意,如果简写里要写background-size,则这里必须写 / ,否则整个背景图片样式没有解析出来. 它和font以及border-radi ...
- pygame “音乐盒”---- 播放一首歌& 点击对话框后背景以及对话框大小改变
有时,你用pygame写的游戏也许需要播放一些背景音乐,该怎么做呢,直接上代码: 下面的代码,有关于: 1>设置对话框图标.大小.标题 2>播放音乐 3>设置背景图片,以及获取背景图 ...
- 如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕（自适应大小）
默认情况下,通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后,图片会自动横向和纵向平铺.这就会产生一些美观上的问题. ...
随机推荐
- 使用克魔助手查看iOS 应用程序使用历史记录和耗能历史记录
使用克魔助手查看iOS 应用程序使用历史记录和耗能历史记录 功能概述 克魔助手无需越狱即可访问iOS上各个应用程序的历史记录,包括: 最近几个月的app的详细启动时间记录,结束时间,app使用的硬件组 ...
- 什么是 Java 的 AOT（Ahead-Of-Time）？
Java 的 AOT(Ahead-Of-Time) 1. 定义 AOT(Ahead-Of-Time)编译是与 JIT(Just-In-Time)相对的一种编译方式. 在 AOT 模式下,Java 字节 ...
- C# 线程（一）——基础概念（线程与进程、前后台线程）
一.基础概念 1.1线程与进程 线程--是一个可执行路径,它可以独立于其他线程执行. 进程--每个线程都在操作系统的进程(Process)内执行,而操作系统则提供了程序运行的独立环境,它提供了一个应用 ...
- python初学之random()模块
##python小脚本 random()是不能直接访问的,需要导入 random 模块,然后通过 random 静态对象调用该方法. random.random()用于生成 一个指定范围内的随机符点数 ...
- P1514 [NOIP 2010 提高组] 引水入城 题解
题意:P1514 [NOIP 2010 提高组] 引水入城有点复杂,自己看吧. 思路 这里提供一个好像没见过的纯 DP 做法,不需要神秘的证明以及任何脑子,直接顺着思路做即可. 首先判断正确性就是从第 ...
- RPC实战与核心原理之动态代理了
动态代理 回顾 用来解决两个应用之间的通信,而网络则是两台l两台机器之间的"桥梁",只有搭好桥梁才能把请求数据从一端传输到另一端,其中关键就是"可靠的传输" 背 ...
- AI模型的回调能力的理解和实现
前言 BigTall最近把RAG和Agent的原理想通了,对于"一切都是提示词"的理解又更多了一些.本文把我的理解大致整理了一下,给出BigTall自己的一个实验.希望能够对大家有 ...
- 读书笔记：深度工作（deep work）
读书笔记:深度工作(deep work) 目录 读书笔记:深度工作(deep work) 第一部分:The Idea 第二部分:The Rules 准则一:工作要深入 准则二:拥抱无聊 准则三:远离社 ...
- 代码随想录第三天 | 链表part01
链表理论基础 建议:了解一下链表基础,以及链表和数组的区别 文章链接:https://programmercarl.com/链表理论基础.html 不是很了解链表和数组区别的可以先看看以上的文章. 2 ...
- windows系统部署minio
下载 在官网下载exe https://dl.min.io/server/minio/release/windows-amd64/ 创建文件夹 把minio.exe放到一个文件夹里,然后同目录里再新建 ...