<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JQuery-study</title> <script type="text/javascript" src="js/PCASClass.js" charset="gb2312"></script> <script type="text/javascript" src="js/jquery-1.4.1.js"></script> <!-- 注意DIV 的伪类 --> <style type="text/css"> <!-- .firstCss { color: #FFFFFF; background-color: #000000; } .secondCss { color: #3366FF; background-color: #FF99FF; } div:hover { background-color: #FFF; } div { background-color: #CCC; } --> </style> <script type="text/javascript"> var timeNum = 3000; $(document).ready(function(){ funShow(); funClick(); funJson(); funJson2(); if($.browser.msie){//判断浏览器 alert("this IE"); }else if($.browser.mozilla){ alert("this FireFox"); }else if($.browser.opera){ alert("this opera"); } setTimeout("funRemove()",2*timeNum);//定时器 } ); //事件 function funClick(){ $("#pTag3").attr({"class":"secondCss","align":"left"});//设置属性 $("#pTag3").bind("click", function() {//添加onclick 事件 $("#secondCss").attr("align","center");//添加属性 $("#pTag3").toggleClass("secondCss");//如果存在添加,反之删除 $("#pTag3").toggleClass("firstCss"); }); $("#textTag2").bind('click', function(event) { $(".secondCss").css("color","#FFFFFF");//添加属性 alert(event.currentTarget.value); }); } //显示 function funShow(){ $("#pTag1").text("<a href='g.cn'>游戏开始1</a>");//这里设置文本内容 $("#pTag1").hide(timeNum);//隐藏 $("#pTag2").html("<a href='g.cn'>游戏开始2</a>");//设置HTML内容 $("#pTag2").fadeOut(timeNum);//淡出 $("#textTag1").val("<a href='g.cn'>游戏开始3</a>");//设置value $("#textTag1").slideUp(timeNum,callbackShow);//上滑,完成后回调callbackShow方法 } //回调方法 function callbackShow(){ $("p:eq(0)").show();//第1个p, $("p:hidden").show();//所有隐藏 $("input").show(); } //删除节点 function funRemove(){ alert("删除 <p> id=pTag1"); $("#pTag1").remove();//删除元素 } //JSON function funJson(){ var jsonDate = {"list":[{"userId":"001","userName":"good1"},{"userId":"002","userName":"good2"},{"userId":"003","userName":"good3"}],"message":"操作成功"};//手动构建Json数据 var html = ""; for(var i = 0,j = jsonDate.list.length;i < j;i ++){ html += "<p> userId="+ jsonDate.list[i].userId +" userName="+jsonDate.list[i].userName+"</p>"; } html += "<p> MESSAGE:"+jsonDate.message+"</p>" $("#divTag1").append(html);//目标追加HTML } //JSON function funJson2(){ var jsonDate = "{'message':'funJson2操作成功'}"; jsonDate = eval("("+jsonDate+")");//手动把String 解析为JSON 数据注意eval("("+jsonDate+")") var html = "<p> DIV2·MESSAGE="+jsonDate.message+"</p>"; $("#divTag2").replaceWith(html);//替换该HTML } </script> </head> <body> <p id="pTag1"></p> <p id="pTag2"></p> <input type="text" id="textTag1" disabled="disable"/> <hr> <input type="text" id="textTag2" class="secondCss" value="点击这里"/> <p id="pTag3" title="123"> 点击这里(两次) </p> <hr> <div id="divTag1"> DIV divTag1:<br> </div> <hr> <div id="divTag2"> DIV divTag2:<br> this DIV Tag </div> <hr> 省 <select name="Province" id="Province"> </select> 市 <select name="City" id="City"> </select> 区 <select name="Area" id="Area"> </select> <script type="text/javascript"> new PCAS("Province","City","Area");//详细参见 PCASClass.js </script> </body> </html>?
详细解决方案
JQuery 的施用(1)
热度:98 发布时间:2012-11-05 09:35:12.0
相关解决方案
- jquery 获取jsp页面的id解决方法
- jquery,二维数组取值。解决办法
- 求jquery.form.js+jquery.validate.min.js 用ajax提交表单的代码范例
- jquery 提交form表单不用插件的那种 如何提交
- jquery ajax回传没有值,该怎么处理
- jquery easyUI datagrid struts2有关问题
- jquery form 有关问题
- springmvc jquery ajax 提交复杂对象,415异常解决办法
- 应用Struts2 与 jquery,ajax验证用户注册,不用从数据库获取数据
- jquery ajax select解决方法
- php jquery check username ajax检察帐号唯一性
- jquery ajax返回值的有关问题
- jquery 或js 获取指定字符间的字符串,并轮换。回答出来的是大神级~
- jquery 的bind里面能不能获得返回值呢? 对小弟我很难的有关问题啊
- jquery 的uploadify下传图片怎么让出错信息提示成中文
- java+jquery easy ui + json + struts分页例子
- jquery easyui分页效率有关问题
- jquery 如何获得动态添加后的子元素个数?
- jQuery.ajax()请求struts2数据 回到data值了undefined
- 关于Struts2 jQuery Plugin的 Result,该如何处理
- Jquery 点击按钮实现图片翻页,该如何解决
- jquery 关于监听checkbox的选中和不选中事件,该如何解决
- jQuery append动态添加的页面对象如何处理刷新掉
- Jquery+json解决思路
- jquery post有关问题
- 求大神解决偏题 - jquery ajax
- jquery $.ajax有关问题
- jquery td遍历有关问题
- jquery ui taps有关问题,求解!
- jquery easyui 如何设置标题列居左,里面的数据列居右