jQuery——B站黑马程序员

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

文章目录

JQuery语法： $(selector).action()
JQuery简介
- 原生js的缺点
- JQuery的优点
如何使用JQuery
- 步骤
- JQuery的入口函数
$是一个函数
- 分析JQuery文件结构
- $函数
dom对象和JQuery对象
- dom对象
- jQuery对象
- dom对象和JQuery对象的相互转换
JQuery事件
jQuery常用的效果方法
jQuery操作DOM元素的常用方法
jQuery 操作 CSS的常用方法

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的缺点

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

JQuery的优点

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

如何使用JQuery

步骤

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

JQuery的入口函数

有两种写法：

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

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

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

$是一个函数

分析JQuery文件结构

JQuery是一个js文件，引入一个js文件是会执行js文件中的代码的。
JQuery文件是一个自执行函数，执行这个jQuery文件中的代码，其实就是执行这个自执行函数。
JQuery文件中包含的一个重要的代码表明：这个自执行文件就是给window对象添加一个jQuery属性和$属性。
```
(function(){window.jQuery = window.$ = jQuery;}());
```
所以$其实和jQuery是等价的，是一个函数。

$函数

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

如果参数传递的是一个匿名函数，则功能为入口函数；
```
$(function(){});
```
如果参数传递的是一个字符串，则功能为：选择器/创建一个标签；
```
$('#one');
$('<div>啦啦,我是一个div</div>');
```
如果参数是一个dom对象，那他就会把dom对象转换成jQuery对象。
```
$(dom对象);
```

dom对象和JQuery对象

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

dom对象

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

jQuery对象

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

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

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

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

dom对象 --> JQuery对象

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

JQuery对象 --> dom对象
方法一：使用下标取出来（前面说过，JQuery对象是一个伪数组）
```
var $divs = $('div');   //$divs为JQuery对象
var div1 = $divs[0];
```
方法二：get方法
```
var div2 = $divs.get(0);   //其本质也是方法一
```

JQuery事件

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

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

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

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

事件解绑：

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

jQuery常用的效果方法

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

jQuery操作DOM元素的常用方法

jQuery HTML / CSS 方法

$(selector).parent() ：返回被选元素的直接父元素
$(selector).parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (< html>)，可选参数来过滤对祖先元素的搜索
$(selector).children() ：返回被选元素的所有直接子元素。可选参数来过滤对子元素的搜索
$(selector).siblings() ：返回被选元素的所有同胞元素。过滤对同胞元素的搜索。
$(selector).next() ：返回被选元素的下一个同胞元素。
$(selector).get() ：获得由选择器指定的 DOM 元素。
$(selector).each() ：对对象进行迭代，为每个元素执行函数
$(selector).toArray() ：以数组的形式返回 jQuery 选择器匹配的元素
$(selector).text()：设置或返回所选元素的文本内容
获取文本：text()方法不给参数。
设置文本：text()方法给参数，参数就是要设置的文本。设置的文本会覆盖原来的内容，如果设置的文本中包含标签，是不会把该标签解析出来的。
```
//获取
console.log($('div').text());//设置
console.log($('#div').text('这是我新设置的文本'));
```
$(selector).val() ：val方法用于设置和获取表单元素的值，例如input、textarea的值
```
//设置值
$("#name").val('张三');//获取值
$("#name").val();
```
$(selector).html() ：设置或返回所选元素的内容（包括 HTML 标记）
$(selector).append()：在被选元素的结尾插入内容
$(selector).prepend() ：在被选元素的开头插入内容
$(selector).after()：在被选元素之后插入内容
$(selector).before() ：在被选元素之前插入内容
$(selector).remove()：删除被选元素（及其子元素）
$(selector).removeAttr()：从所有匹配的元素中移除指定的属性。
$(selector).clone()：创建匹配元素集合的副本
$(selector).load() ：从服务器加载数据，然后把返回到 HTML 放入匹配元素

jQuery 操作 CSS的常用方法

$(selector).height()：设置或返回匹配元素的高度
$(selector).width()：设置或返回匹配元素的宽度
$(selector).addClass()：向被选元素添加一个或多个类。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
提示：如需添加多个类，请使用空格分隔类名。
$(selector).removeClass()：从被选元素删除一个或多个类。
注释：如果没有规定参数，则该方法将从被选元素中删除所有类。
$(selector).toggleClass()：对被选元素进行添加/删除类的切换操作
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
不过，通过使用 “switch” 参数，能够规定只删除或只添加类。

$(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'
})

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

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

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

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