Java小白学习指南【day40】---JQuery基础
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Java小白学习指南【day40】---JQuery基础，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含18536字，纯文字阅读大概需要27分钟。
内容图文
一、JQuery的认识
jQuery是继prototype之后一个优秀的开源的JavaScript代码库（或JavaScript框架），它封装JavaScript常用的功能代码
jQuery的核心思想：（write less，do more）写得更少，做得更多
二、JQuery的基本使用
注意：在使用前需要先将JQuery.js的文件引入进来（建议新建一个普通文件夹，区分不同的资源）
1、jQuery库的引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 因为是静态网页，所以使用的是相对路径，同时要注意库引入的内部不能再写其他代码 -->
<script type="text/javascript" src="jquery/jquery-2.1.3.js"></script>
<script type="text/javascript">
console.debug(jQuery);//这里直接是打印的对象
console.debug($);
console.debug($ == jQuery);
</script>
</head>
<body>
</body>
</html>
2、获取jQuery对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-2.1.3.js"></script>
<script type="text/javascript">
/* 1、获取dom对象，原生的js方式 */
window.onload = function(){//文档加载完毕后才执行
var div = document.getElementById("mydiv");
console.debug(div);
/* 2、获取jQuery对象，获取的时候为了做区分，可以使用$在前面 */
var $div = $("#mydiv");//这里id需要使用#，如果是class则需要使用.这是在使用选择器
console.debug($div);
}
</script>
</head>
<body>
<div id="mydiv">这是我的div</div>
</body>
</html>
3、$(function(){ 内容 })和window.onload的区别
window.onload与$(function)：
? *相同点：* 它们都是用来加载页面的
? *不同点：* window.onload是页面内容渲染完毕之后，执行匿名函数中的内容,而 ( f u n c t i o n ) 是 页 面 结 构 加 载 完 毕 之 后 ， 执 行 匿 名 函 数 中 的 内 容 ， 所 以 在 性 能 方 面 来 说 (function)是页面结构加载完毕之后，执行匿名函数中的内容，所以在性能方面来说 (function)是页面结构加载完毕之后，执行匿名函数中的内容，所以在性能方面来说(function)的****性能要高于****window.onload所以以后推荐使用$(function)
<script type="text/javascript">
/* 1、获取dom对象，原生的js方式 */
/* window.onload = function(){//文档加载完毕后才执行内部
var div = document.getElementById("mydiv");
console.debug(div);
//2、获取jQuery对象，获取的时候为了做区分，可以使用$在前面
var $div = $("#mydiv");//这里id需要使用#，如果是class则需要使用.这是在使用选择器
console.debug(mydiv);
} */
$(function(){//文档加载完毕后才执行内部
var div = document.getElementById("mydiv");
console.debug(div);
/* 2、获取jQuery对象，获取的时候为了做区分，可以使用$在前面 */
var $div = $("#mydiv");//这里id需要使用#，如果是class则需要使用.这是在使用选择器
console.debug($div);
})
</script>
4、jQuery对象和dom对象的相互转换
<script type="text/javascript">
/* jQuery对象和dom对象的相互转换是为了满足js原生的功能太弱，而jquery功能更加强大 */
$(function(){//文档加载完毕后才执行内部
var div = document.getElementById("mydiv");
console.debug(div);
var $jqdiv = $(div);//js对象转换为jquery对象
console.debug($jqdiv);
/* 2、获取jQuery对象，获取的时候为了做区分，可以使用$在前面 */
var $div = $("#mydiv");//这里id需要使用#，如果是class则需要使用.这是在使用选择器
console.debug($div);
var jsdiv = $div[0];//jquery对象转换为js对象
console.debug(jsdiv);
})
</script>
5、jQuery基本选择器
参考jQuery文档：选择器是为了选中HTML页面中的dom节点，而得到Jquery对象 ，通过Jquery对象去操作dom节点
-
#id id选择器 根据id获取jQuery对象(单个)
-
element 元素选择器 根据标签名获取jQuery对象(多个)
-
.class 类型选择器 根据类型名获取jQuery对象(多个)
-
selector1,selector2,selectorN 组合选择器 根据多个选择器组合在一起，选中多个
<script type="text/javascript">
$(function(){//文档加载完毕后才执行内部
//1、根据id获取jquery对象
var $div = $("#id");
console.debug($div);
//2、根据元素选择jQuery对象
var $divs = $("div");
console.debug($divs);
//3、根据类型匹配多个jQuery对象
var $classes = $(".hobbies");
console.debug($classes);
//4、组合选择器匹配多个jQuery对象
var $elements = $("#mydiv,a");
console.debug($elements);
})
</script>
三、JQuery注册事件的四种方式
<script type="text/javascript">
$(function(){//文档加载完毕后才执行内部
//1、方式一常用方式，支持事件委托!(推荐)
$("#btn1").on("click",function(){
alert("方式一常用方式");
})
//2、方式一绑定
$("#btn1").bind("click",function(){
alert("方式二bind方式");
})
//3、方式三
$("#btn1").one("click",function(){
alert("方式三只能点一次");
})
//4、方式四，直接.事件名
$("#btn1").click(function(){
alert("方式四.事件名");
})
})
</script>
</head>
<body>
<input type="button" value="注册事件方式1" id="btn1">
<input type="button" value="注册事件方式2" id="btn2">
<input type="button" value="注册事件方式3" id="btn3">
<input type="button" value="注册事件方式4" id="btn4">
</body>
四、JQuery事件委托机制
存在层级关系的事件，需要对执行的顺序进行设定
<script type="text/javascript">
$(function(){//文档加载完毕后才执行内部
//存在层级的执行关系
$("#btn").on("click",function(){
$("#filediv").append("<input type='button' code='button' value='按钮'><br/>");
})
//绑定事件在input标签上
$("#filediv").on("click","input[code='button']",function(){
alert("成功了！");
})
})
</script>
</head>
<body>
<input type="button" value="动态添加按钮" id="btn">
<div id="filediv">
<input type="button" code="button" value="按钮"><br/>
</div>
</body>
五、JQuery中的方法
1、jQuery操作html/文本/value属性值
- html():和innerHTML效果一样
- text()：和innerText效果一样
- 上述两个传了参数就是添加文本
- val()：只获取value
<script type="text/javascript">
$(function(){//文档加载完毕后才执行内部
/* var html = $("#filediv").html("<input type='button' value='按一手'><br/>");//获得的是js对象
var $html = $(html);
console.debug(html);
console.debug($html); */
//text()
/* var text = $("#btn").text("<input type='button' code='button' value='按一手'><br/>");
console.debug(text); */
//val()
var value = $("input[code='button']").val();//获得对应value的值
console.debug(value);
})
</script>
2、jQuery操作元素或节点的方法
添加：append()-------$(A).append(B)的操作，是把B追加到A中
? appendTo()---------$(A).appendTo(B)的操作，即不是把B追加到A中，而是把A追o加到B中
删除：remove()，empty()
<script type="text/javascript">
$(function(){//文档加载完毕后才执行内部
/*
添加：append()，appendTo()
删除：remove()，empty()
复制：clone(true)
*/
//1、$(A).append(B)的操作，是把B追加到A中
var $mydiv = $("#mydiv");
$mydiv.append("<h2>追加</h2>");
//2、$(A).appendTo(B)的操作，即不是把B追加到A中，而是把A追加到B中
var $youdiv = $("#youdiv");
$youdiv.appendTo("#mydiv");
//3、remove()删除所有元素
//$mydiv.remove();
//4、empty()删除匹配的元素集合中所有的子节点。
//$mydiv.empty();
//5、clone(true) 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
//先给按钮绑定事件
$("input[code='button']").on("click",function(){
alert(1);
})
//进行复制
$("#btn").on("click",function(){
$("input[code='button']:first").clone(true).appendTo("#filediv");//first获取第一个元素
})
})
</script>
</head>
<body>
<div id="mydiv">这是我的div</div>
<div id="youdiv"><h4>div是你的</h4></div>
<input type="button" value="动态添加按钮" id="btn">
<div id="filediv">
<input type="button" code="button" value="按钮"><br/>
</div>
</body>
3、jQuery操作dom的属性和样式
①、操作属性：JQuery对象.attr()，removeAttr(),data()
<script type="text/javascript">
$(function(){//文档加载完毕后才执行内部
//jQuery中获取属性的值有2种方式:
//方式一：attr()，如果没有这个属性，就是添加该属性
var $input1 = $("#username")
var input2 = $input1.attr("name");
$input1.attr("sex","false");
console.debug($input1);
//方式二：data()获取到的值，会转为对应的类型，获取是以data-开始的属性
var input2 = $("#username").data("email");
console.debug(input2);
//并且会转成对应类型
console.debug(typeof input2);
//3、删除属性
$input1.removeAttr("name");
//4、添加属性
$("#addAttribute").on("click",function(){
$("input:eq(4)").attr("a","A");
})
})
</script>
</head>
<body>
<input type="text" id="username" data-age="22" data-sex="true" name="wang"
data-email="12@qq.com" data-person='{"name":"王天霸","age":33,"sex":"男"}' />
<input type="button" id="addAttribute" value="添加属性" /><br />
<input type="text" id="username" />
</body>
②、操作样式：css()，addClass()，removeClass()
<script type="text/javascript">
$(function(){//文档加载完毕后才执行内部
//css()，addClass()，removeClass()
//方式一
//$("#p").css("color","pink");//设置一个样式
//$("#p").css({ color: "#ff0011", background: "blue" });//设置多个样式
//方式二：相当于添加一个属性标签
$("#p").addClass("ps");
$("#p").removeClass("ps");//移除
})
</script>
<style type="text/css">
.ps{
color: red;
}
</style>
</head>
<body>
<p id="p">湖人总冠军</p>
</body>
六、JQuery练习题
第一题
<script type="text/javascript">
$(function() {
//第一题：先绑定事件，使用checked进行选择
$("#btn").on("click",function(){
var $inputs = $("input[type='checkbox']:checked");
console.debug($inputs);
})
//第二题：hide中三个参数，第一个是设置速度，第二个是切换的效果，第三个是结束后的函数
$("p").on("click",function(){
$(this).hide(1000,"swing",function(){
alert("没了！");
})
})
//第三题：使用奇偶行设置不同的值，even是索引值为偶数的元素，odd是索引值为奇数的元素
$("tr:even").css({"color":"red","background":"green"})
$("tr:odd").css({"color":"pink","background":"yellow"})
});
</script>
</head>
<body>
篮球
<input type="checkbox" name="hobbies" /> 足球
<input type="checkbox" name="hobbies" /> 羽毛球
<input type="checkbox" name="hobbies" />
<input value="点击获取选中的input标签" 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>
第二题
<script type="text/javascript">
$(function(){
//选单个的标签向右边传递，先绑定事件
$("#btn1").on("click",function(){
//对选中的标签要进行选择，使用select匹配所有选中的option元素
$("#select1 option:checked").appendTo($("#select2"));
})
//一次性全部选中向右传递
$("#btn2").on("click",function(){
//对选中的标签要进行选择，使用select匹配所有选中的option元素
$("#select1 option").appendTo($("#select2"));
})
//反向操作
$("input[type='button']:eq(2)").on("click",function(){
//对选中的标签要进行选择，使用select匹配所有选中的option元素
$("#select2 option:checked").appendTo($("#select1"));
})
$("input[type='button']:eq(3)").on("click",function(){
//对选中的标签要进行选择，使用select匹配所有选中的option元素
$("#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" value="<--"/><br/>
<input type="button" value="<=="/>
</td>
<td>
<select id="select2" style="width:100px" size="10" multiple="multiple"></select>
</td>
</tr>
</table>
</body>
第三题
<script type="text/javascript">
$(function(){
//先绑定事件
$("#checkAll").on("click",function(){
$("input[name='hobbies']").each(function(i,obj){
$(obj).prop({"checked":true})
})
})
$("#checkNotAll").on("click",function(){
$("input[name='hobbies']").each(function(i,obj){
$(obj).prop({"checked":false})
})
})
$("#checkUnAll").on("click",function(){
$("input[name='hobbies']").each(function(i,obj){
if(obj.checked){//这里是js对象
$(obj).prop({"checked":false})
}else{
$(obj).prop({"checked":true})
}
})
})
});
function checkChange(src){//已经绑定事件了
var che = src.checked;
if(che){
$("input[name='hobbies']").prop({
checked:true
})
}else{
$("input[name='hobbies']").prop({
checked:false
})
}
}
</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>
第四题
<script type="text/javascript">
$(function() {
$("#btn1").on("click",function(){
$("#select").val("2号");
})
$("#btn2").on("click",function(){
$("#selectMultiple").val(["2号","5号"]);
})
$("#btn3").on("click",function(){
$("input[type='checkbox']").val(["复选2","复选4"]);
})
$("#btn4").on("click",function(){
$("input[value='单选2']").prop("checked",true);
})
$("#btn5").on("click",function(){
var $inputs = $(":checked");
$.each($inputs,function(i,n){
console.debug(n);
})
})
});
</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>
第五题
<script language="javascript">
$(function(){
$("#btn_submit").on("click",function(){
var username = $("#username").val();
var email = $("#email").val();
var tel = $("#tel").val();
//进行追加
var th = "<tr>"+
"<td>"+username+"</td>"+
"<td>"+email+"</td>"+
"<td>"+tel+"</td>"+
"<td>"+"<a href='javascript:void(0)' οnclick='remove(this)' >删除</a></td>"
+"</tr>";
$(th).appendTo("#userTbody")
})
//删除所有
$("#btn_removeAll").on("click",function(){
$("#userTbody").empty();//清空内部
})
});
function remove(a){//a标签
$(a).closest("tr").remove();//closest从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
}
</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>
<th>用户名</th>
<th>E-mail</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody id="userTbody">
</tbody>
</table>
</body>
七、JSON格式数据
1、JSON格式数据概述
JSON格式字符串转JSON对象，标准的json格式字符串数据 属性必须加"",JSON字符串转JSON对象有3种方式：
- 方式一：使用eval转，eval("("+jsonStr+")");json字符串不是标准的也能转
- 方式二：使用JSON.parse(jsonStr);只能转标准的json字符串
- 方式三：使用jquery的方式转$.parseJSON(jsonStr);它是基于第二种的实现，只能转标准的json字符串(推荐使用它)
<script type="text/javascript">
$(function(){//文档加载完毕后才执行内部
//创建json对象，也是json格式
var person = {"name":"王天霸","age":22,"dept":{"id":1,"name":"开发部"}};
console.debug(person);
console.debug(person.name);
console.debug(person.dept.name);
//创建json数组
var person2 = [
{"name":"王天霸","age":22,"dept":{"id":1,"name":"开发部"}},
{"name":"西门吹雪","age":23,"dept":{"id":2,"name":"公关部"}}
]
console.debug(person2);
console.debug(person2[1].dept.name);
//JSON格式字符串转JSON对象，标准的json格式字符串数据 属性必须加""
var jsonStr = '{"name":"王天霸","age":22}';
console.debug(jsonStr);//是一个字符串
//方式一：使用eval转，eval("("+jsonStr+")");json字符串不是标准的也能转
var jsonStr1 = eval("("+jsonStr+")")
console.debug(jsonStr1);
//方式二：使用JSON.parse(jsonStr);只能转标准的json字符串
var jsonStr2 = JSON.parse(jsonStr);
console.debug(jsonStr2);
//方式三：使用jquery的方式转$.parseJSON(jsonStr);它是基于第二种的实现，只能转标准的json字符串(推荐使用它)
var jsonStr3 = $.parseJSON(jsonStr);
console.debug(jsonStr3);
})
</script>
2、JSON方法来定义对象
-
1.创建对象
- 使用 new Xxx()创建对象
- 使用JSON创建对象
-
设置属性
- 普通设置 对象.属性名=值
- 动态设置值 对象[“属性名”]=值
-
删除属性
- delete 对象.属性名 或者 delete 对象[“属性名”]
<script type="text/javascript">
$(function(){//文档加载完毕后才执行内部
//1、创建对象
var user = {
name : "老王",
age : 18,
eat:function(){
alert("这是方法")
}
}
//2、添加属性
user.sex = "false";
user.add = function(){
alert("嘿嘿嘿")
}
console.debug(user.sex)
user.add();
//3、删除属性:delete 对象.属性名 或者 delete 对象["属性名"]
delete user.sex;
console.debug(user)
})
</script>
八、省市二级联动（练习）
就是在日常填写信息时，当输入了省，会自动匹配市
-
part1: 二级联动后台准备
前台页面
发布项目
准备mvc环境：tomcat环境
准备模拟数据
-
part2:发送Ajax加载省份
-
part3:根据省份发送Ajax加载市
<script type="text/javascript">
$(function(){
//1、需要在页面加载的时候就把省份加载进去
function load(){//已经获取了省份信息
//$.get通过远程 HTTP GET 请求载入信息
$.get("/provinces",function(date){//这里的参数就是后台返回的数据
$(date).each(function(i,n){
//将省份的信息追加
$("#province").append("<option value='"+n.id+"'>"+n.name+"</option>")
})
})
}
load();
//2、加载市的信息，首先绑定事件，在省的数据发生变化的时候市才显示
$("#province").on("change",function(){
$("#city").empty();//每次需要对市的信息进行清空
$("#city").append("<option value='-1'>请选择</option>")//清空以后再重写
//获取id传递到后台
var id = $(this).val();
var param = {"id":id}
$.get("/city",param,function(date){//获取市的信息
$(date).each(function(i,n){
//将市信息追加
$("#city").append("<option value='"+n.id+"'>"+n.name+"</option>")
})
})
})
})
</script>
</head>
<body>
省份:<select id="province">
<option value="-1">请选择</option>
</select>
市: <select id="city">
<option value="-1">请选择</option>
</select>
</body>
控制层信息
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;
@Controller
public class CityController {
@RequestMapping("/provinces")
@ResponseBody/*返回json格式数据*/
public List<City> provinces(){
return CityService.getProvinces();//把省份的数据接口写好了
}
@RequestMapping("/city")
@ResponseBody/*返回json格式数据*/
public List<City> city(Long id){
return CityService.findCityByProvinceId(id);
}
}
内容总结
以上是互联网集市为您收集整理的Java小白学习指南【day40】---JQuery基础全部内容，希望文章能够帮你解决Java小白学习指南【day40】---JQuery基础所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】