分类：N10_前端
需求：checkbox 的透明度
语句：visibility: visible; opacity: 0；
QQ链接跳转：<a href="http://wpa.qq.com/msgrd?v=3&uin=******&menu=yes" target="_blank" class="link-wrap">业务01</a>
需求：checkbox 选中
语句：
<script type="text/javascript">
// $("[type='checkbox']").attr("checked",'true');//选中
$("[value='"+ids+"']").prop("checked",'true'); //选中value值为ids 的checkbox为选中的状态
$("[value='"+ids+"']").removeAttr("checked"); //移除选中
</script>
需求：判断checkbox 选中
语句：
<script type="text/javascript">
for(var i=0;i<l;i++){
if(aCh[i].checked == true){
}
if(aCh[l-1].checked == false){
}
}
</script>
需求：同一列商品，之选其中一个。（如商品只能选择其中一种颜色）
语句： <script>
$(function(){
$(".yListr ul li em").click(function(){
$(this).addClass("yListrclickem").siblings().removeClass("yListrclickem");
})
})
</script>
需求：点击选中，再次点击取消。
语句： <script>
$(function(){
$(".new li span").click(function() {
if($(this).hasClass("spanspan")){
$(this).addClass("spanspan2").removeClass("spanspan");
}else{
$(this).addClass("spanspan").removeClass("spanspan2");
}
});
})
</script>
需求：检查img 中的src 值是否为空。
语句：<script>
function CheckPost(){
var src=$("#imgshow").attr("src");
if(src==''){
return false;
}
}
</script>
需求：点击让下一级显示，并且其他的隐藏
语句：<script>
$('.nav .top-nav').click(function(){
if($(this).find('.sub').hasClass('show')){
$(this).find('.sub').removeClass('show')
}else{
$('.nav .top-nav').find('.sub').removeClass('show');
$(this).find('.sub').addClass('show');
}
})
</script>
需求：php 中输出JS跳转
语句： echo"<script type='text/javascript'>alert('登陆成功');location='huangying.html';</script>";
echo "<script>location.href='huangying.html'</script>";
需求：给当前导航li标签自动加active，有自动消失了【适合选项卡】
语句： <script>
$(function (){
$('#nky li').click(function (){
//把之前已有的active去掉
$('.active').removeClass('active');
//当前点击的li加上class
$(this).addClass("active");
});
})
</script>
需求：给小于10的数前面加'0';
语句： <script type ="text/javascript">
function iTwo(n){
if(n<10){
return '0'+n;
}else{
return ''+n;
}
//三目运算符 写法
function iTwo(n){
return n<10 ? '0'+n : ''+n
};
</script>
需求：时间戳转换为标准时间
语句：var unixtime = new Date(creattime*1000);
需求：将时间戳转换为日期
语句： <script type ="text/javascript">
function formatDate(now) { //将时间戳转换为日期
var year=now.getFullYear();
var month=now.getMonth()+1;
var date=now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
return year+"-"+iTwo(month)+"-"+iTwo(date)+" "+iTwo(hour)+":"+iTwo(minute)+":"+iTwo(second);
}
function iTwo(n){
if(n<10){
return '0'+n;
}else{
return ''+n;
}
</script>
输出：formatDate(unixtime)
需求：输出当前时间，并且自动走【可以定时】
语句：<script>
window.onload = function(){
var oBody = document.body;
setInterval(fnTime , 1000);
fnTime();
function fnTime(){
var s = new Date();
var iYear = s.getFullYear();
var iMonth = s.getMonth()+1;
var iDate = s.getDate();
var iDay = s.getDay();
var iHour = s.getHours();
var iMinu = s.getMinutes();
var iM = s. getSeconds();
var str = '';
if(iDay === 0){iDay = '星期日'};
if(iDay === 1){iDay = '星期一'};
if(iDay === 2){iDay = '星期二'};
if(iDay === 3){iDay = '星期三'};
if(iDay === 4){iDay = '星期四'};
if(iDay === 5){iDay = '星期五'};
if(iDay === 6){iDay = '星期六'};
str = iYear+'年'+iTwo(iMonth)+'月'+iTwo(iDate)+'日 '+iTwo
(iDay)+' '+iTwo(iHour)+': '+iTwo(iMinu)+': '+iTwo(iM);
oBody.innerHTML=str;
};
//三目运算符 写法
function iTwo(n){
return n<10 ? '0'+n : ''+n
};
}
</script>
需求：动态获取input的输入的值
语句： <input type="text" name="ceshi" id="id" >
<script>
function sub_zixun(){
var val =$('#id').val();
alert(val);
}
</script>
需求：显示隐藏的两个方法
语句：<script>
function show_qcord(){
var qs=document.getElementById('sn-qrcode');
qs.style.display="block"; //显示
}
function hide_qcord(){
var qs=document.getElementById('sn-qrcode');
qs.style.display="none"; //隐藏
}
</script>
需求：检查提交的表单
语句：
输入后、失去焦点时验证 onkeyup、onblur
提交时检查 onsubmit
<form name="add_php" method="post" action="add.php" onsubmit="return CheckPost();">
用户: <input name="user" type="text" size="20"><br/>
标题: <input name="title" type="text" size="20"><br/>
内容: <textarea name="content" rows="5" cols="50" ></textarea><br/>
<input name="submit" type="submit" value="提交">
<input name="test" type="text" size="20" value="<?php echo $rs5['content'] ?>"><br/>
</form>
<script>
function CheckPost()
{
if (add_php.words.value=="")
{
alert("请填写用单词");
add_php.words.focus();
return false;
}
if (add_php.explains.value=="")
{
alert("请填写用来源 ");
add_php.sourse.focus();
return false;
}
if (add_php.sourse.value.length<1)
{
alert("解释不能少于5个字符");
add_php.explains.focus();
return false;
}
if (add_php.remarks.value=="")
{
alert("必须要填写备注内容");
add_php.remarks.focus();
return false;
}
}
</SCRIPT>
需求：默认为选中，使用if判断 smarty中($smarty.post.advtypes的使用)
语句：<option <{if $shopid==$shopitem.id}>selected<{/if}>>默认选中</option>
说明：如果ajax的回调函数的执行中，会有反复的处理，可以使用的是点击触发。
说明：判断是不是等于，在js 中用==的是双等于。
说明：ajax 返回的值，也可以用js做判断，类似于在页面用if。如消息列表中的ajax返回的消息。
说明：标签的 target 属性中 有在指定的框架中打开，之前没有注意到的。
如：target="main_frame" 可以在main_frame 框架中打开。
需求：动态给页面的input赋值
语句： <script> $("#pages").val('1'); </script>
需求：用Ajax 给图片排序
语句：
<input type="text" name="id[]" value="<{$items.listorder}>" class="input1"> //要改变的值
<input type="hidden" name="pid[]" value="<{$items.id}>" class="input2"> // 表中的id
<script>
$(function(){
var inputList1 = $(".input1"); // 选中class=input的元素
var inputList2 = $(".input2");
var l1= inputList1.length; // 获得其长度
var l2 = inputList2.length;
$("#gh2").click(function() {
var ids=[];
var pid=[];
for(var i=0;i<l1;i++){
ids[i]=inputList1[i].value; // 通过循环将元素的值变成数组
pid[i]=inputList2[i].value;
}
$.ajax({
url:"/adminpage/adv/module/htadvadd",
type:"post",
data:{"id":ids,"pid":pid}, //用json的方式将数组传递到后台。
success:function(){
alert('修改成功');
location.reload();
}
});
});
})
</script>
需求：用form 表单，option ,input 提交数据
语句： <form>
<select name="">
<option vale="" selected="selected";>11</option>
<option vale="">22</option>
<option vale="">33</option>
</select>
<input name="" value=""/>
</form>
需求：点击调出菜单A，让图片加边框，让当前的显示，其余的隐藏。
语句： <script>
$(function(){
$(".yicang").click(function() {
$(this).find(".hids").css("display","block");
$(this).find(".paixusrc").css("border","2px solid #3D82C5");
$(this).siblings().find('.hids').css("display","none");//让当前的显示，其余的隐藏。
$(this).siblings().find('.paixusrc').css("border","none")
});
})
//find() 是查找当前元素集合中每个元素的后代
</script>
需求：append 多行内容的方法
语句：var htmldata= "<img src='back.png' />";
htmldata += "<img src='up.png' />";
htmldata += "<img src='down.png' />";
htmldata += "<img src='delete.png' />";
$(".append").append(htmldata);
需求：判断是否有选中的checkbox。如果有则底部变为蓝色，如果一个也没有则变为灰色。
语句： <script>
$(document).ready(function(){
var oDiv=document.getElementById('ulli');
var aCh=oDiv.getElementsByTagName('input');
var l = aCh.length;
$(".test2").click(function(){
alert(l);
for(var i=0;i<l;i++){
if(aCh[i].checked == true){
//$("#test").css('background','red');
$(".shanchu").addClass("shanchu2").removeClass("shanchu");
break;
}
if(aCh[l-1].checked == false){
//$("#test").css('background','yellow');
$(".shanchu2").addClass("shanchu").removeClass("shanchu2");
}
}
})
})
</script>
需求：判断是否当前的checkbox 为点击，如果点击了，则改变其背景以及让checkbox变为选中。
语句：<script>
$(function(){
$(".new li p2").click(function(e) {
var ids=$(e.target).attr('id')
//alert (ids);
if($(this).hasClass("spanspan")){
$(this).addClass("spanspan2").removeClass("spanspan");
$(".shanchu").addClass("shanchu2").removeClass("shanchu");
$("[value='"+ids+"']").attr("checked",'true');
}else{
$(this).addClass("spanspan").removeClass("spanspan2");
$("[value='"+ids+"']").removeAttr("checked");
}
});
})
</script>
需求：在li列表中插入html，可以给li排序
语句：<script>
function setSN(e){
var ul = document.getElementById(e);
var lis= ul.getElementsByTagName('li');
for(var i=0,l=lis.length;i<l;i++){
var tHTML = lis[i].innerHTML
lis[i].innerHTML = '<span>0'+(i+1)+'</span>'+tHTML;
}
}
</script>
需求：无刷新删除图片。
语句： <script>
function copyText(obj){
var bro=$(obj).next().attr("id");
//获得其id值
alert ('正在删除 '+bro+'的操作！！！');
$.ajax({
url:"http://fyw.cc/adminpage/adv/module/advdel",
type:"post",
data:{"id":bro},
success:function(){
var parentEl = obj.parentElement;
if(obj){
parentEl.className = 'disnon';
}
if(obj){
$('.disnon').remove();
}
}
});
}
</script>
需求：li列表，点击向下
语句：<script>
$(function(){
$(".add-pic li").click(function() {
if($(this).next()){
$(this).next().after($(this));
}
});
})
</script>
需求：jquery.prop的使用
语句：<script>
//jQuery 中 attr() 和 prop() 方法的区别
//根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
比对：
$("[value='"+ids+"']").attr("checked",'true'); //选中value值为ids 的checkbox为选中的状态。 改为下面的跟好
$("[value='"+ids+"']").prop("checked",'true'); //选中value值为ids 的checkbox为选中的状态
$(function(){
$(".new li p2").one("click",function(e){
var ids=$(e.target).attr('id')
//alert (ids);
if($(this).hasClass("spanspan")){
$(this).addClass("spanspan2").removeClass("spanspan");
$(".shanchu").addClass("shanchu2").removeClass("shanchu");
$("[value='"+ids+"']").prop("checked",true);
}else{
$(e).addClass("spanspan").removeClass("spanspan2");
$("[value='"+ids+"']").prop("checked",false);
}
});
})
</script>
需求：mui的使用如果不能选择<a>标签
语句：<script>
mui(".mui-table-view").on('tap','.mui-table-view-cell a',function(e){
jump_url(this.href);
})
function jump_url(aa){
window.location.href=aa;
}
</script>
需求：如果给div 加了mui-scroll-wrapper ，不能显示。
语句：给div加 style="margin-top:0px;position: fixed !important;"
需求：JS中一些小的应用列表
语句：<script>
if(confirm('确定操作吗？')) //删除前请确认.
onclick="return confirm('确定选为全部已读吗？')" //点击确认提示
var ids=$(e.target).attr('id') //获得点击事件的id. //$("p2").click(function(e).
$("[value='"+ids+"']").attr("checked",'true'); //选中value值为ids 的checkbox为选中的状态。 改为下面的跟好
$("[value='"+ids+"']").prop("checked",'true'); //选中value值为ids 的checkbox为选中的状态
$("[value='"+ids+"']").removeAttr("checked"); //移除value值为ids 的checkbox为选中的状态
$(this).addClass("spanspan2").removeClass("spanspan"); //修改点击事件的Class。
$("#test").css('background','yellow'); //设置class 的属性值。
$("[type='checkbox']").attr("checked",'true'); //选中所有的checkbox,将其变为选中的状态。
$("ul").append("<li><img src="+src+" /></li>"); //给 UL 增加li 的标签。
var src=$("#imgshow").attr("src"); //获取id为imgshow的 img 的src路径。
$(obj).next().attr("id"); //获取当前元素下一个的id. 上层代码 ：onclick="copyText(this)" function copyText(obj)
if(obj){ parentEl.className = 'disnon';}
if(obj){$('.disnon').remove();} // 两个结合起来可以给点击的事件加属性，让后删除。
if($(this).next()){ $(this).next().after($(this)); } //点击当前的元素，向下移动。
if($(this).prev()){ $(this).prev().before($(this)); } //点击当前的元素，向上移动。
$(function(){
$(".lidown").click(function() {
if($(this).parent().parent().next())
$(this).parent().parent().next().after($(this).parent().parent());
});
}) // 让当前元素的父元素的父元素变化。
-
var lis= ul.getElementsByTagName('li'); //获得所有UL下的li
var aCh=oDiv.getElementsByTagName('input'); //获得ODIV 下的input。这是就可以用ach.length 的属性进行循环。
var times=new Date().getTime(); //获得时间戳。
Thinkphp中 Ajax 返回的格式：$this->ajaxReturn('这里是我要的数据','信息1',1); (返回数据,提示信息,操作状态)
console.log(); //Js可以在控制台中输出ajax 放回的数组 。
val() //是返回属性value对应的值
siblings() //显示当前，隐藏其余的选项。
alert(JSON.stringify(backinfo.content));//数组变成字符串
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
<input type="text" style="border-radius:10px;">
</script>
需求：ajxa 刷新当前页
语句：window.location.reload();
需求：点击图片向下一步
语句： <script>
$(function(){
$(".lidown").click(function() {
if($(this).parent().parent().next())
$(this).parent().parent().next().after($(this).parent().parent());
});
})
</script>
需求：点击图片向上一步
语句：<script>
$(function(){
$(".liup").click(function() {
if($(this).parent().parent().prev())
$(this).parent().parent().prev().before($(this).parent().parent());
});
})
</script>
需求：广告管理删除图片
语句：<script>
$(function(){
$(".dels").click(function() {
var pli = $(this).parent().parent();
var delid=$(this).parent().parent().attr('id');
//var imgs=
var url ='/index.php?ctrl=shopmanage&action=advdel&datatype=json';
var info = {"id":delid};
var backinfo = ajaxback(url,info);
if(backinfo.flag == true){
if(backinfo.content){
diaerror(backinfo.content);
}else{
diaerror('删除失败');
}
}else{
artsucces_link('删除成功','',1);
}
});
})
</script>
需求：首页滚动插件如下：
语句: <script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
//滚动插件
(function($){
$.fn.extend({
Scroll:function(opt,callback){
//参数初始化
if(!opt) var opt={};
var _this=this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(), //获取行高
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒）
timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
if(line==0) line=1;
var upHeight=0-line*lineH;
//滚动函数
scrollUp=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}
//鼠标事件绑定
_this.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval("scrollUp()",timer);
}).mouseout();
}
})
})(jQuery);
$(document).ready(function(){
$("#scrollDiv").Scroll({line:1,speed:500,timer:2000});//多行修改line的值就行，就是同时跳动多条。
});
</script>
<div id="scrollDiv">
<ul>
<li><a href="/shopmanage/messages/go/id">
</li>
</ul>
</div>
需求：移出不需要的属性，用removeAttr() 方法
语句：<script>
$("button").click(function(){
$("p").removeAttr("id");
});
</script>
需求：获取所有的input
语句：$("input ")
需求：input框的checkbox 设置为透明：
语句：visibility: visible; opacity: 0;
需求：diaplay中原生的与js的区别
语句:
<script>
function show_qcord(){
var qs=document.getElementById('sn-qrcode');
qs.style.display="block"; //显示
qs.css('display','block')
}
function hide_qcord(){
var qs=document.getElementById('sn-qrcode');
qs.style.display="none"; //隐藏
qs.css('display','none')
}
<script>
需求：框架中打开
语句:标签的 target 属性中 有在指定的框架中打开，之前没有注意到的。
如：target="main_frame" 可以在main_frame 框架中打开。
需求：js 时间戳
语句:
<script>
function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
}
alert(getLocalTime(1177824835));
function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
alert(1111);
}
alert(getLocalTime(creattime));
//结果是2010年12月23日 10:53
//第二种
function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,17)
}
alert(getLocalTime(creattime));
//第三种 格式为：2010-10-20 10:00:00
function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
}
alert(getLocalTime(creattime));
var dates = new Date(creattime);
alert(dates);
////////////////////////////
alert(creattime);
var d= new Date(1452523696); //
alert(d);
//////////////////////////////
function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
}
alert(getLocalTime(1177824835));
function formatDate(now) {
var year=now.getYear();
var month=now.getMonth()+1;
var date=now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
}
var d=new Date(creattime);
alert(formatDate(d));
window.onload = function(){
var oBody = document.body;
setInterval(fnTime , 1000);
fnTime();
function fnTime(){
var s = new Date();
var iYear = s.getFullYear();
var iMonth = s.getMonth()+1;
var iDate = s.getDate();
var iDay = s.getDay();
var iHour = s.getHours();
var iMinu = s.getMinutes();
var iM = s. getSeconds();
var str = '';
if(iDay === 0){iDay = '星期日'};
if(iDay === 1){iDay = '星期一'};
if(iDay === 2){iDay = '星期二'};
if(iDay === 3){iDay = '星期三'};
if(iDay === 4){iDay = '星期四'};
if(iDay === 5){iDay = '星期五'};
if(iDay === 6){iDay = '星期六'};
str = iYear+'年'+iTwo(iMonth)+'月'+iTwo(iDate)+'日 '+iTwo(iDay)+' '+iTwo(iHour)+': '+iTwo(iMinu)+': '+iTwo(iM);
oBody.innerHTML=str;
};
//三目运算符 写法
function iTwo(n){
return n<10 ? '0'+n : ''+n
};
// 常规if（）{}else{}写法
// function iTwo(n){
// if(n<10){
// return '0'+n;
// }else{
// return ''+n;
// }
// };
}
function formatDate(now) { //将时间戳转换为日期
var year=now.getFullYear();
var month=now.getMonth()+1;
var date=now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
return year+"-"+iTwo(month)+"-"+iTwo(date)+" "+iTwo(hour)+":"+iTwo(minute)+":"+iTwo(second);
}
function iTwo(n){
if(n<10){
return '0'+n;
}else{
return ''+n;
}
};
var unixtime = new Date(creattime*1000); //获得标准时间
</script>
需求：
语句:
<script>
jquery和js分别可以实现对div的隐藏和显示
1、jQuery对div的显示和隐藏：
$("#id").show()；
$("#id").hide();
2、div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白
style="visibility: none;"
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示
3、style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示
4、循环遍历.each(function(){})
var jia =new Array();
var shu =new Array();
var shu_zong =new Array();
$("#cart .cart_spans").each(function(){
if($(this).hasClass("cart_spans")){
jia.push($(this).attr('data-price'));
shu.push($(this).attr('data-number'));
var jias=$(this).attr('data-price');
var shus=$(this).attr('data-number');
shu_zong.push(jias*shus);
};
})
5、remove() ，衍生词：removeAttr();removeClass(),removeChild();
6、设置H5的属性_setAttribute
var ii=document.getElementById("I-"+rec);
var ii2=document.getElementById("C-"+rec);
ii.setAttribute("data-number",$aaa);
ii2.setAttribute("data-number",$aaa);
7、parseInt() 与parseFloat() 的js转换函数。
8、pash()函数的使用
$("#cart .span_cha").each(function(){
if($(this).hasClass("cart_spans")){
goods_attr.push($(this).attr('data-attr'));
goods_number.push($(this).attr('data-number'));
};
});
</script>
需求：localStorage [本地存储]
语句：
<script>
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：
localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值
这里最推荐使用的自然是getItem()和setItem()，清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。另外，HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下：
var storage = window.localStorage;
function showStorage(){
for(var i=0;i<storage.length;i++){
//key(i)获得相应的键，再用getItem()方法获得对应的值
document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
}
}
目前javascript使用非常多的json格式，如果希望存储在本地，可以直接调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为json格式，如下所示：
localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值
枚举localStorage的方法：
for(var i=0;i<localStorage.length;i++){
var name = localStorage.key(i);
var value = localStorage.getItem(name);
}
删除localStorage中存储信息的方法：
localStorage.removeItem("key");//删除名称为“key”的信息。
localStorage.clear();//清空localStorage中所有信息
通过getItem或直接使用localStorage["key"]获取到的信息均为实际存储的副本。
例如：
localStorage.key = {value1:"value1"};
localStorage.key.value1='a';
这里是无法对实际存储的值产生作用的，下面的写法也不可以：
localStorage.getItem("key").value1="a";
</script>
需求：防止1次点击触发多次执行
语句:
<script>
var fbing=false;
mui(".mui-table-view").on('tap','#fb',function(){
if(fbing==true){
return false;
}
fbing=true;
var article_id=document.getElementById("tid").value;
var content =document.getElementById("textarea").value;
mui.ajax('article.php?content_id='+article_id,{
data:{
content:content,
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
success:function(data){
if(data){
alert('发布评论成功');
fbing=false;
}
}
});
})
</script>
需求：鼠标移入与移出执行的函数
语句:
<script type="text/javascript">
$(function(){
$(".weixin").mouseover(function(){
$(".erwei").css('display','block');
});
$(".weixin").mouseleave(function(){
$(".erwei").css('display','none');
});
});
</script>
需求：添加、克隆，包含。
语句:
<script>
$(function(){
$(".pfocus .big").append($(".picturebox img").clone());
$(".pfocus .big img").wrap("<li></li>");
$(".pfocus .small").append($(".picturebox img").clone());
$(".pfocus .small img").wrap("<li></li>");
$(".pfocus .big img").each(function(i){
$(this).wrap("<a></a>");
$(this).parent().attr("href",$(this).attr("src"));
})
$(".pfocus .big a").attr("rel","example_group").fancybox();
$(".picturebox").remove();
})
</script>
<script>
$(function(){
$(".pfocus").focusbox(".small",".small > li",".big",".big > li","click","5000");
})
</script>
<div class="picturebox" style="display:none;">
{dede:field.product_pic/}
</div>
<script type="text/javascript" src="/templets/default/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/templets/default/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/templets/default/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
需求：页面涂鸦
语句:
修改=>javascript:document.body.contentEditable='true';docuent.designMode='on'; void 0
改回来=>javascript:document.body.contentEditable='false'; void 0
需求：判断是上下午
语句：
<script type="text/javascript">
today=new Date();
var day; var date; var hello;
hour=new Date().getHours()
if(hour < 6)hello=' 凌晨好! '
else if(hour < 9)hello=' 早上好! '
else if(hour < 12)hello=' 上午好! '
else if(hour < 14)hello=' 中午好! '
else if(hour < 17)hello=' 下午好! '
else if(hour < 19)hello=' 傍晚好! '
else if(hour < 22)hello=' 晚上好! '
else {hello='夜深了! '}
var webUrl = webUrl;
document.write(' '+hello);
</script>
需求：给DIV加class
语句:
<script type="text/javascript">
function toRed()
{
var oDiv=document.getElementById('div1');
oDiv.className='box';
}
</script>
需求：表单验证
语句：
<form name="myform" id="myform" action="{:URL('User-Post/insert')}" method="post" onSubmit="return frmchk(this);">
<input type="hidden" name="catid" value="6" />
</form>
<script>
function frmchk(frm){
var frm=frm || document.getElementById('myform');
if (frm.title.value=="")
{
alert("对不起，请输入主题");
frm.title.focus();
return false;
}
if (frm.username.value=="")
{
alert("对不起，请输入姓名");
frm.username.focus();
return false;
}
if(frm.telephone.value=="")
{
alert("对不起，请填写手机号码");
frm.telephone.focus();
return false;
}
if(frm.telephone)
{
var tel = frm.telephone.value;
var reg = /^0?1[3|4|5|8|7][0-9]\d{8}$/;
if (reg.test(tel)) {
}else{
alert("手机号格式不对");
frm.telephone.focus();
return false;
};
}
if (frm.email.value=="")
{
alert("对不起，请输入邮箱");
frm.email.focus();
return false;
}
if(frm.email)
{
var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if(pattern.test(frm.email.value)){
}else{
alert("邮箱格式不对");
frm.email.focus();
return false;
}
}
if (frm.content.value=="")
{
alert("对不起，请填写留言信息");
frm.content.focus();
return false;
}
}
</script>
需求：.text() 与eq()的使用。
语句：
<script type="text/javascript">
var text=$("#li2 a:eq(0)").text();
if(text){
$(".nav-r ul li:eq(0)").removeClass('active');
}
$(".nav-r ul li a").each(function(){
if($(this).text()==text){
$(this).parent().addClass('active');
}
})
</script>
需求：replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
语句：
需求： //收藏的实现
语句：
<script>
function jrsc(){
var article_id=document.getElementById("tid").value;
$.post("article.php?act=shoucang",{cang_id:article_id},function(data){
if(data=="11"){
mui.toast('收藏成功');
$("#ar-"+article_id).addClass("keep-active");
}else if(data=="22"){
mui.toast('移除收藏');
$("#ar-"+article_id).removeClass("keep-active");
}else if(data=="33"){
mui.toast('登录后才可以收藏');
}
})
}
</script>
需求：填写6位的密码
语句：
<input type="password" value="" onkeyup="return T_onkeyup('t1','t2','t1')" id="t1" maxlength="1"/>
<input type="password" value="" onkeyup="return T_onkeyup('t2','t3','t1')" id="t2" maxlength="1"/>
<input type="password" value="" onkeyup="return T_onkeyup('t3','t4','t2')" id="t3" maxlength="1"/>
<input type="password" value="" onkeyup="return T_onkeyup('t4','t5','t3')" id="t4" maxlength="1"/>
<input type="password" value="" onkeyup="return T_onkeyup('t5','t6','t4')" id="t5" maxlength="1"/>
<input type="password" value="" onkeyup="return T2_onkeyup('t6','t5')" id="t6" maxlength="1"/>
<script>
function T_onkeyup($a,$b,$c) {
if(document.getElementById($a).value.length==1){
document.getElementById($b).focus();
}
if(document.getElementById($a).value.length==0){
document.getElementById($c).focus();
}
}
function T2_onkeyup($a,$c) {
if(document.getElementById($a).value.length==0){
document.getElementById($c).focus();
}
next_password();
}
</script>
需求：用鼠标滚轮滚动控制图片的缩小放大
语句：
<script language="javascript">
function bbimg(o){
var zoom=parseInt(o.style.zoom, 10)||100;
zoom+=event.wheelDelta/12;
if (zoom>0) o.style.zoom=zoom+'%';
return false;
}
</script>
</head>
<body>
<p>将鼠标放在图片上，点击一下，然后滚动鼠标滚轮试试看</p>
<p><img border="0" src="images/m01.jpg" onmousewheel="return bbimg(this)"></p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
<script>
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 值从 0 开始）
:gt(no) $("ul li:gt(3)") 列举 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列举 index 小于 3 的元素
:not(selector) $("input:not(:empty)") 所有不为空的输入元素
el1,el2,el3 $("h1,div,p") 所有 <h1>、<div> 和 <p> 元素
.class,.class $(".intro,.demo") class 为 "intro" 或 "demo" 的所有元素
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
jQuery nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：
实例
$(document).ready(function(){
$("h2").nextUntil("h6");
});
//form表单的提交
function validate(){
document.getElementByIdx_x('myform').submit();
}
<script type="text/javascript">
live() 与 slideToggle()的使用
//当点击按钮时，隐藏或显示 p 元素：
$("button").live("click",function(){
$("p").slideToggle();
});
//失去焦点，与获得焦点
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){ //获得焦点
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){ //失去焦点
$("input").css("background-color","#D6D6FF");
});
});
//向 <p> 元素添加 click 事件处理程序：
$("p").on("click",function(){
alert("The paragraph was clicked.");
});
</script>
<script type="text/javascript">
//统计输入框的字数
$(function() {
$(document).keyup(function() {
var text = $("#consult_content").val();
var counter = text.length;
$("#name_word").text(counter+'/120');
});
});
</script>
//offset()的使用
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").offset(function(n,c){
newPos=new Object();
newPos.left=c.left+100;
newPos.top=c.top+100;
return newPos;
});
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>设置 p 元素的 offset 坐标</button>
</body>
</html>
<script>中嵌套‘<script>’
<script>document.writeln("<script>alert(\'JS\');<\/script>");</script>