jQuery

lx610321

已于 2023-08-25 15:08:20 修改

阅读量35

点赞数

文章标签： jquery 前端 javascript

于 2023-08-25 15:06:22 首次发布

本文链接：https://blog.csdn.net/lx610321/article/details/132496136

版权

#jQuery

什么是jQuery

什么是jQuery是一个快速，简洁的JavaScript框架(js库，JavaScript代码库)。jQuery设计的宗旨的"write Less,Do More",即倡导写更少的代码，做更多的是。它封装JavaScript常用的功能代码，提供简洁的JavaScript设计模式，事件处理，动画设计和Ajax交互。

jQuery特点

快速获取文档元素(并非原始的dom元素)
提供了更多丰富美观的动态效果
创建AJAX无刷新网页
提供对JavaScript语言增强
增强的事件处理
更改网页内容

jQuery库包含以下功能:

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

jQuery安装

网页中添加jQuery
可以通过多种方法在网页中添加jQuery

从jQuery官网(jQuery.com)下载jQuery库。
从CDN中载入jQuery。
加速器:<script src="https://code.jquery.com/jquery-3.4.1.min.js"integrity=“sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=“anonymous”>

jQuery.js和jQuery.min.js的区别

两个文件完全一样
jQuery.js文件中的代码没有进行处理的源代码，使用于研究
jQuery.min.js文件里的代码进行特殊处理(压缩文件，合并文件)，文件容量更小，使用于生成环境，加载速度更快。
jQuery具有独特的链式语法和短小清晰的多功能接口。

jQuery语法

通过jQuery，选取(查询，query)HTML元素，并对它进行操作(actions)
基础语法：$(selector).actions()

$(美元符号)定义jQuery
选择器(selector)"查询"和"查找"HTML元素
jQuery的actions()执行对元素的操作

jQuery选择器

jQuery选择器允许对HTML元素组或单个元素进行操作
jQuery选择器基于元素的id,类,类型,属性,属性值等(几乎支持所有的css选择器)
jQuery中所有的选择器都是以美元符开头 $()==jQuery()
注意 jQuery获取的元素是经过处理之后的HTML元素，并非原始的HTML元素，因此在使用过程中，获取的 jQuery对象只能使用jQuery的操作方法，不能混用原生js方法。

jQuery选择器

