5个Web开发中的使用技巧

1.使用 html5 的 placeholder 属性

以前我们经常要写不少 JavaScript 的代码来实现现在 HTML5 的 placeholder 属性的功能,一个输入框在没获取焦点时显示某个提示信息,当获得输入焦点就自动清除提示信息,目前支持该属性的浏览器有:Opera 11+, Firefox 9+, Safari 5+, IE 10+,不过下面提供的代码对于不支持 placeholder 的浏览器也适用:

javascript 复制代码
  // jQuery code
  var i = document.createElement("input");
   
  // Only bind if placeholder isn't natively supported by the browser
  if (!("placeholder" in i)) {
      $("input[placeholder]").each(function () {
          var self = $(this);
          self.val(self.attr("placeholder")).bind({
              focus: function () {
                  if (self.val() === self.attr("placeholder")) {
                      self.val("");
                  }
              },
              blur: function () {
                  var label = self.attr("placeholder");
                  if (label && self.val() === "") {
                      self.val(label);
                  }
              }
          });
      });
  }
   
  <!-- html5 -->
  <input type="text" name="search" placeholder="Search" value="">
  

2.扩展 jQuery 选择器的功能

scss 复制代码
  jQuery.expr[':'].regex = function(elem, index, match) {
      var matchParams = match[3].split(','),
          validLabels = /^(data|css):/,
          attr = {
              method: matchParams[0].match(validLabels) ?
                          matchParams[0].split(':')[0] : 'attr',
              property: matchParams.shift().replace(validLabels,'')
          },
          regexFlags = 'ig',
          regex = new RegExp(matchParams.join('').replace(/^s+|s+$/g,''), regexFlags);
      return regex.test(jQuery(elem)[attr.method](attr.property));
  }
   
  /******** Usage ********/
   
  // Select all elements with an ID starting a vowel:
  $(':regex(id,^[aeiou])');
    
  // Select all DIVs with classes that contain numbers:
  $('div:regex(class,[0-9])');
    
  // Select all SCRIPT tags with a SRC containing jQuery:
  $('script:regex(src,jQuery)');

3.禁用 Textarea 的大小改变

有些时候你不需要用户可以改变多行文本输入口 textarea 的大小,可是一些基于 Webkit 的浏览器(例如 safari 和 chrome)就可以让用户随意更改 textarea 大小,好在你可以禁用这个特性:

css 复制代码
  textarea {
      resize: none
  }

4.使用 font face

你可以通过 font face 来使用一些更好的独特的字体,支持多数浏览器:Opera 11+, Firefox 3+, Safari 5, IE6+

css 复制代码
  @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.eot'); /* IE9 Compat Modes */
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('webfont.woff') format('woff'), /* Modern Browsers */
           url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
      }
       
  body {
         font-family: 'MyWebFont', Fallback, sans-serif;
  }   

5.编写一个简单的 jQuery 插件(模板)

javascript 复制代码
  //You need an anonymous function to wrap around your function to avoid conflict
  (function($){
    
      //Attach this new method to jQuery
      $.fn.extend({
            
          //This is where you write your plugin's name
          pluginname: function() {
    
              //options
              var defaults = {
                  option1: "default_value"
              }
               
              var options = $.extend(defaults, options);
    
              //a public method
              this.methodName: function () {
                  //call this method via $.pluginname().methodName();
              }
    
              //Iterate over the current set of matched elements
              return this.each(function() {
                
                  var o = options;
                
                  //code to be inserted here
                
              });
          }
      });
        
  //pass jQuery to the function,
  //So that we will able to use any valid Javascript variable name
  //to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )      
  })(jQuery);
相关推荐
吃饭睡觉打豆豆嘛1 小时前
彻底搞懂前端路由:从 Hash 到 History 的演进与实践
前端·javascript
lbh2 小时前
简单文本编辑器:基于原生JavaScript的智能文本选择工具栏
前端·javascript
典学长编程2 小时前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第三天(JavaScript)
前端·javascript·css·html·前端开发
Jimmy4 小时前
TypeScript 泛型:2025 年终极指南
前端·javascript·typescript
Spider_Man5 小时前
栈中藏玄机:从温度到雨水,单调栈的逆袭之路
javascript·算法·leetcode
jstart千语5 小时前
【vue】创建响应式数据ref和reactive的区别
前端·javascript·vue.js
BUG收容所所长5 小时前
Zustand状态管理如何驱动低代码平台的数据流?
前端·javascript·设计
BUG收容所所长5 小时前
React递归渲染与react-dnd——低代码平台的组件拖拽与动态渲染实践
前端·javascript·设计
小妖6666 小时前
Next.js 怎么使用 Chakra UI
前端·javascript·ui
胡西风_foxww6 小时前
从数据丢失到动画流畅:React状态同步与远程数据加载全解析
前端·javascript·react.js·同步·异步·数据·状态