js的一点补充
html中的js对象
因为自己看代码自学的js，一边看代码一边摸索规律，未达到一定的系统性，所以写了大概3000行代码的时候才懂js的对象原来是这么回事，来补一下笔记。
html的每个标签都可算作js的一个对象，其包含很多内容，不管是定义没定义都会包含，只不过是空值，另外，每个对象还包含parent、children，并且children可能是一个对象数组。
function set_parameter(cell){
var row=$(cell).parent().parent().parent();
row.children('td').eq(12).children('div')[0].innerText=sttr
}
以上句为例，这里是对网页文本进行赋值的语句，该函数由事件（onchange）调用，触发事件后自动将某值更改，函数未补全，会意即可，关于事件我会在下文表述。
继续前文，通过js选择器$(cell)获取该对象然后获取父节点，而对于children可以明确的发现其是对象数组，通过eq可以迭代到需要的元素，需要一提的是，js对象如果想访问其内部元素（例：innerText）必须加[0]，具体为什么没有细究，如果感兴趣可以打印[1]看看。
总的来说，我觉得js入门很简单，可是越深究，发现没有做不到只有想不到，很真实，都是基础的东西，别人却能玩出花来，不过，确实蛮有意思的在一定程度上（从入门到放弃）（碎碎念）。
html与js事件
第一次接触事件是在c#，可是好玩如我疯狂划水一个字也没听。
正题，事件在html中的属性值是onchange，其实很简单，来段代码：
<select id="{{colums.test_case}}{{field.id}}" style="width:85px;text-align-last:center;" name="{{colums.test_case}}" onchange="set_parameter(this)"> <option selected> {{field.test_case}}</option> {% for line in test_case_list %} <option>{{line}}</option> {% endfor %} </select>
这是一个下拉框选项，每次选择某一项就会触发onchange，进入函数set_parameter，读取网页信息，根据选择内容来改变下一项的值。这就是绑定事件的实现，很简单的一段代码，可是如果你不知道onchange这个属性，都是白搭。
附上其余的一些事件属性：
js的一些小东西
这里对js的一些字体，边框等一些小东西进行记录，在进行美化的过程中，对于初学者来说，一些标签的属性都不清楚，每个标签之间因为存在等级的关系属性也是不相同的，在使用时，可以进行百度搜索其具有哪些属性，比如div,table等，我们要去美化字体，边框，位置，间隔等都需要通过具体标签的属性去设置，比如style，align等，找到对应的属性，然后去修改css格式或者直接修改属性进行设置，另外，可以下载一些现成的包进行应用，也是Java，js的好处。
字体对应的属性 font，位置对应 align，style可以修改背景色等。
另附上颜色的一些值：
js一些格式的小技巧
1、滚动条：
通过限制外部div的大小-即限制窗口的大小可以实现滚动条。
<div style="overflow-y:scroll;height:400px;">
2、列名与内部信息分离
网上有现成的包可用，我使用的包因为js版本问题并不能使用，所以我采用了分离div的方法，此方法不推荐使用，如果迫不得已，可以使用此方法。
<div class="ui_tb" style="margin:0 0 0 0;margin-top:10px;">
<table class="table" align='center' id="table_id00" cellspacing="0" cellpadding="0" border="1" data-sortlist="[[0,0],[2,0]]">
<thead> <colgroup style="background:#6495ED"><col width=30px /><col width=50px /><col width=95px /><col width=85px /><col width=105px /><col width=115px /><col width=165px /><col width=80px /><col width=75px /><col width=75px /><col width=85px /><col width=85px /><col width=80px /><col width=110px /><col width="15px" /></colgroup> <th ></th> <th name="th_name">1</th> <th name="th_name">2</th> <th name="th_name">3</th> <th name="th_name">4</th> <th name="th_name">5</th> <th name="th_name">6</th> <th name="th_name">7</th> <!--<th width=145px name="th_name"></th> <th width=80px name="th_name">8</th> <th width=85px name="th_name">9</th>--> <th name="th_name">10</th> <th name="th_name">11</th> <th name="th_name">12</th> <th name="th_name">13</th> <th name="th_name">14</th> <th name="th_name">15</th> </thead> </table> </div> <div class="ui_tb" align='center' style="overflow-y:scroll;height:400px; margin-top:0px;"> <table class="table" align='center' id="table_id" cellspacing="0" cellpadding="0" border="1" data-sortlist="[[0,0],[2,0]]"> <tbody> <colgroup><col width=30px /><col width=50px /><col width=95px /><col width=85px /><col width=105px /><col width=115px /><col width=165px />
<col width=80px /><col width=75px /><col width=75px /><col width=85px /><col width=85px /><col width=80px /><col width=110px /></colgroup> {% for field in c_page %} <tr class="tr_c_line" align='center' id="tr_c_id" style="background:#F5F5F5"> <td class="td"></td> <td ></td> <td hidden="hidden" ></td> <td class="td"></td> <td class="td"></td> <td class="td"></td> <td class="td"></td> <td class="td"></td> <td class="td"></td> <td class="td" hidden="hidden"></td> <td class="td" hidden="hidden"></td> <td class="td" hidden="hidden"></td> <td class="td"></td> <td class="td"></td> <td class="td" hidden="hidden"></td> <td class="td"></td> <td class="td"></td> <td class="td"></td> <td class="td"></td> </tr> {% endfor %} </tbody> </table> </div>
分离后存在对不齐的问题，需要添加<colgroup>标签。另外要考虑滚动条也会占用下半部分的位置，所以需要在上半部分多设置一部分距离。值得一提的是，colgroup不会应用到hidden的标签上面，所以无需考虑已经隐藏的标签。
2、页面加载
有些东西我们需要判断然后用颜色去呈现，用html去区分有些麻烦，以下示例：
<script>
$(function(){
row=$('.result_div').children('select')
console.log($('.result_div').length)
for(var i=0;i<row.length;i++){
if(row.eq(i)[0].options[row.eq(i)[0].selectedIndex].text=='pass'){
row.eq(i)[0].style.color='green'
}
else if(row.eq(i)[0].options[row.eq(i)[0].selectedIndex].text=='fail'){
row.eq(i)[0].style.color='red'
}
}
});</script>
这里出现的带不带[0]的问题在开篇说过，就不再说了，具体select标签的属性，可以百度，w3c和菜鸟说的比我要清楚需要。
3、实时触发：
window.onclick = function(event){
var el = document.getElementById('notice')
if (event.target == el){
el.style.display = "none";
}
console.log(event.target)
}
属于事件的一种吧，与on不同的是，这是在页面全程触发检测，这个函数的意思是，检测点击到的标签id，如果id为notice，name将会隐藏该标签。属于点击消失的一种，也许onclick也具有相同效果，具体没有试验。
4、关于正则：
继续秉持用多少写多少的原则：
python3：
import re reg=r'^[0-9]' reg=r'[^abc]' reg=r'[0-9].*?' reg=r'[0-9].+?' re.match(pattern, string, flags=0) re.sub(pattern, repl, string, count=0, flags=0) re.subn()
. 代表任意字符，* 代表0或多个前一个表达式，+ 代表1或多个前一个表达式
^在[ ]内代表除[ ]内的任意字符，外的表示以其为开头的字符。
.* .+都代表贪婪匹配，后面加?可以进入非贪婪模式
其中flags有如下值：
| re.I | 使匹配对大小写不敏感 |
| re.L | 做本地化识别（locale-aware）匹配 |
| re.M | 多行匹配，影响 ^ 和 $ |
| re.S | 使 . 匹配包括换行在内的所有字符 |
| re.U | 根据Unicode字符集解析字符。这个标志影响 \w, \W, \b, \B. |
| re.X | 该标志通过给予你更灵活的格式以便你将正则表达式写得更易于理解。 |
js：
var reg=/item=.*/i href='item=?'
href=href.replace(reg,'')
href=href.search(reg)
具体匹配规则与python3类似，只不过具体函数和reg表述方式不同
i 表示是否区分大小写,replace 替换，search 查找，存在返回第一个下标，不存在返回-1
细碎的小东西：
python3 的eval()函数可以将json格式转化为原数据。
浙公网安备 33010602011771号