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:请求失败时调用此函数
版权声明:本文为suncolor原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/suncolor/p/16566561.html