目录
.
.
…
.
https://www.cnblogs.com/liyuspace/p/8302090.html
14.jquery select动态添加内容
//数组
var userlist= [{name:"全部",value:1},{name:"老师",value:2},{name:"学生",value:3}];
//方法一： 根据下拉框id属性 动态添加内容
$('#sel_userlist').empty(); //根据ID，清空下拉框内容
for (var i = 0; i < userlist.length; i ++) {
$('#sel_userlist').append("<option value='"+userlist[i].value+"'>"+userlist[i].name+"</option>");
}
//方法二： 根据下拉框name属性 动态添加内容
$('select[name=selectUserList]').empty(); //根据ID，清空下拉框内容
for (var i = 0; i < userlist.length; i ++) {
$('select[name=selectUserList]').append("<option value=\""+userlist[i].value+"\">"+userlist[i].name+"</option>");
}
13.jquery select的改变事件
<div class="col-sm-2">
<div class="input-group m-b">
<span class="input-group-prepend"> <button type="button" class="btn btn-primary">隐患状态 </button> </span>
<select class="form-control m-b" name="hdgrade" id="select_hdstatus">
<option value="all">全部</option>
<option value="0">未处理</option>
<option value="1">已处理</option>
</select>
</div>
</div>
//下拉框改变
$("#select_hdstatus").change(function () {
$("#select_hdstatus option:selected").text(); //获取选中项的Text值
$('select#select_hdstatus option:selected').val(); //获取选中项的Value值
alert("这是改变了");
});
12.jquery radio的改变事件
<div class="col-sm-8 mt-2">
<label class="i-checks"><input type="radio" value="0" name="status" checked="" /><i></i>未处理</label>
<label class="i-checks"><input type="radio" value="1" name="status" /><i></i>已处理</label>
</div>
//获取状态
$('input[type=radio][name=status]').change(function () {
if (this.value == '0') {
alert("这是选中了 未处理");
}
else if (this.value == '1') {
alert("这是选中了 已处理");
}
});
11.Jquery设置《select》选中值
html代码示例：
<select class="form-control m-b" name="account" id="select_usergrade" >
<option value ="all">全部</option>
<option value ="0">老师</option>
<option value ="1">领导</option>
</select>
jquery代码示例：
//方法一：
//比如要选中老师的选项：
$("#select_usergrade").val("0");
效果图如下：
10. Jquery获取《select》选中值
DropDownList
- 获取选中项：
获取选中项的Value值：
$('select#sel option:selected').val();
或者
$('select#sel').find('option:selected').val();
获取选中项的Text值：
$('select#sel option:selected').text();
或者
$("#sel option:selected").text()
或者
$('select#sel').find('option:selected').text();
- 获取当前选中项的索引值：
$('select#sel').get(0).selectedIndex;
- 获取当前option的最大索引值：
$('select#sel option:last').attr("index")
- 获取DropdownList的长度：
$('select#sel')[0].options.length;
或者
$('select#sel').get(0).options.length;
- 设置第一个option为选中值：
$('select#sel option:first').attr('selected','true')
或者
$('select#sel')[0].selectedIndex = 0;
- 设置最后一个option为选中值
.
.
.
.
9.jquery 设置radio选中值/ 选中项
html代码示例：
<label class="col-sm-2 col-form-label">性别：</label>
<input type="radio" value="0" name="gender" id="man" checked="" /><i></i>男 </label>
<input type="radio" value="1" name="gender" id="woman"/><i></i>女 </label>
jquery代码示例：
$("[name='gender'][value='0']").prop("checked", "checked");
或者 使用变量，动态设置 name 和 值
$(":radio[name='"+ （name变量 ） +"'][value='" + （value值） + "']").prop("checked", "checked");
8.Jquery获取radio选中值
1.获取选中值，三种方法都可以：
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
2.设置第一个Radio为选中值：
$('input:radio:first').attr('checked', 'checked');
或者
$('input:radio:first').attr('checked', 'true');
注：attr(“checked”,‘checked’)= attr(“checked”, ‘true’)= attr(“checked”, true)
3.设置最后一个Radio为选中值：
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
4.根据索引值设置任意一个radio为选中值：
$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');
5.根据Value值设置Radio为选中值
$("input:radio[value=//www.jb51.net/kf/201110/'rd2']").attr('checked','true');
或者
$("input[value=//www.jb51.net/kf/201110/'rd2']").attr('checked','true');
6.删除Value值为rd2的Radio
$("input:radio[value=//www.jb51.net/kf/201110/'rd2']").remove();
7.删除第几个Radio
$("input:radio").eq(索引值).remove();索引值=0,1,2....
如删除第3个Radio:$("input:radio").eq(2).remove();
8.遍历Radio
$('input:radio').each(function(index,domEle){
//写入代码
});
.
.
7.a标签 调用函数
推荐使用这四种：
<a href="javascript:void(0);" onclick="js_method()">百度一下</a>
<a href="javascript:;" onclick="js_method()">百度一下</a>
<a href="#" onclick="js_method();return false;">百度一下</a>
<a href="javascript:js_method();">百度一下</a>
PS:a标签点击事件方法，详细介绍如下
a 标签的 href 属性用于指定超链接目标的 URL，href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。
这里的href="javascript:;" rel="nofollow" ，其中javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数.而采用这个方式
javascript:;可以实现A标签的点击事件运行时，如果页面内容很多，有滚动条时，页面不会乱跳，用户体验更好。
-
a href="javascript:js_method();" rel="nofollow"
这是平台上常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行 -
a href="javascript:void(0);" rel=" nofollow" onclick="js_method()"
这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。 -
a href="javascript:;" rel="nofollow" onclick="js_method()"
这种方法跟跟2种类似，区别只是执行了一条空的js代码。 -
a href="#" rel="nofollow" onclick="js_method()"
这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
<a href="#" rel="nofollow" ></a>如果页面有滚动条 点击后网页后返回到页面的最顶端 -
a href="#" rel="nofollow" onclick="js_method();return false;"
这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。
我看了下taobao的主页，他们采用的是第2种方法，而alibaba的主页是采用的第1种方法，和我们的区别是每个href里的javascript方法都用try、catch包围。
参考自：https://www.jb51.net/article/169412.htm
.
.
6. 跳转页面 （js&jquery）
6.1 js 实现页面跳转重定向可以使用以下两种方法：
window.location.replace("url");
类似 HTTP 重定向
将地址替换成新 url，该方法通过指定 URL 替换当前缓存在历史里（客户端）的项目，因此当使用 replace 方法之后，你不能通过"前进"和"后退"来访问已经被替换的URL，这个特点对于做一些过渡页面非常有用！
window.location.href="url";
类似点击 a 标签的链接。
跳转到指定的 url。
实例
// 类似 HTTP 重定向到博客
window.location.replace("https://blog.youkuaiyun.com/VIP_CR");
// 类似点击博客的链接（a 标签）
window.location.href = "https://blog.youkuaiyun.com/VIP_CR";
6.2 jQuery实现页面跳转
实例
//用法1:
$(window).attr('location','https://blog.youkuaiyun.com/VIP_CR');
//用法2:
$(location).attr('href', 'https://blog.youkuaiyun.com/VIP_CR');
//用法3:
$(location).prop('href', 'https://blog.youkuaiyun.com/VIP_CR');
用法1和2 都是使用 attr()方法 设置或返回被选元素的属性值。
用法3 prop() 方法 设置或返回被选元素的属性和值。
如果想详细了解 attr()方法 和 prop() 方法 的区别，可以点击下面链接查看。
jquery–jquery中attr和prop的区别
.
.
☆ 如果平级直接某页面名称，三种用法都可以这样使用，
例 如：
$(window).attr('location', 'layouts.html');
$(location).attr('href', 'layouts.html');
$(location).prop('href', 'layouts.html');
.
.
5.获取当前日期几天前的日期
//获取当前日期几天前的日期（如时间的七天前的日期 getBeforeDate(7)）
function getBeforeDate(n) {
var n = n;
var d = new Date();
var year = d.getFullYear();
var mon = d.getMonth() + 1;
var day = d.getDate();
if (day <= n) {
if (mon > 1) {
mon = mon - 1;
}
else {
year = year - 1;
mon = 12;
}
}
d.setDate(d.getDate() - n);
year = d.getFullYear();
mon = d.getMonth() + 1;
day = d.getDate();
s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
return s;
}
调用示例：
var fiveDaysAgo = getBeforeDate(5); //5天前，
alert(fiveDaysAgo ); //结果为"2020-05-17" (今天为"2020-05-22")
.
4.根据指定的一个日期和相差的天数，获取另外一个日期
//根据指定的一个日期和相差的天数，获取另外一个日期
//dateParameter为指定已经存在的日期"yyyy-MM-dd"，例如"2020-05-01"
//num为相差天数，是整数类型
function addByTransDate(dateParameter, num) {
var translateDate = "", dateString = "", monthString = "", dayString = "";
translateDate = dateParameter.replace("-", "/").replace("-", "/"); ;
var newDate = new Date(translateDate);
newDate = newDate.valueOf();
newDate = newDate + num * 24 * 60 * 60 * 1000; //备注 如果是往前计算日期则为减号 否则为加号
newDate = new Date(newDate);
//如果月份长度少于2，则前加 0 补位
if ((newDate.getMonth() + 1).toString().length == 1) {
monthString = 0 + "" + (newDate.getMonth() + 1).toString();
} else {
monthString = (newDate.getMonth() + 1).toString();
}
//如果天数长度少于2，则前加 0 补位
if (newDate.getDate().toString().length == 1) {
dayString = 0 + "" + newDate.getDate().toString();
} else {
dayString = newDate.getDate().toString();
}
dateString = newDate.getFullYear() + "-" + monthString + "-" + dayString;
return dateString;
}
.
调用示例：
var newtime=addByTransDate("2020-05-01", 20);
alert(newtime); // 结果为 "2020-05-21" 文本类型
.
3. 比较两个日期的大小
//注意： 如果两个日期不同月 ，例如 startNum =20200421 endNum =20200501
// var num = endNum -startNum; //结果为80
//因此，该方法只能用来 比较两个时间的大小
var startDate="2020-05-21"; //开始时间
var endDate="2020-05-01"; //结束时间
//将文本框时间为int，判断大小
var startNum = parseInt(startDate.replace(/-/g, ''), 10); //startNum =20200521
var endNum = parseInt(endDate.replace(/-/g, ''), 10); //endNum =20200501
if (startNum > endNum) {
alert("开始时间不能大于结束时间！" );
return false;
}
.
2.计算两个日期 天数差、小时差、分钟差、秒差、毫秒差的函数，通用
//计算两个日期 天数差、小时差、分钟差、秒差、毫秒差的函数，通用
function GetDateDiff(startTime, endTime, diffType) {
//将yyyy-MM-dd的时间格式，转换为 yyyy/MM/dd的格式
startTime = startTime.replace(/\-/g, "/");
endTime = endTime.replace(/\-/g, "/");
//将计算间隔类性字符转换为小写
diffType = diffType.toLowerCase();
var sTime = new Date(startTime); //开始时间
var eTime = new Date(endTime); //结束时间
//作为除数的数字
var timeType = 1;
switch (diffType) {
case "second": //秒
timeType = 1000;
break;
case "minute": //分钟
timeType = 1000 * 60;
break;
case "hour": //小时
timeType = 1000 * 3600;
break;
case "day": //天
timeType = 1000 * 3600 * 24;
break;
default: //毫秒，直接返回就是毫秒差
break;
//月份（一个月多少天）和年份（一年多少天）都不固定，因此无法计算两个时间之差
}
return parseInt((eTime.getTime() - sTime.getTime()) / parseInt(timeType));
}
调用示例：
alert(GetDateDiff("2020-02-28 10:30:22", "2020-03-28 10:38:22", "minute")); //分钟
alert(GetDateDiff("2020-02-28 05:00:00", "2020-03-28 12:00:00", "hour")); //小时
alert(GetDateDiff("2020-02-28", "2020-03-28", "day")); //天
alert(GetDateDiff("2020-02-28 10:30:22", "2020-03-28 10:38:22", "day")); //天
.
1.计算两个日期天数差的函数
//计算两个日期天数差的函数，通用
function DateDiff(sDate1, sDate2) {
//sDate1和sDate2是文本类型的 yyyy-MM-dd格式
var aDate, oDate1, oDate2, iDays;
aDate = sDate1.split("-");
oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]); //转换为yyyy-MM-dd格式
aDate = sDate2.split("-");
oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
return iDays; //返回相差天数,整数类型
}
.
调用示例：
var strStartTime="2020-05-01"；
var strStartTime="2020-05-21"；
alert(DateDiff(strStartTime, endTime)); //结果为10 整数类型
.
扫一扫
1189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
