js jquery 基本元素操作

时间:2022-07-24
本文章向大家介绍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.kk = moble_defaultUrl;

                return;

            }else{

                window.kk = 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(

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

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

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

('input').attr("readonly",true)//将input元素设置为readonly

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

2.disabled

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

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

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

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

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

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

随机文章
Javascript知识点必读
最近更新