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"> 后,图片会自动横向和纵向平铺.这就会产生一些美观上的问题. ...
随机推荐
- 学习Kotlin语法（二）
简介 经过上一章节,我们对Kotlin基础语法有了大致的了解,了解了什么是基本类型.集合.控制流程.函数.类.空安全,接下来我们将更近一步的去了解Kotlin的相关知识,本章节将详细的学习Kotlin ...
- Linux部署调度工具xxl-job
背景: Pentaho Data Integration(kettle)作为用户规模最多的开源ETL工具,强大简洁的功能深受广大ETL从业者的欢迎.但kettle本身的调度监控功能却非常弱.Penta ...
- 一、Java语言介绍
1.硬件知识介绍 2.常用dos命令以及快捷键 1 /** 2 *@desc: 复习 3 *@Description: 4 * dir:列出当前文件目录下的所有文件; 5 * md:创建一个新目录; ...
- C# 线程基础——用户模式、内核模式
C# 线程基础--用户模式.内核模式 参照:用户模式和内核模式 - Windows drivers | Microsoft Docs 基础概念 运行 Windows 的计算机中的处理器有两个不同模式: ...
- ctf.show刷题记录_web(1-10)
ctf平台(ctfshow) `https://ctf.show/ 1.签到 解题:base64解码 ctfshow{0da357d0-359b-47e1-80dc-5c02212725e5} 2.w ...
- MaxKB中如何选择向量模型？
MaxKB内置的向量模型不足? 在MaxKB中知识文档Emdeding是很重要的一环,而这个过程就必须依赖向量模型.目前MaxKB内置的向量模型为text2vec-base-Chinese,一个针对中 ...
- 小模型工具调用能力激活：以Qwen2.5 0.5B为例的Prompt工程实践
在之前的分析中,我们深入探讨了cline prompt的设计理念(Cline技术分析:prompt如何驱动大模型对本地文件实现自主变更),揭示了其在激发语言模型能力方面的潜力.现在,我们将这些理论付诸 ...
- 堆叠、MLAG、VPC、VSS 技术对比及架构建议
堆叠.MLAG.VPC.VSS 技术对比及架构建议 1. 堆叠(Stacking) 技术实现: 多台物理设备通过专用堆叠线缆(如华为的Stack.华三IRF.思科StackWise)或普通光纤/以太网 ...
- Flutter对于移动端软件跨平台后台保活的技术浅析
@charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 18px; o ...
- 晴神宝典之C /C++快速入门
OJ 补充:runtime error通常原因是数组越界,除零,异常调用,堆栈溢出 尽可能远离TLE 选择c++ 输入输出使用printf和scanf basis 变量名取名: (1)不能是c语言标识 ...