Jquery

1.jquery的介绍和使用

1.1 介绍

​jQuery内部封装了原生的js代码，还添加了很多额外的功能，能够让你通过书写更少的代码，完成js操作，类似python里面的模块，在前端叫‘类库’；jquery的宗旨是：write less to more！！

1.2 使用

下载：https://jquery.com/download/
下载压缩版本，ctrl+s保存到本地，然后导入到html页面

1.2.1 版本

目前主要使用的是3.几版本的jquery，目前主要维护的版本，不兼容ie678浏览器

1.2.2 导入

1）在html里的head标签里添加
<script src='url'><script>
2）使用CDN分发：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
"""前提是你的计算机必须要有网络"""

1.2.3 jquery的核心

$ 符号在jquery中代表对jquery对象的引用，通过$ 符号可以调用jquery提供的方法等。只有jquery对象才能调用jquery提供的方法。
$<==>jquery

1.3 DON对象和jquery对象

1.3.1 DOM对象

通过js方式获取的元素对象（document）

1.3.2jquery对象

通过jquery方法获取的元素对象，返回的是jquery包装集

1.3.3 两种对象的相互转换

DOM对象转jquery对象
var divDOM = document.getElementById('#d1') // 获取DOM对象
mydiv = $(divDOM) // 转成jquery对象

jquery对象转DOM对象
var divjquery = $('#d1'); // 获取jquery对象
var divDOM1 = divjquery[0]; // 转成DOM对象

2.jquery的选择器

2.1 基础选择器

1.基础选择器
// id选择器
$('#d1')
// class选择器
$('.c1')
// 标签选择器
$('span')
// 通用选择器
$('*')
// 组合选择器
$('div.c1')、$('div#d1')、$('#d1,.c1,p')  # 并列+混用

2.2层次选择器

$('div span')  # 后代选择器-选择父元素的子子孙孙
$('div>span')  # 子代选择器--选择父元素所在第一代指定元素
$('div+span')  # 相邻选择器--选择元素的下一个指定元素（类似找相邻的兄弟）
$('div~span')  # 同辈选择器--选择元素的下面的所有指定元素

2.3 表单选择器

：input   查找所有的input元素：$(:input)；注意会匹配所有的input、textarea、select和button元素
:text    查找所有的文本框元素
:password  查找所有密码框元素
:file    查找所有文件域元素
:radio    查找所有单选框元素
:checkbox    查找所有多选框元素
:submit     查找所有提交按钮元素
:reset    查找所有重置按钮元素
:button    查找所有按钮元素
:image    查找所有图片按钮元素

3.jquery的DOM操作

jquery也提供了对于HTML的节点操作（什么是节点？HTML中所有的标签都可以称之为节点），并且在原生的js上进行了优化，使我们使用起来更加的方便

常用的操作有：查找元素（选择器已经实现）、操作元素的属性、操作元素的样式、操作元素的内容、创建元素、添加元素、删除元素、遍历元素，以上的操作只能jquery对象使用！！！

3.1 操作元素的属性

获取属性、设置属性、移除属性---->第一步都是先查询元素

补充：元素属性的分类：

1.固有属性：id、name、clss、style、a标签的href、img的src等等
2.返回值是boolean的属性：checked、selected、disabled等等
3.自定义属性：用户自己定义的属性

3.1.1 获取属性

有attr（‘属性名’）和prop（‘属性名’）两种方法

区别：
如果是固有属性，两种方法均可以操作；
如果是自定义属性，attr方法可以获取，prop方法不可以操作；
如果返回值是boolean的属性：若设置了属性值，attr返回具体的值；prop返回true；若没有设置，attr返回undefined，prop返回false。

语法：
var name = $('#aa').attr('name');

3.1.2 设置属性

有attr（‘属性名’，‘属性值’）和prop（‘属性名’，‘属性值’）两种方法

3.1.3 移除属性

remove（‘属性名’）

3.2 操作元素的样式

元素的样式其实也是一种属性，也可以用attr方法操作，但是由于样式特别多，我们还提供了许多其他方法操作样式。

方法	说明
attr（‘class’）	获取class的值，即样式名称
attr（‘class’，‘样式名’）	修改class的属性值，即修改样式（原本样式被覆盖）
addClass（‘样式名’）	添加样式，原本的样式被保留，如果有相同样式，则会以样式中后定义的为准
css（）	添加具体的样式
removClass（‘样式名’）	移除样式名称

css的具体语法：

css（‘具体样式名’，‘样式值’） 设置单个样式
css（{‘具体样式名’：‘样式值’，‘样式名2’：‘样式值’}）

3.3 操作元素的内容

对于元素，我们可以操作其内容、值，甚至是html

