jQuery简介
1 jsp中导入方法
jsp中导入标签有两种方法：
1、使用pageContext
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.5.1.js"></script>
2、使用标签
导入jstl：
| <%@ taglib prefix="c"uri="http://java.sun.com/jsp/jstl/core"%> |
导入jquery：
| <scripttype="text/javascript"src="<c:urlvalue='/jquery-1.5.1.js'/>"></script> |
2 事件之文档加载完毕
在javascript中<body οnlοad="xxx()">的意思是：在文档加载完毕后会执行xxx()函数。在jQuery中也存在相同的功能，即$(function(){...})。我们给$()这个参数一个参数，参数为一个匿名函数，这个匿名函数会在文档加载完毕时执行。
| <scripttype="text/javascript"> $(function() { alert('hello'); }); </script> |
3 选择器
在javascript中，获取元素可以用等函数，在jQuery中有更方便的方式。
3.1 ID选择器
ID选择器就是通过ID来查找元素。语法:$("#id")
| <divid="div1">abc</div> <div id="div2">def</div>[D1] |
| $(function() { var ele = $("#div1");//返回一个jquery对象 alert(ele.text());//打印出该元素的文本内容 alert(ele.html());//打印该元素html内容 }); |
3.2 元素选择器
元素选择器就是通过元素名来查询元素。
| var ele = $("div");//元素选择器，查找所有的div元素，返回jquery对象，包含多个dom对象 alert(ele.length);[D2] |
3.3 类选择器
类选择器就是通过类名来查询元素。$(".myClass"),这就可以把所有包含了class="myClass"的元素查询出来。
| $(".myClass").text("88");[D3] |
| <divclass="haha"><p>div class="haha"</p></div> <divclass="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span> |
3.4 属性选择器
通过属性名和属性值来查询元素。$("[name]")，查找所有存在name属性的元素。
| alert($("[name]").length); alert($("[name=password]").length); $("[name=name]").val("val是设值");[D4] |
| 用户名：<inputtype="text"name="name"><br/> 密 码:<inputtype="password"name="password"><br> <input type="button" value="登录"> |
3.5 表单选择器
表单选择器指的是查询表单元素！
$(":input")查询所有表单元素，包括：input,textarea,select和button元素；
$(":text")查询所有<inputtype="text".../>元素；
$(":password")查询所有<inputtype=" password ".../>元素；
$(":radio")查询所有<inputtype="radio".../>元素；
$(":checkbox")查询所有<inputtype="checkbox".../>元素；
3.6 表单对象属性
例如radio和checkbox都有checked属性，可以通过这个属性值来查询元素。
$(":checked")查询所有被选中的radio或checkbox元素。
| $(function() { alert($(":checked").val());[D5] }); |
| <inputtype="radio"name="education"value="大学">大学 <inputtype="radio"name="education"value="小学"checked="checked">小学 <input type="radio" name="education" value="中学">中学 |
4属性
jquery元素对属性的操作方法：
attr(name)：读取指定属性的值；
attr(name,value)：设置指定属性的值；
removeAttr(name)：删除指定属性；
| alert($(":input[name=education]").attr("id")[D6] ); $(":input[name=education]").attr("value","haha");[D7] $(":input[name=education]").removeAttr("value"); |
| <inputtype="text"name="education"value="大学"id="xxx">大学 <input type="text" name="education" value="小学">小学 |
5 类
jquery元素对类的操作方法：
addClass(name)：给元素添加指定类；
removeClass(name)：给元素删除指定类；
| $("#mydiv").addClass("xxx"); $("#mydiv").removeClass("xxx"); |
| <styletype="text/css"> .xxx{ border:1px red solid; width:100px; height:100px; } </style> |
| <divid="mydiv">hello</div> |
6 CSS
jquery元素操作css样式方法：
css(name)：获取指定名称的样式值；
css(name,value)：设置指定名称的样式值；
| $("#mydiv").css("display","none"); |
7 遍历
因为查询到的元素可能不只一个，有时我们需要循环遍历之，这时需要使用each()方法来完成。each()方法的参数是函数，每次循环都会调用一次这个函数。在函数中可以使用$(this)来获取当前遍历的元素。
遍历所有radio元素，并打印其值：
| <scripttype="text/javascript"> $(function() { $(":radio").each(function(){ alert($(this).val()); }); }); </script> |
| <inputtype="radio"name="education"value="大学">大学 <inputtype="radio"name="education"value="小学"checked="checked"> 小学 <inputtype="radio"name="education"value="中学">中学 |
8 事件
给jquery元素添加事件：
| $(function() { $("div").click(function(){ $(this).css("display","none"); }); }); |
| <div>一</div> <div>二</div> <div>三</div> |
给所有div元素添加点击事件，click方法的参数是函数，这个函数会在事件发生时被调用。在函数中$(this)表示当前的事件源元素，即被点击的div元素。上例中给被点击的元素添加css样式display=none，即让它“消失”。
jquery中还有很多相似的事件方法：
² focus(fn)：得到焦点事件；
² blur(fn)：失去焦点事件；
² mouseover(fn)：鼠标进入元素事件；
² mouseout(fn)：鼠标离开元素事件；
² change(fn)：元素值改变事件；
² submit(fn)：表单提交事件，只能添加给表单元素，参数函数会在表单被提交时执行；
² submit()：提交表单，只能添加给表单元素，表示提交表单；
jquery中的其他事件方法：
hover(over,out):这个函数的两个参数都是函数，over函数会在鼠标进入元素时被执行；out函数会在鼠标离开元素时执行；
| $("#haha").hover( function(){ $("#haha").text("呵呵"); },function(){ $("#haha").text("哈哈"); } ); |
| <div class="xxx" id="haha">哈哈</div> |
bind(type,fn)：$("div").bind("click",function(){...})等同于$("div").click(function(){...});
unbind(type):$("div").unbind("click")表示删除这个元素上所绑定的所有click事件；
9 Ajax
| <scripttype="text/javascript"> $(function() { $("#username").blur(function(){ var value = $("#username").val(); $.ajax({ url:"/jquerytest/AjaxServlet",//要请求服务器url data:{val:value},//这是一个对象，表示请求参数，服务器通过request.getParameter()来得到 async:true,//是否为异步请求 cache:false,//是否缓存结果 type:"POST",//请求方式 dataType:"json",//服务器返回的数据是什么类型 success:function(result){//这个函数会在服务器执行成功时被调用，参数result就是服务器返回的值 $("label").text(result.name+","+result.age); } }); }); }); </script> |
| 用户名:<inputtype="text"name="username" id="username"><label></label><br/> 密 码:<inputtype="text"name="password" > |
| public class AjaxServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String value = request.getParameter("val"); if (value.equals("admin")) { String str = "{\"name\":\"好人\",\"age\":23}"; response.getWriter().print(str); } else { String str = "{\"name\":\"坏人\",\"age\":34}"; response.getWriter().print(str); } } } |
2152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
