前端(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,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值