目录
一、核心函数
- jQuery( callback ):绑定一个在 DOM 文档载入完成后执行的函数
$(function () {
alert("hello jquery")
})
- jQuery(selector, [context]):接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器
- jQuery(html,[ownerDocument]):使用原始 HTML 的字符串来创建 DOM 元素
dom对象 ——》 jquery对象$(dom)
jquery对象 ——》dom对象jquery[0]
二、选择器
三、文档操作
(1)获得/设置内容
三个简单实用的用于 DOM 操作的 jQuery 方法:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
- attr() 方法用于获取属性值
(2)添加新的 HTML 内容
内部插入:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
外部插入:
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
(3)删除元素/内容
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
(4)遍历
- each() - 对 jQuery 对象进行迭代,为每个匹配元素执行函数。
- parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)
- parents(selector) 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)
四、dom元素
- index() - 返回指定元素相对于其他指定元素的 index 位置。
- size() - 返回被 jQuery 选择器匹配的元素的数量。
五、css
- css() - 设置或返回匹配元素的样式属性
六、事件
- blur() - 失去焦点
- focus() 获得焦点
- click() - 点击按钮
- mouseover() - 鼠标悬停
- mouseout() - 鼠标移除
- hover() - 鼠标悬停和移除
- change() - 当元素的值发生改变时,会发生 change 事件
- one() - 每个元素只能触发一次该处理器
- toggle() - 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。
七、AJAX
(1) $.post() 与 $.get()
(2)fastJson
// 对象转json
String s = JSONObject.toJSONString(people);
例子1:简单判断用户名是否存在
jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script>
$(function () {
// 失去焦点
$("#username").blur(function () {
var url="/test"
var usernamevalue=$("#username").val()
// 设置异步请求
$.post(url,{"username":usernamevalue},function (data) {
$("#span1").html(data)
},"html")
})
})
</script>
</head>
<body>
用户名:<input type="text" id="username"><span id="span1"></span>
</body>
</html>
servlet
@WebServlet("/test")
public class servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 解决中文乱码
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
// 接收参数
String name = req.getParameter("username");
String str = "aaa";
if (str.equals(name)){
resp.getWriter().write("<font color='red'>已占用</font>");
}else if ("".equals(name)){
resp.getWriter().write("<font color='red'>检测为空</font>");
}
else{
resp.getWriter().write("<font color='green'>可使用</font>");
}
}
}
例子2:根据省份获取市
servlet
@WebServlet("/test")
public class Servlet1 extends HttpServlet {
private HashMap<Province,ArrayList<City>> provinces;
@Override
public void init() throws ServletException {
provinces = new HashMap<>();
// 省
Province p1 = new Province(1, "山东");
Province p2 = new Province(2, "山西");
// 市
City c1 = new City(1, "青岛市");
City c2 = new City(2, "济南市");
ArrayList<City> cities1 = new ArrayList<>();
cities1.add(c1);
cities1.add(c2);
City c3 = new City(1, "大同市");
City c4 = new City(2, "太原市");
ArrayList<City> cities2 = new ArrayList<>();
cities2.add(c3);
cities2.add(c4);
// 封装为set集合
provinces.put(p1, cities1);
provinces.put(p2, cities2);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 解决中文乱码
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
String choose = req.getParameter("choose");
switch (choose){
case "province":
// 得到省份set集合
Set<Province> keySet = provinces.keySet();
String s = JSONObject.toJSONString(keySet);
resp.getWriter().write(s);
break;
case "city":
String name = req.getParameter("name");
Set<Province> keySet1 = provinces.keySet();
for (Province province : keySet1) {
if (province.getName().equals(name)){
// 根据匹配的name获取list集合
ArrayList<City> cities = provinces.get(province);
String s1 = JSONObject.toJSONString(cities);
resp.getWriter().write(s1);
}
}
break;
default:
break;
}
}
}
jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function () {
// 当页面加载完毕,需要得到省份信息
var url1='/test?choose=province'
$.post(url1,function (data) {
// 获取省份名称
$(data).each(function () {
var provinces=$("<option></option>")
provinces.append(this.name)
$('#province').append(provinces)
})
},"json")
// 当省份下拉列表发生改变
$('#province').change(function () {
// 恢复初始状态
$('#city').html("<option>---请选择市---</option>")
var url2='/test?choose=city'
$.post(url2,{"name":$(this).val()},function (data) {
// 获取市名称
$(data).each(function () {
var cities=$("<option></option>")
cities.append(this.name)
$('#city').append(cities)
})
},'json')
})
})
</script>
</head>
<body>
<select id="province">
<option>---请选择省份---</option>
</select>省
<select id="city">
<option>---请选择市---</option>
</select>市
</body>
</html>