• 关注官方微信 微信公众号 添加方式:
    1:搜索微信号(gogolinux
    2:扫描左侧二维码
  • 登录 注册
  • 一起学LINUX - GOGOLINUX

    查看: 770|回复: 0
    打印 上一主题 下一主题

    什么是jQuery?

    [复制链接]

    1

    主题

    1

    帖子

    16

    积分

    新手上路

    Rank: 1

    积分
    16
    跳转到指定楼层
    楼主
    发表于 2020-1-27 00:47:25 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    前言只有光头才能变强。
    文本已收录至我的GitHub仓库,欢迎Star:http://github.com/ZhongFuCheng3y/3y
    Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作
    就是封装了JavaScript,能够简化我们写代码的一个JavaScript库
    我觉得非常重要的理由就是:它能够兼容市面上主流的浏览器,我们学习AJAX就知道了,IE和FireFox获取异步对象的方式是不一样的,而Jquery能够屏蔽掉这些不兼容的东西

    • (1)写少代码,做多事情【write less do more】
    • (2)免费,开源且轻量级的js库,容量很小
    • 注意:项目中,提倡引用min版的js库
    • (3)兼容市面上主流浏览器,例如 IE,Firefox,Chrome
    • 注意:jQuery不是将所有JS全部封装,只是有选择的封装
    • (4)能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果,也能提供异步AJAX功能
    • (5)文档手册很全,很详细
    • (6)成熟的插件可供选择
    • (7)提倡对主要的html标签提供一个id属性,但不是必须的
    • (8)出错后,有一定的提示信息
    • (9)不用再在html里面通过


    • (A)通过ID属性:document.getElementById
    • (B)通过NAME属性:document.getElementsByName
    • (C)通过标签名:document.getElementsByTagName
    我们发现,JavaScript的方法名太长了,不易于书写代码……
    封装优化这些方法名太长了,获取ID属性、NAME属性、标签名属性的控件也用不着三个方法,我们定义下规则就好了

    • 传入的参数是"#"号开头的字符串,那么就是id属性
    • 传入的参数是没有"#"号开头的字符串,也没有前缀修饰的字符串就是标签名属性
    到这里,我们就可以根据传入的参数判断它是获取ID属性的控件还是标签名的控件了。在内部还是调用document.getElementById这些方法。我们真正在使用的时候直接写上我们自定义规则的字符串就可以获取对应的控件了。

    这里写图片描述 JQuery对象与JavaScript对象是可以互相转化的,一般地,由于Jquery用起来更加方便,我们都是将JavaScript对象转化成Jquery对象
    Jquery转成JavaScript对象在Jquery中对象都是当成是数组的。因此Jquery转成JavaScript对象语法如下:获取数组的下标,出来的结果就是JavaScript对象了。

    • jQuery对象[下标,从0开始]
    • jQuery对象.get(下标,从0开始)
    JavaScript对象转成JqueryJavaScript对象转成Jquery对象语法也非常简单:在${}内写上JavaScript对象,就变成了JQuery对象了。语法:$(js对象)---->jQuery对象
    Jquery提供了九个选择器给我们用来定位HTML控件..

    • 目的:通过九类选择器,能定位web页面(HTML/JSP/XML)中的任何标签
    • (1)基本选择器

      • 直接定位id、类修修饰器、标签

    • (2)层次选择器

      • 有父子,兄弟关系的标签

    • (3)增强基本选择器

      • 大于、小于、等于、奇偶数的标签

    • (4)内容选择器

      • 定义内容为XXX、内容中是否有标签器、含有子元素或者文本的标签

    • (5)可见性选择器

      • 可见或不可见的标签

    • (6)属性选择器

      • 与属性的值相关

    • (7)子元素选择器

      • 匹配父标签下的子标签

    • (8)表单选择器

      • 匹配表单对应的控件属性

    • (9)表单对象属性选择器

      • 匹配表单属性具体的值

    通过这九种的选择器,我们基本可以能获取HTML中任何位置的标签。
    前面使用Jquery的选择器来获取到了HTML标签,单纯得到标签是没有用的。我们要对其进行增删改,这样在网页上才能做出“动态”的效果…
    JavaScript的DOM能够操作CSS,HTML从而在网页上做出动态的效果..
    这里写图片描述 Jquery是对JavaScript的封装,那么Jquery在得到HTML标签后,也有对应的方法来获取标签的内容,动态创建、删除、修改标签。从而在网页上做出动态的效果
    追加

    • append:追加到父元素之后
    • prepend:追加到父元素之前
    • after:追加到兄弟元素之后
    • before:追加到兄弟元素之前
    查询层次关系我们发现在选择器上就有层次关系的选择器,在API上也有层次关系的方法。一般地,我们用方法来定位到对应的控件比较多

    • children:只查询子节点,不含后代节点
    • next:下一下兄弟节点
    • prev:上一下兄弟节点
    • siblings:上下兄弟节点
    css样式

    • addClass:增加已存在的样式
    • removeClass:删除已存在的样式
    • hasClass:判断标签是否有指定的样式,true表示有样式,false表示无样式
    • toggleClass:如果标签有样式就删除,否则增加样式
    动画效果往这些方法下设置参数,那么就可以控制它的隐藏、显示时间

    • show:显示对象
    • hide:隐藏对象
    • fadeIn:淡入显示对象
    • fadeOut:淡出隐藏对象
    • slideUp:向上滑动
    • slideDown:向下滑动
    • slideToggle:上下切换滑动,速度快点
    CSS尺寸属性直接调用无参就是获取,给指定的参数就是修改

    • offset:获取对象的left和top坐标
    • offset({top:100,left:200}):将对象直接定位到指定的left和top坐标
    • width:获取对象的宽
    • width(300):设置对象的宽
    • height:获取对象的高
    • height(500):设置对象的高


    • val:获取value属性的值
    • val(""):设置value属性值为""空串,相当于清空
    • text:获取HTML或XML标签之间的值
    • text(""):设置HTML或XML标签之间的值为""空串
    • html:得到标签下HTML的值
    • **attr(name,value):给符合条件的标签添加key-value属性对 **
    • removeAttr:删除已存在的属性
    $("HTML代码
    "):创建元素,属性,文本
    remove:删除自已及其后代节点
    clone:只复制样式,不复制行为
    clone(true):既复制样式,又复制行为
    replaceWith:替代原来的节点迭代由于Jquery对象都是被看成是一个数组,each方法就是专门用来操作数组的。
    JavaScript一大特性就是事件驱动,当用户用了执行了某些动作以后,JavaScript就会响应事件,在事件的方法上,我们就可以对用户的动作“回馈”一些信息给用户!
    Jquery也对JavaScript事件进行了封装,我们看一下以下的API:

    • window.onload:在浏览器加载web页面时触发,可以写多次onload事件,但后者覆盖前者
    • ready:在浏览器加载web页面时触发,可以写多次ready事件,不会后者覆盖前者,依次从上向下执行,我们常用$(函数)简化
    • ready和onload同时存在时,二者都会触发执行,ready快于onload
    • change:当内容改变时触发
    • focus:焦点获取
    • select:选中所有的文本值
    • keyup/keydown/keypress:演示在IE和Firefox中获取event对象的不同
    • mousemove:在指定区域中不断移动触发
    • mouseover:鼠标移入时触发
    • mouseout:鼠标移出时触发
    • submit:在提交表单时触发,true表示提交到后台,false表示不提交到后台
    • click:单击触发
    • dblclick:双击触发
    • blur:焦点失去
    值得注意的是:当用户执行动作的时候,浏览器会自动创建事件对象,传递进去给响应事件的方法【类似与监听器的原理】,那么我们在响应方法上就可以获取一些属性:
    我们在开始使用JavaScript学习AJAX的时候,创建异步对象时,需要根据不同的浏览器来创建不同的对象….装载XML文件的时候,也有兼容性的问题。
    Jquery就很好地屏蔽了浏览器不同的问题,不需要考虑浏览器兼容的问题,这是非常非常方便我们开发的。

    • $.ajax([options])
    • load(url, [data], [callback])
    • $.get(url, [data], [fn], [type])
    • $post(url, [data], [callback], [type])
    • serialize
    前4个方法的功能都是差不多的,都是向服务器发送请求,得到服务器返回的数据。
    `load`这里写图片描述 我来补充一下:

    • 第一个参数:表示的是要请求的路径
    • 第二个参数:要把哪些参数带过去给服务器端,需要的是JSON格式的
    • 第三个参数:回调方法,服务器返回给异步对象的时候,会调用该方法
    回调方法也有三个参数:

    • 回调函数中参数一:backData表示返回的数据,它是js对象
    • 回调函数中参数二:textStatus表示返回状态的文本描述,例如:success,error,
    • 回调函数中参数三:xmlHttpRequest表示ajax中的核心对象
    一般地,我们只需要用到第一个参数!
    我们来使用这个方法来获取当前的时间,对这个方法熟悉一下:
    调用load方法的jquery对象,返回结果自动添加到jQuery对象代表的标签中间

    • 如果带参数就自动使用post,不带参数自动使用get。
    • 使用load方法时,自动进行编码,无需手工编码




    $Title$





    当前时间是:








    • Servlet代码:
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

    SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

    String date = dateFormat.format(new Date);

    PrintWriter writer = response.getWriter;
    writer.write(date);

    writer.flush;
    writer.close;

    }

    • 效果:
    这里写图片描述 上面的load方法,当我们带参数给服务器的时候,就自动转化成post、不带参数的时候就转换成get。$.get就是指定是get方法load方法是使用Jquery对象来调用的,并且调用过后,会把数据自动填充到Jquery对象的标签中间,而$.get并不是特定的Jquery对象来调用!$.get(url, [data], [fn], [type])参数和load是完全类似的,我们在上面的例子中该一下就行了。**由于$.get是没有将返回的数据自动填充到标签之中,因此需要手动地添加到指定的标签之中! $.get(url, function (backData) {

    //得到客户端返回的数据【JS对象】

    $("#time").append(backData);
    });

    • 效果:
    这里写图片描述 $.post和$.get是十分类似的,只不过是把请求方式改变了,一般情况下,我们有参数传递给服务器的时候,都是用post方式的。使用$.post方法是需要设定编码的,它和load方法是不一样的!下面使用检查用户名和密码是否合法的案例来说明这两个方法:





    $Title$









    用户名:
    密码:









    • Servlet代码:
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;

    /**
    * Created by ozc on 2017/5/21.
    */
    @WebServlet(name = "UserServlet",urlPatterns = "/UserServlet")
    public class UserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    //设定编码
    request.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");

    String username = request.getParameter("username");
    String password = request.getParameter("password");

    String backData = "用户名和密码合法";
    if ("哈哈".equals(username) && "123".equals(password)) {

    backData = "用户名或密码不合法";
    }

    response.getWriter.write(backData);

    }

    protected void doGet throws{

    this.doPost(request, response);

    }
    }
    这里写图片描述 这里写图片描述 serialize上面在介绍参数的时候已经说了,发送给服务器端的参数是需要JSON格式的,但是呢,如果我在表单中有很多很多的参数呢???那不是要我自己一个一个地去拼接????
    于是乎,Jquery也提供了serialize这么一个方法,给我们自动把表单中的数据封装成JSON格式的数据
    使用之前要注意的是:
    必须在标签元素之内根据上面的例子,我们来使用一下,我们调用serialize方法,不自己去拼接JSON





    $Title$








    用户名:
    密码:









    • 效果:
    这里写图片描述 $.ajax对于这个方法,我们又使用二级联动这个案例来讲解吧。我们曾经使用过JavaScript来解析XML、JSON来实现二级联动。这次我使用Jquery+Struts2+JSON来实现二级联动。
    $.ajax这个方法 接收的参数是一个JSON类型,JSON里面有几个参数:

    • type【请求类型】
    • url【请求路径】
    • data【发送给服务器的数据,也是一个JSON类型】
    • success【回调函数】
    这里遇到的问题:动态获取选择下拉框的值时候,调用的是val而不是text….



    省份-城市,基于jQuery的AJAX二级联动

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    分享到:
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    官方微博:

    官方头条号:

    官方微信

    手机访问:

    官方微信

    QQArchiver 手机版 小黑屋 一起学LINUX - GOGOLINUX 闽ICP备18025837号-1 Discuz! X3.4 Powered by © 2001-2013 Comsenz Inc. 

    yabovip入口本站资源均来自互联网或会员发布,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

    快速回复 快速发帖 返回顶部 返回列表