JQuqry
jQuery 介绍
jQuery 是一个优秀的 Javascript 框架 , 是免费、开源 , 轻量级的 JS 库 , 兼容多浏览器的 Javascript 库,核心理念是 write less,do more(写得更少,做得更多)
jQuery 能干什么
Query 使用户能更方便地处理 HTML 且方便地为网站提供 AJAX 交互
语法设计可以使开发者更加便捷,例如操作文档对象、选择 DOM 元素、制作动画效果、事件
处理、使用 AJAX 以及其他功能
jQuery 引入
jQuery-1.11 文件夹拷贝到项目的 webapp 下的 static 目录下
jQuery 对象 DOM 对象
通过 document.getElementById() 找到的元素和通过 $() 找不到元素不一样:
1. 通过 jQuery 方法获取的页面元素,都是 jQuery 对象。
2. jQuery 对象其实就是对 DOM 对象进行了包装,增强相关了方法,让开发者使用起来更加便利。
3. 虽然 jQuery 对象包装了 DOM 对象但是两者不能混用,各位可以理解为 jQuery 对象与 DOM 对
象是两个不类型的对象,但是我们调用 jQuery 对象的方法,事实上底层代码还是操作的是 DOM
对象。
jQuery 对象常用方法
JQuery 常用方法:
jQuery对象.size(); // 获取 jQuery 中包含元素的个数
jQuery对象.val(); // 操作元素的 value 属性
jQuery对象.html(); // 操作元素内的 HTML 代码
jQuery对象.text(); // 操作元素内的文本,忽略 HTML 标签
jQuery对象.css(); // 操作元素的 style 属性
jQuery 选择器
Query 选择器是 jQuery 类库最重要功能之一,jQuery 提供获取页面元素一种语法
基本选择器
id 选择器 元素选择器 类选择器
层次选择器
语法:$(“form input”)
说明:在给定的祖先元素下匹配所有后代元素
语法:$(“form > input”)
说明:在给定的父元素下匹配所有子元素
语法:$(”label + input“)
说明:匹配所有紧接在 prev 元素后的 next 元素。
语法:$(“form ~ input”)
说明:匹配 prev 元素之后的所有 siblings 元素
过滤选择器
选择器一般以一个冒号(:)开头,按照不同的过滤规则,可分为基本过滤,内容过滤,可见性过滤,
属性过滤,子元素过滤,表单对象属性过滤选择器
jQuery 常用 DOM 操作的方法
append 方法 元素添加子元素,且是最小的子元素
after 方法 元素添加弟弟元素。
empty、remove 和 detach 方法 empty 断子绝孙,remove 和 detach 自杀
列表移动
<script>
function moveAll(srcId, targetId) {
$('#' + targetId).append($("#" + srcId + " > option"));
}
function moveSelected(srcId, targetId) {
$('#' + targetId).append($('#' + srcId + ' > option:selected'));
}
</script>
下拉框去重
<script>
function distinct() {
// 先获取右边 select 中 option 获取 value 属性值,存到一个数组中
var arr = [];
$('#s2 > option').each(function(i, domEle){
var val = $(domEle).val();
arr.push(val); // 往数组最后添加一个元素
});
console.log(arr);
// 遍历左边 select 中 option 获取其 value 值,跟上面数组中到对比,若存在,则删除
对应 option
$('#s1 > option').each(function(i, domEle){
var $option = $(domEle);
var val = $option.val();
if($.inArray(val, arr) >= 0){ // 此 val 在数组存在
$option.remove(); // 删除对应 option 元素
}
});
}
</script
全选
<script>
function checkChange(src) {
// 根据被点击的复选框,来决定下面这些爱好的复选框的选中状态
var checked = $(src).prop('checked');
checkAll(checked);
}
function checkAll(flag) {
$('[name=hobby]').prop('checked', flag);
// 点击全选按钮的时候,最上面复选框要选中
// 点击全不选按钮的时候,最上面复选框不要选中
$('#checkAll').prop('checked', flag);
}
// 反选
function checkUnAll() {
$('[name=hobby]').each(function (i, domEle) {
// 获取其选中状态
var oldValue = $(domEle).prop('checked');
// 取反
var newValue = !oldValue;
// 再设置回去
$(domEle).prop('checked', newValue);
// $(domEle).prop('checked', !$(domEle).prop('checked'));
});
// 点击反选,若爱好全选中,最上面复选框要选中,反之不要选中
check();
}
$(function () {
// 点击所有爱好复选框,若爱好全选中,最上面复选框要选中,反之不要选中
$('[name=hobby]').click(function () {
check();
});
});
function check() {
var total = true; // 统计
$('[name=hobby]').each(function (i, domEle) {
var checked = $(domEle).prop('checked'); // 取每个爱好选中状态值
total = total && checked; // 跟变量 total 与并设置存到变量 total 中
});
// 当遍历结束的时候,total 值仍是 true, 那么代表所有爱好复选框是选中的
$('#checkAll').prop('checked', total);
}
</script>
JSON
定义
一种轻量级的数据交换格式
完全独立于编程语言的文本格式来存储和表示数据
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言
JSON 就是一种有格式的字符串
[
{”名称1” : 值, ”名称2” : 值2},
{”名称1” : 值, ”名称2” : 值2}
]
在 JavaScript 中的 JSON
var json1 = ‘{“id”:1,“name”:“zs”,“age”:18}’; // JSON
var jsObj1 = {“id”:1, “name”:“zs”, “age”:18}; // JS 对象
在 Java 中的 JSON
在 Java 中,转换 JSON 的依赖或者 JAR 有很多,这里单讲两种常用:
Jackson:在 Spring MVC 中内置支持她,速度也挺快,稳定性比较好。
Fastjson:阿里出品,号称是 Java 领域中转换 JSON 最快的一个插件,中文文档比较齐全。
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.6</version>
</dependency>
Fastjson
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</version>
</dependency>
JSON.toJSONString(department)
Spring MVC 响应 JSON
在 pom.xml 中添加 Jackson 依赖。
在 mvc.xml 配置 MVC 注解解析器。
定义一个类,里面提供对应属性封装数据。
在要响应 JSON 数据的控制器的处理方法上贴 @ResponseBody 注解,且方法返回类型为上面定
义的类。
在处理方法中创建上面定义类 的对象,封装数据返回即可
AJAX 概述
AJAX 不是一项具体的技术,而是几门技术的综合应用。
Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。
AJAX 核心只不过是要在 Javascript 中调用一个叫 XMLHttpRequest 类,这个类可以与 Web 服务
器使用 HTTP 协议进行交互,程序不通过浏览器发出请求,而是用这个特殊的 JavaScript 对象发
送请求和接收响应。
XMLHttpRequest 对象在网络上的俗称为 AJAX 对象。