浅谈JQuqry 这么一个优秀的 Javascript 框架,及其简单应用

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 对象。