什么是Jquery？

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

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

为什么要使用Jquery？

我觉得非常重要的理由就是：它能够兼容市面上主流的浏览器，我们学习AJAX就知道了，IE和FireFox获取异步对象的方式是不一样的，而Jquery能够屏蔽掉这些不兼容的东西...

注意：jQuery不是将所有JS全部封装，只是有选择的封装

（8）出错后，有一定的提示信息

（9）不用再在html里面通过<script>标签插入一大堆js来调用命令了

回顾javascript

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

我们发现，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对象

选择器

Jquery提供了九个选择器给我们用来定位HTML控件..

目的：通过九类选择器，能定位web页面（HTML/JSP/XML）中的任何标签

（1）基本选择器

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

（2）层次选择器

有父子，兄弟关系的标签

（3）增强基本选择器

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

（4）内容选择器

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

（5）可见性选择器

可见或不可见的标签

（6）属性选择器

与属性的值相关

（7）子元素选择器

匹配父标签下的子标签

（8）表单选择器

匹配表单对应的控件属性

（9）表单对象属性选择器

匹配表单属性具体的值

通过这九种的选择器，我们基本可以能获取HTML中任何位置的标签。

Jquery关于DOM的API

前面使用Jquery的选择器来获取到了HTML标签，单纯得到标签是没有用的。我们要对其进行增删改，这样在网页上才能做出“动态”的效果...

JavaScript的DOM能够操作CSS,HTML从而在网页上做出动态的效果..

**Jquery是对JavaScript的封装，那么Jquery在得到HTML标签后，也有对应的方法来获取标签的内容，动态创建、删除、修改标签。**从而在网页上做出动态的效果

追加 查询层次关系

我们发现在选择器上就有层次关系的选择器，在API上也有层次关系的方法。一般地，我们用方法来定位到对应的控件比较多。

css样式 动画效果

往这些方法下设置参数，那么就可以控制它的隐藏、显示时间

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标签之间的值为""空串

增删改标签 迭代

由于Jquery对象都是被看成是一个数组，each()方法就是专门用来操作数组的。

each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象

Jquery事件API

JavaScript一大特性就是事件驱动，当用户用了执行了某些动作以后，JavaScript就会响应事件，在事件的方法上，我们就可以对用户的动作“回馈”一些信息给用户！