zoukankan      html  css  js  c++  java

  • avalon视频学习笔记（七）

    一、属性操作
        DOM操作之属性操作：
            1、类名操作<div class="active">    ms-class
                （1）ms-class
                    a、ms-class="active"    默认写法，为元素添加active样式
                    b、ms-class="active:isOk"    isOK值为true，添加active，为false，删除active
                    c、ms-class=“width{{w}}:isOK”    类名中可以使用插值表达式
                    d、ms-class="red:1+1"    根据计算结果决定添加或删除red
                    e、ms-class="aaa bbb ccc"    添加多个样式，结果是aaa bbb ccc
                    f、ms-class-1="aaa"    ms-class-2="bbb"    添加多个样式，根据ms-class-后面的数值大小，决定执行顺序
                    g、ms-class-2="bbb"    ms-class="aaa"    ms-class-1="ccc" 添加多个样式，结果是aaa ccc bbb
                    h、ms-class="xxx yyy zzz:true"    添加多个样式，结果是xxx yyy zzz
    1. <head>
    2. 	<meta charset="UTF-8">
    3. 	<title>avalon-class</title>
    4. 	<script type="text/javascript" src="../avalon.min.js"></script>
    5. 	<script type="text/javascript">
    6. 	avalon.ready(function () {
    7. 		avalon.define({
    8. 			$id:"ms-class",
    9. 		});
    10. 		avalon.scan();
    11. 	})
    12. 	</script>
    13. 	<style>
    14. 		.aaa{
    15. 			color:blue;
    16. 			border:1px solid blue;
    17. 		}
    18. 	</style>
    19. </head>
    20. <body ms-controller="ms-class">
    21. 	<div ms-class="aaa" ms-class-1="bbb" ms-class-2="ccc">它的类名是 aaa bbb ccc</div>
    22. 	<div ms-class-2="aaa" ms-class="bbb" ms-class-1="ccc">它的类名是 bbb ccc aaa</div>
    23. 	<div ms-class="bbb" ms-class-1="aaa" ms-class-2="ccc">它的类名是bbb aaa ccc</div>
    24. 	<div ms-class="xxx yyy zzz">它的类名是xxx yyy zzz</div>
    25. 	<div ms-class="XXX YYY ZZZ:true">它的类名是XXX YYY ZZZ</div>
    26. </body>
                        切换类名操作：
    1. <head>
    2. 	<meta charset="UTF-8">
    3. 	<title>avalon-class</title>
    4. 	<script type="text/javascript" src="../avalon.min.js"></script>
    5. 	<script type="text/javascript">
    6. 	avalon.ready(function () {
    7. 		var model = avalon.define({
    8. 			$id:"ms-class",
    9. 			toggle: true,
    10. 			click:function (e) {
    11. 				model.toggle = !model.toggle
    12. 			}
    13. 		});
    14. 		avalon.scan();
    15. 	})
    16. 	</script>
    17. 	<style>
    18. 		.test{
    19. 			width: 100px;
    20. 			height: 100px;
    21. 			border: 1px solid red;
    22. 			color: red;
    23. 			-webkit-user-select: none;
    24. 			-moz-user-select: none;
    25. 			-o-user-select: none;
    26. 			user-select: none;
    27. 		}
    28. 		.aaa{
    29. 			color:blue;
    30. 			border:1px solid blue;
    31. 		}
    32. 	</style>
    33. </head>
    34. <body ms-controller="ms-class">
    35. 	<div class="test" ms-class="aaa:toggle" ms-click="click">点我</div>
    36. 	<div ms-class="aaa" ms-class-1="bbb" ms-class-2="ccc">它的类名是 aaa bbb ccc</div>
    37. 	<div ms-class-2="aaa" ms-class="bbb" ms-class-1="ccc">它的类名是 bbb ccc aaa</div>
    38. 	<div ms-class="bbb" ms-class-1="aaa" ms-class-2="ccc">它的类名是bbb aaa ccc</div>
    39. 	<div ms-class="xxx yyy zzz">它的类名是xxx yyy zzz</div>
    40. 	<div ms-class="XXX YYY ZZZ:true">它的类名是XXX YYY ZZZ</div>
    41. </body>
                 （2）绑定属性ms-active，ms-hover
                        a、ms-active、ms-hover分别是用来模拟：avtice，：hover效果，用法与ms-class一样
                        b、ms-active只在点击的那那一瞬间有效果
                        c、ms-hover只在掠过时有效果，失去焦点或者离开目标元素就会移除刚才添加的类名
    1. <head>
    2. 	<meta charset="UTF-8">
    3. 	<title>avalon-activ-hover</title>
    4. 	<script type="text/javascript"	src="../avalon.min.js"></script>
    5. 	<script type="text/javascript">
    6. 		avalon.ready(function () {
    7. 		var model =	avalon.define({
    8. 				$id:"test",
    9. 				color:"red",
    10. 				toggle:true,
    11. 				changeToggle:function () {
    12. 					model.toggle=!model.toggle
    13. 				},
    14. 				swichColor:function () {
    15. 					model.color = model.color === "red" ? "blue" :"red"
    16. 				}
    17. 			});
    18. 			avalon.scan();
    19. 		})
    20. 	</script>
    21. 	<style>
    22. 		.active{
    23. 			background: black;
    24. 			color: white;
    25. 		}
    26. 		.ms-class-test{
    27. 			background: green;
    28. 			width: 300px;
    29. 			height: 100px;
    30. 			border: 1px solid black;
    31. 		}
    32. 		.c-red{
    33. 			background: red;
    34. 		}
    35. 		.c-blue{
    36. 			background: blue;
    37. 		}
    38. 	</style>
    39. </head>
    40. <body ms-controller="test">
    41. 	<div ms-active="active">测试：active</div>
    42. 	<div class="ms-class-test" ms-hover="c-{{color}}:toggle"></div>
    43. 	<button ms-click="swichColor">点击我改变类名</button>
    44. 	<button ms-click="changeToggle">点击我改变toggle</button>
    45. </body>

            2、表单value属性操作<input value="active" />    ms-duplex
            3、元素固有属性处理<div id="grid" name="grid">    ms-attr
    1.   <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>avalon-attr</title>
  <script type="text/javascript" src="../avalon.min.js"></script>
  <script type="text/javascript">
	avalon.ready(function(){
		avalon.define({
			$id:'attr',
			textModel:"star",
			t1:true,
			age:20,
			r1:true,
			sex:"男",
			s1: true,
			c1: true,
			path:"http://hotel.qunar.com",
			id:"a01_chongqing",
			name:"a01_chongqing",
			src:"camel.png",
			title:"avalon is great"
		});
		avalon.scan();
	})
  </script>
 </head>
 <body>
	<form ms-controller="attr">
		<h2>布尔属性绑定（ms-attr-disabled，ms-attr-readonly）</h2>
		<label>姓名</label>
		<input ms-duplex="textModel" ms-attr-disabled="t1"/>
		<label>年龄</label>
		<input ms-duplex="age" ms-attr-readonly="r1"/>
		<label>性别</label>
		<div>
			<label><input type="radio" ms-duplex-string="sex" value="男"/>男</label>
			<label><input type="radio" ms-duplex-string="sex" value="女" />女</label>
			<br />
			<label>工作</label>
			<select>
				<option value="IT" ms-attr-selected="s1">IT</option>
				<option value="销售">销售</option>
				<option value="产品">产品</option>
			</select>
			<br />
			<label>兴趣爱好</label>
			<label><input type="checkbox" ms-attr-checked="c1" value="option1" />篮球</label>
			<label><input type="checkbox" ms-attr-checked="c1" value="option2" />足球</label>
			<label><input type="checkbox" value="option3" />羽毛球</label>
			<br />
			<h2>字符串属性绑定（ms-attr-id，ms-attr-name，ms-attr-title，ms-src，ms-href，ms-attr-data-url）</h2>
			<a ms-href="{{path}}">酒店</a>
			<a ms-attr-id="{{id}}" ms-attr-name="{{name}}" ms-href="{{path}}/city/chongqing_city/">重庆酒店</a>
			<br />
			<img ms-src="{{src}}" ms-attr-title="{{title}}" />
		</div>
	</form>
    2. </body>

            4、元素自定义属性管理<div data-url="x.html">    ms-hred
            5、元素布尔属性的操作<input readonly="true">    ms-src
  • 相关阅读:
    链表操作
    建立简单的链表
    scanf()函数用法小结
    快速求某年某月是第几天（未整理）
    合并两个有序数组(未整理)
    如何配置JAVA的环境变量、Tomcat环境变量
    【动态规划】流水作业调度问题与Johnson法则
    分治法（二）
    分治法（一）
    HTML5入门十一---Canvas画布实现画图（二）
  • 原文地址：https://www.cnblogs.com/Zjingwen/p/4456490.html
Copyright © 2011-2022 走看看