js jquery 基本元素操作

一、js 判断pc端或手机端

<script>

    (function () {

        var navUA = navigator.userAgent;

        var defIncludeStr = "iPhone|Android|iPod|BlackBerry|";

        var defExcludeStr = "";



        var redirectUrl = "";

        var metas = document.getElementsByTagName("meta");

        var result;

        for(var i=0,len=metas.length;i<len;i++){

            var meta = metas[i];

            if(meta.name=="mobile-agent" || meta.httpEquiv=="mobile-agent"){

                var regx = /^format=(wml|xhtml|html5); url=(.*)$/;

                result = regx.exec(meta.content);

                break;

            }

        }

        var moble_defaultUrl = "http://192.168.1.120/mobile";//手机端网址
        var defaultUrl = "http://192.168.1.120/web";//pc端网址

        if(result){

            defaultUrl = result[2];

        }else if(redirectUrl!=""){

            defaultUrl = redirectUrl;

        }

        var defExcludeArr = defExcludeStr.split("|");

        for(var i=0,len=defExcludeArr.length;i < len;i++){

            if(defExcludeArr[i]!="" && navUA.indexOf(defExcludeArr[i])!=-1){

                return;//skip...

            }

        }

        var defIncludeArr = defIncludeStr.split("|");

        for(var i=0,len=defIncludeArr.length;i < len;i++){

            if(defIncludeArr[i]!="" && navUA.indexOf(defIncludeArr[i])!=-1){

                window.location.href = moble_defaultUrl;

                return;

            }else{

                window.location.href = defaultUrl;

                return;

            }

        }

    })();

</script>

二、带进度条的 jQuery 文件拖放上传插件：jQuery File Uploader 

jQuery File Uploader 是一个 jQuery 文件拖放上传插件

兼容性判断

下载：https://github.com/danielm/uploader/archive/master.zip   立即下载

 

演示：https://danielmg.org/demo/java-script/uploader/images

 

三、 js 浮点运算出现的精度丢失问题

var myf='6.202555';

myf=Number(myf).toFixed(2);//使用方法


Number.prototype.toFixed = function(scale) {
    var s = this + "";
    if (!scale) scale = 0;
    if (s.indexOf(".") == -1) s += ".";
    s += new Array(scale + 1).join("0");
    if (new RegExp("^(-|\+)?(\d+(\.\d{0," + (scale + 1) + "})?)\d*$").test(s)) {

        var s = "0" + RegExp.$2, pm = RegExp.$1, a = RegExp.$3.length, b = true;
        if (a == scale + 2)  {
            a = s.match(/d/g);
            if (parseInt(a[a.length - 1]) > 4) {
                for (var i = a.length - 2; i >= 0; i--) {
                    a[i] = parseInt(a[i]) + 1;
                    if (a[i] == 10) {
                        a[i] = 0;
                        b = i != 1;
                    }else {
                        break;
                   }
                }
            }

            s = a.join("").replace(new RegExp("(\d+)(\d{" + scale + "})\d$"), "$1.$2");
        }
        if (b){
            s = s.substr(1);
        }
        return (pm + s).replace(/.$/, "");
    }
    return this + "";
}

四、jQuery 增加 删除 修改select option

 jQuery获取Select选择的Text和Value:

      1. var checkText=jQuery("#select_id").find("option:selected").text();   //获取Select选择的Text

      2. var checkValue=jQuery("#select_id").val();   //获取Select选择的option Value

      3. var checkIndex=jQuery("#select_id ").get(0).selectedIndex;   //获取Select选择的索引值

      4. var maxIndex=jQuery("#select_id option:last").attr("index");   //获取Select最大的索引值

