前端（js/jquery）常用方法总结

attr()

attr()方法用于设置或者返回被选元素的属性和值；
1、当方法用于返回属性值时，则返回第一个匹配元素的值；
2、当方法用于设置属性值时，则为匹配元素设置一个或者多个属性/值对；

<p class="btn">
					<span class="activeBg" data_i="">全部</span> 
					<span class="aType" data_i="100">待处理</span>
					<span class="aType" data_i="200">待批复</span>
					<span class="aType" data_i="400">待验证</span> 
						<span class="bType" data_i="CS">超时</span><span class="bType" data_i="JJCS">即将超时</span>
				</p>
	//获取到元素“tool”“btn span”"activeBg"中data_i的属性值
	data_i = $(".tool .btn span.activeBg").attr("data_i"),
	//获取到元素“tool”“btn span”"activeBg"中class的属性值
	className = $(".tool .btn span.activeBg").attr("class");

indexOf()

indexOf()方法可返回某个指定的字符串在字符串中首次出现的位置；
1、indexOf()对大小写敏感；
2、如果我们要检索的字符串没有出现，则该方法返回-1；

<p class="btn">
						<span class="activeBg" data_i="">全部</span> 
						<span class="aType" data_i="100">待处理</span>
						<span class="aType" data_i="200">待批复</span>
						<span class="aType" data_i="400">待验证</span> 
							<span class="bType" data_i="CS">超时</span><span class="bType" data_i="JJCS">即将超时</span>
					</p>
//这里声明className变量用来存储class名；			
className = $(".tool .btn span.activeBg").attr("class");
		//indexOF('aType')要检索的字符串atype没有出现，则返回‘-1’
		if (className.indexOf('aType') != -1) {
		//data_i为“处理/未处理的标识”
			$("#QSTATUS1").val(data_i);
		} else {
		//因为我们的“全部”属性的className也不为aType，但是它的data_i为空，所以无妨；
			$("#QSTATUS2").val(data_i);
		}
		//这里把变量index的值赋值给‘#index’
		$("#index").val(index);

index()

1、index()方法返回指定元素相对于其他元素的index位置，这些元素可通过JQuery选择器或者DOM元素来指定；若未找到元素，则index()返回-1；

eq()

1、eq()选择器选取带有指定index值的元素。
index值是从0开始，经常与其他元素/选择器一起使用来确定指定的组中特定序号的元素；

例如：eq($("#index").val()) //选取下标为index值得元素

addClass（）

addClass() 方法向被选元素添加一个或多个类，如需添加多个类，请使用空格分隔类名。

siblings（）

siblinigs()返回被选元素的所有同级元素（同级元素是共享相同父元素的元素）

removeClass（）

从被选元素中移除一个或者多个类，如果方法中没有添加参数的话，那么就相当于移除所有类；

//以上所有方法的例子综合
 $(".tool .btn span").eq($("#index").val()).addClass("activeBg").siblings("span").removeClass("activeBg");

datepicker()时间插件

 $(function() {
    $( "#datepicker" ).datepicker({
        showButtonPanel:true
    })
    //showButtonPanel:是否显示按钮面板

运行效果：

实例：

   //初始化时间段的datapicker
   $( "#QSTARTTIME" ).datepicker({
   	showButtonPanel: true,//是否显示按钮面板
   	showAnim:"slide",
   	changeMonth: true,
     	changeYear: true,
     	closeText:"关闭",
     	dateFormat: 'yy-mm-dd'
   });
    datepickerTodayButton("#QSTARTTIME");//这里调用下面的functon
   
 function datepickerTodayButton(id){
   	var picker = $(id).datepicker({showButtonPanel: true, currentText: "今天"}).datepicker('widget');//获取日期选择器容器
   	picker.click(function (e) {//给容器添加click事件（因为没有点击过日期输入框弹出选择器，此时选择器容器是没有内容的，只能给容器添加click事件）
           var o = e.target;//事件对象中target存储的为点击的实际对象
           if ($(o).hasClass('ui-datepicker-current')) {//检查被选元素（鼠标点击事件）包含“ui-datepicker-current”的class，为当前这个按钮
               setTimeout(function () {//延时执行代码，当天td包含ui-datepicker-today样式，所以获取td触发下click事件
               	//搜索所有段落中后代为“td.ui-datepicker-today”的元素，并且触发点击click事件
                   picker.find('td.ui-datepicker-today').trigger('click');
               }, 10);
           }
       });
   } 

ui-datepicker-today

修改datepicker()样式，可以在浏览器中审查元素，然后修改对应地方的样式；

.ui-datepicker-today .ui-state-highlight{
     border: 1px solid #eee;
     color: #f60;
}

修改选定日期的样式

.ui-datepicker-current-day .ui-state-active{
     border: 1px solid #eee;
     color: #06f;
}

addClass().silbings().removeClass()

这句话的意思为：为某元素添加样式，并且同级元素删除掉样式；

$(".tool>.btn>span").click(function() {
	var _this = $(this);
	if (_this.hasClass("activeBg")) {
	//删除activeBg样式
		_this.removeClass("activeBg");
	} else {
	//添加activeBg样式，然后它的同级元素去掉activeBg样式
		_this.addClass("activeBg").siblings().removeClass("activeBg");
	}
}); 

功能截图：不加以上function的效果图；
加上function的正常效果图；

splice()

splice()方法向/从数组中添加/删除项目，然后返回被删除的项目;

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);

从第三个位置开始删除往后两个元素
输出结果为：Banana,Orange

项目实例：

success : function(data) {
						console.log(data)
						var curMonth = "${mapParam.QENDMONTH}";
						var name = (data[0].DEPT_NAME == null || data[0].DEPT_NAME == "" ? "全部" : data[0].DEPT_NAME);
						var arrX = new Array(), arrY = new Array();
						for (i = 0; i < data.length; i++) {
							arrX.push(data[i].SEQ);//SEQ是月份
							arrY.push(data[i].NUM);//NUM是每个月的峰点值
						}
						//加上下面这句话对选择的月份的对应端点限制，不加则5-12月的线会继续画下去
					 	arrY.splice(curMonth, 12 - curMonth);

arrY.splice(curMonth, 12 - curMonth);意为：获取到当前月份，比如当前月份(ENDMONTHS)为5，12-5=7，也就是说我们峰点值为从5开始删除往后删除七位，也就是只显示1-5月的峰点值；

HTML ondblclick事件

当鼠标双击时执行一段javascript，