初识jQuery

Posted 2020-10-07

jQuery简介

　　jQuery是一个快速、简洁的javascript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化html文档操作、事件处理、动画设计和Ajax交互。

　　jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

 

为什么要学习jQuery？

　　JavaScript的功能很强大，同时也存在很多缺点，比如存在浏览器兼容处理,代码容错性差，入口函数只能有一个，假如多个话此时覆盖...

1    window.onload = function() {    //入口函数1
2           // js代码
3    }
4  
5    window.onload = function() {   //入口函数2
6           // js代码
7    }

　　此时，下方（入口函数2）的代码会将上方（入口函数1）的代码覆盖；然而jQuery很好的解决了这些问题。

　　jQuery官网：http://jquery.com　　

　　jQuery版本：1.x  --  支持IE6~IE8

　　　　　　　　2.x和3.x  --  不再支持IE6~IE8

　　当我们在使用jQuery时，最好是选择1.7+的版本，1.7以前的版本太老了，不建议使用。

jQuery初步

1、使用jQuery三部曲：引包 => 入口函数 => 业务逻辑

1 // 引入jQuery包
2 <script src="js/jquery-1.11.1.min.js"></script>
3 <script>
4    //  入口函数
5    $(function(){
6        //  业务逻辑
7    });
8 </script>

　　入口函数的两种常用方式：

　　　　a）$(document).ready(function(){});
　　　　b）$(function(){});

　　jQuery的入口函数（$(function(){})）只要是DOM树加载完成就开始执行，不需要等待图片、文件等的加载；而JavaScript的入口函数（window.onload = function(){}）是要在文档所有图片、文件等加载完后才开始执行。

2、$符号

　　$ --  就是一个函数，参数不同，功能不同；但是 jQuery和$是完全等价的（jQuery === $），只要有$的地方都可以有jQuery替换掉。

1 <script>
2     $("#id")  --  选择器
3     $("<div>创建DOM</div>")  --  创建DOM
4 
5     jQuery(".class")  --  选择器
6 </script>

3、jQuery对象和DOM对象之间的转换

　　DOM对象：

　　　　js方法获取的页面元素返回的对象就是DOM对象，dom对象只能使用dom对象的方法或属性

　　　　obj.innerHTML = "....";

　　jQuery对象：

　　　　使用jQuery方法获取页面中的元素返回的对象就是jQuery对象，比如$("div")、$("#btn")，jquery对象只能使用jquery对象的方法

　　　　$("#btn").show();

　　以下写法错误

　　　　$("div").innerHTML = "jquery快乐学习";

　　　　document.getElementById("box").show();

　　jQuery对象转DOM对象

　　　　$("div")[index]    ----  DOM对象（推荐使用）；index是从0开始的数字

　　　　$("div").get(index)    ----  DOM对象；index是从0开始的数字

　　DOM对象转jQuery对象

　　　　$(DOM对象)   ---   jQuery对象