jQuery添加/删除Select的Option项：

      1. jQuery("#select_id").append("<option value='Value'>Text</option>");   //为Select追加一个Option(下拉项)

      2. jQuery("#select_id").prepend("<option value='0'>请选择</option>");   //为Select插入一个Option(第一个位置)

      3. jQuery("#select_id option:last").remove();   //删除Select中索引值最大Option(最后一个)

      4. jQuery("#select_id option[index='0']").remove();   //删除Select中索引值为0的Option(第一个)

      5. jQuery("#select_id option[value='3']").remove();   //删除Select中Value='3'的Option

      6. jQuery("#select_id option[text='4']").remove();   //删除Select中Text='4'的Option

内容清空：

      jQuery("#select_id").empty();

五、jquery checkbox操作

通过选择器选取CheckBox:

  1.给CheckBox设置一个id属性，通过id选择器选取：

    <input type="checkbox" name="myBox" id="chkOne" value="1" checked="checked" />

    JQuery：$("#chkOne").click(function(){});

   2.给CheckBox设置一个class属性，通过类选择器选取：

    <input type="checkbox" name="myBox" class="chkTwo" value="1" checked="checked" />

    JQuery：$(".chkTwo").click(function(){});

  3.通过标签选择器和属性选择器来选取：

  <input type="checkbox" name="someBox"  value="1" checked="checked" /> 

    <input type="checkbox" name="someBox" value="2" />

   JQuery: $("input[name='someBox']").click(function(){});

对CheckBox的操作：

   以这段checkBox代码为例：

   <input type="checkbox" name="box"  value="0" checked="checked" />

     <input type="checkbox" name="box" value="1" />

   <input type="checkbox" name="box" value="2" />

   <input type="checkbox" name="box" value="3" />

   1.遍历checkbox用each()方法：

       $("input[name='box']").each(function(){});


   2.设置checkbox被选中用attr();方法：

     $("input[name='box']").attr("checked","checked");

    在HTML中，如果一个复选框被选中，对应的标记为 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 则会提示您是"true"而不是"checked"，所以判断 if("checked"==$("#id").attr("checked")) 是错误的，应该是 if(true == $("#id").attr("checked")) 

  3.获取被选中的checkbox的值：

    $("input[name='box'][checked]").each(function(){
    if (true == $(this).attr("checked")) {
          alert( $(this).attr('value') );
    }

     或者：

    $("input[name='box']：checked").each(function(){
    if (true == $(this).attr("checked")) {
          alert( $(this).attr('value') );
    }
   $("input[name='box']：checked")与 $("input[name='box']")有何区别没试过，我试了用 $("input[name='box']")能成功。

   4.获取未选中的checkbox的值：

    $("input[name='box']").each(function(){
          if ($(this).attr('checked') ==false) {
                alert($(this).val());
            }
     });

   5.设置checkbox的value属性的值:

          $(this).attr("value",值);

一般都是创建一个js数组来存储遍历checkbox得到的值，创建js数组的方法：

     1.  var array= new Array();

     2. 往数组添加数据：

        array.push($(this).val());

     3.数组以“,”分隔输出：

         alert(array.join(','));

六、jquery设置元素的readonly和disabled

1.readonly

$('input').attr("readonly","readonly")//将input元素设置为readonly
$('input').removeAttr("readonly");//去除input元素的readonly属性

if($('input').attr("readonly")==true)//判断input元素是否已经设置了readonly属性

对于为元素设置readonly属性和取消readonly属性的方法还有如下两种：

$('input').attr("readonly",true)//将input元素设置为readonly
$('input').attr("readonly",false)//去除input元素的readonly属性

$('input').attr("readonly","readonly")//将input元素设置为readonly
$('input').attr("readonly","")//去除input元素的readonly属性

2.disabled

$('input').attr("disabled","disabled")//将input元素设置为disabled
$('input').removeAttr("disabled");//去除input元素的disabled属性

if($('input').attr("disabled")==true)//判断input元素是否已经设置了disabled属性

对于为元素设置disabled属性和取消disabled属性的方法还有如下两种：

$('input').attr("disabled",true)//将input元素设置为disabled
$('input').attr("disabled",false)//去除input元素的disabled属性

$('input').attr("disabled","disabled")//将input元素设置为disabled

$('input').attr("disabled","")//去除input元素的disabled属性