3 JQuery-

JQuery处理AJAX
• • • • • • • • • • • $.post("test.cgi", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); } ); $.get("test.cgi", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); } );
实例：Ajax动态效果
• • • • • • • • • • • • • • • • • • • • $(function(){ $("input[name]").blur(function(){ // $.post('ajax.php',{username:$(this).val()},function(t){ // $("#msg").html(t); // }); $.ajax({ type: "POST", url: "ajax.php", data: "username="+$(this).val(), dataType: "json", success: function(msg){ $("#msg").html(msg.exist[1]); } }); }); $("img").hide().ajaxStart(function(){ $(this).show(); }).ajaxStop(function(){ $(this).hide(); }); });
实例：动态更新下拉菜单
• • • • • • • • • • • • • • • $(function(){ $("input[type=button]").click(function(){ if($(this).val() == "添加"){ $("select").append("<option>"+$("input[name=tt]").val()+"</option>"); } if($(this).val() == "清空"){ $("select").empty(); } if($(this).val() == "删除"){ $("select option").filter(function(i){ return $(this).html() == $("input[name=tt]").val(); }).remove(); } });
JQuery
内容摘要
• • • • JQuery简介 JQuery选择器 JQuery操作CSS JQuery完成AJAX应用
JQuery简介
• jQuery是一个简洁快速的JavaScript库，它 能让你在你的网页上简单的操作文档、处 理事件、运行动画效果或者添加Ajax交互。 • jQuery的设计会改变你写JavaScript代码的 方式。 • jQuery的语法特点：
实例：动态菜单树
• $(function(){ • $("span").css('cursor','hand').toggle(fun ction(){ • $(this).next().fadeIn(5000); • },function(){ • $(this).next().fadeOut(5000); • }); • });
JQuery操作CSS
• $("p").css("color","red"); • $("p").css({ color: "red", background: "blue" }); • $("p").height(20); • $("p").width(20);
JQuery处理AJAX
• • • • • $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } • });
– 匿名回调函数 – 对象链式操作
Hello, JQuery
• • • • • • • • • <a id='b' href=“test.html">hello</a> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("a").click(function(){ alert('hello!'); return false; }); });
使用CSS选择器选择对象
• $(document).ready(function() { $("a[name]").css('background-color','red'); }); • $(document).ready(function() { $("a[href*=/content/gallery]").click(function() { // do something with all links that point somewhere to /content/gallery }); });
实例：表格隔行变色
• • • • • • • • • • • • • • $(function(){ $("tr").each(function(i){ if(i%2==0){ $(this).css('background-color','green'); }else{ $(this).css('background-color','blue'); } }).hover(function(){ c = $(this).css("background-color"); $(this).css('background-color','red'); },function(){ $(this).css('background-color',c); }); });
});
实例：表单提交校验
• • • • • • • • • • • • • • • • • • • • • • • $(function(){ $("form").submit(function(){ var ul = $("input[name=username]").val().length; if(ul>6 || ul <2){ alert('用户名长度不对！'); return false; } if( $("input[name=p1]").val() != $("input[name=p2]").val()){ alert('密码不一直！'); return false; } var rqReg = /[0-9]{4}-[0-9]{2}-[0-9]{2}/; if(!rqReg.test($("input[name=birthday]").val())){ alert('日期不对！'); return false; } var emailReg = /.+@.+/; if(!emailReg.test($("input[name=email]").val())){ alert('邮箱不对！'); return false; } });S选择器 • 使用JQuery方法选择
使用CSS选择器选择对象
• $(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addClass("green"); }, function() { $(this).removeClass("green"); }); });
使用JQuery方法选择
• • • • • • Find() Not() Is() Filter() Each() ……
使用JQuery方法选择
• $(document).ready(function() { $("#orderedlist").find("li").each(function(i) { $(this).html( $(this).html() + " BAM! " + i ); }); }); • $(document).ready(function() { $("li").not("[ul]").css("border", "1px solid black"); });