一些JS基本小内容
获取select选中内容:
1、获取select表单内容
<select id="sel">
<option value="v1">1</option>
<option value="v2">2</option>
<option value="v3">3</option>
</select>
Jquery获取选中的内容:
$("#sel option:selected").val() //获取到选中的value值,如v1,v2
$("#sel option:selected").text() //获取到选中的文本值 ,如1,2
javascript原生的方法
1:拿到select对象: var myselect=document.getElementById("sel"); 2:拿到选中项的索引:var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index 3:拿到选中项options的value: myselect.options[index].value; 4:拿到选中项options的text: myselect.options[index].text;
2.获取表格内容
<table>
<tr>
<td class="moveTag">移动</td>
<td class="del">删除</td>
</tr>
</table>
js:
function toArray(a) {
return [].slice.call(a);
}
toArray(document.querySelectorAll('.moveTag')).forEach(function (v) {
v.addEventListener('click', function () {
//点击移动之后要做的事情
//*******
})
})
3.监视滚动条事件
<div class="white-bg" style="height:500px;">
<div style="height:800px; overflow: auto;"></div>
</div> $(document).ready(function () {
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
var nScrollTop = 0; //滚动到的当前位置
var nDivHight = $(".white-bg").height();
$(".white-bg").scroll(function () {
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
if (nScrollTop + nDivHight >= (nScrollHight-100))
{
//nScrollTop + nDivHight >= (nScrollHight-100)表示滚动条距离页面底部100培px的时候,也可以为nScrollTop + nDivHight >= nScrollHight表示滚动到底部之后进入if条件
/*滚动条滚动到指定位置之后所要执行的事情在此编写*/ }
});
})
4.获取指定div的style/给指定div设置css样式
<div id="appDownload"> </div>
<div class="codeweixin"></div> <script>
$(document).ready(function(){
if ($('#appDownload').css('display')!= "none") {
$(".codeweixin").css("margin-bottom", "70px")
} else {
$(".codeweixin").css("margin-bottom", "")
}
})
</script>
//获取css样式$('#appDownload').css('display')
//设置css样式$(".codeweixin").css("margin-bottom", "")
5.js分割字符串并获取最后一个元素split()
//方法1 内置pop()方法
var val ="C:\fakepath\btn5.png";
var arr = val.split("\\"); //以\为分隔符分割字符串,arr=["C:",
// "fakepath", "btn5.png"]
var lat = arr.pop(); //获取最后一个元素 btn5.png,此时arr=["C:",
// "fakepath"] //pop()方法在获取了数组的最后一个元素的同时也将原数组的最后一个元素给删除了。如果数组已经为空,则该方法不改变数组,并返回 undefined 值 //方法2
var val ="C:\fakepath\btn5.png";
var arr = val.split("\\"); //以\为分隔符分割字符串,arr=["C:",
// "fakepath", "btn5.png"]
var lat = arr[arr.length-1]; //获取最后一个元素 btn5.png
6.js合并字符串Join()
var arr = ["a","b","c"];
var join = arr.join("/");
//此时join就连接了字符串,join = "a/b/c"
7.Js对文本框验证输入只能为数字等内容
<div>
验证只能输入数字<input type="text" onkeyup="javascript:ReNumber1(this)" /><br />
验证只能输入指定范围内的数字(0-100)<input type="text" onkeyup="javascript:ReNumber(this)" /><br />
验证只能输入数字和小数点<input type=text t_value="" o_value="" onkeypress="javascript: keyPress(this)" onkeyup=" javascript: keyUp(this)" onblur=" javascript: onBlur(this)"><br />
只能输入英文字母和数字,不能输入中文<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"><br />
只能输入数字和英文(只能输入数字)<input onkeyup="value=value.replace(/[^\d|chun]/g,'')"><br />
小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:<input onkeypress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">
</div>
<script>
//验证文本框只能输入数字和小数点
function keyPress(ob) {
if (!ob.value.match(/^[\+\-]?\d*?\.?\d*?$/))
ob.value = ob.t_value;
else ob.t_value = ob.value;
if (ob.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))
ob.o_value = ob.value;
if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 46 || /\.\d\d$/.test(ob.value))
event.returnValue = false
}
function keyUp(ob) {
if (!ob.value.match(/^[\+\-]?\d*?\.?\d*?$/)) ob.value = ob.t_value; else ob.t_value = ob.value; if (ob.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/)) ob.o_value = ob.value;
}
function onBlur(ob) {
if (!ob.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/)) ob.value = ob.o_value; else { if (ob.value.match(/^\.\d+$/)) ob.value = 0 + ob.value; if (ob.value.match(/^\.$/)) ob.value = 0; ob.o_value = ob.value };
} // 验证文本框只能输入数字
function ReNumber1(obj) {
var count = 100; //count为指定范围的数字
var reg = "/^[\d]+$/g"; //验证只能输入数字的正则
//if (obj.value > count || obj.value == 0) {
// obj.value = ""; //输入内容不合格时文本框内容为""
// return false;
//}
if (obj.constructor == String) {
var re = obj.match(reg);
return true;
}
obj.value = obj.value.replace(/\D/g, ''); //输入的内容不符合要求时不显示在文本框,自动删除
return false;
}
//验证文本框只能输入指定范围内的正数
function ReNumber(obj) {
var count = 100; //count为指定范围的数字
var reg = "/^[\d]+$/g"; //验证只能输入数字的正则
if (obj.value > count || obj.value == 0) {
obj.value = ""; //输入内容不合格时文本框内容为""
return false;
}
if (obj.constructor == String) {
var re = obj.match(reg);
return true;
}
obj.value = obj.value.replace(/\D/g, ''); //输入的内容不符合要求时不显示在文本框,自动删除
return false;
}
</script>
8.设置元素的disabled属性:
$("#submitBtn").attr("disabled","disabled")
$("#submitBtn").attr("disabled","")
移除disabled属性:
$('#submitBtn').removeAttr("disabled");
9.获取指定类名的元素的display属性:
$(".manageMode").each(function () {
//判断每一个div,其css中display是否为block
if($(this).css("display")=="block"){
console.log("这个就是你所要找的了")
}
})
10.判断某个字符串是否包含另一字符串
var a = "天下,大同,一致";
var b = "天下";
var c = "大地"; var d = a.indexOf(b); (d>=0代表包含,反之则不包含)
var e = a.indexOf(c); (e=-1代表不包含)
一些JS基本小内容的更多相关文章
- JS处理事件小技巧
今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...
- 撸一个JS正则小工具
写完正则在浏览器上检测自己写得对不对实在是不方便,于是就撸了一个JS正则小demo出来. demo demo展示 项目地址 代码部分 首先把布局样式先写好. <!DOCTYPE html> ...
- JS控制页面内容
JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...
- VUE.JS和小程序的共通之处
我是先学习的小程序开发,之后才了解到vue.js.也是一直没有时间去看相关vue.js的知识和内容.现在回顾起来,小程序和vue.js都是前端的内容. 例如小程序中的目录结构物page+app.js+ ...
- Atitit 发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化
Atitit 发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化 大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web serv ...
- js对文章内容进行分页示例代码
这篇文章主要介绍了使用js对文章内容进行分页的具体实现,需要的朋友可以参考下 Thinkphp中文章显示代码: 代码如下: <div id="showContent"> ...
- 如是使用JS实现页面内容随机显示
之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...
- Node.js读取文件内容
原文链接:http://blog.csdn.net/zk437092645/article/details/9231787 Node.js读取文件内容包括同步和异步两种方式. 1.同步读取,调用的是r ...
- pixi.js 微信小游戏 入手
pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...
随机推荐
- hdu-5773 The All-purpose Zero(LIS)
题目链接: The All-purpose Zero Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (J ...
- bootstrap学习大纲
bootstrap 学习分三部分,分别是 css样式,css组件,js插件. 下面介绍三部分分别要学习的内容: 1.css样式:栅格系统,排版,代码,表格,表单,按钮,图片,辅助类,响应式工具. 2. ...
- 让人头疼一晚上的 select 下拉框赋值问题
一开始做这个功能 批量修改用户组 , 当勾选若干用户组后, 点击[批量修改用户组]->ajax提交后台查询->返回下拉菜单列表内容-> 弹出对话框并赋予下拉菜单select 动态数值 ...
- 「LuoguP1430」 序列取数(区间dp
题目描述 给定一个长为n的整数序列(n<=1000),由A和B轮流取数(A先取).每个人可从序列的左端或右端取若干个数(至少一个),但不能两端都取.所有数都被取走后,两人分别统计所取数的和作为各 ...
- Field 'CID' doesn't have a default value
解决:在数据库客户端navicat中设计表勾选自动递增
- Boost-ioservices介绍
IO模型 io_service对象是asio框架中的调度器,所有异步io事件都是通过它来分发处理的(io对象的构造函数中都需要传入一个io_service对象). asio::io_service i ...
- kafka数据可靠性深度解读【转】
1 概述 Kakfa起初是由LinkedIn公司开发的一个分布式的消息系统,后成为Apache的一部分,它使用Scala编写,以可水平扩展和高吞吐率而被广泛使用.目前越来越多的开源分布式处理系统如Cl ...
- (转)data Table的用法大全
jqyery dataTable 基本用法 一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/node/jquery-d ...
- 为何在有 DOCTYPE 的 HTML 文档之上仍然还会出现混杂模式?
不使用 DOCTYPE 一定会使 HTML 文档处于混杂模式,然而使用了 DOCTYPE,也不一定就能够使文档在所有浏览器中均处于标准模式. DOCTYPE 本身不就是一个“开关”吗?为何在有 DOC ...
- Linux文件IO操作函数概述
文件概述 Linux中,一切皆文件.文件为操作系统服务和设备提供了一个简单而一致的接口.这意味着程序完全可以像使用文件那样使用磁盘文件.串行口.打印机和其他设备. 也就是说,大多数情况下,你只需要使用 ...