浅析jquery与checkbox的checked属性的问题,Directive指令用法

1、页面加载成功后,点击选中或取消选中该checkbox,checkbox属性里的checked属性不会根据该checkbox是否选中而变化

本教程使用AngularJs版本:1.5.3

substr 方法

2、checkbox里的onchange或onclick方法里用jquery的attr方法获取checked是看得到的checked属性的值与它是否给钩上没有关系

AngularJs GitHub:

返回一个从指定位置开始的指定长度的子字符串。
stringvar.substr(start [, length ])
参数
stringvar
必选项。要提取子字符串的字符串文字或 String 对象。
start
必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。
length
可选项。在返回的子字符串中应包括的字符个数。
说明
如果 length 为 0
或负数,将返回一个空字符串。如果没有指定该参数,则子字符串将延续到
stringvar 的最后。

3、使用document.getElementById(“checkbox_id”).checked获取的值与是否钩上一至,即与所见即所得

AngularJs下载地址:

示例 下面的示例演示了substr 方法的用法。

4、使用$(“#checkbox_id”).attr(“checked”)获取的值与<input
type=”checkbox”></input>里的checked情况一至,不是所见即所得

摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive,我们可以封装很多公共指令,比如分页指令、自动补全指令等等。然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。一般情况下,需要用Directive有下面的情景:
1.
使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑。

function SubstrDemo(){  
var s, ss; // 声明变量。  
var s = "The rain in Spain falls mainly in the plain.";  
ss = s.substr(12, 5); // 获取子字符串。  
return(ss); // 返回 "Spain"。 
}  


举例:  
<script type="text/javascript">  
var str = "0123456789";//  
alert(str.substring(0));//------------"0123456789"  
alert(str.substring(5));//------------"56789"  
alert(str.substring(10));//-----------""  
alert(str.substring(12));//-----------""  
alert(str.substring(-5));//-----------"0123456789"  
alert(str.substring(-10));//----------"0123456789"  
alert(str.substring(-12));//----------"0123456789"  
alert(str.substring(0,5));//----------"01234"  
alert(str.substring(0,10));//---------"0123456789"  
alert(str.substring(0,12));//---------"0123456789"  
alert(str.substring(2,0));//----------"01"  
alert(str.substring(2,2));//----------""  
alert(str.substring(2,5));//----------"234"  
alert(str.substring(2,12));//---------"23456789"  
alert(str.substring(2,-2));//---------"01"  
alert(str.substring(-1,5));//---------"01234"  
alert(str.substring(-1,-5));//--------""  
alert(str.substr(0));//---------------"0123456789"  
alert(str.substr(5));//---------------"56789"  
alert(str.substr(10));//--------------""  
alert(str.substr(12));//--------------""  
alert(str.substr(-5));//--------------"0123456789"  
alert(str.substr(-10));//-------------"0123456789"  
alert(str.substr(-12));//-------------"0123456789"  
alert(str.substr(0,5));//-------------"01234"  
alert(str.substr(0,10));//------------"0123456789"  
alert(str.substr(0,12));//------------"0123456789"  
alert(str.substr(2,0));//-------------""  
alert(str.substr(2,2));//-------------"23"  
alert(str.substr(2,5));//-------------"23456"  
alert(str.substr(2,12));//------------"23456789"  
alert(str.substr(2,-2));//------------""  
alert(str.substr(-1,5));//------------"01234"  
alert(str.substr(-1,-5));//-----------""  
</script> 

5、使用$(“#checkbox:checked”)获取的都是被钩上的checkbox

  1. 抽象一个自定义组件,在其他地方进行重用。

substring 方法

6、document.getElementById(“checkbox_id”).checked=true,控件里的checked属性没有显示出来,所做即所见

一、Directive的定义及其使用方法 AngularJs的指令定义大致如下

返回位于 String 对象中指定位置的子字符串。
strVariable.substring(start, end)
“String Literal”.substring(start, end)
参数
start
指明子字符串的起始位置,该索引从 0 开始起算。
end
指明子字符串的结束位置,该索引从 0 开始起算。
说明
substring 方法将返回一个包含从 start 到最后(不包含 end
)的子字符串的字符串。
substring 方法使用 start 和 end
两者中的较小值作为子字符串的起始点。例如, strvar.substring(0, 3) 和
strvar.substring(3, 0) 将返回相同的子字符串。
如果 start 或 end 为 NaN 或者负数,那么将其替换为0。
子字符串的长度等于 start 和 end 之差的绝对值。例如,在
strvar.substring(0, 3) 和 strvar.substring(3, 0)
返回的子字符串的的长度是 3。

7、$(“#checkbox_id”).attr(“checked”,true),控件里的checked属性显示出来,所做即所见,同时代码也会变化

angular.module("app",[]).directive("directiveName",function(){ 
 return{ 
 //通过设置项来定义 
 }; 
}) 

示例 下面的示例演示了 substring 方法的用法。

以上这篇浅析jquery与checkbox的checked属性的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

Directive可以放置于元素名、属性、class、注释中。下面是引用myDir这个directive的等价方式。(但很多directive都限制为“属性”的使用方式)

function SubstringDemo(){  
var ss; // 声明变量。  
var s = "The rain in Spain falls mainly in the plain..";  
ss = s.substring(12, 17); // 取子字符串。  
return(ss); // 返回子字符串"Spain"。 
} 

您可能感兴趣的文章:

  • 浅谈jquery设置和获得checkbox选中的问题
  • 浅谈jQuery中的checkbox问题
  • jquery
    checkbox无法用attr()二次勾选问题的解决方法
  • jquery checkbox
    勾选的bug问题解决方案与分析
  • 解决jquery操作checkbox火狐下第二次无法勾选问题
  • Jquery
    获取checkbox的checked问题
  • jQuery1.9.1针对checkbox的调整方法(prop)
  • JQuery触发radio或checkbox的change事件
  • jQuery判断checkbox是否选中的3种方法
  • jquery判断checkbox(复选框)是否被选中的代码
  • jQuery
    checkbox选中问题之prop与attr注意点分析
directive-name="exp">//属性 

directive-name: exp;">//class 

<directive-name></directive-name>//元素 

<!-- directive: directive-name exp -->//注释 

以上这篇深入理解JS中的substr和substring就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

如下一个实例 :

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<hello-world></hello-world> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 template: '<div>Hi 我是林炳文~~~</div>', 
 replace: true 
 }; 
}); 
</script> 
</html> 

