再撸一遍jQuery

→点我去看js基础知识点整理

→点我去看js进阶知识点整理

→点我去看dom知识点整理

jQuery—为操作dom而生

What is jQuery ?

jQuery 就是一个 JS 的函数库，里面封装了很多方法API，我们只需要调用这些方法即可，可以提高开发效率。

1. jQuery对象和DOM对象的相互转换

原因：但凡是用document获取出来对象都是DOM对象，用$()获取出来的都是jQuery对象，它们各自只能使用各自的方法和属性。

• JQ对象转DOM对象

  (selector)[index] 或(selector).get(index)

• DOM对象转JQ对象

  $(DOM对象)

2. 入口函数

JS入口函数

window.onload = function() { /*内容*/ };

jQuery入口函数

$(document).ready(function(){ /*内容*/ });

$(function(){ /*内容*/ }); 

区别1：书写个数不同

• JS入口函数只能出现一次,出现多次会存在事件覆盖的问题。
• jQuery的入口函数,可以出现任意多次,不会覆盖。

区别2：执行时机不同

• JS入口函数是在所有静态资源加载完成后，才执行。
• jQuery入口函数，是在文档加载完成后就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的静态资源都加载完成。

3.选择器

1. $("css选择器")
2. $(":checkbox")---所有 type="checkbox" 的 元素
3. $(":disabled")---所有禁用的 input 元素
4. $("[href]")---所有带有 href 属性的元素

筛选选择器（方法）

1. eq(index)
2. children()---子代
3. parent() 和 parents( selector )
4. find( selector )---后代
5. siblings()--兄弟
6. next() 和 prev()

4.样式操作

css操作
设置法一：css（‘name’,’value’）
设置法二：css（{name1:value1,name2:value2}）
获取：css（‘name’）如果是多个元素，那么只会返回第一个元素的值。

class操作
addClass（‘name’）添加；
removeClass（‘name’）移除；
hasClass（‘name’）返回布尔值，用于判断是否有该类名；
toggleClass（‘name’）切换。

属性操作attr（特性）和prop（属性）
设置法一：attr/prop（‘name’,’value’）
设置法二：attr/prop（{name1:value1,name2:value2}）
获取：attr/prop（‘name’）如果是多个元素，那么只会返回第一个元素的值;如果该属性不存在，那么会返回undefined.
移除：removeAttr( ‘name’ )

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法，例如表单的checked、selected、disabled。a链接的prop（"search","?URL后面的参数"）设置a链接地址栏问号后的参数。

对于HTML元素我们自己自定义属性，在处理时，使用attr方法。

5.动画操作

1. 显示隐藏

   show(speed, callback);
   hide(speed, callback);

2. 滑入滑出

   slideDown(speed, callback);
   slideUp(speed, callback);
   slideToggle(speed,callback);

3. 淡入淡出

   fadeIn(speed, callback);
   fadeOut(speed, callback);
   fadeToggle(speed, callback);
   fadeTo(speed,opacity,callback); // 设置指定透明度

4. 自定义动画

   animate({params},speed,easing,callback);

5. 停止动画

   stop();
   不传参数，是停止动画队列中当前正在执行的动画，动画队列后面的动画正常执行。

   stop(clearQueue, jumpToEnd);
   参数一：是否清除动画队列，默认是 false
   参数二：是否跳转到当前动画的最终效果，默认是 false

   stop(true);传一个true，清空动画队列，且不会跳转到当前动画的最终状态，就是会停止在该状态
   stop( true , true );传两个true，清空动画队列，且跳转到当前动画的最终状态

   所以一般我们绑定动画事件时，为了避免点击多次停不下来，我们会先stop( true )一下，清空一下动画队列，然后再绑定动画事件

6.元素操作

1. 添加元素/内容

   append() --- 在被选元素的结尾插入内容
   prepend() --- 在被选元素的开头插入内容
   after() --- 在被选元素之后插入内容
   before() --- 在被选元素之前插入内容

2. 删除元素/内容

   remove() --- 删除被选元素（及其子元素）自杀
   empty() --- 删除被选元素的子元素

3. 克隆元素/内容

   clone()
   参数：布尔值 不管是false还是true 都是深拷贝
   false 不会复制元素身上的事件
   true 会复制元素身上的事件

4. 设置/获取内容

   text() - 设置或返回所选元素的文本内容
   html() - 设置或返回所选元素的内容（包括 HTML 标记）
   val() - 设置或返回表单字段的值，例如input、select、textarea的值

5. 设置/获取尺寸width和height

   width（）获取的是内容的宽度 不包括 padding 和 border
   innerWidth（） width + padding
   outerWidth（） width + padding + border
   outerWidth（true）width + padding + border + margin

6. 设置/获取匹配元素的滚动条的垂直位置

   scrollTop ( ) 和scrollLeft ( )
   需要注意的是，这里的数值不能加引号。也不用加px. 只需要给数值就可以了

7.事件绑定 与 解绑

1. 绑定 on

   $(selector).on(event,childSelector,function)

   参数二 childSelector（可选） 利用事件冒泡的原理，给父级元素注册事件，而实际在子元素身上生效，函数中的this指子元素。==event.target；

2. 解绑 off

   $(selector).off(event);

8.事件触发

1. 简单事件触发：

   $(selector).click(); //触发 click事件

2. trigger方法触发事件：

   $(selector).trigger(“click”);
   触发被选元素上指定的事件 以及事件的默认行为（比如表单提交）。

9.jQuery事件对象

使用时向函数内传递参数event

jQuery事件对象.jpg

10.ajax 请求

1. 模板

   $.ajax({
       type:规定请求的类型（GET 或 POST）,
       url:规定发送请求的 URL。默认是当前页面,
       async:表示请求是否异步处理。默认是 true,
       data:规定要发送到服务器的数据,
       dataType:预期的服务器响应的数据类型,
       success: function (result) {}当请求成功时运行的函数，参数为响应数据
   });
   

2. 解决跨域（datatype：jsonp）

   Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

   为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

   同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。

   JSONP 利用了 script 标签可以跨域，不收同源限制的特点，实现跨域读取数据

   在jQuery中只需在ajax中设置datatype：jsonp即可

---

因为jQuery忘得7788，晚上整理了之前学习的jQuery笔记，又重新过一遍，古人云，温故而知新！

Knowledge changes the mind