方法	说明
html（）	获取元素的html内容
html（‘html内容’）	设置元素的html内容
text（）	获取元素的文本内容，不包含html
text（‘text内容’）	设置元素的文本内容，不包含html
val（）	获取元素的值
val“值”	设置元素的值

注意：html和text都是针对非表单元素，val针对的是表单元素

那么什么是表单元素？什么是非表单元素呢？

表单元素：文本框text、密码框password、单选框radio、复选框等等
非表单元素：div、span、p、ol、ul等等

3.4 创建元素

在jquery中创建元素很简单，直接使用核心函数即可：
语法为：$（‘元素内容’）；

$('<p>this is my</p>')

3.5 添加元素

1.前追加子元素

法一：$('指定元素').prepend（‘内容’） #在指定元素内部的最前面添加内容，该内容可以是字符串、html和jquery对象
法二：$（‘内容’）.prependto(‘指定元素’) #把内容追加到指定元素的最前面，该内容可以是字符串、html和jquery对象

2.后追加子元素

法一：$('指定元素').append（‘内容’） #在指定元素的最后面添加内容，该内容可以是字符串、html和jquery对象
法二：$（‘内容’）.appendto(‘指定元素’) #把内容追加到指定元素最的后面，该内容可以是字符串、html和jquery对象

3.前追加同级元素

$('指定元素').before（‘内容’） #在指定元素的前面追加内容

4.后追加同级元素

$('指定元素').after（‘内容’） #在指定元素的后面追加内容

注： 在添加元素的时候，如果添加的元素不存在，此时会将元素追加到指定位置；如果需要添加的元素存在，会将存在的元素剪切到需要追加的位置。

3.6 删除元素

1.remove（）方法

$('需要删除的元素').remove() #该方法是删除元素和其对应的子元素，标签和内容一起删除

2.empty（）方法
$('需要删除的元素').empty() #该方法是只清空元素中的内容

3.7 遍历元素

each（）方法

    $('.green').each(function (index,element){
        console.log(index);
        console.log(element);
	console.log(this);
    }) 
	#1.先查找可迭代的jquery对象$('.green')
	#2.然后调用each（）方法，参数function为遍历时的回调函数，function里面有两个默认参数（不用也可以不写），参数分别是index为遍历元素的序列化，从0开始；element：为当前的元素，此时为dom元素。
	#3.还有一个this，是指里面的每一个元素，等同于element。

4.jquery的事件

4.1 ready加载事件

ready加载事件又称预加载事件，它是指当整个html页面（dom结构）加载完毕之后再开始执行的事件；类似于js中的load事件。

语法：

$(document).ready(function(){
     需要执行的操作
});
简写：
$(function(){
    需要执行的操作
});

4.2 绑定事件

为被选元素添加一个或者多个事件处理程序，并规定事件发生时运行的函数
语法：

$(selector).bind(eventType [,eventDate],handler(eventobject));
    eventType:是一个字符串类型的事件类型，就是你需要绑定的事件
    [,eventDate]：传递的参数，格式为{名：值，名2：值2}
    handler(eventobject)：该事件触发执行的函数;
绑定单个事件
    $('元素').bind('事件类型',function(){
        ...
    })
直接绑定单个事件
    $('元素').事件名(function(){
        ...
    })
同时为多个事件绑定一个函数
    $('元素').bind('事件类型1' '事件类型2',function(){
        ...
    })
为元素绑定多个事件并设置对应函数
    法一：$('元素').bind('事件类型1' ,function(){
        ...
    }).bind('事件类型2'，function(){

    })...
    法二：$('元素').bind('事件类型1'：function(){
        ...
    }，'事件类型2':function(){

    }）
直接绑定多个事件
    $('元素').事件名(function(){

    }).事件名(function(){
        
    })

常用事件介绍

常用事件：
    onload：当页面加载完毕后立即触发
    onblur：元素失去焦点
    onfocus:元素获得焦点
    onclick:鼠标点击某个对象
    onchange：用户改版域内容(如下拉框的选项被修改了)
    onmousemove:鼠标移动到某个元素身上
    onmouseout:鼠标从某个元素上离开
    onkeyup:某个键盘的健被松开
    onkeydown：某个键盘的健被按下
	change：文本域变化事件，当文本域变化是触发

5.jquery的ajax

jquery调用ajax的方法：
    格式：$.ajax({});
        参数：
            type：请求的方式get、post（小写）
            url："" 请求的地址，不写默认为当前地址
            async：是否异步，默认为true表示异步
            data：发送到服务器的数据
            dataType：预期服务器返回的数据类型
            contentType：设置请求头
            success：function(date){}; data是形参名，请求成功时调用此函数
            error：请求失败时调用此函数