【前端】 前端的一些积累
前端积累
虽说我接触过前端，但是实在是非常之菜（毕竟只玩过一两个项目），积累一些知识在内行看来可能非常煞笔。不过我觉得还是记录一下比较好。。大多数文本都是基于js,JQ和BS的
■ 要获取某个下拉列表select中当前选中的项的文本，用$("selector").text()是没有用的，另一方面$("selector").val()获取到的则是当前选中项的值（即option标签的属性value）而不是文字，如果想要获取选中项的文本内容可以：
$("selector").find("option:selected").text()
■ JQ中有trigger方法，用于让程序本身去触发一些事件，而不是人的手去操作。比如在代码中写到$("#hostselect").trigger("dbclick")就是相当于为hostselect触发了双击事件。另外有一个triggerHandler方法，和trigger同样用来触发事件，但是细节上不太一样。具体些在jQuery那篇文章里了。
■ JS中讲一个json格式的字符串转化成一个object可以使用
eval('('+JsonString+')') 或者 JSON.parse(JsonString) 相对的，有JSON.stringify(object)可以把一个object转化成JSON字符串
■ JS中的object很像python中的字典类型，但是和python中的dict不同的是，object有两种访问对象值的方法：
var obj = {"key":"value"}
obj['key']或者obj.key，后者不用加引号。
■ 今天对博客的样式做了个小改造，把过程中碰到的一些问题和解决方法记录一下。
尽管可以在div的style里设置opacity属性来调整透明度， 但是一设置opacity之后所有div内的子元素也都变得透明了。更好的办法是设置background（或backgroud-color）的属性为rgba(R,G,B,A)，R,G,B,A四个分别代表红色调，绿色掉，蓝色调和Alpha透明度。前三个控制颜色，最后一个就是控制透明度啦，而且调整这个透明度可以做到只让div的背景色变透明而不影响div中的文字图片等。
hide,show这两个函数的本质是设置了元素CSS中display这项是不是none。如果是"none"那么当然是处于隐藏状态的。
CSS中的border-radius属性可以把尖角90度的矩形框变成圆角矩形。
■ location.reload
location在javascript里很多时候都代表这当前的地址。而调用location.reload()方法便可以做到刷新页面。相当于在键盘上按了一下F5。另外，这个方法还可以加上一个参数true或者false（默认是false），代表刷新是是否禁止到缓存中取页面。也就是说设置成true之后，每次调用它都会强制浏览器重新到服务器上GET一遍当前页面内容了。
■ javascript中为数组添加元素
不是append
不是append
不是append！！！
是push，是push，是push！！！
■ 关于checkbox
今天有一个需求，很简单，就是当checkbox被选中的时候隐藏一些DOM元素，取消选择就再显示出来。但是没想到比想象得要难搞一点。。我碰到的这个checkbox是<input type="checkbox">，主要用到了一下几个方法。
change(func) change是绑定事件的函数，即checkbox被选中或者取消选中时被触发。不知道为什么一开始调用这个函数就是不成功，于是就想办法用click之类的其他函数，但是又因为这个input是包裹在其他元素里面的，总之弄得很GG。。
is(":checked") 这个函数用来判断一些比较微妙的东西，比如说hover,clicked这些伪属性，不能直接用hasClass或者attr来判断，但是is却可以。像这边这样一个函数判断的就是某个checkbox有没有被选中
■ 关于事件绑定函数不会二次加载这个坑
常常存在这样一种场景：页面初次加载的时候，有些元素还不存在。用户在页面上进行一些操作之后会让页面上出现一些新元素，然而我们还要求这些元素也可以触发一些事件。比如设置$(元素).click(function(){...})这样来做的话，这句话放在什么地方是不能随便的。
我总是想当然的觉得，只要这句话在脚本中，它就“监听”着页面上的元素，发生事件就触发动作。但是其实这并不是“监听”，而是“绑定”。也就是说，这个函数再页面加载过程中只会被执行一次，把页面上符合selector的元素都绑定上相关的方法，之后就不管了。知道了这一点之后就可以知道，如果我们把添加元素的函数和这个事件触发函数设计成平级，那么在加载页面时这个函数选择的元素还没有出现，绑定不到任何东西。因此即使在调用添加元素的函数，往页面上添加元素之后，这些元素也是没有事件绑定的（当然原先隐藏，然后把隐藏显示出来又是另外一回事了）。正确的做法应该是把事件触发函数也包括在添加元素函数中，虽然这样会导致每次添加元素时都要加载一遍事件触发函数，但是保证每次新添加上的元素都能有事件响应。
■ 检查一个radio组内被选中的元素
参考下面的jq代码：
var option = $('input:radio[name=typeOption]:checked').val(); if (!option){ alert('没有选择！'); }
而与上面这样一个检查代码对应的HTML结构应该像这样：
<label class="control-label" for="radioTest">提示文字</label> <div class="radio" id="radioTest"> <label> <input type="radio" name="typeOption" value="value1" />option1 </label> <label> <input type="radio" name="typeOption" value="value2" />option2 </label> </div>
■ 关于location对象的各个属性
怎么感觉最近老是碰到JS处理当前页面的URL，干脆在这里明确一下location对象的各个属性
比如我们处理的当前页面URL是： http://www.domain.com:8080/article/123.html?kw=python#top
location.href 整个URL
location.host 返回域名+端口号如www.domain.com:8080
location.hostname 返回域名如www.domain.com，另外document.domain也是返回这个内容
location.port 返回端口号
location.protocol 返回协议（包括冒号但不包括两斜杠）如http:
location.pathname 返回端口（或域名）之后的路径内容如/artical/123.html，不包括查询串和锚点
location.search 返回查询串，包括问号和每一个&如?kw=python
location.hash 返回锚点如#top
■ js中函数参数默认值
python中函数（方法）可以设定默认参数值，这个特性感觉特别方便。然而js中不能像python中那么简单的设置参数默认值，如果有需要可以变通一下像下面这样进行设置：
function test(para1){ // para1可以视为是一个无默认值的参数，也就是每次调用必须传入否则报错的参数 var para2 = arguments[1]?arguments[1]:'default para2'; //这里的arguments是js函数自带的一个属性,是个array，相当于python中的*args,而通过一个三元表达式可以判断传参具体个数，如果个数多于设置的那么就认为是传参了，如果少了就用默认值'default para2' //正式函数体处理 }
■ 延时发起ajax请求
就是糅合了js原生的setTimeout方法以及发起ajax的方法。
最开始想要做一个搜索框，不带按钮，用户输入查找的关键字，当停止输入后一段时间，认为用户输入完毕，以当前输入内容作为关键词进行查找。实现如下：
$(document).ready(function(){ var last; //这个last必须放在绑定事件函数的外面，相当于作为一个全局变量 $('#subjectInput').keyup(function(event){ last = event.timeStamp; //将此次事件的时间戳记录到last变量中 setTimeout(function(){ if (last - event.timeStamp == 0){ $.ajax(...) //发起ajax请求，或者写一些其他的代码做实际的工作 } },500); //500毫秒，即延时0.5秒后执行动作 // 这个setTimeout意义是这样的：在0.5秒后执行定义的函数，但函数相关变量的值等在此时就已经确定 //所以event.timeStamp不变了，然last是全局的，有可能在这0.5秒钟被又一次按键事件改变值。当两者相同，自然表示0.5秒内没有按键事件，所以认为输入完成 }) })
这种操作不局限与延时发起ajax请求，还可以适用于许多场景。
