学JQuery,这一篇就够了
一.简介
jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的"写的少,做的多"的 JavaScript 库。
整体就是替换繁琐的
JavaScript
语法,让语法更简单了
二.语法
使用之前需要引用对应的jQuery
<!-- 引入jQuery -->
<script src="./jquery-3.6.0.min.js"></script>
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions)。
语法
$(selector(查询,查找)).action(操作)
案例hide()
<img src="./image/Beauty.jpg" alt="" width="500px" id="img">
$('#img').hide();
// 隐藏当前id为img的标签
这里会出现一个问题,例如如果将
script
放到html前面,那么jQuery
失效,原因跟HTML
执行顺序有关,所以解决方案如下
$('document').ready(function(){
//执行代码
})
$(function(){
//执行代码
})
js解决方案
window.onload =function(){
//执行代码
}
三.选择器
jQuery
对比着CSS
的选择器学习效果更佳
3.1 元素选择器
jQuery 元素选择器基于元素名选取元素。
语法:
$(元素名)
案例:用户点击元素消失
$(document).ready(function(){
//获取按钮,注册点击事件
$('button').click(function(){
//获取文字
$('p').hide();
})
})
<p id="p_id" class="p_class">我欲乘风破浪,踏遍黄沙海洋</p>
<button>取消</button>
3.2 ID
选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
语法:
$('#id')
$(document).ready(function(){
//获取按钮,注册点击事件
$('#button_id').click(function(){
//获取文字
$('#p_id').hide();
})
})
3.3 class选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法:
$('.class')
$(document).ready(function(){
//获取按钮,注册点击事件
$('.button_class').click(function(){
//获取文字
$('.p_class').hide();
})
})
// 如果遇到多个class选择器,就配合伪类命中
$(document).ready(function(){
let text = $('.two:first').text();
alert(text)
})
3.4 统配选择器
获取页面所有内容
语法:
$("*")
$(document).ready(function(){
//获取按钮,注册点击事件
$('button').click(function(){
//获取所有内容
$('*').hide();
})
})
3.5 当前元素
获取当前
HTML
元素
语法:
$(this)
$(document).ready(function(){
//获取按钮,注册点击事件
$('button').click(function(){
//获取所有内容
$(this).hide();
})
})
3.6 组合使用
获取选择器进行筛选
语法:
$("p.intro")
获取所有class选择器为intro
的p
标签
$(document).ready(function(){
//获取按钮,注册点击事件
$('button').click(function(){
//获取所有内容
$('p.p_class').hide();
})
})
3.6 伪类选择器
在CSS中提供的伪类选择器同样适用
例: 语法
$(ul li:first)
$(document).ready(function () {
$('button').click(function () {
//获取ul下面的第一个li 并且删除
$('ul li:first').hide();
+ $('ul>li:first-child').hide();
})
})
选取带有 href 属性的元素
语法:
$("[href]")
$(document).ready(function () {
$('button').click(function () {
// 获取所有带herf属性并且删除
$('[href]').hide();
})
})
选取所有
target
属性值等于 "_blank" 的<a>
元素
语法:
$("a[target='_blank']")
$(document).ready(function () {
$('button').click(function () {
// 获取所有带herf属性并且删除
$('a[target=_blank]').hide();
+ $('a[target!=_blank]').hide();
// 不等于同理
})
})
选取所有
type="button"
的<input>
元素 和<button>
元素
语法:
$(":button")
$(document).ready(function () {
$('button').click(function () {
//获取type为button的按钮或者button按钮,并且消失
$(':button').hide();
})
})
选取偶数位置的
<tr>
元素
语法:
$("tr:even")
选取奇数位置的
<tr>
元素
语法:
$("tr:odd")
$(document).ready(function () {
$('button').click(function () {
//获取tr的偶数并且消失
$("tr:even").hide();
//获取tr的奇数并且消失
+ $("tr:odd").hide();
})
})
<table>
<tr class="tr_class">
<td>张飞1</td>
</tr>
<tr class="tr_class">
<td>张飞2</td>
</tr>
<tr class="tr_class">
<td>张飞3</td>
</tr>
<tr class="tr_class">
<td>张飞4</td>
</tr>
</table>
四. jQuery事件
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
4.1 常见事件
鼠标事件 | 键盘事件 | 表单事件 | 窗口事件 |
---|---|---|---|
click(点击事件) | keypress | submit | load |
dblclick(双击事件) | keydown | change | resize |
mouseenter(鼠标进入,聚焦) | focus | scroll | |
mouseleave(鼠标离开) | blur | unload |
Ⅰ click点击事件
click()
方法是当按钮点击事件被触发时会调用一个函数。
$(document).ready(function () {
//获取p标签,当点击就取消
$('.p_class').click(function () {
$(this).hide();
})
})
Ⅱ dblclick 双击事件
当双击元素时,会发生
dblclick
事件。
$(document).ready(function () {
//获取p标签,当双击就取消
$('.p_class').dblclick(function () {
$(this).hide();
})
})
Ⅲ mouseenter移动事件
当鼠标指针穿过元素时,会发生
mouseenter
事件。
$(document).ready(function () {
//获取当前p标签,当悬停上面就弹出,你是我的小可爱
$('.p_class').mouseenter(function () {
alert('你是我的小可爱')
})
})
Ⅳ mouseleave离开元素
当鼠标指针离开元素时,会发生
mouseleave
事件。
$(document).ready(function () {
//获取当前p标签,当悬停上面就弹出,拜拜
$('.p_class').mouseleave(function () {
alert('拜拜')
})
})
Ⅴ mousedown()
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
$(document).ready(function () {
//获取当前p标签,当悬停上面就弹出,你是我的小可爱
$('.p_class').mousedown(function () {
alert('上面按下鼠标了')
})
})
Ⅵ mouseup()
当在元素上松开鼠标按钮时,会发生
mouseup
事件。
$(document).ready(function () {
//获取当前p标签,当悬停上面就弹出,你是我的小可爱
$('.p_class').mouseup(function () {
alert('上面松开了鼠标了')
})
})
Ⅶ focus()
当元素获得焦点时,发生 focus 事件。
$(document).ready(function () {
//获取当前input标签,当聚焦上面改变背景颜色
$('#input').focus(function () {
$(this).css('background-color','red')
})
})
Ⅷ blur()
当元素失去焦点时,发生 blur 事件。
$(document).ready(function () {
//获取当前input标签,当失去聚焦改变背景颜色
$('#input').blur(function () {
$(this).css('background-color','#fff')
})
//获取当前input标签,当聚焦上面改变背景颜色
$('#input').focus(function () {
$(this).css('background-color','red')
})
})
五.常见函数效果
5.1 显示隐藏
Ⅰ. hide()和show()
JQuert 的 hide()和show()
$(document).ready(function () {
//点击隐藏效果
$('#button_id').click(function(){
$('#p_id').hide();
})
//点击显示效果
$('#show_id').click(function(){
$('#p_id').show();
})
})
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
$(document).ready(function () {
//点击隐藏效果
$('#button_id').click(function(){
$('#p_id').hide(1000,'linear');
+ $('#p_id').hide('slow','linear');
})
//点击显示效果
$('#show_id').click(function(){
$('#p_id').hide('fast','linear');
+ $('#p_id').show(1000,'linear',function(){
alert('显示完毕!')
});
})
})
Ⅱ. toggle()
通过 jQuery,您可以使用 toggle() 方法来切换
hide()
和show()
方法。
$(document).ready(function () {
$('#button_id').click(function(){
//获取p标签 显示隐藏
$('#p_id').toggle();
})
})
5.2 淡入淡出
Ⅰ. fadeOut()
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(*selector*).fadeOut(*speed,callback*);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
$(document).ready(function () {
$('.one').click(function () {
$('.two').fadeOut(1000, 'linear');
})
})
Ⅱ. fadeToggle()
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
$(document).ready(function () {
$('.one').click(function () {
$('.two').fadeToggle(1000, 'linear');
})
})
5.3 滑动效果
jQuery 滑动方法可使元素上下滑动。
Ⅰ.slideDown()
jQuery slideDown() 方法用于向下滑动元素。
语法:
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
$(document).ready(function () {
$('.one').click(function () {
$('.two').slideDown();
})
})
Ⅱ. slideUp()
jQuery slideUp() 方法用于向上滑动元素。
$(document).ready(function () {
$('.one').click(function () {
$('.two').slideUp();
})
})
5.4 动画
jQuery animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback*);
必需的 params 参数定义形成动画的 CSS 属性。
$(document).ready(function () {
$('.box').click(function () {
// 向右移动250px
$(this).animate({left:'250px'});
})
})
$(document).ready(function () {
$('.box').click(function () {
// 向右移动250px,颜色变红,字体变大,如果遇到横杠就改成驼峰命名
$(this).animate({
left:'250px',
color:'red',
fontSize:'30px',
// 在原来的基础上加150px
width:'+=300px'
});
})
})
六.操作DOM节点
6.1 获得内容
Ⅰ.获得文本内容
text() - 设置或返回所选元素的文本内容
$(document).ready(function(){
console.log($('.two').text());
})
Ⅱ,获得网页元素
html() - 设置或返回所选元素的内容(包括 HTML 标记)
$(document).ready(function(){
console.log($('.two').html());
})
Ⅲ. 返回表单字段的值
val() - 设置或返回表单字段的值
<input type="text" value="password" id="input">
$(document).ready(function(){
console.log($('#input').val());
})
//---> password
Ⅳ.获取属性的值
attr() 方法用于获取属性值。
<input type="password" value="password" id="input">
$(document).ready(function(){
console.log($('#input').attr('type'));
})
6.2 修改内容
Ⅰ. 修改文本内容
$(document).ready(function(){
console.log($('.two').text('hello world!'));
})
Ⅱ. 修改html元素
$(document).ready(function(){
console.log($('.two').html('<h3>hello world!</h3>'));
})
Ⅲ. 修改val值
$(document).ready(function(){
console.log($('#input').val('type'));
})
6.3.添加元素
Ⅰ. append()
jQuery append() 方法在被选元素的结尾插入内容(仍然在该元素的内部)。
$(document).ready(function(){
console.log($('.two').after('hello world!'));
})
Ⅱ. prepend()
jQuery prepend() 方法在被选元素的开头插入内容。
$(document).ready(function(){
console.log($('.two').prepend('hello world!'));
})
Ⅲ. after()
jQuery after() 方法在被选元素之后插入内容. 在元素外部
$(document).ready(function(){
console.log($('.two').after('hello world!'));
})
Ⅳ. before()
jQuery before() 方法在被选元素之前插入内容. 在元素外部
$(document).ready(function(){
console.log($('.two').before('hello world!'));
})
6.4 删除元素
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
Ⅰ. remove()
jQuery remove() 方法删除被选元素及其子元素。
$(document).ready(function () {
$('.two').remove();
})
Ⅱ. empty()
empty() - 从被选元素中删除子元素
$(document).ready(function () {
$('.two').empty();
})
6.5 获取并设置CSS类
Ⅰ. addClass()
addClass() - 向被选元素添加一个或多个类
.theme{
font-size: 30px;
color: blue;
}
$(document).ready(function () {
$('.two').addClass('theme')
})
Ⅱ. removeClass()
removeClass() -从被选元素删除一个或多个类
$(document).ready(function () {
$('.two').removeClass('two')
})
Ⅲ. toggleClass()
toggleClass() - 对被选元素进行添加/删除类的切换操作
$(document).ready(function () {
$('.two').click(function(){
$(this).toggleClass('theme')
})
})
6.6 设置CSS属性
css() 方法设置或返回被选元素的一个或多个样式属性。
$(document).ready(function () {
$('.two').click(function(){
$(this).css('color','blue')
})
})
操作多个属性时候用花括号包起来
$(document).ready(function () {
$('.two').click(function(){
$(this).css({'color':'blue','font-size':'50px'})
})
})
七.遍历DOM节点
7.1 祖先元素
Ⅰ.parent()
parent() 方法返回被选元素的直接父元素。
$(document).ready(function () {
console.log($('.ul').parent().text());
})
Ⅱ. parents()
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
$(document).ready(function () {
console.log($('.ul').parents().text());
})
Ⅲ. parentsUntil()
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$(document).ready(function () {
console.log($('.ul').parentsUntil('.box'));
})
7.2 后代元素
Ⅰ. children()
children() 方法返回被选元素的所有直接子元素。 (一层)
$(document).ready(function () {
console.log($('.box').children());
})
可以使用可选参数来过滤对子元素的搜索
$(document).ready(function () {
// 命中.box 下面的 .one
console.log($('.box').children('.one'));
})
Ⅱ. find()
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
$(document).ready(function () {
console.log($('.box').find('*'));
})
7.3 兄弟元素
Ⅰ.siblings()
siblings() 方法返回被选元素的所有同胞元素。
$(document).ready(function () {
console.log($('li').siblings());
})
Ⅱ.next()
next() 方法返回被选元素的下一个同胞元素
$(document).ready(function () {
console.log($('.li').next().text());
})
Ⅲ. nextAll()
nextAll() 方法返回被选元素的所有跟随的同胞元素。
$(document).ready(function () {
console.log($('.li').nextAll().text());
})
Ⅳ. nextUntil()
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
$(document).ready(function () {
console.log($('.li').nextUntil('.last-li').text());
})
Ⅴ. prev()
siblings() 方法返回被选元素的前面同胞元素。
$(document).ready(function () {
console.log($('.li').prev().text());
})
Ⅵ. prevAll()
nextAll() 方法返回被选元素的前面所有的同胞元素。
$(document).ready(function () {
console.log($('.li').prevAll().text());
})
Ⅶ. prevUntil()
nextUntil() 方法返回介于两个给定参数之间的所有前面的同胞元素。
$(document).ready(function () {
console.log($('.li').prevUntil('.first-li').text());
})
3.4 过滤
缩小搜索元素的范围
Ⅰ. first()
first() 方法返回被选元素的首个元素。
$(document).ready(function () {
console.log($('.li').prev().first().text());
})
Ⅱ. last()
last() 方法返回被选元素的最后一个元素。
$(document).ready(function () {
console.log($('.li').prev().last().text());
})
Ⅲ.eq()
eq() 方法返回被选元素中带有指定索引号的元素。
$(document).ready(function () {
console.log($('.ul li').prev().eq(1).text());
})
八.AJAX
8.1 概念
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
8.2 语法
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
8.3 相关参数
$(document).ready(function () {
$.ajax({
url: '请求的地址',
type: '规定请求的类型/GET/POST',
async:'是否同步',
contentType:'发送数据到服务器所用的内容类型,默认是:application/x-www-form-urlencoded',
data:'规定要发送到服务器的数据',
dataType:'预期的服务器响应的数据类型(希望服务器返回的类型)',
sussess:function(result){
'成功时候执行的函数'
result: 成功返回的结果
},
error:function(){
'失败时候执行的函数'
}
}
)
})