一些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 ...
随机推荐
- BZOJ2120:数颜色(数状数组套主席树)(带修改的莫对)
墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2. R P ...
- ubuntu下的google拼音输入法(终结版)
声明:此文章是从我的51cto博客上搬至于此. Ubuntu下SCIM应该是最好的中文输入法了,它与搜狗差不多,下面介绍它的安装方法: 1)终端输入: sudo apt-get remove scim ...
- [HNOI 2010] 弹飞绵羊
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2002 [算法] LCT动态维护森林连通性 时间复杂度 : O(NlogN ^ 2) ...
- 微信小程序把玩(三十)wx.request(object) API
这里通过干活集中营的API接口真实请求下数据.如果提示URL 域名不合法,请在 mp 后台配置后重试修改asdebug.js两行代码即可可看下面图 百牛信息技术bainiu.ltd整理发布于博客园 定 ...
- TQ210——S5PV210 uboot顶层mkconfig分析
转自:http://blog.csdn.net/wqx521/article/details/52491300 ############################################ ...
- 指定网卡进行ping操作
windows系统下:ping -S 查看当前网卡情况 ipconfig 有两块网卡,ip分别为 192.168.12.83.192.168.1.126 使用不同网卡分别ping百度 网卡1: pi ...
- VMware桥接模式选择宿主机物理网卡
当宿主机有多块物理网卡时,VMware桥接模式也要根据情况选择使用的物理网卡. 比如宿主机有两块物理网卡,一个连外网,一个连内网,如果想与内网组成局域网就需要选择宿主机的内网网卡,反之选择外网网卡,当 ...
- Flutter实战视频-移动电商-21.分类页_类别信息接口调试
21.分类页_类别信息接口调试 先解决一个坑 取消上面的GridVIew的回弹效果.就是在拖这个gridview的时候有一个滚动的效果 physics: NeverScrollableScrollPh ...
- httpServlet,GenericServlet,Servlet源码分析
httpServlet源码: /* * Licensed to the Apache Software Foundation (ASF) under one or more * contribut ...
- SCUTOJ - 362 - CC的族谱 - 树上倍增
https://scut.online/p/362 和LCA差不多,注意开大点不怕浪费. #include<bits/stdc++.h> using namespace std; type ...