本文围绕jQuery展开，介绍了万能的$的多种用法，如获取元素、转换对象等；阐述了选择器，包括基本、层级、伪类和属性选择器；讲解了事件注册及委派；还列举了each、attr等学习内容，最后提及jQuery二级联动及练习题。
一.万能的 $ ($===jQuery)
- $ 是一个对象，也是一个方法
- 1.1 直接获取页面的元素
$ (“选择器”) 例:$ ("#id值") - 1.2 dom就绪后执行相应的代码
- window.onload = function(){…} -> 页面加载完毕后执行(所有数据读取完毕)
- $ (function(){…}) -> dom加载就绪(只需要读取到标签与属性即可【速度更快，性能更好】)
- 1.3 把一个原生的dom对象转成jQuery对象
- jQuery对象的功能更加强大 【object{…}】，是一个伪数组
- 原生 -> jQuery : $(原生对象)
- jQuery -> 原生 : jQuery对象[0]/jQuery对象.get(0)
- 1.4 直接创建一个元素 $("
")
- 1.5 直接调用相应的方法 $ .get(…)/$.parseJSON(…)
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入一个jQuery文件 -->
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
//因为代码是从上往下执行的，此方法是为了拿到数据
//方法一
//页面加载完毕之后再执行里面的代码
/*
window.onload = function(){
//1.可以获取天页面中的元素
var mydiv = $("#mydiv");
console.debug(mydiv);
}
*/
// 方法二 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
/*
$(document).ready(function(){
//1.可以获取当前页的元素
var mydiv = $("#mydiv");
console.debug(mydiv);
});
*/
//方法二的简写
//2.可以执行 DOM载入就绪的功能
$(function(){
//1.可以获取当前页的元素
// jQuery的方案获取的元素
// jQuery对象就是伪数组(它不是数组，但是可以当作数组用，数组中装的就是原生对象)
var mydiv = $("#mydiv");
console.debug(mydiv);
//怎么把jQuery对象转成原生对象
console.debug(mydiv[0]);
console.debug(mydiv.get(0));
/*
// 原生dom方案获取的元素
var mydivDom = document.getElementById("mydiv");
console.debug(mydivDom);
//3.把原生对象转成jQuery对象
console.debug($(mydivDom));
*/
})
//4.可以直接创建dom元素 document.createElement("div");
var div = $("<div><span>sdfasdfsdf</span></div>");
//5.可以直接调用方法
//$.get(...)
console.debug($.isNumeric(10));
console.debug($.isNumeric("10z"));
</script>
</head>
<body>
<div id="mydiv" style="width:100px;height:100px;background-color: red;"></div>
</body>
</html>
二.选择器
- 2.1 基本选择器(id,class,标签,多选择器)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入一个jQuery文件 -->
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
//id选择器,必需加一个#
console.debug($("#monkey"));
//class(类)选择器,必需加一个.
console.debug($(".animal"));
//标签选择器
console.debug($("li"));
//* 匹配所有元素
console.debug($("*"));
//多选择器(可以组合所有选择器)
console.debug($("#monkey,.snake"));
})
</script>
</head>
<body>
<ul>
<li class="animal">白龙马</li>
<li class="animal" id="monkey">孙猴子</li>
<li class="animal">猪刚烈</li>
<li>和尚</li>
</ul>
<ul>
<li class="snake">白蛇</li>
<li class="snake">青蛇</li>
<li>法海</li>
<li>许先</li>
</ul>
</body>
</html>
- 2.2 层级选择器(父子，后代)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入一个jQuery文件 -->
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
//拿到 #book这个选择器里面的所有li (后代选择器)
console.debug($("#book li"))
//拿到 #book这个选择器里面 第一层li (儿子选择器)
console.debug($("#book>li"));
})
</script>
</head>
<body>
<ul id="book">
<li>
四大名著
<ul>
<li>西游记</li>
<li>红楼梦</li>
<li>水许传</li>
<li>三国志</li>
</ul>
</li>
<li>悟空</li>
<li>黛玉</li>
<li>林冲</li>
</ul>
<ul>
<li class="animal">白龙马</li>
<li class="animal" id="monkey">孙猴子</li>
<li class="animal">猪悟能</li>
<li>沙和尚</li>
</ul>
<ul>
<li class="snake">白蛇</li>
<li class="snake">青蛇</li>
<li>法海</li>
<li>许仙</li>
</ul>
</body>
</html>
- 2.3 伪类选择器(:名称)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function() {
console.debug($("li[class]"))//属性选择器
//:first -> 只拿第一个元素
console.debug($("li:first"))//伪类选择器，拿第一个元素
//:eq(index) -> 确定拿第几个 index:下标
console.debug($("li:eq(3)"))//拿下标为3的元素
})
</script>
</head>
<body>
<ul id="deity">
<li>天宫
<ul>
<li>电母</li>
<li>哪吒</li>
</ul>
</li>
<li>无常</li>
</ul>
<ul>
<li class="deity">巨灵神</li>
<li class="deity">雷公</li>
</ul>
<ul>
<li>判官</li>
<li>无常</li>
</ul>
</body>
</html>
- 2.4 属性选择器 -> $ ( div[name])/$(div[name=xx])
三.事件注册
- $(元素).click(function(){…})
- $(元素).bind(“click”,function(){…}) / unbind
- $(元素).on(“click”,function(){…}) / off
复制功能的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
$("#mybtn").on("click",function(){
alert(0)
})
$("#cloneBtn").on("click",function(){
//$("#mybtn").appendTo("#mydiv");
//clone():就是复制一个元素
// true:代表方法也一样复制
$("#mybtn").clone(true).appendTo("#mydiv");
})
})
</script>
<style type="text/css">
div{
height:120px;
border: 5px red dotted;
margin-top: 10px;
}
</style>
</head>
<body>
<button id="cloneBtn">影分身</button>
<div>
<button id="mybtn">鸣人</button>
</div>
<div id="mydiv"></div>
</body>
</html>
===事件委派=
- $(“tbody”).on(“click”,".delBtn",function(){})
监听tbody的点击事件,当你点击的位置(元素)符合 .delBtn -> 就触发事件
四.学习的内容的列举
- 1.each() -> 遍历咱们的元素
jQuery对象.each(function(index,ele){
//index:遍历的下标
//ele:遍历的每一个元素
}) - 2.length -> 一个jQuery元素(伪数组)的长度
jQuery对象.length/jQuery.size() - 3.attr/prop -> 获取与设置某个元素的属性
prop:支持多选与单选(attr支持有问题)
var 属性值 = jQuery元素.attr/prop(“属性名”);
jQuery元素.attr/prop(“属性名”,“属性值”); - 4.HTML代码/文本/值
var html = jQuery对象.html() -> 获取一个对象中的所有html的内容
jQuery对象.html(“xxx”) -> 设置一个对象中的所有html的内容
//val只用于设置表单元素(input,textarea,select)的值
var html = jQuery对象.val()
jQuery对象.val(“xxx”) - 5.css -> 获取与设置元素的某个样式
jQuery元素.css(“样式名”,“样式值”);
jQuery元素.css(“background-color”,“red”); - 6.文本操作
jQuery元素.append(“元素”); -> 把括号中的元素放到jQuery元素中
jQuery元素.appendTo(“元素”); -> 把jQuery元素追加到元素中
jQuery元素.empty():清空所有子元素
jQuery元素.remove():删除自己
jQuery元素.clone([true/false]):当前元素复制一下 (加true可以连事件一起复制) - 7.查询
jQuery元素.closest(“条件”) -> 从当前元素向上查询,找到第一个满足条件的元素为止
jQuery元素.parent() -> 找到当前元素的父元素 - 8.ready(fn) :页面载入 [dom就绪后执行相应的代码]
$(function(){…})
jQuery二级联动（掌握）
city.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
//获取所有的省数据 result:是后台传回来的数组(里面装的是每一个省)
$.get("/listProvince",function(result){
for(var i=0;i<result.length;i++){
//json就是某一个省的数据
var json = result[i];
$("#provinceSelect").append("<option value='"+json.id+"'>"+json.name+"</option>")
}
})
//监听省的change【值的改变】事件
$("#provinceSelect").on("change",function(){
//拿到对应的省的id
// $(this).val():就是当前下拉对应的值
var provinceId = $(this).val();
//新的选择请把旧的数据清空(进行初始化)
//$("#citySelect").empty();
$("#citySelect").html("<option value=''>--请选择--</option>");
if(provinceId==-1){
return;
}
//根据省的id到后台拿到对应的市
$.get("/listCity",{id:provinceId},function(result){
for(var i=0;i<result.length;i++){
//json就是某一个省的数据
var json = result[i];
$("#citySelect").append("<option value='"+json.id+"'>"+json.name+"</option>")
}
})
})
})
</script>
</head>
<body>
<!-- 这个选择框中装的是所有的省，应该从后台读取 -->
<select id="provinceSelect">
<option value="-1">--请选择--</option>
</select>
<!-- 这个选择框中装的是所有的市，应该从后台读取 -->
<select id="citySelect">
<option value="">--请选择--</option>
</select>
</body>
</html>
domain:
City.java
package cn.itsource.domain;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
/**
* 城市对象
*
* @author ZhaoYi
*/
public class City {
private Long id;
private String name;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public City() {
}
public City(Long id, String name) {
super();
this.id = id;
this.name = name;
}
/**
* 根据省份id查询省份中的城市!
*
* @return
*/
public static List<City> getCityByProvinceId(Long id) {
List<City> citys = new ArrayList<City>();
if (id == 1) {
citys = Arrays.asList(
new City(1L,"成都"),
new City(2L,"南充"),
new City(3L,"绵阳"),
new City(4L,"遂林"),
new City(5L,"达州"),
new City(6L,"德阳"),
new City(7L,"乐山")
);
} else if (id == 2) {
citys = Arrays.asList(
new City(11L,"广州"),
new City(12L,"佛山"),
new City(13L,"东莞")
);
} else if (id == 3) {
citys = Arrays.asList(
new City(21L,"昆明"),
new City(22L,"玉溪"),
new City(23L,"丽江")
);
} else if(id==4){
citys = Arrays.asList(
new City(25L,"渝北区"),
new City(26L,"沙坪坝"),
new City(27L,"江北区")
);
}
return citys;
}
}
Province.java
package cn.itsource.domain;
import java.util.ArrayList;
import java.util.List;
public class Province {
private Long id;
private String name;
public Province(Long id, String name) {
super();
this.id = id;
this.name = name;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Province() {
super();
}
public static List<Province> getAllProvince() {
List<Province> provinces = new ArrayList<Province>();
provinces.add(new Province(1L, "四川"));
provinces.add(new Province(2L, "广东"));
provinces.add(new Province(3L, "云南"));
provinces.add(new Province(4L, "重庆"));
return provinces;
}
}
controller:
CityController.java
package cn.itsource.controller;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.itsource.domain.City;
import cn.itsource.domain.Province;
@Controller
public class CityController {
@RequestMapping("/listProvince")
@ResponseBody
public List<Province> listProvince(){
return Province.getAllProvince();
}
@RequestMapping("/listCity")
@ResponseBody
public List<City> listCity(Long id){
return City.getCityByProvinceId(id);
}
}
练习题
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery练习一</title>
<script type="text/javascript" src="../jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function() {
//1.注册事件的方式
/*
$("#btn").click(function(){
alert("haha")
})
*/
//2.绑定事件的方式
/*
$("#btn").bind("click",function(){
alert("hehe");
})
//取消绑定事件
$("#btn").unbind();
*/
/*
//3.注册事件
$("#btn").on("click",function(){
alert("xixi");
})
$("#btn").off();
*/
//3.注册事件
//点击获取选中个数
$("#btn").on("click",function(){
// :checked -> 被选中的元素
console.debug($("input[name=hobbies]:checked").length)
})
//点击p标签隐藏
// this:谁调用,this就指向谁
$("p").on("click",function(){
//console.debug(this);
//this是一个普通dom对象，我要把它转成一个jQuery对象
$(this).hide(1000);
})
//给不同的行添加颜色
$("tr:even").css("background-color","yellow").css("font-size","30px");
});
</script>
</head>
<body>
篮球
<input type="checkbox" name="hobbies" /> 足球
<input type="checkbox" name="hobbies" /> 羽毛球
<input type="checkbox" name="hobbies" />
<input value="点击获取选中个数" type="button" id="btn" />
<br />点击p标签隐藏
<br />
<p>p1</p>
<p>p2</p>
<p>p3</p>
<br />给不同的行添加颜色<br/>
<table border="1" width="200px">
<tr>
<td>item1</td>
</tr>
<tr>
<td>item2</td>
</tr>
<tr>
<td>item3</td>
</tr>
<tr>
<td>item4</td>
</tr>
<tr>
<td>item5</td>
</tr>
</table>
</body>
</html>
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>select</title>
<script language="javascript" src="../jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
//移动选中的到右边
$("#btn1").on("click",function(){
//:selected -> 匹配所有选中的option元素
//console.debug($("#select1>option:selected"));
//左边被选中的option元素追加到右边
$("#select1>option:selected").appendTo("#select2");
})
//移动全部到右边
$("#btn2").on("click",function(){
$("#select1>option").appendTo("#select2");
})
//移动选中的到左边
$("#btn3").on("click",function(){
$("#select2>option:selected").appendTo("#select1")
})
//移动所有到左边
$("#btn4").on("click",function(){
$("#select2 option").appendTo("#select1")
})
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<select id="select1" style="width:100px" size="10" multiple="multiple">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
<option value="选项9">选项9</option>
</select>
</td>
<td align="center">
<input type="button" id="btn1" value="-->"/><br/>
<input type="button" id="btn2" value="==>"/><br/>
<input type="button" id="btn3" value="<--"/><br/>
<input type="button" id="btn4" value="<=="/>
</td>
<td>
<select id="select2" style="width:100px" size="10" multiple="multiple"></select>
</td>
</tr>
</table>
</body>
</html>
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>checkbox</title>
<script type="text/javascript" src="../jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
/**
attr/prop:设置/获取 元素的属性(多选与单选的选择是有问题的)
var 值 =$(元素).prop(属性名)
$(元素).prop(属性名,属性值)
*/
//全选
$("#checkAll").on("click",function(){
//prop:设置相应的属性
$("input[name=hobbies]").prop("checked",true);
})
//全不选
$("#checkNotAll").on("click",function(){
//prop:设置相应的属性
$("input[name=hobbies]").prop("checked",false);
})
//反选
$("#checkUnAll").on("click",function(){
//拿到所有元素后直接当作数组使用即可
/*
var hobbies = $("input[name=hobbies]");
for(var i=0;i<hobbies.length;i++){
var hobby = hobbies[i];
console.debug(hobby);
}
*/
//index:下标
//ele:对应的元素
$("input[name=hobbies]").each(function(index,ele){
ele.checked = !ele.checked;
})
})
});
function checkChange(src){
//console.debug(src.checked);
// var flag = src.checked;
// if(flag){
// $("input[name=hobbies]").prop("checked",true);
// }else{
// $("input[name=hobbies]").prop("checked",false);
// }
$("input[name=hobbies]").prop("checked",src.checked);
}
</script>
</head>
<body>
请选择你的爱好:<br/>
<div>
<input type="checkbox" name="hobbies"/>打篮球
<input type="checkbox" name="hobbies"/>踢足球
<input type="checkbox" name="hobbies"/>上网
</div>
<div>
<input type="checkbox" onchange="checkChange(this)"/>全选/全不选<br/>
<input type="button" id="checkAll" value="全选"/>
<input type="button" id="checkNotAll" value="全不选"/>
<input type="button" id="checkUnAll" value="反选"/>
</div>
</body>
</html>
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function() {
//使单选下拉框‘2号’选中
$("#btn1").on("click",function(){
$("#select").val("2号");
})
//使多选下拉框‘2号’和‘5号’选中
$("#btn2").on("click",function(){
$("#selectMultiple").val(["2号","5号"]);
})
//使复选框‘2号’和‘4号’选中
$("#btn3").on("click",function(){
$("input[name=checkbox]").val(["复选2","复选4"]);
})
//使单选框‘单选2’选中
$("#btn4").on("click",function(){
$("input[name=radio]")[1].checked = true;
})
//打印已被选中的值（拿到所有被选中的元素）
$("#btn5").on("click",function(){
//:checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
console.debug($(":checked"));
})
});
</script>
<title>练习5</title>
</head>
<body>
<input id="btn1" type="button" value="使单选下拉框‘2号’选中"/><br/>
<input id="btn2" type="button" value="使多选下拉框‘2号’和‘5号’选中"/><br/>
<input id="btn3" type="button" value="使复选框‘2号’和‘4号’选中"/><br/>
<input id="btn4" type="button" value="使单选框‘单选2’选中"/><br/>
<input id="btn5" type="button" value="打印已被选中的值"/><br/>
<form name="userForm">
单选下拉框<select id="select" name="select">
<option value="1号">1号</option>
<option value="2号">2号</option>
<option value="3号">3号</option>
<option value="4号">4号</option>
<option value="5号">5号</option>
<option value="6号">6号</option>
</select>
多选下拉框<select id="selectMultiple" multiple="multiple" size="6" name="selectMultiple">
<option value="1号">01号</option>
<option value="2号">02号</option>
<option value="3号">03号</option>
<option value="4号">04号</option>
<option value="5号">05号</option>
<option value="6号">06号</option>
</select>
<br/>
复选框<input value="复选1" type="checkbox" name="checkbox"/>复选1
<input value="复选2" type="checkbox" name="checkbox"/>复选2
<input value="复选3" type="checkbox" name="checkbox"/>复选3
<input value="复选4" type="checkbox" name="checkbox"/>复选4
<input value="复选5" type="checkbox" name="checkbox"/>复选5
<br/>
单选框<input value="单选1" type="radio" name="radio"/>单选1
<input value="单选2" type="radio" name="radio"/>单选2
<input value="单选3" type="radio" name="radio"/>单选3
<input value="单选4" type="radio" name="radio"/>单选4
</form>
</body>
</html>
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户新增</title>
<script language="javascript" src="../jquery/jquery-1.11.2.min.js"></script>
<script language="javascript">
$(function(){
//添加一条数据
$("#btn_submit").on("click",function(){
/**
val()/html()
表单元素(input,textarea,select)使用val()
其它元素使用html()
*/
var username = $("#username").val();
var email = $("#email").val();
var tel = $("#tel").val();
$("#userTbody").append("<tr><td>"+username+"</td><td>"+email+"</td><td>"
+tel+"</td><td><button class='delBtn'>删除</button></td></tr>")
})
//删除所有数据
$("#btn_removeAll").on("click",function(){
//empty():把它的所有儿子全部干掉
$("#userTbody").empty();
})
//为所有的删除按钮添加事件
/*
$(".delBtn").on("click",function(){
alert(0)
})
*/
/**
事件委派:
$("#userTbody"):监听的范围
click：监听的事件
.delBtn：限定的条件
*/
//删除一条
$("#userTbody").on("click",".delBtn",function(){
//找到元素的父元素
//$(this).parent().parent().remove();
//closest:从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。。
$(this).closest("tr").remove();
})
});
</script>
</head>
<body>
<a href="http://www.itsource.cn">首页</a>
<form name="userForm">
<center>
用户录入<br/>
用户名:<input id="username" name="username" type="text"/>
E-mail:<input id="email" name="email" type="text"/>
电话:<input id="tel" name="tel" type="text"/>
<input type="button" value="提交" id="btn_submit"/>
<input type="button" value="删除所有" id="btn_removeAll"/>
</center>
</form>
<hr/>
<table border="1" align="center">
<thead>
<tr>
<td>用户名</td>
<td>E-mail</td>
<td>电话</td>
<td>操作</td>
</tr>
</thead>
<tbody id="userTbody">
</tbody>
</table>
</body>
</html>
扫一扫
8888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