语法	描述
$(“”)	选取所有元素
$(this)	选取当前HTML元素
$(‘p.box’)	选取class为box的 p 元素
$(‘p:first’)	选取第一个 p 元素
$(‘ul li:first’)	选取第一个 ul 元素的第一个 li 元素
$(‘ul li:first-child’)	选取每一个 ul 元素的第一个 li 元素
$(‘[href]’)	选取带有href属性的元素
$(‘a[target=’_blank’]')	选取所有traget属性值等于"_blank"的 a 元素
$(‘a[target!=’_blank’]')	选取所有traget属性值不等于"_blank"的 a 元素
$(‘:button’)	选取所有type="button"的 input 元素和 button 元素
$(‘tr:even’)	选取偶数位置的 tr 元素
$(‘tr:odd’)	选取奇数位置的 tr 元素

jQuery常见的DOM事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mousedown	keyup	input	scoll
mouseup	-	focus	unload
mouseenter	-	blur	-
mouseleave	-	-	-
mouseout	-	-	-
mouseover	-	-	-
mousemove	-	-	-
hover	-	-	-

jQuery事件方法语法

click()
dblclick()
mouseenete()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()

jQuery bind()

向元素添加事件处理程序
bind()方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

jQuery on()

jQuery 1.7版本以后，on()方法是向被选元素添加事件处理程序的首选方法。
注意：使用on()方法添加的事件处理程序使用于当前以及未来的元素 (比如有脚本创建的元素)

jQuery DOM 操作

获取和设置内容
text() 设置或返回元素的文本内容
获取： $(se l ec t or) . t e x t () 设置：$ (selector).text(‘要给元素设置的文本内容’)
html() 设置或返回所选元素的所有内容
获取： $(se l ec t or) . h t m l () 设置：$ (selector).html(‘百度123123’)
val() 设置或返回表单字段的值
获取： $(se l ec t or) . v a l () 设置：$ (selector).val(‘百度123123’)
attr() 设置或返回元素的属性值
获取： $(se l ec t or) . v a l (^{'} 属性名称^{'}) 设置：$ (selector).val(‘属性名称’,‘属性值’)
添加元素
append()-在被选元素内部的结尾插入内容(允许包含HTML内容)
```
$('.showBox').append('插入内容');
```
prepend()-在被选元素内部的开头插入内容(允许包含HTML内容)
```
$('.showBox').prepend('开头')
```
after()-在被选元素之后插入内容(允许包含HTML内容)
```
$('.showBox').after('测试');
```
before()-在被选元素之前插入内容(允许包含HTML内容)
```
$('.showBox').before('<span>元素之前</span>');
```
以上方法的语法：
$(selector).active(textContent|elementContent)
appendTo()-在被选元素的结尾插入HTML元素
```
 $('<h2>元素的结尾</h2>').appendTo('.box');
```
prependTo()-在被选元素的开头插入HTML元素
```
$('<h2>元素的开头</h2>').prependTo('.box');
```
insertAfter()–在被选元素的后面插入HTML元素
```
$('<h2>元素的后面</h2>').insertAfter('.box');
```
insertBefore()–在被选元素的前面插入HTML元素
```
$('<h2>元素的前面</h2>').insertBefore('.box');
```
以上方法的语法：
$(content).actions(selector)
删除元素
remove()-删除被选元素(及其子元素)
empty()-从被选的元素中删除子元素

获取并设置css类
addClass()-向被选元素添加一个或多个类

 $('.btn').addClass('active');

removeClass()-从被选中的元素删除一个或多个类

 $('.btn').removeClass('active');

toggleClass()-对被选元素进行添加/删除类的切换操作

$('.btn').toggleClass('active');

css(‘porpertyname’,‘porpertyvalue’)-设置或返回指定的css属性

//设置单一css属性
$('li:first-child').css('color', 'yellowgreen')
//设置多个css属性
$('li:first-child').css('color', 'yellowgreen').css('font-weight', 'bolder')
$('li:first-child').css({'color': 'red', 'border': '2px solid #f00'})

jQuery-尺寸
```
通过jQuery，我们可以更容易的处理元素和浏览器窗口的尺寸
```
- width()
  设置或返回元素的宽度(不包括内边距，边框或外边距)
- height()
  设置或返回元素的高度(不包括内边距，边框或外边距)
- innerWidth()
  返回元素的宽度(包括内边距)
- innerHeight()
  返回元素的高度(包括内边距)
- outerWidth()
  返回元素的宽度(包括内边距和边框)
- outerHeight()
  返回元素的高度(包括内边距和边框)

jQuery 效果

jQuery 效果-隐藏和显示

hide()隐藏HTML元素

/
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed:可选参数;规定隐藏/显示的速度，值："sloe","fast"或者毫秒
callback:可选参数;隐藏/显示效果执行完成之后所要执行的函数名称
/
//点击元素让指定元素隐藏
$('button').on('cilck',function(){
    $('h1').hide();
})
//点击元素让其父元素隐藏
 $('h1').on('click', function() {
    $(this).parents($('.box')).hide(5000, function() {
        $('p').show('fast');
    });
})

show()显示HTML元素

$('button').on('cilck',function(){
    $('h1').show();
})

toggle() 用来切换hide()和show()方法

/
$().toggle(speed,callback);
speed:可选参数;规定隐藏/显示的速度，值："sloe","fast"或者毫秒
callback:可选参数;隐藏/显示效果执行完成之后所要字符的函数名称
/

jQuery 效果-淡入淡出

fadeIn()

/
$(selector).actions(speed,callback);
speed:可选参数;规定淡入/淡出的速度，值："sloe","fast"或者毫秒
callback:可选参数;规定淡入/淡出效果执行完成之后所要字符的函数名称
/

fadeOut()
fadeToggle()
fadeTo()

/
$(selector).actions(speed,opacity,callback);
speed:可选参数;规定淡入/淡出的速度，值："sloe","fast"或者毫秒
opacity:元素结余0-1之间的 透明度值。
callback:可选参数;规定淡入/淡出效果执行完成之后所要字符的函数名称
/

jQuery 效果-滑动 ```
通过以下方法实现滑动效果

slideDown
slideUp
slideToggle

/
$(selector).actions(speed,callback);
speed:可选参数;规定滑入/滑出的速度，值："sloe","fast"或者毫秒
callback:可选参数;规定滑入/滑出效果执行完成之后所要字符的函数名称
/

jQuery 效果-动画

animate() 允许创建自定义的动画

/
 $(selector).animate({params},speed,callback)
 {params}
/
$('.btn1').on('click', function() {
    $('ul').animate({
        left: '200px',
        top: '100px'
    }, 5000);
})
// 使用相对值
// 可以定义相对值(相对于元素的当前值)。需要早值的前面加上+=或-=;
$('.btn2').on('click', function() {
    $('ul').animate({
        left: '200px',
        height: '+=100px',
           width: '-=100px'
    });
})
// 使用预定义的值

jQuery 遍历

什么是遍历

jQuery提供了多种遍历DOM的方法
遍历方法中最大的种类是树遍历(tree-teaversal)

jQuery遍历-祖先向上遍历DOM树

parent()

parent()方法返回被选元素的直接父元素
该方法只会向上一级对DOM树激进遍历

 $(document).ready(function() {
    var p_element = $('span').parent();
    console.log(p_element);
})

parents()

parents() 方法返回被选元素的元素祖先元素，一直向上遍历直到文档的根元素(<html>)

// 返回所有祖先元素
$(document).ready(function() {
    console.log($('span').parents();
})
// 使用可选参数用来过滤对祖先元素的 搜索遍历
// 返回祖先元素中指定 的元素
$(document).ready(function() {
    console.log($('span').parents('.fbox'));
})

parentsUntil()

parentsUntil()返回介于两个元素之间的所有祖先元素

// 返回介于<span>与<div>元素之间的所有祖先元素
$(document).ready(function() {
    $('span').parentsUntil("body").css({
        'color': 'red',
        'border': '1px solid red'
    })
})

jQuery遍历-后代向下遍历DOM树

children()

children() 方法返回被选元素的所有的直接子元素

// 获取直系的子元素
$(document).ready(function() {
    console.log($('.f_fbox').children())
    $('.f_fbox').children().css('border', '1px solid red')
})
// 获取直系的子元素中指定 的元素
$(document).ready(function() {
    console.log($('.f_fbox').children('fbox1'))
})

find()

find()方法返回被选元素的后代元素，一路向下直到最后一个后代

// 返回所有的后代
$(document).ready(function() {
    console.log($('.fbox').find(''))
})
// 返回指定的后代元素
$(document).ready(function() {
    console.log($('.fbox').find('span'))
})

jQuery遍历-同胞 (silblings)

在DOM树中水平遍历

siblings()

siblings()方法返回被选元素的所有同胞元素

next()

方法返回被选元素的后一个同胞元素。

nextAll()

返回被选元素之后的所有同胞元素

nextUntil()

返回两个给定参数之间的每个元素之后的所有同胞元素

prev()

方法返回被选元素的前一个同胞元素

prevAll()

返回被选元素之前的所有同胞元素

prevUntil()

返回两个给定参数之间的每个元素之前的所有同胞元素

jQuery遍历-过滤

first()
```
返回被选元素的首个元素
```

last()

返回被选元素的最后一个元素

eq()

返回被选元素中带有指定搜索引号的元素
索引从0开始

filter()

filter()方法允许规定一个标准，不匹配这个标准的元素都会被从集合中删除，返回匹配的元素

not()

not()返回不匹配标准的所有元素

jQuery AJAX

什么是AJAX

AJAX是与服务器做数据交换|交互 的技术，在不重载全部的情况下，对部分网页的更新。
AJAX=异步 JavaScript和XML(Asynchronous JavaScript And XML)

jQuery与AJAX

jQuery提供多个与AJAX有关的方法
通过jQuery AJAX方法，使用HTTP GET和HTTP POST 从远程服务器上请求文本、HTTP、XML或JSON，以方便我们可以将这些外部数据直接载入网页的被选元素中

load()

load()方法从服务器加载数据，并把返回的数据放入被选元素中

// 语法：
// $(selector).load(URL,data,callback);
/
  URL:必选 url规定要加载的URL
  data:可选 规定与请求一起发送的查询字符串 键/值对集合
  callback:可选 load()方法执行完成后所执行的函数名称
/

get()

用于通过HTTP GET请求从服务器请求数据
HTTP GET 从指定的资源(接口)请求数据

// 语法：
// $.get(URL,callback);

post()

用于通过HTTP POST请求从服务器请求数据
HTTP POST 向指定的资源(接口)提交要处理的数据

// 语法：
// $.post(URL,data,callback);

ajax()

// $.ajax({key:val,key:val,……})
//type:HTTP 请求的类型(GET和POST)
//url:发送请求的URL地址默认是当前页面
// data:发送到服务器的数据。
// complete(xhr,statue)请求完成时运行的函数(在请求成功或请求失败之后都会调用)
// sucscess(result,status,xhr)请求成功运行的函数
//error(xhr,statue,error)请求失败运行的函数