一些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 ...
随机推荐
- [转载] Android raw与assets区别
*res/raw和assets的相同点: 1.两者目录下的文件在打包后会原封不动的保存在apk包中,不会被编译成二进制. *res/raw和assets的不同点:1.res/raw中的文件会被映射到R ...
- dyld: could not load inserted library '/Developer/usr/lib/libBacktraceRecording.dylib' because no suitable image found. Did find:
错误: dyld: could not load inserted library '/Developer/usr/lib/libBacktraceRecording.dylib' because n ...
- UOJ309 UNR #2 排兵布阵
包含不小于$\sqrt n$列的只有不大于$\sqrt n$行,修改时这些行打标记,否则暴力更新,操作一列的时候暴力更新这些行.合并没啥影响直接搞就是了.更新需要访问位置,感觉必须用哈希表,并不是特别 ...
- codevs 1046 旅行家的预算
传送门 1046 旅行家的预算 1999年NOIP全国联赛普及组NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold题解 题目描述 Des ...
- vue不支持IE8的原因
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性, 并使用 Object.defineProperty 把这些属性全部转为 getter ...
- GitHub的使用方法
版本控制系统 > Git 分布式 > Subversion 集中式 1. 安装git: # apt-get install git //root权限 $ sudo apt-get inst ...
- spark运行模式之一:Spark的local模式安装部署
Spark运行模式 Spark 有很多种模式,最简单就是单机本地模式,还有单机伪分布式模式,复杂的则运行在集群中,目前能很好的运行在 Yarn和 Mesos 中,当然 Spark 还有自带的 Stan ...
- JAVA 反射机制 获得 private 变量
public class Triangle { // 定义三角形的三边 protected long lborderA = 0; protected long lborderB = 0; protec ...
- 使用Bootstrap模态框实现增删改查功能
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 本文实现的是使用模态框实现简单的增删改查的功能. ...
- 3-3 浮点型字面量 & 3-4浮点型案例
双精度的浮点类型,末尾加d或者D 3-4浮点型案例 如果一个浮点类型的末尾什么也不写 他表示就是一个double类型的.所以这里定义报错了. float f=1234.328; 把一个范围大的数赋值给 ...