结果:

图片 1

下面是一个directive的详细版

var myModule = angular.module(...); 

myModule.directive('directiveName', function factory(injectables) { 

 var directiveDefinitionObject = { 

   priority: 0, 

   template: '<div></div>', 

   templateUrl: 'directive.html', 

   replace: false, 

   transclude: false, 

   restrict: 'A', 

   scope: false, 

   compile: function compile(tElement, tAttrs, transclude) { 

     return { 

       pre: function preLink(scope, iElement, iAttrs, controller) { ... }, 

       post: function postLink(scope, iElement, iAttrs, controller) { ... } 

    } 

  }, 

   link: function postLink(scope, iElement, iAttrs) { ... } 

}; 

 return directiveDefinitionObject; 

}); 

二、Directive指令内容解读 可 以看到它有8个内容
1.restrict
(字符串)可选参数,指明指令在DOM里面以什么形式被声明;取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A;当然也可以两个一起用,比如EA.表示即可以是元素也可以是属性。
[html] view plain copy 在CODE上查看代码片派生到我的代码片
E(元素):<directiveName></directiveName> 
A(属性):<div directiveName=’expression’></div> 
C(类): <div class=’directiveName’></div> 
M(注释):<–directive:directiveName expression–> 
一般情况下E/A/C用得比较多。
2.priority (数字),可选参数,指明指令的优先级,若在单个DOM上有多个指令,则优先级高的先执行;

3.terminal (布尔型),可选参数,可以被设置为true或false,若设置为true,则优先级低于此指令的其他指令则无效,不会被调用(优先级相同的还是会执行)

4.template(字符串或者函数)可选参数,可以是: (1)一段HTML文本

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<hello-world></hello-world> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 template: '<div><h1>Hi 我是林炳文~~~</h1></div>', 
 replace: true 
 }; 
}); 
</script> 
</html> 

图片 2

(2)一个函数,可接受两个参数tElement和tAttrs
其中tElement是指使用此指令的元素,而tAttrs则实例的属性,它是一个由元素上所有的属性组成的集合(对象)形如:
<hello-world2 title =
‘我是第二个directive’></hello-world2> 
其中title就是tattrs上的属性

下面让我们看看template是一个函数时候的情况

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<hello-world></hello-world> 
<hello-world2 title = '我是第二个directive'></hello-world2> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 template: '<div><h1>Hi 我是林炳文~~~</h1></div>', 
 replace: true 
 }; 
}); 
app.directive("helloWorld2",function(){ 
 return{ 
 restrict:'EAC', 
 template: function(tElement,tAttrs){ 
 var _html = ''; 
 _html += '<div>' +'hello '+tAttrs.title+'</div>'; 
 return _html; 
 } 
 }; 
 }); 
</script> 
</html> 

结果:

图片 3

可以看到指令中还用到了hello-world2中的标签中的 title字段

5.templateUrl(字符串或者函数),可选参数,可以是 (1)一个代表HTML文件路径的字符串

(2)一个函数,可接受两个参数tElement和tAttrs(大致同上)

注意:在本地开发时候,需要运行一个服务器,不然使用templateUrl会报错
Cross Origin Request
Script(CORS)错误。由于加载html模板是通过异步加载的,若加载大量的模板会拖慢网站的速度,这里有个技巧,就是先缓存模板
你可以再你的index页面加载好的,将下列代码作为你页面的一部分包含在里面。

<script type='text/ng-template' id='hello.html'> 
 <div><h1>Hi 我是林炳文~~~</h1></div> 
</script> 

这里的id属性就是被设置在templateUrl上用的。

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<hello-world></hello-world> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 templateUrl: 'hello.html', 
 replace: true 
 }; 
}); 
</script> 
<script type='text/ng-template' id='hello.html'> 
 <div><h1>Hi 我是林炳文~~~</h1></div> 
</script> 
</html> 

输出结果:

图片 4

另一种办法缓存是:

app.run(["$templateCache", function($templateCache) { 
 $templateCache.put("hello.html", 
 "<div><h1>Hi 我是林炳文~~~</h1></div>"); 
}]); 

使用实例如下:

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<hello-world></hello-world> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 templateUrl: 'hello.html', 
 replace: true 
 }; 
}); 
app.run(["$templateCache", function($templateCache) { 
 $templateCache.put("hello.html", 
 "<div><h1>Hi 我是林炳文~~~</h1></div>"); 
}]); 
</script> 
</html> 

结果:

图片 5

 其实第一种方法还好一些,写起来会比较快,笔者就得最多的也是第一种写法,直接包在scprit当中

 6.replace
(布尔值),默认值为false,设置为true时候,我们再来看看下面的例子(对比下在template时候举的例子)

           图片 6     

 replace为true时,hello-world这个标签不在了,反之,则存在。

7.scope
(1)默认值false。表示继承父作用域;

(2)true。表示继承父作用域,并创建自己的作用域(子作用域);

(3){}。表示创建一个全新的隔离作用域;

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注