jQuery学习
注：博客内容并不是那么全面，了解更多请点击这里！
jQuery入门
- 什么是jQuery？
jQuery可以说是Javascript的一个框架，也可以说是JavaScript的函数库，封装了大量的方法 - JQuery和DOM的要点
jQuery和DOM对象不可以直接调用进行使用，但是可以通过内部的机制进行对象之间的转换 - 导入jQuery库(jquery-1.12.4.js)
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.12.4.js"></script>
- jQuery的使用（三种方式）
注意：为方便使用，$符号是jQuery中代替jQuery对象的符号
<script type="text/javascript"> // 第一种 $(function(){ }); // 第二种 jQuery(function(){ }); // 第三种 window.jQuery(function(){ }); </script>
- dom对象和jQuery对象的相互转换
<script type="text/javascript"> <!-- dom转jQuery对象 --> $(function(){ // 得到dom对象 var dom_uname = document.getElementById("username"); alert(dom_uname.value); // 转换 var jquery_uname = $(dom_uname); alert(jquery_uname.val()); }); </script>
<script type="text/javascript"> <!-- jQuery转dom对象 --> $(function(){ // 得到jQuery对象 var jquery_uname = $('#username'); alert(jquery_uname);//[object Object] alert(jquery_uname.val()); // 转换(jQuery对象实质为数组对象，存的是dom对象) var dom_uname = jquery_uname[0]; alert(dom_uname.value); }); </script>
选择器
案例：
<body>
<div>
<input type="text" class="class_username" id="id_username" value="zhangsan"/>
<input type="text" class="class_username" id="id_username" value="lisi"/>
</div>
<input type="text" id="id_password" value="123456"/>
<input type="text" id="id_password" value="654321"/>
</body>
- id选择器
<script type="text/javascript"> $(function(){ alert($('#id_username').length);// 1 alert($('#id_username').val());// zhangsan }); </script>
- class选择器
<script type="text/javascript"> $(function(){ alert($('.class_username').length);// 2 // 注意：不指定取数组中那个数据，默认为第一个 alert($('.class_username').val());// zhangsan // 取数组中的第二个数据，过程：jquery->dom->jquery alert($($('.class_username')[1]).val()); }); </script>
- element选择器
<script type="text/javascript"> $(function(){ alert($('input').length);// 4 alert($('input').val());// zhangsan }); </script>
- parent > child选择器
<script type="text/javascript"> // 得到给定元素的所有给定子元素 $(function(){ alert($('div > .class_username').length);// 2 }); </script>
- prev + next选择器
<script type="text/javascript"> // 得到给定元素的下个元素 $(function(){ alert($('.class_username + #id_username').length); alert($('.class_username + #id_username').val()); alert($('div + #id_password').val()); }); </script>
- prev ~ siblings选择器
<script type="text/javascript"> // 得到给定元素之后的所有指定元素 $(function(){ alert($('div ~ #id_password').length);// 2 }); </script>
- 简单过滤选择器（如：odd，even，first，last等），有兴趣可以了解点击
- 属性选择器
案例：
<body>
<div id="div1" class="class_div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="div4">div4</div>
<input type="text" id="input_letter"/>
</body>
<script type="text/javascript"> $(function(){ // 查询所有含id属性的div标签 alert($('div[id]').length);//3 // 查询含有class属性且值等于指定值的div标签 alert($("div[class='class_div1']").length);//1 // 不等于 alert($("div[class!='class_div1']").length);//3 // 查询id值为div开头的标签 alert($("div[id^='div']").length);//3 // 查询id值以letter结尾的input标签 alert($("input[id$='letter']").length);//1 // 查询id值包含iv的div标签 alert($("div[id*='iv']").length);//3 }); </script>
属性操作
- val属性操作
<body>
<input type="text" class="acount" id="username" value="zhangsan"/><br>
<input type="text" class="acount" id="password" value="123456"/>
</body>
<script type="text/javascript"> $(function(){ // 得到value值 alert($('#username').val()); // 设置值 $('#username').val("lisi"); }); </script>
- html&text属性
<body>
<div id="div1"><a href="#">div1</a></div>
</body>
<script type="text/javascript"> $(function(){ // 得到值 alert($("#div1").text());//div1 alert($("#div1").html());//<a href="#">div1</a> // 设置值 $("#div1").text("new set text"); alert($("#div1").text()); // 自动编译 $("#div1").html("<font color='red'>new set html<font>"); alert($("#div1").text());//new set html alert($("#div1").html());//<font color='red'>new set html<font> }); </script>
- class属性
<style type="text/css"> .style1{ background-color: red; } .style2{ background-color: blue; } .style3{ background-color: yellow; } .style4{ color: white; } </style>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
<script type="text/javascript"> $(function(){ $('#div1').addClass('style1'); // 添加不同的css $('#div2').addClass('style2 style4'); $('#div3').addClass('style3'); // 移除css $('#div2').removeClass('style2'); // 若存在添加，不存在移除 $('#div2').toggleClass('style2'); }); </script>
- attr属性
<body>
<a id="a0" href="https://www.google.com">this is google</a>
<a id="a1">this is youtube</a>
<a id="a2">this is baidu</a>
</body>
<script type="text/javascript"> $(function(){ // 得到某个属性的值 alert($('#a0').attr('href'));// https://www.google.com // 设置某个属性的值（可以设置多个属性值，用逗号分割每个属性） $('#a1').attr({href:'https://www.youtube.com/'}); // 设置某个属性的值 $('#a2').attr('href','https://www.baidu.com/'); }); </script>
文档处理_1(元素内部)
案例：
<body>
<p style="color: red">文本</p>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
- append()：向每个匹配的元素内部追加内容。
<script type="text/javascript"> $(function(){ <!-- 下面这些都是在元素内部进行操作中 --> // 向每个匹配的元素内部追加内容。 $('#div1').append("div1"); $('#div2').append("div2"); $('#div3').append("div3"); $('#div1').append("<a href='#'>我是div1后追加的链接</a>"); }); </script>
- appendTo()：把所有匹配的元素追加到另一个指定的元素元素集合中。
<script type="text/javascript"> $(function(){ <!-- 下面这些都是在元素内部进行操作中 --> // 向每个匹配的元素内部追加内容。 $('#div1').append("div1"); $('#div2').append("div2"); $('#div3').append("div3"); $('#div1').append("<a href='#'>我是div1后追加的链接</a>"); // 把所有匹配的元素追加到另一个指定的元素元素集合中。 $('p').appendTo('#div3'); }); </script>
- prepend()：向每个匹配的元素内部前置内容。
<script type="text/javascript"> $(function(){ <!-- 下面这些都是在元素内部进行操作中 --> // 向每个匹配的元素内部追加内容。 $('#div1').append("div1"); $('#div2').append("div2"); $('#div3').append("div3"); $('#div1').append("<a href='#'>我是div1后追加的链接</a>"); // 把所有匹配的元素追加到另一个指定的元素元素集合中。 $('p').appendTo('#div3'); // 要插入到目标元素内部前端的内容 $('#div1').prepend("我要加到div1前边<br>"); }); </script>
- prependTo()：把所有匹配的元素前置到另一个、指定的元素元素集合中。
<script type="text/javascript"> $(function(){ <!-- 下面这些都是在元素内部进行操作中 --> // 向每个匹配的元素内部追加内容。 $('#div1').append("div1"); $('#div2').append("div2"); $('#div3').append("div3"); $('#div1').append("<a href='#'>我是div1后追加的链接</a>"); // 要插入到目标元素内部前端的内容 $('#div1').prepend("我要加到div1前边<br>"); // $(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。 $('p').prependTo('#div3'); }); </script>
文档处理_2 （元素外部&其它）
案例：
<body>
<p style="color: red">文本</p>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</body>
- after()：在每个匹配的元素之后插入内容。
<script type="text/javascript"> $(function(){ $('#div1').after("div1之后添加的！"); }); </script>
- before()：在每个匹配的元素之前插入内容。
<script type="text/javascript"> $(function() $('#div4').before("div4之前添加的！"); }); </script>
- insertAfter()：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
<script type="text/javascript"> $(function(){ $('#div1').after("div1之后添加的！"); $('#div4').before("div4之前添加的！"); // 将p标签添加到指定属性之后 $('p').insertAfter('#div2'); }); </script>
- insertBefore()：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
<script type="text/javascript"> $(function(){ $('#div1').after("div1之后添加的！"); $('#div4').before("div4之前添加的！"); // 将p标签添加到指定属性之前 $('p').insertBefore('#div2'); }); </script>
- empty()：删除匹配的元素集合中所有的子节点。
<script type="text/javascript"> $(function(){ $('p').empty(); }); </script>
- remove()：从DOM中删除所有匹配的元素。
<script type="text/javascript"> $(function(){ // 注意：p标签一同移除！！！ $('p').appendTo('#div1'); $("div[id='div1']").remove('#div1'); }); </script>
事件
注：事件较多，此处不详细介绍，有兴趣了解的点击
AJAX
注：这里只演示jQuery封装的相对来说最底层的方法（$.ajax），想了解封装的其它方法请点击
案例：
<body>
<form id="form1">
<input type="text" id="username" name="username"/><br>
<input type="text" id="password" name="password"/><br>
<input type="button" id="btn" value="login">
</form>
</body>
<script type="text/javascript"> $(function(){ $('#btn').bind('click', function(){ // 获取表单数据 var i = $('#form1').serializeArray(); //alert(i); $.ajax({ // 请求链接 url: "user_login.action", // http方法 type: "POST", // 期待服务器返回的数据类型 dataType: "json", data: i, // 异步请求 async: true, // 成功后回调的方法 success: function(data){ alert(data.msg); }, // 失败后回调的方法（服务器故障） error: function(data){ al } }); }); }); </script>
package tqb.web.action;
import java.util.HashMap;
import java.util.Map;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
import net.sf.json.JSONObject;
/** * 用户登录Demo * @author tqb * */
public class DemoAction extends ActionSupport {
public String login() throws Exception {
Map<String, String> map = new HashMap<String, String>();
try {
// 模拟服务器发生故障！！！
// System.out.println(1/0);
String username = ServletActionContext.getRequest().getParameter("username");
String password = ServletActionContext.getRequest().getParameter("password");
if (username != null && password != null && username.trim().equals("admin")
&& password.trim().equals("admin")) {
map.put("msg", "恭喜你登录成功！");
JSONObject jsonObject = JSONObject.fromObject(map);
ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
ServletActionContext.getResponse().getWriter().print(jsonObject);
} else {
map.put("msg", "抱歉，登录失败！");
JSONObject jsonObject = JSONObject.fromObject(map);
ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
ServletActionContext.getResponse().getWriter().print(jsonObject);
}
} catch (Exception e) {
map.put("msg", "抱歉，服务器发生故障！");
JSONObject jsonObject = JSONObject.fromObject(map);
ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
ServletActionContext.getResponse().getWriter().print(jsonObject);
e.printStackTrace();
}
return NONE;
}
}
