一些常用的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个表达式
- attr(传入属性名):获取属性的值
- attr(属性名, 属性值):设置属性的值
- attr(属性名,函数值):设置属性的函数值
- 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;
},{});
}