文档章节

jQuery库总结

凛冬来袭
 凛冬来袭
发布于 2018/07/24 22:27
字数 1274
阅读 43
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

一、什么是 jQuery ?

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少,做的多"的JavaScript库。

jQuery库包含以下功能:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

二、ajax使用方式

$.ajax({

        url:'', 链接路径

       type:'post/get' 用什么方式提交

       data:{键:值}, 传入数据用键值对方式传入

        dataType:"json"服务器返回的数据类型。//除了单纯的json,还可以指定 html、xml、jsonp、script或者text。

       success:function(){ 成功是传入的参数 } ,

       error:function(){}

})

<input class="form-control" id="username" name="username" type="text"/>
<input class="form-control" id="password" name="password" type="password"/>
<button type="button" onclick="loginSubmit()">立即登录</button>
function loginSubmit() {
        var username = $("#username").val();    // 获取username的<input>框数据
        var password = $("#password").val();    // 获取password的数据
        // 判断
        if (username.length == 0) {
            $("#username").tips({msg: "请输入用户名。"});
            return;
        }
        if (password.length == 0) {
            $("#password").tips({msg: "请输入密码。"});
            return;
        }
        // Ajax提交数据
        $.ajax({
            url: "admin/check_login",    // 提交到后端的url路径
            type: "post",    // 提交方式
            data: {"username": username, "password": password},  //必须为Key:Value 格式。
            dataType: "json",    // 服务器端返回的数据类型
            success: function (data) {    // 请求成功后的回调函数,
                if (data.message == "success") {    
                    //跳转到系统首页
                   ......
                } else {
                    ......
                }
            },
        });
    }

三、event对象的简介

  • event.data //传递的额外事件响应方法的额外参数

  • event.currentTarget //在事件响应方法中等同于this,当前Dom对象

  • event.target //事件触发源,不一定===this

  • event.pageX //The mouse position relative to the left edge of the document

  • event.pageY

  • event.stopPropagation()//阻止事件冒泡

  • e.preventDefault(); //阻止默认行为

  • event.type //事件类型:click,dbclick...

  • event.which //鼠标的按键类型:左1 中2 右3

四、一些概念

1、jQuery采用的是构造函数模式进行开发的,jQuery是一个类;

2、常用的方法(CSS、属性、筛选、事件、动画、文档处理)都是定义在jQuery.prototype上的 ->只有jQuery的实例才能使用这些方法;

3、我们的选择器其实就是创造jQuery类的一个实例 ->获取页面中元素用的 jQuery(); -> $(),$()就是jQuery的选择器,就是创建jQuery这个类的一个实例。JS:取到的是一个DOM对象。JQUERY:取到的是一个JQUERY对象;

4、js和jQuery的一点点冲突问题:

jQuery对象转成DOM对象:

(1)jQuery对象实际上是一个数据对象,可以通过[index]方法获得相应的DOM对象。

如:var $v=$("#v"); //得到jQuery对象

var v=$("v")[0];//转换成DOM对象

(2)jQuery本身可以通过.get(index)方法得到相应的DOM对象

如:var $v=$("#v"); //得到jQuery对象

var v=$v.get(0);

DOM对象转成jQuery对象:

对于已经是一个DOM对象,只需要用$()将DOM对象包装起来,就能获得jQuery对象了

如:var v=document.getElementById("v"); //得到DOM对象

var $v=$(v); //转成jQuery对象

转换后,就可以任意使用jQuery的方法了

5、jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的。从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库。jQuery改变javascript编码方式!

6、jQuery核心思想:

        通过闭包将各种变量封装起来,这样不会污染全局变量环境,还能实现DOm操作的一些功能,然后通过下面一句话:

window.jQuery = window.$ = jQuery;

将我们在闭包当中定义的jQuery对象导出为全局变量jQuery和$,因此我们才可以在外部直接使用jQuery和$。

        具体实现如下:

        首先我们进入jquery源码中,可以很容易的找到jquery对象的声明,看过以后会发现,原来我们的jquery对象就是init对象。

jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context, rootjQuery );
    }

   这里出现了jQuery.fn这样一个东西,它的由来可以在jquery的源码中找到,它其实代表的就是jQuery对象的原型。

jQuery.fn = jQuery.prototype;
jQuery.fn.init.prototype = jQuery.fn;

   这两句话,第一句把jQuery对象的原型赋给了fn属性,第二句把jQuery对象的原型又赋给了init对象的原型。也就是说,init对象和jQuery具有相同的原型,因此我们在上面返回的init对象,就与jQuery对象有一样的属性和方法。

 7、特点:

        轻量级框架;丰富的DOM选择器;链式表达式;事件、样式、动画支持;Ajax支持;跨浏览器兼容;插件拓展开发;可扩展性强。

8、优点:

        实现脚本与页面的分离;最少的代码做更多的事;性能支持好;使用广泛;插件开发;节约学习成本

9、缺点:

        不能向后兼容,每个版本不能兼容早期版本;

        插件兼容性,最近jQuery下,现有插件可能无法正常使用;

        多个插件冲突;

        动画和特效的支持较差。

凛冬来袭
粉丝 1
博文 13
码字总数 23854
作品 0
西安
程序员
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.6K
8
表单验证插件--Jquery表单验证插件

目前支持对以下格式的值进行验证: cnum-(纯数字), char-(纯字母), zwen-(中文), bysc-(字母开头), mail(邮箱), yzbm(邮政编码) 其中的‘’表示长度,比如“zwen1-5”表示中文1-5位的长度。同...

huanganiu
2013/01/23
4.4K
0
XLSX读写库--EPPlus

EPPlus 是使用Open Office XML格式(xlsx)读写Excel 2007 / 2010文件的.net开发库。 EPPlus 支持: 单元格范围 单元格样式(Border, Color, Fill, Font, Number, Alignments) Charts 图片 形状...

匿名
2013/02/01
1W
2
C++模板库--C++ B-tree

这是一个google开源的C++模板库,实现了基于B-tree数据结构的有序内存容器。类似于STL的map、set、multimap和multiset模板,C++ B-tree也提供了btreemap、btreeset、btreemultimap和btreemu...

匿名
2013/02/05
3.4K
1
Javascript图元绘制库--ternlight

基于HTML CANVAS API的Javascript库,提供在HTML页面上绘制图元——如流程图的能力。 目前已支持简单的矩形图元和图元间的连线(直线、直角连线两种),拖拽图元等能力。 该javascript librar...

fancimage1
2013/02/07
6.3K
1

没有更多内容

加载失败,请刷新页面

加载更多

如何在find中排除目录。命令 - How to exclude a directory in find . command

问题: I'm trying to run a find command for all JavaScript files, but how do I exclude a specific directory? 我正在尝试为所有JavaScript文件运行find命令,但是如何排除特定目录? ......

法国红酒甜
45分钟前
65
0
《Java8实战》笔记(02):通过行为参数传递代码

本文源码 应对不断变化的需求 通过筛选苹果阐述通过行为参数传递代码 初试牛刀:筛选绿苹果 public static List<Apple> filterGreenApples(List<Apple> inventory){List<Apple> result = ......

巨輪
46分钟前
7
0
JeeSite 4 架构特点、安全方面、为什么好、工匠精神、不忘初心

1、底层架构 以 Spring Boot 2 为基础,Maven 多项目依赖,模块分项目,松耦合,方便模块升级、增减模块。 模块化的数据库自动升级程序,当模块升级代码需要更新数据库时,自动执行对应版本 ...

ThinkGem
昨天
13
0
自然语言处理 NLP 发展简史

从语言结构化理论基础,到 1750 亿参数的 GPT-3。一部 NLP 的百年发展史。 语言的结构化 20 世纪初,在瑞士的日内瓦大学,一位名叫费迪南德·德·索绪尔( Ferdinand de Saussure) 的语言学...

摆摊卖报纸
昨天
12
0
今天看了公司的注册登陆代码,决定研究一下RAS和JWT。

今天先立个flag,慢慢填坑。

NicholasLee
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部