jquery4
1.單雙擊沖突解決
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><button>按鈕</button><script src="jquery.js"></script><script>$(function () {var tim = null;$("button").click(function (event) {clearTimeout(tim);tim = setTimeout(function () {console.log("單擊")},300);});$("button").dblclick(function (event) {clearTimeout(tim);console.log("雙擊")})})</script> </body> </html> View Code2.jQueryUI
<!doctype html> <html lang="en"> <head><meta charset="utf-8"><title>jQuery UI 排序（Sortable） - 默認功能</title><link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"><script src="//code.jquery.com/jquery-1.9.1.js"></script><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script><link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"><style>#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }#sortable li span { position: absolute; margin-left: -1.3em; }</style><script>$(function() {$( "#sortable" ).sortable();$( "#sortable" ).disableSelection();});</script> </head> <body><ul id="sortable"><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> </ul></body> </html> View Code3.animate
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"><style>#box{width: 200px;height: 200px;line-height: 200px;text-align: center;background: green;color: #fff;position: absolute;top: 2000px;}</style> </head> <body><div id="box" class="animated bounceInDown">qing</div><script src="jquery.js"></script><!--<h2 class="animated fadeOutRight">qing</h2>--><script>$(function () {$(document).scroll(function () {var scrollTopHeight = $(this).scrollTop();if (scrollTopHeight >= 1000){$("#box").addClass("animated slideInDown")}})})</script> </body> </html> View Code4.移動端響應式@media
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>@media screen and (min-width: 1200px){body{background-color: red;}}@media screen and (min-width: 800px) and (max-width: 1200px){body{background-color: green;}}@media screen and (max-width: 800px){body{background-color:yellow;}}</style> </head> <body></body> </html> View Code5.單位介紹
1rem=html中的文字大小
/*獲得頁面寬度后動態修改html上的fontsize * 320為iphone5設計稿下的頁面寬度，如下設置后頁面的頁面在iphone5等寬屏幕上html * 的font-size會變為100px，即 1rem = 100px 1px=0.01rem * 所以設置元素尺寸的時候，如果測量設計稿 15px 則需設置尺寸為 (0.01*15)rem = 0.15rem */!(function(doc, win) {var docEle = doc.documentElement,evt = "onorientationchange" in window ? "orientationchange" : "resize",fn = function() {var width = docEle.clientWidth;console.log(width)width && (docEle.style.fontSize = 100 * (width / 375) + "px");};win.addEventListener(evt, fn, false);doc.addEventListener("DOMContentLoaded", fn, false);}(document, window)); View Code6.三元運算
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>var a = 1 > 1 ? "真的":"假的";console.log(a);</script> </body> </html> View Code?7.bootstrap簡單了解
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 --><!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--></head><body><h1>你好，世界！</h1><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script></body> </html> View Code8.bootstrap全局的樣式柵格
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 --><!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--></head><body><div class="container"><div class="row"><div class="col-lg-3 col-md-4 col-sm-6">Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin 用于生成更具語義的布局。</div><div class="col-lg-3 col-md-4 col-sm-6">Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin 用于生成更具語義的布局。</div><div class="col-lg-3 col-md-4 col-sm-6">Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin 用于生成更具語義的布局。</div><div class="col-lg-3 col-md-4 col-sm-6">Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin 用于生成更具語義的布局。</div></div><div class="row"><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div> </div> <div class="row"><div class="col-md-8">.col-md-8</div><div class="col-md-4">.col-md-4</div> </div> <div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div> </div> <div class="row"><div class="col-md-6">.col-md-6</div><div class="col-md-6">.col-md-6</div> </div></div><!--<h1>你好，世界！</h1>--><!--<!– jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) –>--><!--<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>--><!--<!– 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 –>--><!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>--></body> </html> View Code?
轉載于:https://www.cnblogs.com/qq849784670/p/9760992.html
總結
- 上一篇： js各种方法继承以及优缺点
- 下一篇： rabbitmq 3.7.0+erlan