jQuery库总结

2019独角兽企业重金招聘Python工程师标准>>>

一、什么是 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下，现有插件可能无法正常使用；

        多个插件冲突；

        动画和特效的支持较差。

转载于:https://my.oschina.net/u/3728554/blog/1862447