HTML+CSS+JS平常問題和技巧1(刪除某select下除第一個之外的option、雙擊刪除自己、select的change()方法失效問題、實現div高度隨背景圖片的大小進行改變、實現禁止右鍵和

時間 2019-11-19

標籤 html+css+js html css 平常問題技巧刪除 select 第一個之外 option 雙擊自己 change 方法失效實現 div 高度背景圖片大小進行改變禁止右鍵欄目 HTML 简体版

原文原文鏈接

1.刪除某select下除第一個之外的option：javascript

1 $("#selectId option:not(:first)").remove()

2.JS實現雙擊事件（雙擊刪除自己）css

 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()方法失效問題html

先上個簡單代碼java

 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()：jquery

 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高度隨背景圖片的大小進行改變this

主要是tongguojs來進行獲取和設置，代碼案例以下：url

 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.實現禁止右鍵和鍵盤打開控制檯spa

 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>