Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】

2023-08-04 20:16:28

什么是Jquery？

Jquey就是一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作

就是封装了JavaScript，能够简化我们写代码的一个JavaScript库

为什么要使用Jquery？

我觉得非常重要的理由就是：它能够兼容市面上主流的浏览器，我们学习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里面通过

回顾JavaScript

JavaScript定位到HTML的控件有三种基本的方式：

（A）通过ID属性：document.getElementById()
（B）通过NAME属性：document.getElementsByName()
（C）通过标签名：document.getElementsByTagName()

我们发现，JavaScript的方法名太长了，不易于书写代码……

封装优化

这些方法名太长了，获取ID属性、NAME属性、标签名属性的控件也用不着三个方法，我们定义下规则就好了

传入的参数是#号开头的字符串，那么就是id属性
传入的参数是没有#号开头的字符串，也没有前缀修饰的字符串就是标签名属性

到这里，我们就可以根据传入的参数判断它是获取ID属性的控件还是标签名的控件了。在内部还是调用document.getElementById()这些方法。我们真正在使用的时候直接写上我们自定义规则的字符串就可以获取对应的控件了。



    <script type="text/javascript">

        //$()表示定位指定的标签

        function $(str){

            //获取str变量的类型

            var type = typeof(str);

            //如果是string类型的话

            if(type == "string"){

                //截取字符串的第一个字符

                var first = str.substring(0,1);

                //如果是#号的话

                if("#" == first){

                    //获取#号之后的所有字符串

                    var end = str.substring(1,str.length);

                    //根据id定位标签

                    var element = document.getElementById(end);

                    //如果找到了

                    if(element != null){

                        //返回标签

                        return element;

                    }else{

                        alert("查无此标签");

                    }

                }else{

                }

            }else{

                alert("参数必须是字符串类型");

            }

        }

    </script>

JQuery对象与JavaScript对象之间的关系

用JavaScript语法创建的对象叫做JavaScript对象
用JQurey语法创建的对象叫做JQuery对象
- Jquery对象只能调用Jquery对象的API
- JavaScript对象只能调用JavaScript对象的API

JQuery对象与JavaScript对象是可以互相转化的，一般地，由于Jquery用起来更加方便，我们都是将JavaScript对象转化成Jquery对象

Jquery转成JavaScript对象

在Jquery中对象都是当成是数组的。因此Jquery转成JavaScript对象语法如下：获取数组的下标，出来的结果就是JavaScript对象了。

jQuery对象[下标，从0开始]
jQuery对象.get(下标，从0开始)

再次重申：Jquery对象只能调用Jquery对象的API，JavaScript对象只能调用JavaScript对象的API

JavaScript对象转成Jquery

值得注意的是：在JavaScript脚本内，this是代表JavaScript对象的。

JavaScript对象转成Jquery对象语法也非常简单：在${}内写上JavaScript对象，就变成了JQuery对象了。

语法：$(js对象)—->jQuery对象

一般地，我们习惯在Jquery对象的变量前面写上$，表示这是JQuery对象

码农公寓