zoukankan      html  css  js  c++  java
  • 【前端】 前端的一些积累

    前端积累

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

  • 相关阅读:
    计算机基础学习路线路线详情:4步骤·5门课
    python课程体系是怎么样的?
    老猿学5G扫盲贴:中国移动5G融合计费漫游计费架构和路由方案
    老猿学5G扫盲贴:中国移动网络侧CHF主要功能及计费处理的主要过程
    moviepy音视频剪辑:moviepy中的剪辑相关类及关系
    老猿学5G扫盲贴:与用户和终端相关的名词UE、SUPI、GPSI、PEI
    PyQt+moviepy音视频剪辑实战文章目录
    PyQt+moviepy音视频剪辑实战2:一个剪裁视频文件精华内容留存工具的实现
    PyQt+moviepy音视频剪辑实战2:实现一个剪裁视频文件精华内容留存工具
    PyQt+moviepy音视频剪辑实战1:多个音视频合成顺序播放或同屏播放的视频文件实现详解
  • 原文地址:https://www.cnblogs.com/franknihao/p/6820768.html
Copyright © 2011-2022 走看看