jQuery基本使用

jQuery基本使用

了解

js库（library）：一个封装好的特定的方法和函数的集合。从而可以进行高效的使用

jquery概念：是一个快速、简洁的js库，其设计宗旨是’write Less，Do More‘，既写的更少，做的更多

jquery：j就是js，query就是查询，主要是对js的dom操作做了封装

jquery封装js常见的功能代码：优化了dom操作、事件处理、动画设计和ajax交互

jquery的基本使用与理解

1. 官网：https://jquery.com

   production jQuery：生产环境的jQuery（压缩过的）

   development jQuery：开发环境的jQuery（没压缩过的）

2. 引入jquery

   使用script标签，放在head标签中

3. jQuery对象与DOM对象

   jQuery是对DOM对象进行了封装的，所以jQuery对象只能使用jQuery方法

   但jQuery和DOM对象可以互相转换，而jQuery的对象没有原生js的DOM对象那么多的属性和方法

4. 转换方法：

   DOM转换成jQuery简单，直接放进“$()”里面的括号内就行了

   jQuery转换成DOM，在jQuery对象后面加上一个方括号“【】”，里面写的是选出来的元素的第几个（这里也可以将方括号变成“.get()”，括号里面的内容和方括号一样）

5. 隐式迭代（重要）

   遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代

   简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，，而不用我们再进行循环，简化我们的操作，方便我们的调用

选择器

1. 选择器

   

2. 层级选择器

3. 筛选选择器

4. 筛选方法（选择器）

样式操作

1. 语法：

   .css(“属性名”，“属性值”)；这里面也可以添加样式

   .addClass(“类名”)；类名不用加点，该类名是在样式表这编写过的

   .removeClass(“类名”)；删除类

   .toggleClass(“类名”)；切换类

元素操作

主要是遍历、创建、添加、删除元素操作

遍历

1. 同样的样式，可以用隐式迭代

2. 不同的样式用遍历

3. 语法：.each(function(index，domEle))；

   该函数是回调函数

   each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个

   里面的回调函数有两个参数：index是每个元素的索引号；DemEle是每个DOM元素对象，不是jQuery对象

4. $.each(object, function(index,element){xxx;})

   $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象

   如果是元素，跟上一个方法差不多；如果是数组，第二个参数就是值；如果是对象，第一个就是属性名，第二个参数就是属性值

创建、添加、删除

1. 创建

   语法：$(“完整标签”)；完整标签就是有头有尾

2. 添加

   内部添加：.append(创建的变量名)；放到内容的最后面

   ​ .perpend(创建的变量名)；放到内容的最前面

   外部添加：element.after(“内容”)；放到内容的最后面

   ​ element.before(“内容”)；放到内容的最前面

   注意：内部添加元素，生成之后，他们是父子关系；

   ​ 外部添加元素，生成之后，他们是兄弟关系

3. 删除

   element.remove()；删除匹配的元素（本身）

   element.empty()；删除匹配的元素集合中所有的子节点

   element…html(“”)；清空匹配的元素内容，这是利用html修改功能

jQuery事件

基本和原生js差不多

1. 语法：element.事件名字（function(){})

   注意：不用加on

2. on语法事件处理（可以一起做多个事件处理）

   语法：element.on(events, [selector],fn)

   events：一个或多个用空格分隔的事件类型，如“click”或“keydown”

   selector（可选参数）：元素的子元素选择器（就像选择器那般写法就行）

   fn：回调函数

   注意：（优势是对比第一种语法来讲的）

   on的写法可以写成对象，对象里面的键值对就是事件与回调函数

   可以一起做多个事件处理（优势1）

   selector可以实现事件委派，事件点击在父级，但是事件的信息是子元素（就相当于原生js中的利用冒泡，在给回调函数传入事件参数，里面用的事件参数就是点击的元素，但是事件却交给父元素处理，这样就可以不用给每个子元素添加事件）（优势2）

   on可以给动态创建的元素绑定事件（优势3）

3. 事件处理off（）解绑事件

   off（）方法可以移除通过on（）方法添加的事件处理程序

   element.off()；这个是解除div身上的所有事件

   element.off(“click”)；解除div身上的点击事件

   element.off(“click”，“li”)；解除li的事件委托

4. 只触发一次的事件，one()方法(跟on方法使用一样)

使用

1. $符号，必须要用的

   第一个括号写标签名(选择器)

2. hide函数，隐藏函数

3. 页面加载完，再执行的代码

• $(function(){代码})

• $(document).ready(function(){代码})

  相当于js中的DOMCntentLoaded，dom结构渲染完毕就执行，不必等外部资源加载完毕

  load要等外部资源加载完毕再执行

4. jQuery内容文本修改

   .html()(获取设置元素内容)、.text()(获取设置元素文本内容)、val()(获取设置表单值，等同于原生的value属性)

jquery代码的理解

$符号：

是jQuery的别称，代码中也可以用jQuery来代替$符号

MCntentLoaded，dom结构渲染完毕就执行，不必等外部资源加载完毕

load要等外部资源加载完毕再执行

4. jQuery内容文本修改

   .html()(获取设置元素内容)、.text()(获取设置元素文本内容)、val()(获取设置表单值，等同于原生的value属性)

jquery代码的理解

$符号：

是jQuery的别称，代码中也可以用jQuery来代替$符号

$符号是jQuery的顶级对象，相当于window