jQuery学习
文章目录
- day 01
-
- 08 dom对象与jQuery对象
- 09 dom对象与jQuery对象的互相转换
- 11 设置获取文本内容text()
- 12 设置获取样式css()
- 13 基本选择器
- 14 层次选择器
- 15 过滤选择器
- 属性选择器
- 20 淘宝服饰精品
- day02
-
- Class 类操作
- 添加类
-
- 添加单个类
- 添加多个类
- 移除类
-
- 移除单个
- 移除多个
- 移除所有
- 判断类
- 切换类
- 02 案例——tab栏切换
- jquery动画——显示show()隐藏hide()
- 09 动画队列以及stop参数
- 10 动态创建元素-html()和$()
- 14 清空节点empty()与移除节点remove()
- 16 克隆节点clone()
- day 03
-
- 01 JQuery操作属性
- 02 案例——美女相册
- 03 prop()操作布尔类型的属性
- 04 案例——表格全选反选
- 05 宽高
- 06 offset()和position()
- 07 scrollLeft()和scrollTop()
- 08 案例——固定导航栏
- 事件处理函数
- 09 JQuery事件发展历程
-
- 简单事件绑定.click()
- bind事件绑定
- delegate
- 10 on统一注册
-
-
- on注册简单事件
- on注册委托事件
-
- 11 案例——动态数据添加和删除——使用on委托注册事件
- 12 事件解绑off()
- 13 事件触发
- 14 jQuery事件对象
- 15 案例——按钮变色
- day 04
-
- jQuery补充知识点
- 01 案例——五角心评分
- 02 链式编程与end()
-
- 链式编程
- end方法
- 03 显示迭代each()
- 04 多库共存
- 06 JQuery插件介绍——颜色插件
- 07 插件使用——省市联动
- 08 插件的使用——UI插件
- 09 自己开发JQuery插件
- 10 自己封装table表格插件
- 11 自己封装tab栏切换插件
- 12 封装插件的好处——tab切换
day 01
08 dom对象与jQuery对象
- dom对象
var dom = document.getElementById();//原生js获取到的对象就是dom对象
特点：只能调用dom的方法与属性，不能调用jQuery的方法与属性
dom.style.backgroundcolor = 'red';//调用dom的属性与方法
dom.css('backgroundcolor','red');//不能调用dom的方法属性
- jQuery对象
利用jQuery获取的对象就是…
var $div01 = $('#one');//通过id
$div01.css()
特点：不能互通的
jQuery对象是一个伪数组，有下标有length但是不是数组
证明：
console.log($div1.__proto__ === Array.__proto__);
09 dom对象与jQuery对象的互相转换
dom -> jQuery ：用$把dom对象包起来
var $obj = $(dom对象);
jQuery -> dom ：1.下标，2.get()；
//method1 ：下标
var div1 = $jQuery对象[下标]//下标0序
//method2 ：get()方法
var div1 = $jQuery对象.get(下标)
11 设置获取文本内容text()
-
获取文本
$('obj').text();注：假如obj有子代，那么也会获取到子代的文本（div下的p）
-
设置文本
$('obj').text("String");注：
- String会覆盖原来的内容，如果设置的文本中包换标签，是不会解析该标签的
- 如果选择器选择了多个,那么都会被设置，并且不会保留子代文本
12 设置获取样式css()
- 获取样式
格式：$('obj').css('想要获取的样式名');
-
设置样式
- 设置单个样式
格式：$('obj').css('想要设置的样式名'，'样式值');
- 设置多个样式
格式:$('obj').css({
xxx:xxx,
xxx:xxx
});
13 基本选择器
| 选择器 | 用途 |
|---|---|
| $(’#id’) | id选择器 |
| $(.class’) | 类选择器 |
| $(‘TagName’) | 标签名选择器 |
| $(‘obj1,obj2,obj3’) | 并集选择器 |
| $(‘obj1 obj2 obj3’) | 交集选择器 |
14 层次选择器
$('#father > #son')获取ID为father的所有子元素中id为son 的元素
15 过滤选择器
- 这类选择器都带冒号
| 名称 | 用法 | 描述 |
|---|---|---|
| :eq(index) | $(“li:eq(2)”).css(‘color’,'red); | 从获取的li元素中，选择索引号为2的元素，索引从0开始 |
| :odd | $(“li:odd”).css(‘color’,'red); | 奇数 |
| :even | $(“li:even”).css(‘color’,'red); | 偶数 |
属性选择器
筛选选择器（方法）
- 和过滤选择器类似，但是这个主要是方法
chirdren()，里面不写参数
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(‘ul’).children(‘li’) | 相当于$(‘ul-li’)，子类选择器 |
| find(selector) | $(‘ul’).find(‘li’) | 相当于$(‘ul li’)，后代选择器 |
| siblings(selector) | $(’#first’).siblings(‘li’); | 查找兄弟节点，不包括自己本身 |
| parent() | $(’#first’).parent() | 查找父亲 |
| eq(index) | $(‘li’).eq(2) | 相当于$(‘li:eq(2)’),index从0开始 |
| next() | $(‘li’).next() | 找下一个兄弟 |
| nextAll() | $(this).nextAll() | 找该元素后面的所有元素 |
| prev() | $(‘li’)prev() | 找上一个兄弟 |
| prevAll() | $(this).prevAll() | 找该元素前面的所有元素 |
案例：下拉菜单
==mouseover ==事件在鼠标移动选取的元素及其子元素上时触发
==mouseenter ==鼠标只在鼠标移动到选取元素上时触发
//案例：突出显示“
../ 代表当前文件的上一级目录
./” 代表当前文件所在目录
<script src="jquery-3.4.1.js"></script>
<script>
//获取所在的li
$(function() {
//需求1：给小人物加一个鼠标移入时间，当前(this)li的透明度为1，其他兄弟的透明度为0.4
//需求2：鼠标离开大盒子，所有li的透明度改成1
$('.wrap').find('li').mouseenter(function() {
$(this).css('opacity', 1).siblings('li').css('opacity', 0.4);
})
$('ul').mouseleave(function() {
$('ul').find('li').css('opacity', 1);
})
});
</script>
.show：显示（相当于display：block）
.hidden：隐藏（相当于display：none）
jquery：隐式迭代，链式编程（在于一个方法返回的是一个jquery对象，就可以继续点jquery方法）
20 淘宝服饰精品
$(‘li’).index()方法获取索引，从0开始
$('.center>li').eq(index)
$('.center>li:eq('+index+')')//做字符串拼接
.show()有返回值，返回本身
.show().siblings().hidden()
属性操作
属性是可以自定义的哦！ * 获取属性- 设置属性
.attr(src,‘src’)
- 通过属性查找
$('li[src="www.baidu.com"]')
- 添加某个属性
$(selector).attr('属性名','属性值')
- 移除某个属性
$(selector).removeAttr('属性名')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 500px;
height: 200px;
margin: 100px auto;
display: flex;
justify-content: space-around;
border: 1px solid pink;
}
.left,.right,.center{
list-style: none;
}
.left{
flex:1;
}
.center{
flex:3;
}
.right{
flex:1;
}
</style>
<body>
<div class="wrapper">
<ul class="left">
<li><a href="">链接</a></li>
<li><a href="">链接</a></li>
<li><a href="">链接</a></li>
<li><a href="">链接</a></li>
<li><a href="">链接</a></li>
<li><a href="">链接</a></li>
<li><a href="">链接</a></li>
<li><a href="">链接</a></li>
</ul>
<ul class="center">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
</ul>
<ul class="right">
<li><a href="">链接</a></li>
<li><a href="">链接</a></li>
<li><a href="">链接</a></li>
<li><a href="">链接</a></li>
<li><a href="">链接</a></li>
<li><a href="">链接</a></li>
<li><a href="">链接</a></li>
<li><a href="">链接</a></li>
</ul>
</div>
</body>
</html>
<script src="jquery-3.4.1.js"></script>
<script>
$(function() {
//需求1：给左边的li设置鼠标移入事件，让对应的li显示，其他的隐藏
//需求2：给右边的li设置鼠标移入事件，让对应的li显示，其他的隐藏
//解决需求1:为什么不给a标签设置鼠标移入时间，而要给li标签
$('.left>li').mouseenter(function(){
//获取当前li的索引
let index = $(this).index();
console.log($('.center>li').eq(index).show().siblings('li').hide());
});
$('.right>li').mouseenter(function(){
let index = $(this).index();
index+=$('.left>li').length;
console.log($('.center>li').eq(index).show().siblings('li').hide());
})
});
</script>
day02
Class 类操作
没有button只能用input来实现type
添加类
添加单个类
addClass(类名1)
添加多个类
addClass(类名1 类名2)
移除类
移除单个
.removeClass(类名);
移除多个
移除所有
.removeClass();
判断类
hasClass()：
切换类
.toggleClass()：没有这个类就添加，有就删除
02 案例——tab栏切换
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<style>
ul{
width: 500px;
height: 30px;
list-style: none;
display: flex;
justify-content: space-between;
margin:20px auto;
background-color: #ccc;
}
ul li{
width: 50px;
height: 100%;
background-color: aqua;
}
.main{
display:none;
}
.active{
border-top: 3px solid red;
}
.selected{
display:block;
}
style>
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
ul>
body>
html>
<script src="jquery-3.4.1.js">script>
<script>
$(function(){
$('ul>li').mouseenter(function(){
console.log($(this).addClass('active').siblings('li').removeClass('active'))
let index = $(this).index();
$('.main').eq(index).addClass('selected').sibling('.main').removeClass('selected')
})
$('ul').mouseleave(function(){
$('li').removeClass('active')
})
});
script>
jquery动画——显示show()隐藏hide()
- 显示：
显示和隐藏
- 显示
$('#div1').show('slow')
1. 如果show没有参数就没有动画效果
2. 如果想要动画效果就要给他参数：
* 参数1：代表执行动画的时长可以是毫秒数，也可以是代表时长的三个字符串（fast:200ms normal:400ms slow:600ms）写错了，也行此时相当于Normal
* 参数2：动画执行完后的回调函数
- 隐藏
$('#div1').hide
$(’#div1’).hide(2000);
- 切换
$('#div1').toggle(1000)//
如果元素隐藏就动画显示，否则反之
- 有没有回调函数
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
display: none;
}
style>
<body>
<input type="button" value="隐藏" id="hide">
<input type="button" value="显示" id="show">
<input type="button" value="切换" id="toggle">
<div id="div1">div>
body>
html>
<script src="jquery-3.4.1.js">script>
<script>
$(function(){
//1.显示
$('#show').click(function(){
//给div1显示出
// 1.1如果show没有参数就没有动画效果
// 1.2如果想要动画效果就要给他参数
/* 参数1：代表执行动画的时长可以是毫秒数，也可以是代表时长的三个字符串（fast:200ms normal:400ms slow:600ms）写错了，也行此时相当于Normal
参数2：动画执行完后的回调函数
*/
$('#div1').show('slow');//200ms
})
//2.隐藏
$('#hide').click(function(){
//$('#div1').hide(2000);//
//回调函数
$('#div1').hide(2000,function(){
alert();
})
})
//3.toggle
//如果元素隐藏就动画显示，否则反之
$('#toggle').click(function(){
//$('#div1').hide(2000);//
//回调函数
$('#div1').toggle(1000)//
})
});
script>
-
滑入
- slideDown()方法
向下滑动元素
参数1：speed：“slow”,“fast”,ms数，可省略
参数2：回调函数
- slideup()方法
- slideToggle()方法
-
淡入
fadeIn
- 自定义动画
.click(function(){
$('#div1').animate({prop:value},speed)
})
.animate(prop,time,speed,callback)
- 参数1：必选 需要做动画的属性，
- 参数2：时长，可选
- 参数3：easing：可选的，代表缓动还是匀速：linear swing
linear:匀速
swing：慢-快-慢
默认：swing - 参数4：动画执行完毕后的回调函数：可以在里面又做动画定义
09 动画队列以及stop参数
如果你去鬼畜一个动画，他当前做不了就会加入动画队列，然后就会很鬼畜
方法：stop方法
解法：在同一个元素上执行多个动画，后面的动画会被放到动画队列中，前面的执行完了才会执行
stop(chearQueue,jumpToEnd)
- chearQueue：是否清除队列
- jumpToEnd:是否跳转到最终效果
不写参数默认两个false
10 动态创建元素-html()和$()
- 原生js创建节点
- document.write( )：打开标准流->添加->关闭
- innerHtml：设置内容（包含标签）
- document.createElement(‘div’)
JQuery中：
- html
- $()
-
html()
设置/获取内容
获取到元素的所有内容：
$('#div1').html()=>设置内容：
$('#div1').html("我是设置的内容")会覆盖
-
$()方法
var $link=$('')记住：
- $()里面的参数是字符串，同时像class=“div"这样的里面的”"都可以省略
- 同时这样创建的元素只存在于内存中，如果要在页面上显示，就一定要追加
$("#div1").append($link)
14 清空节点empty()与移除节点remove()
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./jquery-3.4.1.js">script>
head>
<body>
<input type="button" value="按钮" id="btn" />
<ul id="ul1">
<li>我是第1个lili>
<li>我是第2个lili>
<li id="li3">我是第3个lili>
<li>我是第4个lili>
<li>我是第5个lili>
ul>
body>
html>
清空ul里面的所有元素
$("#ul1").html("");
不推荐使用，不安全，li清掉了，但是事件还在，所以可能造成内存泄漏
推荐使用
$("#ul1").empty();
不仅移除了元素。还清空了元素绑定的事件
移除某一个元素
$("#li3").remove();
看着像自杀,本质还是找到父亲，然后从父亲那边移除孩子
16 克隆节点clone()
day 03
01 JQuery操作属性
02 案例——美女相册
03 prop()操作布尔类型的属性
04 案例——表格全选反选
05 宽高
| 项 | 代码 |
|---|---|
| 内容 | width(),height() |
| 内容+padding | innerWidth()，innerHeight() |
| 内容+padding+border | outerWidth(),outerHeight() |
| 内容+padding+border+margin | outerWidth(true),outerHeight(true) |
06 offset()和position()
获取元素距父元素的top和left值
$('selector').position().top
$('selector').postion().left
07 scrollLeft()和scrollTop()
08 案例——固定导航栏
事件处理函数
原生js注册事件
document.getElementById("div1").onclick = function(){
alert("点击事件")
}
document.getElementById("div1").onclick = function(){
alert("点击事件 lalala")
}
原生js注册相同事件，后面会覆盖前面的
Jquery注册
$('#one').click(function(){
alert('点击事件')
})
$('#one').click(function(){
alert('点击事件啦啦啦')
})
Jquery给同一个元素注册相同的事件，后面的不会覆盖前面的
注意这里不是同时注册而是有先后顺序的
09 JQuery事件发展历程
简单事件绑定.click()
- 不支持动态注册
- 不支持同时注册
$('div').click(function(){
console.log("")
})
$('div').mouseenter(function(){
console.log("")
})
bind事件绑定
- 支持同时注册
- 不支持动态注册
$('div').bind({
mouseenter:function(){
},
click:function(){
}
})
可以接受一个类似于json格式的事件类型与处理程序
delegate
- 支持同时注册
- 也支持动态注册
要给父元素注册事件
$('parent').delegate('p','click',function(){
});
参数列表解析：(要绑定事件的元素,事件类型,事件处理函数)
缺点：只能注册委托事件，因此注册事件需要记很多方法
$('body').delegate('div',{
mouseenter:function(){
console.log("移入")
},
click:function(){
console.log("单击")
}
})
本质是事件冒泡
10 on统一注册
JQuery 1.7 之后，都用on统一注册，也就是前面的方法都不需要用
on注册简单事件
$(selector).on('click',function(){})
- 给selector绑定事件
- 由自己触发
- 不支持动态绑定
on注册委托事件
$(selector).on('click','span',function(){})
-
给selector注册绑定代理事件’
-
支持动态绑定
11 案例——动态数据添加和删除——使用on委托注册事件
12 事件解绑off()
- unbind()，了解
- undelegate()，了解
- off(),，重点掌握
$('selector').off()//移除当前选择元素的所有事件
$('selector').off('click')//移除选择元素的click事件
13 事件触发
- 代码的方式触发事件
- 可以使用他来触发自定义事件
- 可以用于在满足一定条件的时候来触发
$(selector).trigger('事件名')
$('#one').on('lx',function(){
$(this).text('谢谢你')
})
// 没有触发时机，现在就是要触发怎么办，用trigger，
$('#btn2').on('click',function(){
var res = confirm('哈皮');//
if(res){
//触发自定义的lx事件
$('#one').trigger('lx');
}
})
});
14 jQuery事件对象
什么是事件对象
注册一个事件 系统就会帮我们生成一个对象 记录这个事件触发时候的信息
例如：比如触发事件时有有没有按住某个键,又比如坐标信息…
<div id="one" class="one">
<input type="button" id="btn" value="我是按钮">
<br />
<a href="https://www.baidu.com">百度一下,你就知道a>
div>
$('#one').on('click', function (e) {
//如何获取事件对象
//jquery中用事件参数e来获取
//jquery事件对象是对原生js事件对象的封装，处理好了兼容性
//2.事件对象中常用的三个坐标
//触发事件那一点距离屏 幕左上角的值
console.log("Screen" + e.screenX + " : " + e.screenY);
//触发事件那一点距离 可视区左上角的值
console.log("client" + e.clientX + " : " + e.clientY);
//触发事件那一点距离 页面左上角的值
console.log("page" + e.pageX + " : " + e.pageY);
alert("我是div的单击事件。")
})
$('#btn').on('click',function(e){
// 也会触发div的单击事件
alert("我是按钮的单击事件");
// 阻止事件冒泡
// 1. 接受事件对象e
// 2. 调用
e.stopPropagation();//阻止事件冒泡
})
$('a').on('click',function(e){
alert("我是a标签的单击事件");
// e.stopPropagation();//阻止事件冒泡
// // 阻止默认行为——阻止a标签的一个跳转
// e.preventDefault();
// 既能阻止事件冒泡，又能阻止默认行为
return false;
})
5.给页面注册键盘按下事件，e.keyCcode能获取按得是哪个键
$(document).on('keydown',function(e){
// console.log(e.keyCode);
let $div = $('#one');
offset = 20;
let $div_left = $div.position().left;
let $div_top = $div.position().top;
switch(e.keyCode){
case 37:$div.css('left',$div_left-=offset);break;
case 38:$div.css('top',$div_top-=offset);break;
case 39:$div.css('left',$div_left+=offset);break;
case 40:$div.css('top',$div_top+=offset);break;
}
})
15 案例——按钮变色
day 04
jQuery补充知识点
01 案例——五角心评分
$(selector).on()有返回值，返回的就是对selector，所以又可以链式编程
对next()，prev()的补充，这里补充到前面
属性选择器
页面内跳转的方法：
[要显示的内容](要跳转的id)
eg:
<span id="span">span>
(这里可以跳转到span)[#span]
02 链式编程与end()
链式编程
- 什么时候可以链式编程
如果给元素调用一个方法，方法有返回值，并且返回的是一个jquery对象，那就可以继续再点出jquery方法
$('div').width(100).height(100).css('background-color','red')
但是如果返回的是一个数值，而非一个jQuery对象就会报错
$('div').width(100).width().height()：报错，因为$('div').width(100).width()返回的是一个数值，而数值不能点出jquery方法
end方法
end()：回到jQuery上一个状态
$(this).text(sx_sign).prevAll().text(sx_sign).end()//相当于$(this)
但是同样的，语句$('div').width(100).width().end()依然错误，因为返回的是数值无法继续点出jQuery方法
03 显示迭代each()
let $sel = $(selector);
$sel.each(function(index,element){
//index：索引
//element：元素，是一个BOM对象
})
04 多库共存
- 如何查看jQuery版本
JQuery.fn.jquery
$.prototype.jquery
2. 如果引入了多个jQuery文件，那$指代的是谁
后引入谁，就会覆盖之前引入的
3. 如过就是想用前面的怎么办
多库冲突/多库共存问题
提供了一个机制：
JQuery.noconflict()：释放$的控制权，这样$就指代后引入的了
如果又想用怎么办，只要接受返回值就行
var _$ = JQuery.noconflict();
自执行函数
(function(){
}())
06 JQuery插件介绍——颜色插件
什么是 插件
插件就是做扩展功能的，就像一部手机本来只有打电话发短信的功能，但是你可以下载app来扩展功能
jq22网址
颜色插件：jquery.color.js
/*
我们知道jquery有个animate方法，
但是里面的backgroundColor会不起作用，
这个时候就需要用到我们的插件了
*/
使用插件的一般流程：
- 引入jQuery文件
- 引入插件文件
- 调用插件方法（一般都有参考文档或者示例）