1.为什么使用jQuery
使用js写代码时，会遇到一些问题
1.window.onload事件有事件覆盖的问题，因此只能写一个事件。
2.代码容错性能差。
3.浏览器兼容性问题。
4.书写繁琐，代码量多。
5.代码很乱，各个页面到处都是。
6.动画效果很难实现。
2.jQuery对象
jquery是一个全局函数，当调用$()，内部会帮我们new jQuery(),创建一个jQuery对象
创建出对象后，可以使用对象的属性和方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//自执行函数--自动调用
(function add() {
return console.log(2);
})();
console.log("jQuery---",jQuery);
console.log("$---",$);
console.log("$('.box')---",$('.box'));
</script>
</body>
</html>
3.入口函数
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
console.log($(document));
//1.文档资源加载完成后调用此方法
$(document).ready(function () {
console.log(1);
});
//2.jquery简便写法入口函数
$(function () {
console.log(2);
});
//3.图片资源加载完成后调用
$(window).ready(function () {
console.log(3);
});
</script>
</body>
</html>
4.jquery对象和js对象转换
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box"></div>
<div id="box2"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//如果是js对象，更加希望转换为jquery对象才能更简便的操作dom
//因为js包含jquery,jquery只是封装DOM事件、ajax动画。
//总结：
// 1.如果是jquery对象，一定要调用jquery的属性和方法
//2.js对象要调用js的属性和方法
//3.不要将两个对象混淆
//4.在jquery中，大部分都是api(方法)，length和索引是它的属性。
console.log("获取jquery对象-$('#box2')：",$('#box2'));
var div2 = document.getElementById('box2');
console.log("获取js对象-document.getElementById('box2')：",div2);
console.log("jquery对象转为js对象-$('#box2')[0]：",$('#box2')[0]);
console.log("jquery对象转为js对象-$('#box2').get(0)：",$('#box2').get(0));
console.log("js对象转换为jquery对象-$(div2)",$(div2));
});
</script>
</body>
</html>
5.jQuery如何操作DOM
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">vita</div>
<div id="box2">lili</div>
<div>chaochao</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
console.log("jquery的标签选择器-$('div')：",$('div'));
console.log("jquery的类选择器-$('.box')：",$('.box'));
console.log("jquery的id选择器-$('#box2')：",$('#box2'));
$('div').click(function () {
console.log("this.innerText---",this.innerText);
console.log("$(this).text---",$(this).text);
});
});
</script>
</body>
</html>
6.jquery选择器
6.1层级选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul class="lists">
<li>
ul class='lists'--li
</li>
<li>
ul class='lists'--li
</li>
</ul>
<ul class="item">
<li>
ul class='item'--li
</li>
</ul>
<ul class="item2">
<li class="item2-li">
ul class='item2'--li class='item2-li'
</li>
<li>
ul class='item2'--li
</li>
<li>
ul class='item2'--li
</li>
</ul>
<ul class="item3">
<li class="item3-li">
ul class='item3'--li class='item3-li'
</li>
<li>
ul class='item3'--li
</li>
<li>
ul class='item3'--li
</li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//1.后代选择器，修改样式属性
$('.lists li').css('color','red');
//2.子代选择器，亲儿子
$('.item>li').css({
'color':'yellow',
'background-color':'red'
});
//3.+紧邻选择器，只选择最挨着的兄弟
$('.item2-li+li').css('color','green');
//4.~兄弟选择器，选择后面的所有兄弟
$('.item3-li~li').css('color','blue');
});
</script>
</body>
</html>
6.2基本过滤选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul class="item">
<li>
$('.item li:eq(0)').css('background','red')
</li>
</ul>
<ul class="item2">
<li class="item2-li">
$('.item2 li:lt(1)').css('color','red');
</li>
<li>
ul class='item2'--li
</li>
<li>
$('.item2 li:gt(1)').css('color','green');
</li>
</ul>
<ul class="item3">
<li class="item3-li">
$('.item3 li:even').css('color','blue')
</li>
<li>
$('.item3 li:odd').css('color','yellow');
</li>
<li>
$('.item3 li:even').css('color','blue')
</li>
</ul>
<ul class="item4">
<li class="item4-li">
$('.item4 li:first').css('background','yellow')
</li>
<li>
ul class='item4'--li
</li>
<li>
$('.item4 li:last').css('background','green')
</li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$('.item li:eq(0)').css('background','red');
$('.item2 li:gt(1)').css('color','green');
$('.item2 li:lt(1)').css('color','red');
$('.item3 li:odd').css('color','yellow');
$('.item3 li:even').css('color','blue');
$('.item4 li:first').css('background','yellow');
$('.item4 li:last').css('background','green');
});
</script>
</body>
</html>
6.3属性选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<input type="text">
<input type="password">
</form>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//属性选择器中最常用的方式
$(function () {
$('input[type=text]').css('background-color','green');
$('input[type=password]').css('background-color','red');
});
</script>
</body>
</html>
6.4筛选选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
<div><span class="item1">vita</span></div>
<div><span class="item2">vita1</span></div>
<p class="item3">vita3</p>
<p class="item4"><span class="item4-child">vita4</span></p>
<p class="item5">
<span class="item5-child">vita5</span>
</p>
<div class="itemt6">vita6</div>
<div class="itemt7">vita7</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//筛选选择器
$(function () {
$('.box').find('span').css('color','red');
$('.box').find('.item3').css('color','blue');
$('.box').find('p>.item4-child').css('color','green').click(function () {
console.log('item3-child');
});
$('.box').children('.item5').css('background-color','yellow');
$('.box').children('.item6').eq(1).css('background-color','green');
$('.box').parent().css('background-color','purple');
});
</script>
</body>
</html>
6.5sibling
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//筛选选择器
$(function () {
$('button').click(function () {
//链式编程
$(this).css('background','red').siblings('button').css('background','yellow');
});
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width: 100%;
height: 100px;
}
.box{
background-color: red;
width: 100px;
height: 100px;
float: left;
text-align: center;
margin-right: 20px;
position: relative;
}
.box-child{
height: 60px;
width: 100px;
position: absolute;
top: 20px;
left: 0;
}
a{
text-decoration: none;
color: white;
line-height: 60px;
}
.list{
display: none;
}
.list.active{
display: block;
}
</style>
</head>
<body>
<div class="parent">
<div class="box">
<div class="box-child"><a >vita1</a></div>
</div>
<div class="box">
<div class="box-child"><a >vita2</a></div>
</div>
<div class="box">
<div class="box-child"><a >vita3</a></div>
</div>
</div>
<div class="list">vita1</div>
<div class="list">vita2</div>
<div class="list">vita3</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//我这里是点击div，不是点击a，如果点击a标签，会出现闪烁的情况，需要点击a旁边
$('.box-child').click(function () {
$(this).css('background-color','green').parent('.box').siblings('div').children('div').css('background-color','yellow');
var list_index = $(this).parent('.box').index();
$('.list').eq(list_index).addClass('active').siblings('.list').removeClass('active');
});
});
</script>
</body>
</html>
7.动画
"动画最重要的要记得，要先stop,然后运行动画方法，否则多次鼠标移动，，页面中会出现动画持续的效果"
7.1基本动画
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="toggle">开关式动画</button>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//展示
$('#show').click(function () {
//show(动画时间，fn)
//默认是normal 400ms slow 600ms fast 200ms
$('.box').show(2000,function () {
$(this).text('vita');
});
});
//隐藏
$('#hide').click(function () {
$('.box').hide('slow');
});
//开关式的显示隐藏动画
$('#toggle').click(function () {
//动画就像定时器一样，先关动画，再开动画
$('.box').stop().toggle(2000);
});
});
</script>
</body>
</html>
7.2卷帘门动画
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button id="slideDown">卷帘门下拉</button>
<button id="slideUp">卷帘门上拉</button>
<button id="slideToggle">开关式动画</button>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//展示
$('#slideDown').click(function () {
//show(动画时间，fn)
//默认是normal 400ms slow 600ms fast 200ms
$('.box').slideDown(2000,function () {
$(this).text('vita');
});
});
//隐藏
$('#slideUp').click(function () {
$('.box').slideUp('slow');
});
//开关式的显示隐藏动画
$('#slideToggle').click(function () {
$('.box').stop().slideToggle(2000);
});
});
</script>
</body>
</html>
7.3淡入淡出
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button id="fadeIn">淡入动画</button>
<button id="fadeOut">淡出动画</button>
<button id="fadeToggle">开关式动画</button>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//展示
$('#fadeIn').click(function () {
//show(动画时间，fn)
//默认是normal 400ms slow 600ms fast 200ms
$('.box').fadeIn(2000,function () {
$(this).text('vita');
});
});
//隐藏
$('#fadeOut').click(function () {
$('.box').fadeOut('slow');
});
//开关式的显示隐藏动画
$('#fadeToggle').click(function () {
$('.box').stop().fadeToggle(2000);
});
});
</script>
</body>
</html>
7.4自定义动画
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
<button>动画吧</button>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
var json = {
width:200,
height:200,
top:200,
left:500,
"border-radius":200
};
var json2 = {
width:0,
height:0,
top:10,
left:1000
};
$('button').click(function () {
$('div').stop().animate(json,2000,function () {
$('div').stop().animate(json2,1000,function () {
alert('已经添加到购物车');
})
})
});
});
</script>
</body>
</html>
7.5下拉菜单小案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.parent-menu{
width: 298px;
height: 50px;
background-color: pink;
margin: 30px auto 0;
}
.first-menu{
margin-left: 7px;
width: 90px;
position: relative;
float: left;
}
.first-menu p{
background-color: yellowgreen;
height: 50px;
text-align: center;
line-height: 50px;
}
.second-menu{
background-color: yellowgreen;
position: absolute;
width: 90px;
top: 50px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div>
<ul class="parent-menu">
<li class="first-menu">
<p>一级菜单</p>
<ul class="second-menu">
<li>一级菜单1</li>
<li>一级菜单2</li>
<li>一级菜单3</li>
</ul>
</li>
<li class="first-menu">
<p>二级菜单</p>
<ul class="second-menu">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li class="first-menu">
<p>三级菜单</p>
<ul class="second-menu">
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$('.first-menu p').mouseenter(function () {
$(this).siblings('ul').stop().slideDown();
});
$('.first-menu p').mouseleave(function () {
$(this).siblings('ul').stop().slideUp();
});
});
</script>
</body>
</html>
8.jquery的属性操作
jquery的属性操作分为四部分
1.html-标签属性操作，如attr()、removeAttr()
2.dom属性操作，如prop()、removeProp()，仅用于input单选框中，获取checked值为true或false。
3.类样式属性操作，如addClass()、removeClass()、toggleClass()
4.值操作，如html()、text()、val()
8.1标签的属性操作
jquery中标签的属性操作：
attr(key) 获取属性值
attr(key,value) 设置单个值
attr({key1:value1,key2:value2});设置多个值
js中的标签属性操作：
setAttribute(key,value)
getAttribute()
removeAttribute(name: DOMString)
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="box" title="title-box"></div>
<a class="box1"></a>
<p title="title-p"></p>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//1.获取标签属性
console.log("$('div').attr('title'):",$('div').attr('title'));
console.log("$('.box').attr('title'):",$('.box').attr('title'));
//2.设置标签属性
$('div').attr('id','div-id');
console.log("$('div').attr('id'):",$('div').attr('id'));
//3.设置多个标签属性
$('a').attr({
href:'http:www.vita.com',
title:'title-a'
});
//4.移除标签属性
$('p').removeAttr('title');
});
</script>
</body>
</html>
8.2DOM属性操作
1.DOM属性操作中,prop()，removeProp()只用于单选框中获取checked值，值为true或false
2.atr对input单选按钮checked获取的属性值默认是"checked"
3.但在实际使用中，我们希望使用true或false
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<input type="radio" name="sex" checked > 男
<input type="radio" name="sex"> 女
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//DOM属性操作中,prop()，removeProp()只用于单选框中获取checked值，值为true或false
//但在实际使用中，我们希望使用true或false
$(function () {
//atr对input单选按钮checked获取的属性值默认是"checked"
console.log("$('input[type=radio]').eq(0).attr('checked'):",$('input[type=radio]').eq(0).attr('checked'));
//dom对象获取的checked值是true或false
console.log("$('input[type=radio]').eq(0).prop('checked'):",$('input[type=radio]').eq(0).prop('checked'));
//设置属性
$('input[type=radio]').eq(0).prop('aaatitle','input-title');
//移除属性
$('input[type=radio]').eq(0).removeProp('aaatitle');
$('input[type=radio]').eq(0).prop('aaa','aaa-value');
//查看dom对象的属性，console.dir()方法查看
console.dir($('input[type=radio]').get(0));
});
</script>
</body>
</html>
8.3对类样式操作
1.通过控制类样式属性来进行隐藏
2.控制类名addClass() removeClass()来操作
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
button{
display: block;
}
.box{
width: 50px;
height: 50px;
background-color: yellowgreen;
}
.box1{
width: 40px;
height: 40px;
background-color: green;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div class="box"></div>
<button id="btn1">隐藏</button>
<div class="box1"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//1.通过控制类样式属性来进行隐藏
var isShow = true;
$('#btn').click(function () {
if(isShow){
$('.box').css('display','none');
isShow=false;
$(this).text('显示');
}else {
$('.box').css('display','block');
isShow=true;
$(this).text('隐藏');
}
});
//2.控制类名addClass() removeClass()来操作
var isShowClass = true;
$('#btn1').click(function () {
if(isShowClass){
$('.box1').addClass('hidden active');
isShowClass=false;
$(this).text('显示')
}else{
$('.box1').removeClass('hidden active');
isShowClass=true;
$(this).text('隐藏');
}
});
});
</script>
</body>
</html>
8.4对值操作
这里我们需要注意
1.input标签，jquery是通过val()来获取value属性值，不能通过text()获取到input标签外的值。因为标签外的值不再input标签内。
2.其他的标签通过text(),html()来获取标签中的文本内容。
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<input type="text" value="input-value">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//1.设置文本的内容text()
$('.box').text(' <h2>text()方法</h2> ');
//2.获取文本的内容，jquery方法：text()《---》js属性：innerText
console.log("jquery对象获取文本值-$('.box').text().trim() :",$('.box').text().trim());
console.log("js对象获取文本值-$('.box').get(0).innerText.trim():",$('.box').get(0).innerText.trim());
//3.设置文本的内容
$('.box1').html('<h2>html()方法</h2>');
//4.获取文本内容，jquery方法：html()《---》js属性：innerHTML
console.log("jquery对象获取文本值-$('.box1').html() :",$('.box1').html());
console.log("js对象获取文本值-$('.box1').get(0).innerHTML :",$('.box1').get(0).innerHTML);
//5.input标签获取value属性值，jquery方法val()《---》ja属性：value
console.log("jquery对象获取文本值-$('input').val() :",$('input').val());
console.log("js对象获取文本值-$('input').value :",$('input').get(0).value);
});
</script>
</body>
</html>
8.5操作input的值
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<form action="">
<!-- 单选-->
<input type="radio" name="sex" value="boy" >男
<input type="radio" name="sex" value="girl">女
<!--多选-->
<input type="checkbox" value="eat">吃饭
<input type="checkbox" value="sleep">睡觉
<input type="checkbox" value="play">玩
<!-- 单选下拉框-->
<select name="" id="select-id">
<option value="BeiJing">北京</option>
<option value="ShangHai">上海</option>
<option value="GuangZhou">广州</option>
</select>
<!-- 输入框-->
<input type="text" value="text-value">
</form>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//单选框
//1.页面加载时，默认设置单选框选中第一个
$('input[type=radio]').eq(0).attr('checked',true);
//或 $('input[type=radio]').eq(0).prop('checked',true);
//2.获取单选框中被选中的value值
console.log("加载页面时，获取单选框中默认被选中的value属性值--,$('input[type=radio]:checked').val() ：",$('input[type=radio]:checked').val());
console.log("加载页面时，获取单选框外的值(获取不到外面的值)--,$('input[type=radio]:checked').text() ：",$('input[type=radio]:checked').text());
//3.单选框change事件中获取被选中的value值
$('input[type=radio]').change(function () {
console.log("单选框change事件中获取value属性值--$(this).val() ：",$(this).val());
console.log("单选框change事件中获取value属性值--$('input[type=radio]:checked').val() ：",$('input[type=radio]:checked').val());
});
//复选框
//1.页面加载时，设置复选框的默认选项
$('input[type=checkbox]').eq(0).attr('checked',true);
$('input[type=checkbox]').eq(1).attr('checked',true);
//2.复选框获取第一个被选中的值
console.log("加载页面时，获取复选框中默认被选中的value属性值--$('input[type=checkbox]:checked').val() ：",$('input[type=checkbox]:checked').val());
//3.复选框change事件中获取被选中的value值
$('input[type=checkbox]').change(function () {
console.log("复选框change事件中获取value属性值--$(this).val() ：",$(this).val());
console.log("复选框change事件中获取第一个被选中的value属性值--$('input[type=checkbox]:checked').val() ：",$('input[type=checkbox]:checked').val());
});
//下拉列表
//1.加载页面时，设置默认选项
$('select option').eq(1).attr('selected',true);
//或 js属性设置方式$('select option').get(1).selected = true;
//2.获取被选中项的索引
console.log("加载页面时，下拉框获取被选中项的索引--$('select option:selected').index() ：",$('select option:selected').index());
console.log("加载页面时，下拉框获取被选中项的value属性值--$('select option:selected').val() ：",$('select option:selected').val());
console.log("加载页面时，下拉框获取被选中项的标签中文本内容--$('select option:selected').text() ：",$('select option:selected').text());
//3.下拉列表change事件中获取值
$('select').change(function () {
//这里不能使用$(this),这里的this是select标签，不是option标签
console.log("下拉框change事件中获取选中项索引--$('select option:selected').index() ：",$('select option:selected').index());
console.log("下拉框change事件中获取选中项索引--$('select').get(0).selectedIndex ：",$('select').get(0).selectedIndex);
console.log("下拉框change事件中获取选中项value属性值--$('select option:selected').val() ：",$('select option:selected').val());
console.log("下拉框change事件中获取选中项value属性值--$('select option:selected').text() ：",$('select option:selected').text());
});
//input输入框
//1.获取input输入框中内容
//实时获取input输入框中内容，要使用js对象的oninput()方法，即$('input[type=text]')[0].oninput()
console.log("加载页面时，input输入框获取value属性值--$('input[type=text]').val() ：",$('input[type=text]').val());
$('input[type=text]').change(function () {
console.log("input输入框change事件获取框中内容--$(this).val() ：",$(this).val());
});
});
</script>
</body>
</html>
9.jquery文档操作
9.1父元素.append(子元素)--父元素中添加新元素
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="box">vita</div>
<div class="box1">lili</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
var new_ele_p = document.createElement('p');
new_ele_p.innerText='new_ele_p';
new_ele_p.id='new_ele_p_id';
//1.插入普通文本
$('.box').append(' append text');
//2.插入标签+文本
$('.box').append('<h2>append h2</h2>');
//3.插入一个js DOM对象
$('.box').append(new_ele_p);
//4.插入jquery对象
$('.box').append($('.box1'));
//5.为新加的标签添加事件
$('#new_ele_p_id').click(function () {
console.log("为新加的标签添加事件--$(this).text()：",$(this).text());
});
});
</script>
</body>
</html>
9.2子元素.aapend(父元素)--子元素追加到父元素中
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="box">vita</div>
<div class="box1">lili</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//1.追加子元素到父元素中
$('<h2>new element</h2>').appendTo($('.box')).css('background-color','yellow');
});
</script>
</body>
</html>
9.3父元素.prepend(子元素)--父元素前插入一个元素
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="box">vita</div>
<div class="box1">lili</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
new_ele_p = document.createElement('p');
new_ele_p.innerText='prepend new_ele_p';
new_ele_p.id='new_ele_p_id';
//1.父元素前添加文本内容
$('.box').prepend(' prepend text ');
//2.父元素前添加标签内容
$('.box').prepend('<h2>prepend h2</h2>');
//3.父元素前添加js对象
$('.box').prepend(new_ele_p);
//4.父元素前添加jquery对象
$('.box').prepend($('.box1'));
});
</script>
</body>
</html>
9.4子元素.prependTo(父元素)--子元素插入到父元素前
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="box">vita</div>
<div class="box1">lili</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//prependTo()
$('<h2>new element</h2>').prependTo($('.box')).css('background-color','yellow');
});
</script>
</body>
</html>
9.5父.after(子)----子.insertAfter(父)
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="box">source vita</div>
<div class="box1">source lili</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//after()
$('.box').after(`<h2>after h2</h2>`);//tab上的反引号,即使内容中有空格，也没关系
$('.box').after('<h3>after h3</h3>');
//insertAfter()
$('<h3>insertAfter h3</h3>').insertAfter($('.box1'));
});
</script>
</body>
</html>
9.6父.before(子)----子.insertBefore(父)
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="box">source vita</div>
<div class="box1">source lili</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
var before_title = "before_title";
var insert_before_title = "insert_before_title";
//before()
$('.box').before(
`<li>
<a rel="nofollow" href="#">${before_title}</a>
</li>`
);
//insertBefore()
$('<a rel="nofollow" href="#">${insert_before_title}</a>').insertBefore($('.box1'));
});
</script>
</body>
</html>
9.7替换操作--replaceWith(),replaceAll()
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="box">source vita</div>
<div class="box1">source lili</div>
<p>pppp</p>
<p class="replace_all">pppp</p>
<span>$('span').replaceAll($('p'))</span>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//1.replaceWith()
$('div').replaceWith('<h2>replaceWith h2</h2>');
//2.replaceAll()
$('span').replaceAll($('p'));
});
</script>
</body>
</html>
9.8删除操作
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="remove">
<p style="font-size: 20px;font-weight: 600;">remove</p>
</div>
<button class="remove-button">remove</button>
<div class="detach">
<p style="font-size: 20px;font-weight: 600;">detach</p>
</div>
<button class="detach-button">detach</button>
<div class="empty">
<p style="font-size: 20px;font-weight: 600;">empty</p>
</div>
<button class="empty-button">empty</button>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//1.remove()删除节点后，事件也会删除
//所以执行完click后，再点击，不会输出remove了，因为事件被删除了
$('.remove-button').click(function () {
console.log('remove');
var remove_button = $(this).remove();
$('.remove').prepend(remove_button);
});
//2.detach()删除节点后，事件不会删除
//所以执行完click后，再点击，还会输出detach，因为事件没有被删除了
$('.detach-button').click(function () {
console.log('detach');
var detach_button = $(this).detach();
$('.detach').prepend(detach_button);
});
//3.empty()清空元素中所有的后代节点
$('.empty-button').click(function () {
console.log('empty');
$('.empty').empty();
});
});
</script>
</body>
</html>
10.jquery的位置信息
1.offset()
获取匹配元素在当前浏览器窗口的相对偏移，返回的对象包含两个属性：top和left
与父子的绝对定位没有任何关系
不管页面是否滚动，偏移量都不改变
2.scrollTop
获取匹配元素相对滚动条顶部的偏移
3.scrollLeft()
获取匹配元素相对滚动条左侧的偏移
4.innerHeight()
获取第一个匹配元素内部区域高度--上下边框之间的距离（包括padding,不包括border）
5.innerWidth()
/获取第一个匹配元素内部区域宽度--左右边框之间的距离（包括padding,不包括border）
6.outerHeight()
获取第一个匹配元素内部区域高度--上下边框之间的距离（包括padding,包括border）
7.outerWidth()
/获取第一个匹配元素内部区域宽度--左右边框之间的距离（包括padding,包括border）
8.width(),height()获取匹配元素的宽和高，(不包括padding和border)
9.设置宽和高
$('.box').width(100);
$('.box').height(100);
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
position: relative;
top: 10px;
}
.box{
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid red;
position: absolute;
top: 100px;
left: 200px;
}
</style>
</head>
<body style="height: 2000px">
<div class="father">
<div class="box"></div>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//1.offset()
// 获取匹配元素在当前浏览器窗口的相对偏移，返回的对象包含两个属性：top和left
// 与父子的绝对定位没有任何关系
// 不管页面是否滚动，偏移量都不改变
console.log("$('.box').offset().top：",$('.box').offset().top);
console.log("$('.box').offset().left：",$('.box').offset().left);
//2.scrollTop
//获取匹配元素相对滚动条顶部的距离
//越往下滚动，值越大
$(document).scroll(function () {
console.log("$(this).scrollTop()：",$(this).scrollTop());
var scrollTopHeight = $(this).scrollTop();
var boxOffsetHeight = $('.box').offset().top;
//向下滚动鼠标，隐藏内容
if(scrollTopHeight>boxOffsetHeight){
$('.box').stop.hide(1000);
}
});
//3.scrollLeft()
//获取匹配元素相对滚动条左侧的偏移
//4.innerHeight()
//获取第一个匹配元素内部区域高度--上下边框之间的距离（包括padding,不包括border）
console.log("$('.box').innerHeight()：",$('.box').innerHeight());
//5.innerWidth()
//获取第一个匹配元素内部区域宽度--左右边框之间的距离（包括padding,不包括border）
console.log("$('.box').innerWidth()：",$('.box').innerWidth());
//6.outerHeight()
//获取第一个匹配元素内部区域高度--上下边框之间的距离（包括padding,包括border）
console.log("$('.box').outerHeight()：",$('.box').outerHeight());
//7.outerWidth()
//获取第一个匹配元素内部区域宽度--左右边框之间的距离（包括padding,包括border）
console.log("$('.box').outerWidth()：",$('.box').outerWidth());
//8.width,height获取匹配元素的宽和高，(不包括padding和border)
console.log("$('.box').width()：",$('.box').width());
console.log("$('.box').height()：",$('.box').height());
});
</script>
</body>
</html>
