jquery应用：-优快云博客

本文链接：https://blog.youkuaiyun.com/sprita1/article/details/7690253

本文深入探讨了jQuery的特点、API使用及实例，包括DOM操作、事件处理、动画效果、插件开发等，展示了如何通过jQuery简化JavaScript开发过程，提高网页交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery特点：
   屏蔽浏览器的差异，对dom操作提供了方便的扩展，一用的时间处理api及动画api，强大的插件机制

   $(document).ready(function(){XXX})               页面自动加载事件

   $("#verifyButton").click(function(){XXX})   点击事件

   $("#verifyButton").keyup(function(){XXX})   按下再弹起事件

   $("#divId").addClass("XXX");                           添加css样式

   $("#divId").removeClass("XXX");                       删除css样式

   $("#tabfirst li").each(function(i){XXX})   相当于for循环

   $("div").eq(i).addClass("XXX")                       下标为i的div上添加XXX类

   $("#realcontent").load("TabLoad.html")    装载页面

   $(".carname").children("select")                   寻找class为carname的对象中的select对象

   $(".main > a").click(function(){XXX})           main标签中的a子标签(不包括孙标签)的click点击事件

   $(this).next("ul");                                               找到main主菜单下的对应的ul子菜单项

   $(".carname").children("select");                   找寻class为carname的所有子元素为select的集合

   carimg.attr("src","url");                                   修改carimg的某个属性值

   ulNode.slideToggle();                                           根据ul标签的显示或隐藏来动画的执行隐藏或显示

   cartypeSelect.parent().hide();                       从父节点开始隐藏

   carnameSelect.next().hide();                           从下一个兄弟节点开始隐藏


   $(".hmain").hover(function(){XXX1},               在hmain标签中鼠标悬停时执行方法XXX1，鼠标离开时执行XXX2
                                       function(){XXX2})

   $(function(){                                                           页面自动加载事件的简化写法
       $("tbody tr:even").css("background-color","#ECE9D8")   对tbody中下标为偶数行的背景色进行控制
       $("tbody tr").get(0)                                       在tbody中下标为0的tr元素
       var inputObj = $("<input type='text'>");
       inputObj.css("border-width","0");
       var tdObj = $(this);
       inpitObj.val(tdObj.html());
       tdObj.html("");
       inpitObj.appendTo(tdObj);
   })


   //对于loading图片绑定ajax请求开始和交互结束的事件
   $("#contentsecond img").bind("ajaxStart",function(){
       //把div里面的内容清空
       $("#realcontent").html("");
       //整个页面中任意ajax交互开始前，function中的内容会被执行
       $(this).show();
   }).bind("ajaxStop",function(){
       //整个页面中任意ajax交互结束后，function中的内容会被执行
       $(this).slideUp("1000");
   });


   .main   a       .main这个class元素内部所有的a节点
   .main > a       .main的子节点中的a节点
   客户端：
   $.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),   //两次编码
       null,
       function(response){$("#result").html(response);}
   );
   服务端：
   String param = request.getParameter("userName");
   String userName = URLDecoder.decode(param, "UTF-8");   //由URLDecoder进行一次解码