您的位置:首页 > Web前端 > JQuery

jQuery ( jQuery 选择器&插件&ajax)

2019-06-08 22:07 1551 查看

jQuery 选择器&插件&ajax

  • jQuery 之 插件
  • jquery 之 ajax
  • jQuery 选择器&插件&ajax

    jQuery 简介

    什么是jQuery?

    jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(JavaScript框架)。

    jQuery设计的宗旨是“write Less,Do More”,意思就是:写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

    jQuery的核心特性:

    • 具有独特的链式语法和短小清晰的多功能接口;
    • 具有高效灵活的css选择器,并且可对CSS选择器进行扩展
    • 具有便捷的插件扩展机制和丰富的插件。

    jQuery优点:

    • 总是面向集合
    • 多行操作集于一行

    jQuery 之 选择器

    1、导入js库
    <script type=“text/javascript” src=""></script>
    2、$(fn)做为程序入口

    jQuery程序的入口:

    • $(document).ready(fn)
    • $(fn);

    $(fn)、$(document).ready(fn)、window.onload有什么区别?

    $(fn)、$(document).ready(fn)是等价的,哪个代码在前面就哪个先执行,jsp的dom树结构加载完毕即刻调用方法;window.onload最后执行,jsp的dom树加载完毕,css.js等静态资源加载完毕执行。

    jQuery 的工厂方法

    jQuery 有三种工厂方法 。

    1、 jQuery (exp[,context])

    • 标签选择器
    • ID选择器
    • 类选择器

    exp:选择器
    context:上下文,环境/容器,documemt

    注意:
    选择器,css选择器
    $就是jQuery简写

    包含选择器:E1 E2
    组合选择器:E1,E2,E3
    自定义选择器::exp

    2、jQuery(html)
    html:基于html的一个字符串

    3、jQuery(element)
    element:js对象,表示一个html元素对象

    this 指针

    this 指针的作用:

    • 1、事件源(获取当前按钮的按钮值)

    • 2、当前元素(点击按钮,获取所有a标签的值)

    • 3、在插件中的作用,看下图所示:

    jQuery 之 插件

    jQuery 插件简介

    jQuery 插件:
    用jquery写一些js代码能实现具体的功能,直接将该js文件引入进页面就可调用,可以快速开发。

    $.extend 和 $.fn.extend:

    • $.extend:对象的扩展(或继承)

      $.extend(obj1,obj2,obj3[,...])
      $.extend(obj1,obj2)
      $.extend(obj1)//$.method=function(options){...};
    • $.fn.extend

      $.fn.extend(obj1)//$.fn.method=function(options){...};

    json的三种格式

    • 1、对象
      如: {sid:‘001’,sname:‘小样’}

    • 2、列表/数组
      如: [1,2,3,4]

    • 3、混合模式
      如: {id:001,hobby:[‘aa’,‘bb’,‘cc’]}

    请参考重要代码,对比json的三种格式(前台 & 后台):

    json 前台展示:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!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="${pageContext.request.contextPath }/js/jquery-3.3.1.js"></script>
    <title>Insert title here</title>
    <script type="text/javascript">
    
    $(function(){
    
    //json对象的字符串体现形式
    var jsonObj1 = {sid:'s001',sname:'南柱赫'};
    //console.log(jsonObj1);
    
    //json数组的字符串体现形式
    var jsonArray1 = [1,2,3,4];
    //console.log(jsonArray1);
    
    //json混合模式的字符串体现形式
    var jsons = {id:1,hobby:["aa","bb","cc"]};
    //console.log(jsons);
    
    //$.extend用来扩充jquery类的属性和方法
    var jsonObj2 = {};
    //$.extend(jsonObj2,jsonObj1);//用后面的对象扩充第一个对象
    //console.log(jsonObj2);
    
    //之前已经扩充的属性值会被后面的对象覆盖,如果后面对象有新的属性,会继续扩充
    //解决扩充覆盖问题
    var jsonObj3 = {sid:'s003',sname:'伊清',hobby:['rap','唱跳']};
    $.extend(jsonObj2,jsonObj1,jsonObj3);
    console.log(jsonObj2);
    
    $.extend({
    hello:function(){
    alert('来啦来啦');
    }
    });
    
    $.hello();
    
    //$.fn.extend是用来扩充jQuery实例的属性、方法
    $.fn.extend({
    sayHello:function(){
    alert('Hello!');
    }
    });
    
    $("#yellow").sayHello();
    alert("yellow");
    
    })
    </script>
    </head>
    <body>
    <span id="yellow">yellow</span>
    </body>
    </html>

    json 后台展示:

    jQuery 插件开发实例

    jQuery插件的添加,其实就是给jQuery添加新的实例方法或类方法,然后将功能封闭在其中

    重要代码如下:

    自定义 css:

    自定义 js:

    jsp界面实例:

    在jsp界面实例中直接引用相关的css 和 js 即可!!!

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/jsp/common/head.jsp" %>
    <!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>Insert title here</title>
    
    <script type="text/javascript">
    $(function(){
    $("table").bgColor({
    head : 'fen',
    out : 'yellow',
    over : 'red'
    });
    
    })
    </script>
    </head>
    <body>
    <table id="t1" border="1" width="90%">
    <tr>
    <td>书名</td>
    <td>作者</td>
    <td>点击量</td>
    </tr>
    <tr>
    <td>圣墟</td>
    <td>辰东</td>
    <td>10万</td>
    </tr>
    <tr>
    <td>飞剑问道</td>
    <td>我吃西红柿</td>
    <td>11万</td>
    </tr>
    <tr>
    <td>杀神</td>
    <td>逆苍天</td>
    <td>22万</td>
    </tr>
    <tr>
    <td>龙王传说</td>
    <td>唐家三少</td>
    <td>18万</td>
    </tr>
    <tr>
    <td>斗破苍穹</td>
    <td>天蚕拖豆</td>
    <td>1万</td>
    </tr>
    </table>
    
    <table id="t2" border="1" width="90%">
    <tr>
    <td>书名</td>
    <td>作者</td>
    <td>点击量</td>
    </tr>
    <tr>
    <td>圣墟</td>
    <td>辰东</td>
    <td>10万</td>
    </tr>
    <tr>
    <td>飞剑问道</td>
    <td>我吃西红柿</td>
    <td>11万</td>
    </tr>
    <tr>
    <td>杀神</td>
    <td>逆苍天</td>
    <td>22万</td>
    </tr>
    <tr>
    <td>龙王传说</td>
    <td>唐家三少</td>
    <td>18万</td>
    </tr>
    <tr>
    <td>斗破苍穹</td>
    <td>天蚕拖豆</td>
    <td>1万</td>
    </tr>
    </table>
    </body>
    </html>

    注意 :
    在大型项目中,大部分时候需要在多个jsp界面调用多个css 和 js ,这时,我们可以再写一个head.jsp,在这个head.jsp 界面直接调用需要用到的css 和 js,然后,在有需要的jsp界面直接调用head.jsp就OK ! 下面就是一个例子。

    head.jsp 代码如下:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE>
    <link href="${pageContext.request.contextPath }/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/jquery/table/js/jquery.table.js"></script>

    在界面调用,代码如下:

    <%@ include file="/jsp/common/head.jsp" %>

    这样岂不是减少了代码量,还提高了开发效率。

    jquery 之 ajax

    jackson

    什么是 jackson?

    Jackson是一个简单基于Java应用库,Jackson可以轻松的将Java对象转换成json对象
    和xml文档,同样也可以将json、xml转换成Java对象

    jackson 核心代码:

    ObjectMapper mapper = new ObjectMapper();
    mapper.writeValueAsString(obj);
    
    int count = md.getColumnCount();
    map.put(md.getColumnName(i), rs.getObject(i));

    将java 转为 json

    注意:

    javaBean与Map集合转换成json字符串的格式是一样的,论证如下:

    json 死循环

    处理方式:

    • 1、由双向绑定改成单向绑定,将彼此之间的关系交于一方维护
    • 2、@JsonIgnore:将彼此循环调用的属性忽略,不参与对象转成json格式

    重要代码如下:

    package com.dj;
    
    import java.util.HashSet;
    import java.util.Set;
    
    import com.dj.entity.Student;
    import com.dj.entity.Teacher;
    import com.fasterxml.jackson.annotation.JsonIgnore;
    import com.fasterxml.jackson.core.JsonProcessingException;
    import com.fasterxml.jackson.databind.ObjectMapper;
    
    /**
    * json死循环
    *
    * 处理方式:
    * 1、由双向绑定改成单向绑定,将彼此之间的关系交于一方维护
    * 2、@JsonIgnore:将彼此循环调用的属性忽略,不参与对象转成json格式
    *
    * @author 86182
    *
    */
    public class Demo3 {
    
    public static void main(String[] args) throws JsonProcessingException {
    
    Student stu1 = new Student("s-001", "南柱赫");
    Student stu2 = new Student("s-002", "李钟硕");
    
    Teacher tea1 = new Teacher("t-001", "张艺兴", null);
    Teacher tea2 = new Teacher("t-002", "王嘉尔", null);
    
    Set<Teacher> teas = new HashSet<>();
    teas.add(tea1);
    teas.add(tea2);
    stu1.setTeas(teas);
    
    Set<Student> stus = new HashSet<>();
    stus.add(stu1);
    stus.add(stu2);
    tea1.setStus(stus);
    
    ObjectMapper om = new ObjectMapper();
    
    1b5d8
    System.out.println(om.writeValueAsString(stu1));
    
    }
    
    }

    处理后的打印效果:

    小彩蛋:

    推荐大家一些关于jQuery学习的相关网站:

    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: