JQuery总结

php提交JSON并返回

JS 事件 DOM2 的

大 | 中 | 小

[

2014/09/16 16:32 | by 刘新修 ]

1. 利用JQuery中如何判断元素中是否有文本

JavaScript代码

<script type="text/javascript">
$(function(){
$("body").each(function(){
if($(this).find("h1").text().trim()==""){
$(this).css("background","blue");
}else{
$(this).css("background","red");
}
});
});
</script>

注：//trim()方法是去空格，$.trim()函数删除提供字符串的所有换行符,空格（包括非中断空格

2. 判断ul标签下是否有li元素

JavaScript代码

var jqObj = $(this);
if(!jqObj.has('li').length){
jqObj.hide();
}

3. 遍历/判断子节点（带某些参数子节点）的个数，如果有少于1的给出提示.

JavaScript代码

$("div[id^=div]").each(function(){
//alert($(this).find(".subclass").children('ul').size());
var lili=$(this).find(".subclass").children('ul').size();
//alert(lili)
if(lili<1){
alert("ddd")
}
});

XML/HTML代码

<div id="div1" class="topclass"><ul><li></li></ul><div class="subclass"><ul><li></li></ul><ul><li></li></ul></div></div>
<div id="div2" class="topclass"><ul><li></li></ul><div class="subclass"><ul><li></li></ul></div></div>

YY项目中的例子：

JavaScript代码

//限制每提最少选择一个答案
var stop=true;
$(".lisbox").each(function () {
//alert($(this).find(".subclass").children('ul').size());
var lili = $(this).find("input:checked").length;
//alert(lili)
if (lili < 1) {
stop=false;
}
});
if(!stop){ alert("每个调查最少选择一个答案哦～");return false; }
$.ajax({ ... })

4. 检查某个元素是不是再另外一个元素中？

XML/HTML代码

<ul><li></li></ul>
<script>
$("ul").append("<li>" + ($("ul").has("li").length ? "yes__" : "no_") + "</li>");
$("ul").has("li").addClass("full");
</script>

5. 遍历保存所有Input内地值

JavaScript代码

<script>
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
</script>
====================================================
Values: John, password, http://qq.com/

6.邮件订阅提交

JavaScript代码

<script type="text/javascript">
function subscribe(){
$.post('/ebapi/subscribe.php', {"ispub":1, "email":$("input[name=email]").val()}, function(jsondata){
if (jsondata.code == 1){
$('.bu_success').css("display", "block");
$('.bu_error').css("display", "none");
$('.bu_success').html('订阅成功');
}else{
$('.bu_success').css("display", "none");
$('.bu_error').css("display", "block");
if (jsondata.code == 2)
$('.bu_error').html('您已经订阅了，不需要重复订阅');
else if (jsondata.code == -1)
$('.bu_error').html('邮箱格式错误，请重新输入');
else if (jsondata.code == 0)
$('.bu_error').html('订阅失败');
}
}, 'json');
}
$('input[name="email"]').bind('keypress', function(event){
if (event.keyCode == '13'){
subscribe();
}
});
$('#subscribeBtn').bind('click', function(){
subscribe();
});
</script>
*********************************************
返回Json格式:｛code: 1｝

7.通用Tab选项卡

JavaScript代码

//tab标签切换
var $tabcon=$(".tabbox .tabcon .tcon");
var $tabconliN=$(".tabbox li");
var $tabconliH=$(".tabbox li[name='tabH']");
var $tabconliC=$(".tabbox li[name='tabC']");
$tabconliH.hover(function(){
$(this).siblings().removeClass("current").addClass("current");
var index = $tabconliN.index(this);
$tabcon.eq(index).show().siblings('.tcon').hide();
});
$tabconliC.click(function(){
$(this).siblings().removeClass("current").addClass("current");
var index = $tabconliN.index(this);
$tabcon.eq(index).show().siblings('.tcon').hide();
});

XML/HTML代码

<div class="tabbox">
<div class="tit">
<ul>
<li name="tabC">aaaaaaaaaa</li>
<li name="tabC">bbbbbbbbbb</li>
<li name="tabC">cccccccccc</li>
</ul>
</div>
<div class="tabcon">
<div class="tcon">1111</div>
<div class="tcon">2222</div>
<div class="tcon">3333</div>
</div>
</div>

8. 提交问卷实例（抓取页面中所有被选中的Input_value值，及对应的问题ID，输出Json）

JavaScript代码

function showVal(){
var val=$('.lisbox').map(function(){
var pid=$(this).attr('id');
var val=$('input:checked',this).map(function(){
return $(this).val();
}).get();
var obj={key:pid,id:val};
return obj;
}).get();
alert(JSON.stringify(val));

XML/HTML代码

<div class="lisbox" id="120">
<div class="lisT l-h-30 co30">1.你从哪里知道的我们的？</div>
<input type="radio" name="an0" value="316" id="316"><label for="316">电视广告</label>
<input type="radio" name="an0" value="318" id="318"><label for="318">地铁公交广告</label>
<input type="radio" name="an0" value="317" id="317"><label for="317">互联网文字广告</label>
<input type="radio" name="an0" value="315" id="315"><label for="315">互联网视频广告</label>
<input type="radio" name="an0" value="327" id="327"><label for="327">亲朋好友介绍</label>
</div>
<div class="lisbox" id="120">
<div class="lisT l-h-30 co30">2.你从哪里知道的我们的？</div>
<input type="checkbox" name="an0" value="316" id="316"><label for="316">电视广告</label>
<input type="checkbox" name="an0" value="318" id="318"><label for="318">地铁公交广告</label>
<input type="checkbox" name="an0" value="317" id="317"><label for="317">互联网文字广告</label>
<input type="checkbox" name="an0" value="315" id="315"><label for="315">互联网视频广告</label>
<input type="checkbox" name="an0" value="327" id="327"><label for="327">亲朋好友介绍</label>
</div>
<input type="submit" onClick="showVal()">

9.JS定期器

XML/HTML代码

clearTimeout()和clearInterval() ：
JS里设定延时：
使用SetInterval和设定延时函数setTimeout 很类似。
setTimeout 运用在延迟一段时间，再进行某项操作。
setTimeout("function",time) 设置一个超时对象
setInterval("function",time) //设置一个超时对象
SetInterval为自动重复，setTimeout不会重复。
clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象

10.JQ(Ajax)实例

JavaScript代码

$("#bt1").click(function(){
var name =$("#tx1").val();
var URL = "../validate?name="+name+"&date="+new Date().getTime();
$.ajax({
type:"GET",
url:URL,
dataType:"xml",
success:function(msg){
alert(msg);
var jqueryObj =$(msg) ;//把后台传来的对象转为JQuery对象
alert(jqueryObj);
var content = jqueryObj.text();
$("#sp1").text(content);
}
});
})

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4872)

刘新修

JQuery总结

分类

个人简介

Follow me

搜索

最新日志

新浪微博

最新评论

链接

归档

日历

其他

< 2024 > < 4 >
日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30