js小结

一些常用的JS属性与方法。
jquery.js 要引入否则ajax不能使用;
xxx.js要在xxx.css之后引入;
xxx.js引入有顺序。

一、JS属性

1.1 readonly 和 disabled

readonly只是使文本框不能输入,外观没有变化,而且表单提交时不影响获取value值;

disabled会使文本框变灰,而且通过表单提交时,获取不到文本框中的value值(如果有的话)。

readonly只针对input(text/password)和textarea有效;

disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等。

二、JS方法

2.1 attr() 方法同时设置多个属性

attr()有4个表达式

  1. attr(传入属性名):获取属性的值
  2. attr(属性名, 属性值):设置属性的值
  3. attr(属性名,函数值):设置属性的函数值
  4. attr(attributes):给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});
2.2 removeAttr() 方法从被选元素移除一个或多个属性

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性(attribute)

$('div').removeAttr("title class");
2.3 操作disabled属性的方法

1.两种方法设置disabled属性:

$('#areaSelect').attr("disabled",true);

$('#areaSelect').attr("disabled","disabled");

2.三种方法移除disabled属性:

$('#areaSelect').attr("disabled",false);

$('#areaSelect').removeAttr("disabled");

$('#areaSelect').attr("disabled","");

2.4 js获取对象属性与设置属性

<body>
<select id="bureau" name="bureau" class="selectpicker show-tick" multiple></select>

</body>

<script type="text/javascript">
var companyWidth = document.getElementById('company');
var formHeight = document.getElementById('form');

$('#lineName').selectpicker({
       width:companyWidth.offsetWidth
    });
    
$('#bureau').selectpicker({
    width:companyWidth.offsetWidth

});

myChart.style.height = formHeight.offsetHeight + 10 + 'px';
myChart.style.width = formHeight.offsetHeight + 10 + 'px';
</script>

2.5 二级联动

$(document).ready(function() {
    $("#company").bind("change",function(){
        var companyType = $(this).val();
        var url = "getBureau.json";
        $.get(url,{"companyType":companyType},function(data){
            if(data==undefined){
                layer.msg("无公司分类数据!");
            }else{
                $("#bureau").empty();
                var dataObj = eval('data');//转换为json对象
                for(var i=0;i<dataObj.length;i++){
                    //更新分类
                    $("#bureau").append("<option style=\"font-size: 12px\" value='"+dataObj[i]+"'>"+dataObj[i]+"</option>");
                }
                $('.selectpicker').selectpicker('refresh');     //设置好内容后刷新,  多用于异步请求
            }
        })
    });
})

2.6 ajax获取数据生产统计图

$.ajax({
    url: "getBizRtmIceKValue.json",
    data: {
        company: company,
        bureau: bureau
    },
    type: 'get',
    cache: false,
    dataType: 'json',
    success: function (data) {
        var names = [];
        var numbers = [];

        for(var key in data){
            var dataObj = {};
            dataObj.name = key;
            dataObj.value = data[key];
            names.push(key);
            numbers.push(dataObj);
        }

        var myChart = echarts.init(document.getElementById('myChart'));
        myChart.setOption({
            title: {},
            tooltip: {
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {},
            series: [{
                name: '',
                type: 'pie',
                radius : '80%',
                color:["blue", "red","gray"],
                data: numbers,
                label: { normal: { show: true, position: 'inner' }}
            }]
        });
    },
    error: function (msg) {
        console.log(msg);
    }
});

2.7 jqGrid获取排序列与方式

var sidx = $("#iceT").jqGrid('getGridParam','sortname');//列名
var sord = $("#iceT").jqGrid('getGridParam','sortorder');//排序方式

2.8 获取html元素并回写

document.getElementById('id').innerHTML = html
$("#errmsg").html('账号密码有误!');

2.9 js去重方法

function unique (arr) {
        return Array.from(new Set(arr))
    }

3.0 js统计元素个数

    function getRepeatNum(arr){
        return arr.reduce(function(prev,next){
            prev[next] = (prev[next] + 1) || 1;
            return prev;
        },{});
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,287评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,346评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,277评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,132评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,147评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,106评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,019评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,862评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,301评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,405评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,996评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2 352

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,180评论 0 3
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,380评论 0 44
  • 1、传参时,如果传的是一串数字,不加引号代表的是数字(会有位数限制,如身份证号会传不全),加引号代表的是字符串,没...
    欢乐相随阅读 474评论 0 0
  • jQuery基础(一)——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 1,081评论 0 8
  • 要收放自如 要暧昧 要放松 要保持沟通 要多留意细节 要注意对方的感受 要倾听 要留一些私人的时间给彼此放空 可,...
    段童阅读 293评论 0 0