20.9.1 jQuery简介 使用 工厂函数 jQuery对象 选择器 操作元素内容 操作标签属性 操作标签样式 元素创建添加删除 动画效果 数据遍历 jQuery事件处理
jQuery简介
1. 介绍
jQuery是JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。
2. 使用
1）引入
先引入jquery文件，才能使用jquery语法
- CDN 有网（备用）
- 本地文件（常用）
2）工厂函数 - $()
"$()"函数用于获取元素节点，创建元素节点或将原生JavaScript对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列 jQuery 操作的方法。
例如 :
//$()获取元素节点,需传入字符串的选择器
$("h1")
$("#d1")
$(".c1")
$("body,h1,p")
//选择器的特点，与样式选择器一致
3）原生JavaScript对象与jQuery对象
原生JavaScript对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :
- 原生JavaScript转换jQuery对象
$(原生对象)，返回 jQuery 对象 - jQuery对象转换原生JavaScript对象
- 方法一 : 根据下标取元素,取出即为原生对象
var div = $(“div”)[0]; - 方法二 : 使用jQuery的get(index)取原生对象
var div2 = $(“div”).get(0);
- 方法一 : 根据下标取元素,取出即为原生对象
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="d1"></div>
<!-- 引入外部文件jquery 放在上方 -->
<script src="../js/jquery.min.js"></script>
<script>
// 原生JS对象 使用原生JS的方法和属性
// innerHTML getAttribute() onclick
var d1 = document.getElementById('d1');
// jQuery对象 使用jQuery提供的方法和属性
var $d1 = $('#d1');
console.log($d1);
$d1.html('hello world');
// jq-->js
console.log($d1[0]);
// js-->jq
console.log($(d1));
$d1[0].onclick = function(){
alert('hello')
}
// function $$(id){
// return document.getElementById(id);
// }
// $$('d1').innerHTML = 'hello world';
</script>
</body>
</html>
**4）jQuery获取元素**
jQuery通过选择器获取元素，$("选择器")
选择器分类 :
基础选择器
```javascript
标签选择器：$("div")
ID 选择器：$("#d1")
类选择器：$(".c1")
群组选择器：$("body,p,h1")
层级选择器
后代选择器： $("div .c1")
子代选择器： $("div>span")
相邻兄弟选择器： $("h1+p") 匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2
通用兄弟选择器： $("h1~h2") 匹配选择器1后所有满足选择器2的兄弟元素
过滤选择器，需要结合其他选择器使用。
:first
匹配第一个元素 例:$("p:first")
:last
匹配最后一个元素 例:$("p:last")
:odd
匹配奇数下标对应的元素
:even
匹配偶数下标对应的元素
:eq(index)
匹配指定下标的元素
:lt(index)
匹配下标小于index的元素
:gt(index)
匹配下标大于index的元素
:not(选择器)
否定筛选,除()中选择器外,其他元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选择器</title>
</head>
<body>
<ul>
<li id="first">大师兄</li>
<li>沙师弟</li>
<li>白龙马</li>
</ul>
<script src="../js/jquery.min.js"></script>
<script>
$('li:not(#first)').css('color','red');
// $('li:eq(1)').css('color','red');
// $('li:even').css('color','red');
// $('li:odd').css('color','red');
// $('li:last').css('color','red');
// $('li:first').css('color','red');
// 相邻兄弟选择器 找#first后挨着的li
// $('#first+li').css('color','red');
// 通用兄弟选择器 找#first后所有的li
// $('#first~li').css('color','red');
// 层级查找函数 parent parents...
</script>
</body>
</html>
5）操作元素内容
html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val() //设置或读取表单元素的值,等价于原生value属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="key">
<button id="btn">click me</button>
<h1 id="show">......</h1>
<script src="../js/jquery.min.js"></script>
<script>
// 当用户修改文本框内容后
// change() 当控件的值发生改变时触发
// 在页面显示文本框的内容
$('#key').change(function(){
$('#show').html($(this).val());
})
// 当按钮被点击时
// 获取用户在文本框输入的内容
// 放在h1中显示
$('#btn').click(function(){
$('#show').html($('#key').val());
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<input id="canSubmit" type="checkbox">请阅读并同意
<a href="#">协议</a>
</div>
<button id="btn">提交</button>
<script src="../js/jquery.min.js"></script>
<script>
// 当按钮被点击时 检复选框是否被选中
// 如果选中 提示ok
// 没被选中 提示请阅读并同意协议
$('#btn').click(function(){
// 判断是否有check属性
// var res1 = $('#canSubmit').attr('checked');
// console.log(res1);
var res2 = $('#canSubmit').prop('checked');
res2?alert('OK'):alert('请阅读并同意协议');
})
</script>
</body>
</html>
6）操作标签属性
- attr(“attrName”,“value”)
设置或读取标签属性 - prop(“attrName”,“value”)
设置或读取标签属性
注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写 - removeAttr(“attrName”)
移除指定属性
7）操作标签样式
- 为元素添加id/class属性,对应选择器样式
- 针对类选择器,提供操作class属性值的方法
addClass("className") //添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加
操作行内样式
css("属性名","属性值") //设置行内样式
css(JavaScriptON对象) //设置一组CSS样式
/*
JavaScriptON对象:常用数据传输格式
语法 :
{
"width":"200px",
"height":"200px",
"color":"red"
}
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul,
body {
/* 清除小圆点 */
list-style: none;
margin: 0;
padding: 0;
}
li {
/* 让块元素水平排列 浮动 */
float: left;
}
.first {
color: #666;
margin: 10px;
}
.item {
/* display: none; */
/* 调整元素和其他元素的距离 外边距 */
margin: 10px 15px;
/* 调整内容和边框的距离 内边距 */
padding: 0 5px;
}
.active {
background-color: red;
color: #fff;
}
/* 鼠标移动到li中变成红底白字 */
.item:hover {
background-color: red;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<h1>css样式练习</h1>
<ul>
<li class="first">难度:</li>
<li class="item ">全部</li>
<li class="item">初级</li>
<li class="item active">中级</li>
<li class="item ">高级</li>
</ul>
<script src="../js/jquery.min.js"></script>
<script>
// $('h1').css('text-align','center').css('color','red').css('font-size','40px');
$('h1').css({
'text-align':'center',
'color':'red',
'font-size':'40px'
})
// JQ版本
// 当.item被单击时 为当前元素添加active
// 为其余的兄弟元素移除active
$('.item').click(function(){
$(this).toggleClass('active');
// $(this).addClass('active').siblings().removeClass('active');
})
// JS 版本
// var items = document.getElementsByClassName('item');
// for (var i = 0; i < 4; i++) {
// items[i].onclick = function () {
// init(items);
// this.setAttribute('class','active item');
// }
// }
// function init(ele){
// for(var i=0;i
// ele[i].setAttribute('class','item')
// }
// }
</script>
</body>
</html>
8）元素的创建,添加,删除
创建：使用$(“标签语法”)，返回创建好的元素
var div = $(""); //创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性
var h1 = $("一级标题
"); //创建的同时设置内容，属性和样式
作为子元素添加
$obj.append(newObj); //在$obj的末尾添加子元素newObj
$obj.prepend(newObj); //作为第一个子元素添加至$obj中
作为兄弟元素添加
$obj.after(newObj); //在$obj的后面添加兄弟元素
$obj.before(newObj); //在$obj的前面添加兄弟元素
移除元素
$obj.remove(); //移除$obj
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>页面元素创建添加</title>
</head>
<body>
<hr>
<script src="../js/jquery.min.js"></script>
<script>
// var $html = $('');
// $html.html('这是动态生成的标签').css('color','red').attr('id','title');
// console.log($html);
// var $html = $('这是动态生成的标签
');
// $('body').append($html);
// $('body').prepend($html);
$('body').html('这是动态生成的标签
');
$('hr').after('这是动态生成的标签
')
$('hr').remove();
</script>
</body>
</html>
9）动画效果
显示和隐藏
show(speed,callback)/hide(speed,callback)
- speed 可选。规定元素从隐藏到完全可见的速度。默认为 “0”。
- callback 可选。show 函数执行完之后，要执行的函数
通过使用滑动下拉和上推效果，显示隐藏的被选元素（ 只针对块元素 ）
slideDown(speed,callback)/slideUp(speed,callback)
通过使用淡隐淡现方式显示效果，显示隐藏的被选元素
fadeOut(speed,callback)/fadeIn(speed,callback)
动画函数，可以实现自定义动画 animate 函数
animate(styles,speed,callback)
- styles 必需。规定产生动画效果的 CSS 样式和值
- speed 可选。规定动画的速度。默认是 “normal”
- callback 可选。show 函数执行完之后，要执行的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<button id="btn1">隐藏</button>
<button id="btn2">上推</button>
<button id="btn3">淡隐</button>
<script src="../js/jquery.min.js"></script>
<script>
$('#btn3').click(function(){
if($(this).html() == '淡隐'){
$('div').fadeOut(3000,function(){
$('#btn3').html('淡现');
});
}else{
$('div').fadeIn(3000,function(){
$('#btn3').html('淡隐');
});
}
})
$('#btn2').click(function(){
if($(this).html() == '上推'){
$('div').slideUp(3000,function(){
$('#btn2').html('下拉');
});
}else{
$('div').slideDown(3000,function(){
$('#btn2').html('上推');
});
}
})
// 14:55~15:10
// 如果是隐藏 就隐藏图片然后将按钮改成显示
// 如果是显示 就显示图片然后将按钮改成隐藏
$('#btn1').click(function(){
if($(this).html() == '隐藏'){
$('div').hide(3000,function(){
$('#btn1').html('显示');
});
}else{
$('div').show(3000,function(){
$('#btn1').html('隐藏');
});
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义动画效果</title>
<style>
body{
margin: 0;
}
div {
width: 200px;
height: 200px;
background-color: red;
position: fixed;
}
</style>
</head>
<body>
<div></div>
<script src="../js/jquery.min.js"></script>
<script>
$('div').animate({
'right':'0'
},1500,function(){
$('div').animate({
'bottom':'0'
},1500,function(){
$('div').animate({
'left':'0'
},1500,function(){
$('div').animate({
'top':'0'
},1500,function(){
$('div').slideUp(1500)
})
})
})
})
// $('div').animate({
// 'width': '100px',
// 'height': '100px',
// 'margin-left': '300px',
// }, 2000, function () {
// $('div').animate({
// 'width': '200px',
// 'height': '200px',
// 'border-radius': '50%',
// 'margin-left': '0px',
// },2000,function(){
// $('div').fadeOut(2000);
// })
// })
</script>
</body>
</html>
10）数据与对象遍历
$(selector).each() 方法规定为每个匹配元素规定运行的函数
$(selector).each(function(index,element){
})
必需。为每个匹配元素规定运行的函数。
- index - 选择器的 index 位置
- element - 当前的元素
$.each()函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理
$.each(Object, function(index, data){
});
必需。为每个匹配元素规定运行的函数。
- index - 选择器的 index 位置
- data- 当前的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
<script src="../js/jquery.min.js"></script>
<script>
$('div').each(function(i,element){
$(element).click(function(){
alert(`这是第${
i+1}个元素`);
})
})
var arr = [1,2,3,4,5];
$.each(arr,function(i,o){
console.log(`索引值${
i},数据${
o}`)
})
</script>
</body>
</html>
11）jQuery事件处理
文档加载完毕
原生JavaScript 方法：window.onload
jQuery:
//语法一
$(document).ready(function (){
//文档加载完毕后执行
})
//语法二
$().ready(function (){
//文档加载完毕后执行
})
//语法三
$(function(){
//文档加载完毕后执行
})
区别：
原生onload事件不能重复书写，会产生覆盖问题；jquery中对事件做了优化,可以重复书写ready方法,依次执行
- 事件绑定方式
事件名称省略 on 前缀
//on("事件名称"，function)
$("div").on("click",function(){
});//新版本使用的多些
//bind("事件名称",function)
$("div").bind("click",function(){
});//1.6-1.8间的版本
//事件名作为方法名
$("div").click(function(){
});
- this表示事件的触发对象，在jquery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法，可以使用$(this)转换为jquery对象，使用jquery方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
var arr = [
{
provName: '北京', provId: 1 },
{
provName: '上海', provId: 2 },
{
provName: '深圳', provId: 3 },
]
// 使用$.each遍历arr
// 将得到的每一个对象变成option添加到select
// {provName:'北京',provId:1}
//
$.each(arr, function (i, o) {
$('#prov').append(`">${
o.provName}`)
})
})
</script>
</head>
<body>
地区: <select id="prov">
<option value="0">请选择</option>
<!-- <option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option> -->
</select>
<script>
$(function(){
alert('hello')
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件绑定</title>
</head>
<body>
<button id="btn">添加元素</button>
<script src="../js/jquery.min.js"></script>
<script>
$('#btn').on('click',function(){
$('body').prepend('动态添加的元素
')
})
// 事件委托 如果绑定事件的元素是动态生成的元素
// 可以将事件绑定给父元素 然后制定触发事件的元素的选择器
$('body').on('click','h1',function(){
$(this).css('color','red');
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>倒计时</title>
</head>
<body>
<div>
<span id="h">00</span>
:
<span id="m">00</span>
:
<span id="s">00</span>
</div>
<script src="../js/jquery.min.js"></script>
<script>
function addZero(num){
// if(num<10){
// return '0'+num
// }else{
// return num+''
// }
return num<10?'0'+num:num+''
}
var timer = setInterval(function () {
var start = new Date();
var end = new Date('2020/09/01 18:00:00');
var leftTime = parseInt((end - start) / 1000);
if(leftTime <= 0){
clearInterval(timer);
alert('来晚啦 全都卖光了')
return
}
var hours = parseInt(leftTime / 3600);
var minutes = parseInt(leftTime / 60 % 60);
var seconds = leftTime % 60;
$('#h').html(addZero(hours));
$('#m').html(addZero(minutes));
$('#s').html(addZero(seconds));
}, 1000)
</script>
</body>
</html>