• 欲善其事,必利其器---页面开发基础知识整理


    引言:本次只做一次javascript方面的知识梳理,决定以代码化的方式直接展示!

    (我会慢慢总结 这些以后 直接参考 不必百度谷歌 否则你一旦离开了百度谷歌 你啥都不是!)

     1 模块一
     2 <script type="text/javascript">
     3 $(function () {
     4 //非boolean值与boolean进行相加,得出数值var $num = 3;var $bol = true;
     5 //字符串与数字相加
     6 var $str = "2";//alert($num+$str);//“32” 不会报错 进行字符串拼接
     7 //alert(null.x);//TypeError: null has no properties
     8 //alert(hellow(x));
     9 //ReferenceError: hellow is not defined//alert($num + $bol);
    10 //4 隐士转换 不会报错(只有调用未存在的函数或者null.XXX才会报错)
    11 //NaN判断
    12 var $nan = NaN;
    13 //alert($nan === NaN);
    14 //false (隐士转化会将 null转为0,undefined转为NaN)
    15 //判断值是否等于NaN (由于精度的不同导致了IsNaN判断标准不同,利用IsNaN判断是否为数字不太严谨)
    16 //alert(isNaN("x"));
    17 //true
    18 //alert(isNaN(undefined));
    19 //true
    20 //alert(isNaN({}));
    21 //true
    22 //替代IsNaN()判断的方式 !==
    23 //var b = "fl";
    24 //alert($num !== $nan);
    25 //true
    26 //alert(IsReallyNaN(b));
    27 //false
    28 //alert(IsReallyNaN(undefined));
    29 //false
    30 //重写IsNaN()function IsReallyNaN(x) {return x !== x;}
    31 //对象转字符串用tostring,转数字用valueOf
    32 var obj = {toString: function () {return "j" + $str.toString();},valueOf: function () {return 4 + $num;}}
    33 alert(obj.toString() + "" + obj.valueOf());//j2 7
    34 //判断值是否等于undefined (忽略了0和-0)
    35 //function hello(x) {// if (!x) {// x = 11111;// }
    36 // return {x:x};//}
    37 //console.log(hello(-0));//1111
    38 //替代逻辑运算符判断undefined的方法 typeof
    39 function hellos(x) {
    40 //if (typeof x==="undefined") {
    41 // x = 11111;
    42 //}if (x === undefined) {//不要用 x=='undefined',推荐使用===x = 11111;}//对于确定的类型判断,可以加上parseInt()更严谨if (parseInt(x) === undefined) {x = 1;}return { x: x };}
    43 console.log(hellos());
    44 //1111
    45 console.log(hellos(-0));//0
    46 });
    47  
    48  
    49   
    50 模块二
    51 <script type="text/javascript">
    52 $(function () {
    53 $('#btn_load').click(function () {
    54 //$('.content').load('/testscript/hello', function () { });//将请求的页面填充到div中
    55 //$.getJSON('/testscript/tojson', function (data) {//从服务器端获取json// //遍历json文件// $.each(data, function (i, value) {// //...// });//});
    56 //$.getScript('/testscript/tojs', function () {//从服务器端获取JS// //...//});
    57 //全局Ajax$.ajaxSetup({});
    58 //在请求服务器之前需要做的事
    59 $('.content').ajaxStart(function () { $(this).hide() });
    60 //在请求服务器结束需要做的事
    61 $('.content').ajaxStop(function () { $(this).show(); });
    62 //序列化编码后的表单元素的值
    63 alert($('#frm').serialize());});
    64 //取值按钮$('#btn').click(function () {
    65 //获取当前select标签的值
    66 alert($('#sel').val());
    67 //获取选中select的文本
    68 alert($('#sel option:selected').text());
    69 //获取当前checkbox选择状态
    70 $('[name=chk]:checked').each(function () {
    71 alert($(this).val());
    72 alert($(this).attr("data-IsTrue"));});
    73 //获取当前选中redio标签的值
    74 alert($(':radio[name=rdo]:checked').val());
    75 $(':radio[name=rdo]').eq(0).prop("checked", true);//默认选择第一个
    76 //获取文本域的值alert($.trim($('#are').val()));});
    77 //是否全选按钮$('#chkAll').click(function () {
    78 //全选 反选
    79 $('#chkAll').toggle(function () {$('[name=chk]').prop('checked', true);}, function () {$('[name=chk]').prop('checked', false);});
    80 //不建议用toggle,会与jq的状态冲突
    81 if ($(this).prop("checked")) {$('[name=chk]').prop("checked", true);}
    82  else {$('[name=chk]').prop("checked", false);}});});
    83 </script> </span>

    知识扩展

    Number()函数可以替代IsNaN()函数做是否非数字验证,但是Number()返回NaN,IsNaN()返回boolean值。

    有时候做字符串非空验证可以用===“” 也可判断Length是否为0,但是前提必须做好Trim()去空格处理,空格也会占用一个字符位置。

     1 1.判断字符串输入字符长度函数(unicode码)
     2            var validate={
     3                     //判断字符内存中实际长度
     4                    GetStrLength:function GetStrLength(value){
     5                         var len=0;
     6                         for(var i=0; i<value.length; i++){
     7                         var a=value.charAt(i);
     8                         if(a.match(/[^x00-xff]/ig) !=null){
     9                        len+=2;//汉字
    10                 }else{
    11                        len+=1;//数字
    12               }
    13                        return len;//返回字符长度
    14            }
    15        }
    16   }
    17    
    18    
    19 2.文本框中只允许限制数字输入
    20 代码嵌入式<input type="text"  onkeyup="this.value='this.value.replace(/D/g,'')'">  <input type="text"  onafterpaste="this.value='this.value.replace(/D/g,'')'">
    21 函数封装    <input type="text" data-type="print">
    22                   $('input[data-type=print]').keyup(function(){
    23                       var source=$(this).val();
    24                       source=source.replace(/[^d]*/g,'').replace(/(0+)/gi,'');//过滤中文和特殊字符
    25                       $(this).val(source);
    26                    });
    27   
    28   
    29 3.验证是否输入了正确的url(http or https)
    30                   $('#txtLinkAddress').blur(function(){
    31                       var address_str=$.trim($(this).val());
    32                       var reg=/^(http|https)://([a-zA-Zd][a-zA-Zd-_]+.)+[a-zA-Zd-_][^ ]*$/;
    33                       if(reg.test(address_str)){
    34                             //友好提示.....
    35                      }
    36                  });
    37   
    38   
    39 4.正则判断NULL OR NaN
    40 function isNullOrNaN(value){
    41     var flag=false; 
    42     var reg=/^([1-9]|[1-9][0-9]+)?$/;
    43     if(reg.test(value)){
    44     flag=true;
    45     return flag;
    46   }
    47 }

    未完待续...

  • 相关阅读:
    ZooKeeper Java例子(六)
    css盒模型
    竖直方向三栏布局
    水平方向三栏布局
    js判断一个字符串是以某个字符串开头
    js防止重复点击
    升级 AngularJS 至 Angular
    js实现大文件分片上传的方法
    使用svn进行本地代码管理
    angular使用代理解决跨域
  • 原文地址:https://www.cnblogs.com/jsonxu/p/5292501.html
Copyright © 2020-2023  润新知