jQuery——B站黑马程序员

参考链接: https://blog.csdn.net/wuyxinu/article/details/103669718.

JQuery语法： $(selector).action()

jQuery 语法是通过选取（selector） HTML 元素，并对选取的元素执行某些操作（action）。
JQuery选择器让我们更加方便的获取到页面中的元素，JQuery选择器跟css的选择器用法一模一样
JQuery API 中文文档
注意：jQuery选择器返回的是jQuery对象。

---

JQuery简介

JQuery就是一个封装了很多方法的、轻量级的"写的少，做的多"的javascript库。我们学习JQuery其实就是学习JQuery中封装的一大堆方法。

jQuery 库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

原生js的缺点

1. 不能添加多个入口函数（window.onload），如果添加了多个，后面的会把前面的给覆盖。
2. 原生js的api名字都太长太难记。
3. 原生js有时代码会有些冗余。
4. 原生js中有些属性或者方法有浏览器兼容问题。
5. 原生js容错率较低，前面的代码出了问题，则后面的代码执行不了。

JQuery的优点

1. JQuery是可以写多个入口函数的。
2. JQuery的api名字都很容易记忆。
3. JQuery代码简洁（隐式迭代）。
4. JQuery帮我们解决了浏览器兼容问题。
5. JQuery容错率较高，前面的代码出了问题，后面的代码不受影响。

---

如何使用JQuery

步骤

