jQuery
1、jQuery介绍
简洁JS库,封装了JS,只有一个叫jQuery的函数,jQuery函数调用的结果是一个jQuery对象
dom
选择器
事件
属性
…
bom
Ajax
ES5
jQuery特点
选择器
事件
dom操作
属性操作
2、jQuery安装
a、本地引入
<!-- 本地引入 -->
<!-- <script src="../jquery-3.5.1/jquery-3.5.1.js"></script> -->
<script src="../jquery-3.5.1/jquery-3.5.1.min.js"></script>
b、在线引入
bootcdn
<!-- 在线引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
3、jQuery函数
jQuery库中只有一个叫做jQuery的函数,里边封装了大量的方法,供我们调用
a、如何调用jQuery函数
jQuery()
$()
b、jQuery函数的参数
// jQuery 的参数
// 1、选择器
// $('p').css('background-color','skyblue');
// 2、参数为 HTML 片段
console.log($('<div>番茄汤</div>'));
// 3、参数dom
console.log($(document));
// 4、参数为匿名函数,当文档加载完毕再去执行
$(
function () {
$('p').css('background-color','skyblue');
}
)
类数组对象
this、arguments、jQuery
4、jQuery对象
a、形式
$(),类数组对象,可以调用jQuery原型中的方法
b、dom对象 ——》jQuery对象
console.log(document); //dom对象
console.log($(document)); //jQuery对象
c、jQuery对象 ——》dom对象
console.log($(document)[0])
console.log($(document).get(0))
5、jQuery选择器
回顾:
基本选择器
标签
id
class
组合
逗号
*
层次选择器
子代
后代
属性选择器
伪类选择器
:first-child
:last-child
:nth-child()
伪元素选择器
::before
::after
jQuery:
基本选择器:
$(function() {
// 当文档加载完毕之后再去执行
// 1.标签选择器
$('p').css('color','red')
// 2.class选择器
$('.one').css('color','blue')
// 3.id选择器
$('#first').css('color','green')
})
层次选择器:
// 1.后代选择器
$('div p').css('color','blue')
// 2.子代选择器
$('div > p').css('color','red')
基本过滤器:
// 1.:first,获取所选元素(标签)中第一个
$('div:first').css('color','red')
// 2.:last,获取所选元素中最后一个
$('div:last').css('color','green')
// 3.:even,获取到所选元素中的偶数元素
$('div:even').css('color','blue')
// 4.:odd,获取所选元素中的奇数元素
$('div:odd').css('color','pink')
// 5.:lt(index),选择小于索引值index的元素
$('div:lt(2)').css('color','red')
// 6.gt(index),选择大于索引index的元素
$('div:gt(2)').css('color','red')
// 7.eq(index)
$('div:eq(2)').css('color','red')
内容过滤器:
// 1.:contains('文本字符串'), 获取包含文本字符串的元素
$('div:contains("衬衫")').css('color','red')
// 2.empty,获取内容为空或者是没有子元素的元素
$('div:empty').css({
'height':'20px',
'background-color':'blue'
})
// 3.parent,获取有内容或者有子元素的元素
$('div:parent').css({
'height':'20px',
'background-color':'pink'
})
可见性过滤器:
// 1.hidden,获取到页面中隐藏的元素
console.log($('div:hidden'));
// 2.visible,获取页面可见的所有元素
console.log($('div:visible'));
6、事件
1)on(event, [selector], [data], fn)
2)off(event, [selector], [fn])
3)one(event, [selector], fn)
4)hover(fn1,[fn2])
event:
click
mouseover
mouseout
dblclick 双击
点击事件
// 1.on(event,[selector],[data],fn)
$('.one').on('click',{id:1}, function (event) {
// $('.one').css('color', 'green');
console.log(event.data); // Object
})
$('.one').on('mouseover', function () {
$('.one').css('color', 'green');
})
去掉通过on添加的事件处理程序
// 2.off(),去掉通过on添加的事件处理程序
// $('.one').off();
// $('.one').off('click');
事件代理
// 事件代理,将子元素上的事件处理程序,绑定到父元素上。当点击子元素的时候,触发绑定在父元素上的事件
$('ul').on('click', 'li' ,function (event) {
// event.target 就是我们点击的对象
console.log(event.target);
console.log($(this));
// 当我点击当前元素,改变其背景色
// $(this).css('background-color','lightblue');
// 判断当前点击元素是否有颜色
// hasClass 判断是否拥有某个类
if ($(this).hasClass('color')) {
// 移除背景色removeClass
$(this).removeClass('color');
}else{
// 添加当前点击元素背景色的同时移除兄弟元素的背景色
$(this).addClass('color').siblings().removeClass('color');
}
})
只能进行一次操作
// 3.one(event, [selector], fn)
$('.one').one('click', function () {
console.log('点击');
})
光标移动触发事件处理程序
// 4.hover(fn1,[fn2])
// fn1当光标移入的时候,触发的事件处理程序
// fn2当光标移出的时候,触发的事件处理程序
$('li').hover(function() {
// 当光标移入的时候,背景色变成粉色
$('li').css('background-color','pink')
},function() {
// 当光标移出的时候,背景色变成白色
$('li').css('background-color','white')
})
事件的简写形式
$('.one').click(function () {
$('.one').css('color', 'red');
})
7、节点操作
a、插入方法
1)append()、appendTo()
append 追加到元素内部
// 在咖啡的后面追加拿铁(html片段)
$('.one').append($('<div>拿铁</div>'))
// $('<div>拿铁</div>').appendTo($('.one'))
2)prepend()、prependTo()
插入到元素之前的内部
$('.two').prepend($('<div>百香果</div>'))
// $('<div>百香果</div>').prependTo($('.two'))
3)before()、insertBefore()
插入到元素之前 外部
$('.one').before($('<div>拿铁</div>'))
// $('<div>百香果</div>').insertBefore($('.two'))
b、包裹方法
1)wrap
给每一个div标签包裹一个h1标签
$('div').wrap('<h1></h1>')
2)unwrap
删除外层包裹元素
$('div').unwrap()
3)wrapAll
为所有div包裹上一个h1标签
$('div').wrapAll('<h1></h1>')
4)wrapInner
为所选标签都套上了h1标签
$('div').wrapInner('<h1></h1>')
c、替换方法
replaceWith、replaceAll
替换所选元素为其他元素
$('.one').replaceWith($('<h1>hello</h1>'))
// $('<h1>hello</h1>').replaceAll($('.one'))
d、移除方法
empty
只是清空内部标签和内容
$('div').empty()
remove
$('div').remove()
e、克隆方法
clone
克隆$('.four')并且追加
$('.four li').click(function() {
console.log('饼干');
})
$('.four').clone(true).appendTo($('.four'))
clone(true)
深克隆,会克隆文本样式属性以及事件
clone(false)
浅克隆,只会克隆文本,样式以及属性
8、属性操作
attr
// attr
console.log($('.one').attr('class')); // one,获取类名
$('.one').attr('style', 'color: blue');
$('.one').attr({
'style': 'color: blue',
'style': 'background-color: pink' // 只有最后一个有效
})
text
获取所有所选元素中内容
console.log($('div').text());
html
获取所选元素中第一个的内容
console.log($('div').html());
val
获取表单元素的值
val():获取表单元素的值
val(1230):设置默认值
$('input').val('123321') //设置默认值
$('button').click(function() {
// 获取input的内容
console.log($('input').val()); //获取
})
9、静态方法
1)each遍历
$('li').each(function (index,item) {
console.log(index, item);
})
2)type 检测数据类型
console.log($.type([1, 2])); // array
3)param
console.log($.param({id:1, name:'tom'}));
// id=1&name=tom 查询字符串