【前端】 前端的一些积累
发布日期:2021-06-24 18:14:43 浏览次数:4 分类:技术文章

本文共 3995 字,大约阅读时间需要 13 分钟。

前端积累

  虽说我接触过前端,但是实在是非常之菜(毕竟只玩过一两个项目),积累一些知识在内行看来可能非常煞笔。不过我觉得还是记录一下比较好。。大多数文本都是基于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结构应该像这样:

 ■  关于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请求,还可以适用于许多场景。

 

转载地址:https://blog.csdn.net/weixin_34248258/article/details/86124051 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:2014——我的求职之路(四)
下一篇:GCC 编译优化指南(转)

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年04月15日 03时24分02秒