1. 使用script标签引入jQuery文件(到官网下载）
2. 入口函数
3. 功能实现

JQuery的入口函数

有两种写法：

//写法一
$(function(){
    });

//写法二
$(document).ready(function(){
    });
//意思是：一旦dom结构渲染完毕即可执行内部代码。

和js入口函数window.onload的区别

1. jQuery入口函数可以书写多次，window.onload只能书写一次；
2. 执行的时机不同。
   jQuery的入口，一旦dom结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成；
   window.onload 是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

---

$是一个函数

分析JQuery文件结构

1. JQuery是一个js文件，引入一个js文件是会执行js文件中的代码的。
2. JQuery文件是一个自执行函数，执行这个jQuery文件中的代码，其实就是执行这个自执行函数。
3. JQuery文件中包含的一个重要的代码表明：这个自执行文件就是给window对象添加一个jQuery属性和$属性。

   (function(){
      window.jQuery = window.$ = jQuery;
      }());
   

4. 所以$其实和jQuery是等价的，是一个函数。

$函数

$是一个函数，参数传递不同，效果也不一样。

1. 如果参数传递的是一个匿名函数，则功能为入口函数；

   $(function(){
   	});
   

2. 如果参数传递的是一个字符串，则功能为：选择器/创建一个标签；

   $('#one');
   $('<div>啦啦,我是一个div</div>');
   

3. 如果参数是一个dom对象，那他就会把dom对象转换成jQuery对象。

   $(dom对象);
   

dom对象和JQuery对象

DOM对象与jQuery对象的方法不能混用。

dom对象

1. 定义
   使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
   例如通过document.getElementById(" ")；获得的对象。
2. 特点：
   只能调用dom方法或者属性，不能调用JQuery的方法或者属性。

jQuery对象

1. 定义
   jQuery对象就是使用jQuery的方法获取页面中的元素返回的对象。
2. 特点
   只能调用jQuery方法或者属性，不能调用dom的方法或者属性；
   jQuery对象其实就是DOM对象的包装集，包装了DOM对象的集合（伪数组）。

当要用一个变量来存储获取到的jquery对象时，最好在变量的前面加一个$，以表示它是jquery对象。

var $div1 = $('#one');

dom对象和JQuery对象的相互转换

1. dom对象 --> JQuery对象

   var div1 = document.getElementById("one");   //先取出dom对象
   var $div1 = $(div1);   //转为jquery对象
   //联想记忆：用钱转
   

2. JQuery对象 --> dom对象
   方法一：使用下标取出来（前面说过，JQuery对象是一个伪数组）

   var $divs = $('div');   //$divs为JQuery对象
   var div1 = $divs[0];
   

   方法二：get方法

   var div2 = $divs.get(0);   //其本质也是方法一
   

JQuery事件

页面对不同访问者的响应叫做事件。
jQuery的事件和JS的事件基本相同，在使用的时候，去掉JS事件前面的on即可。
常用的 jQuery 事件方法：

1. $(document).ready()：该方法允许我们在文档完全加载完后执行函数
2. click：当单击鼠标时运行脚本
3. dblclick：当双击鼠标时运行脚本
4. keydown：当按下按键时运行脚本
5. keyup：当松开按键时运行脚本
6. keypress：当按下并松开按键时运行脚本
7. mousedown：当按下鼠标按钮时运行脚本
8. mouseup：当松开鼠标按钮时运行脚本
9. focus：当窗口获得焦点时运行脚本
10. blur：当窗口失去焦点时运行脚本
11. …

以上方法的缺点：不能同时注册多个事件。使用bind方式注册事件可以解决该问题

  //第一个参数：事件类型
  //第二个参数：事件处理程序
  $("p").bind("click mouseenter", function(){
      //事件响应方法
  });

事件解绑：

  // 解绑匹配元素的所有事件
  $(selector).off();
  
  // 解绑匹配元素的所有click事件
  $(selector).off("click");

jQuery常用的效果方法

1. 隐藏/显示
   $(selector).hide() ：隐藏被选的元素
   $(selector).show() ：显示被选的元素
   $(selector).toggle() ：对被选元素进行隐藏和显示的切换
2. 淡入淡出
   $(selector).fadeIn()：用于淡入已隐藏的元素：逐渐改变被选元素的不透明度，从隐藏到可见
   $(selector).fadeOut() ：用于淡出可见元素： 逐渐改变被选元素的不透明度，从可见到隐藏
   $(selector).fadeToggle(); ：该方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
   $(selector).fadeTo() ：该方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
3. 滑动
   $(selector).slideDown()： 用于向下滑动元素
   $(selector).slideUp() ：用于向上滑动元素
   $(selector).slideToggle() ：对被选元素进行滑动隐藏和滑动显示的切换
4. 动画
   $(selector).animate() ：用于创建自定义动画

jQuery操作DOM元素的常用方法

jQuery HTML / CSS 方法

1. $(selector).parent() ：返回被选元素的直接父元素

2. $(selector).parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (< html>)，可选参数来过滤对祖先元素的搜索

3. $(selector).children() ：返回被选元素的所有直接子元素。可选参数来过滤对子元素的搜索

4. $(selector).siblings() ：返回被选元素的所有同胞元素。过滤对同胞元素的搜索。

5. $(selector).next() ： 返回被选元素的下一个同胞元素。

6. $(selector).get() ：获得由选择器指定的 DOM 元素。

7. $(selector).each() ：对对象进行迭代，为每个元素执行函数

8. $(selector).toArray() ：以数组的形式返回 jQuery 选择器匹配的元素

9. $(selector).text()：设置或返回所选元素的文本内容
   获取文本：text()方法不给参数。
   设置文本：text()方法给参数，参数就是要设置的文本。设置的文本会覆盖原来的内容，如果设置的文本中包含标签，是不会把该标签解析出来的。

   //获取
   console.log($('div').text());
   
   //设置
   console.log($('#div').text('这是我新设置的文本'));
   

10. $(selector).val() ：val方法用于设置和获取表单元素的值，例如input、textarea的值

    //设置值
    $("#name").val('张三');
    
    //获取值
    $("#name").val();
    

11. $(selector).html() ：设置或返回所选元素的内容（包括 HTML 标记）

12. $(selector).append()：在被选元素的结尾插入内容

13. $(selector).prepend() ： 在被选元素的开头插入内容

14. $(selector).after()：在被选元素之后插入内容

15. $(selector).before() ：在被选元素之前插入内容

16. $(selector).remove()：删除被选元素（及其子元素）

17. $(selector).removeAttr()：从所有匹配的元素中移除指定的属性。

18. $(selector).clone()：创建匹配元素集合的副本

19. $(selector).load() ：从服务器加载数据，然后把返回到 HTML 放入匹配元素

jQuery 操作 CSS的常用方法

1. $(selector).height()：设置或返回匹配元素的高度

2. $(selector).width()：设置或返回匹配元素的宽度

3. $(selector).addClass()：向被选元素添加一个或多个类。
   该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
   提示：如需添加多个类，请使用空格分隔类名。

4. $(selector).removeClass()：从被选元素删除一个或多个类。
   注释：如果没有规定参数，则该方法将从被选元素中删除所有类。

5. $(selector).toggleClass()：对被选元素进行添加/删除类的切换操作
   该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
   不过，通过使用 “switch” 参数，能够规定只删除或只添加类。

6. $(selector).css() ：设置或返回样式属性，操作的是style属性
   获取样式：css()方法设置参数为要获取值的样式名
   设置样式：css(样式名, 样式值);
   注意：
   获取时，如果是多个元素，只会返回第一个元素的值；
   设置时，如果是多个元素，会给所有元素设置相同的值。（这叫隐式迭代）

   //获取
   console.log($('#div1').css('border'));
   //在ie浏览器中，要获取边框样式这样的样式值时，一定要给一个准确的边框
   console.log($('#div1').css('border-top-width'));
   //获取包含了多个dom元素的JQuery对象的样式，只能获取到第一个dom对象的样式
   console.log($('div').css('width'));
   
   //设置
   //设置单样式
   console.log($('#div1').css('height', '300px'));
   //设置多样式
   $('#div').css({
   width:300,
   'height':'400px'
   })
   

7. $(selector).hasClass() ：检查匹配的元素是否拥有指定的类。

8. $(selector).attr()：属性的获取、设置

   /*1.获取属性*/
   $('li').attr('name');
   
   /*2.设置属性*/
   $('li').attr('name','tom');
   
   /*3.设置多个属性*/
   $('li').attr({
       'name':'tom',
       'age':'18'
   });
   
   /*4.删除属性*/
   $('li').removeAttr('name');
   
   

9. $(selector).prop()：布尔类型的属性不要attr方法，应该用prop方法；用法跟attr方法一样