无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-07-10 23:52 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

常用原生JS兼容性写法汇总

本文分为两部分进行讲解,具体内容如下

就来总结一下简单的东西

AngularJS 是一个 MV* 框架,最适于开发客户端的单页面应用。它不是个功能库,而是用来开发动态网页的框架。它专注于扩展 HTML 的功能,提供动态数据绑定(data binding),而且它能跟其它框架(如 JQuery 等)合作融洽。

第一部分:原生js实现addClass,removeClass,hasClass方法

备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了。。。

<body ng-app="myNoteApp">
<html>
<div ng-controller="myNoteCtrl"> 
<p><textarea ng-model="message" cols="40" rows="10" maxlength="100"></textarea></p>
<p>100/</p>
</div>
</html>
<script type="text/javascript">
var app=angular.module("myNoteApp",[]);
app.controller("myNoteCtrl",function($scope){
$scope.message = "";
//显示变更数量
$scope.left = function() {return 100 - $scope.message.length;};
//清除文本框
$scope.clear = function() {$scope.message = "";};
//执行保存操作
$scope.save = function() {alert("Note Saved");};
});
</script>
</body>
function hasClass(elem, cls) {
  cls = cls || '';
  if (cls.replace(/s/g, '').length == 0) return false; //当cls没有参数时,返回false
  return new RegExp(' '   cls   ' ').test(' '   elem.className   ' ');
}

function addClass(ele, cls) {
  if (!hasClass(elem, cls)) {
    ele.className = ele.className == '' ? cls : ele.className   ' '   cls;
  }
}

function removeClass(ele, cls) {
  if (hasClass(elem, cls)) {
    var newClass = ' '   elem.className.replace(/[trn]/g, '')   ' ';
    while (newClass.indexOf(' '   cls   ' ') >= 0) {
      newClass = newClass.replace(' '   cls   ' ', ' ');
    }
    elem.className = newClass.replace(/^s |s $/g, '');
  }
}

①添加事件方法

备注:

第二部分:使用原生JS实现jQuery的addClass, removeClass, hasClass函数功能

addHandler:function(element,type,handler){
 if(element.addEventListener){//检测是否为DOM2级方法
  element.addEventListener(type, handler, false);
 }else if (element.attachEvent){//检测是否为IE级方法
  element.attachEvent("on"   type, handler);
 } else {//检测是否为DOM0级方法
  element["on"   type] = handler;
 }
}

如果在同一个表单中有多个“textarea”可以通过定义多个“ng-model”来控制

function addClass(obj, cls){
  var obj_class = obj.className,//获取 class 内容.
  blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
  added = obj_class   blank   cls;//组合原来的 class 和需要添加的 class.
  obj.className = added;//替换原来的 class.
}

function removeClass(obj, cls){
  var obj_class = ' ' obj.className ' ';//获取 class 内容, 并在首尾各加一个空格. ex) 'abc    bcd' -> ' abc    bcd '
  obj_class = obj_class.replace(/(s )/gi, ' '),//将多余的空字符替换成一个空格. ex) ' abc    bcd ' -> ' abc bcd '
  removed = obj_class.replace(' ' cls ' ', ' ');//在原来的 class 替换掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd '
  removed = removed.replace(/(^s )|(s $)/g, '');//去掉首尾空格. ex) 'bcd ' -> 'bcd'
  obj.className = removed;//替换原来的 class.
}

function hasClass(obj, cls){
  var obj_class = obj.className,//获取 class 内容.
  obj_class_lst = obj_class.split(/s /);//通过split空字符将cls转换成数组.
  x = 0;
  for(x in obj_class_lst) {
    if(obj_class_lst[x] == cls) {//循环数组, 判断是否包含cls
      return true;
    }
  }
  return false;
}

②移除之前添加的事件方法

如果在不同的表单中操作不同的”textarea“ ,可以通过定义多个“ng-controller”来控制

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

removeHandler:function(element, type, handler){
  if (element.removeEventListener){
   element.removeEventListener(type, handler, false);
  } else if (element.detachEvent){
   element.detachEvent("on"   type, handler);
  } else {
   element["on"   type] = null;
  }
 }

但不管何种情况,如果在同一个文件中,同一个body中最好只使用一个”ng-app“

您可能感兴趣的文章:

  • js中设置元素class的三种方法小结
  • 用原生JS获取CLASS对象(很简单实用)
  • js获取class的所有元素
  • JavaScript更改class和id的方法
  • js实现class样式的修改、添加及删除的方法
  • js获取某元素的class里面的css属性值代码
  • js判断样式className同时增加class或删除class
  • javaScript给元素添加多个class的简单实现
  • vue.js入门教程之绑定class和style样式
  • 深入理解JavaScript和TypeScript中的class

③获取事件及事件对象目标

补充:Angular JS 中的 <textarea>用法

//获取事件对象的兼容性写法
 getEvent: function(event){
  return event ? event : window.event;
 },
 //获取事件对象目标的兼容性写法
 getTarget: function(event){
  return event.target || event.srcElement;
 }

最近测试用把 textarea 中的值传往后台传,不过后台收不到,代码是这样写的:

④阻止浏览器默认事件的兼容性写法

<textarea rows="15" ng-model="notice.content" style="width:65%">{{ notice.content }}</textarea> 
preventDefault: function(event){
  if (event.preventDefault){
   event.preventDefault();
  } else {
   event.returnValue = false;
  }
 }

后来修改了一下,把两个 textarea 之间的内容去掉了,后台就能收到了,看来Angular JS中还是有一些机制需要去弄清楚。

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:常用原生JS兼容性写法汇总

关键词: