HTML+CSS+JS日常问题和技巧1(删除某select下除第一个以外的option、双击删除本身、select的change()方法失效问题、实现div高度随背景图片的大小进行改变、实现禁止右键和...-CSDN博客

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>