本文主要是介绍前端三剑客 —— JavaScript （第九节），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
内容回顾：
1.事件解除
2. Ajax
jQuery选择器
回顾CSS选择器
CSS选择
1.基本选择器
2.包含选择器
3.伪类选择器
4.伪元素选择器
5.属性选择器
jQuery 库
jQuery 动画
系统动画
自定义动画
常见API操作
内容回顾：
1.事件解除
如果是使用DOM0的方式来进行事件绑定时，则解除绑定只需要让这个对象的事件 = null
如果是使用DOM2的方式来进行事件绑定时，则解除绑定需要做两舰事件：
1）将事件处理函数独立出来
2）使用removeEventListener（‘事件类型’，独立出来函数）
如果阻止冒泡，我们采用的是stopPragation（）这个方法来进行阻止冒泡
2. Ajax
它是来提高我们的用户体验，但是它不利于搜索引擎的优化。使用它需要做以下几步：
1.创建XMLHttpRequest（）对象，这个对象是Ajax的核心对象，所有的操作都是基于这个对象来产生的。如 let xhr = new XMLHttpRequest（）
2.打开链接，使用的是SMLHttpRequest对象的open（）方法，这个方法有三个参数：第一个参数是请求提交方式（GET | POST）;第二个参数是请求服务器的URL；第三个参数是请求的方式（true | false），默认是true 表示异步请求
3.发送请求，使用的是XMLHttpRequest 对象的send（）方法，如果是get 请求，则参数可以写在url上，如果是post请求则需要把参数写在此方法的参数位置
4.处理响应，使用的是XMLHttpRequest对象的onreadystatechange事件，它需要有一个回调函数，在这个回调函数数中我们先走判断readyState属性的值，以及判断status属性的值。
-- xhr.readyStatus 属性有以下几个值：
0：这是在打开链接之前，即创建好xhr对象
1：表示打开链接
2：表示发送请求之前
3：服务器接受到请求，在响应之前
4：服务器接收到请求，并响应给客户端
-- xhr.status 属性有以下一些值：
200：表示请求成功响应
301：表示响应重定向
404：表示资源没有找到
401：表示没有权限
500：表示服务端有错
……..
-- xhr.responseText 属性来获取到服务端响应回来的数据
jQuery库
初体验
要使用jQuery库，我们需要有以下几个步骤：
1.将jQuery库文件下载到本地（或者使用网络地址）
2.将下载好的jQuery库文件添加到页面中
3.创建jQuery对象
4.使用jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery简单使用</title>
<style>
.box {
width: 400px;
height: 30px;
background: #243A64;
color: white;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="js/jQuery-3.7.1.js"></script>
<script>
/*
$(function () {
// 1. 获取div对象，并设置内容
$('.box').html('hello jQuery')
})
*/
$(document).ready(function () {
//$('.box').html('hello jQuery')
console.log('jQuery1')
})
$(document).ready(function () {
console.log('jQuery2')
})
$(document).ready(function () {
console.log('jQuery3')
})
$(function () {
console.log('jQuery11')
})
$(function () {
console.log('jQuery22')
})
window.onload = function () {
console.log('页面加载完成1')
}
window.onload = function () {
console.log('页面加载完成2')
}
</script>
</body>
</html>
jQuery选择器
jQuery提供了强大的选择器，它的选择器完美的兼容了CSS选择器。换句话说，我们完全可以在jQuery中使用CSS选择器来进行选择。
回顾CSS选择器
CSS选择
1.基本选择器
1.1 id选择器，#
1.2 类选择器，.
1.3 标签选择器
1.4 通用选择器 *
2.包含选择器
2.1 子选择器 ，>
2.2 后代选择器， 空格
2.3 交集选择器，选择1.选择器
2.4并集选择器，选择1，选择2
2.5兄弟选择器，+
3.伪类选择器
3.1 ：hover
3.2：focus
3.3：before
3.4：after
4.伪元素选择器
5.属性选择器
这种选择器需要使用 [ ]
5.1全匹配 [属性 =‘值’ ]
5.2以什么开头 [属性名^=‘值’]
5.3以什么结尾 [属性名$=‘值’]
5.4包含某个值 [属性名*='值' ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器</title>
</head>
<body>
<div id="msg">这个是一个div</div>
<ul class="list">
<li class="first">
<ul>
<li>这个是孙子列表1</li>
<li>这个是孙子列表2</li>
<li>这个是孙子列表3</li>
<li>这个是孙子列表4</li>
<li>这个是孙子列表5</li>
</ul>
</li>
<li class="item">这个是一个列表</li>
<li class="item">这个是一个列表</li>
<li class="item active">这个是一个列表</li>
<li class="item">这个是一个列表</li>
<li class="item"></li>
<div id="msg">这个是一个div</div>
<ul>
<li class="item"></li>
<li class="item">这个是一个列表</li>
<li class="item">这个是一个列表</li>
</ul>
</ul>
<div class="show box">
</div>
<input type="tel" name="" id="" value="" />
<script src="js/jQuery-3.7.1.js"></script>
<script>
$(function () {
// 1. id选择器
//document.querySelector('#msg').style.color = 'blue'
$('#msg').css('color', 'red')
// 2. 类选择器
$('.first').css('background', 'yellow')
// 3. 标签选择器
$('li').css('color', 'green')
// 4. 属性选择器
$('li[class*="active"]').css('color', 'red')
// 5. 伪类选择器
$('input').focus(function (){
console.log(this)
this.style.border = '1px solid blue'
}).blur(function () {
this.style.border = '1px solid red'
})
})
</script>
</body>
</html>
jQuery 库
jQuery 官网地址：http://www.jquery.com
jQuery 动画
系统动画
在 jQuery 中提供了强大的动画 API 的支持，包括十种动画效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery动画</title>
<style>
.box {
width: 150px;
height: 150px;
background: #8B0000;
}
</style>
</head>
<body>
<div class="box"></div>
<button>点击隐藏</button>
<button>点击显示</button>
<button>点击透明</button>
<button>透明还原</button>
<button>滑动隐藏</button>
<button>滑动显示</button>
<button>点击淡出</button>
<button>点击淡入</button>
<script src="js/jQuery-3.7.1.js"></script>
<script>
$(function () {
// 1. 点击隐藏
$("button:first").click(function () {
$('.box').hide(1000)
})
// 2. 点击显示
$('button:nth-child(3)').click(function () {
$('.box').show(1000)
})
// 3. 点击透明
$('button:nth-child(4)').click(function (){
$('.box').fadeTo('slow', 0, function (){
console.log('完全透明了')
})
})
// 4. 透明还原
$('button:nth-child(5)').click(function (){
$('.box').fadeTo('slow', 1)
})
// 5. 滑动隐藏
$('button:nth-child(6)').click(function (){
$('.box').slideUp({
duration: 500,
easing: 'swing'
})
})
// 6. 滑动显赫
$('button:nth-child(7)').click(function (){
$('.box').slideDown({
duration: 500,
easing: 'swing'
})
})
// 7. 点击淡出
$('button:nth-child(8)').click(function (){
$('.box').fadeOut(1000)
})
// 8. 点击淡入
$('button:nth-child(9)').click(function (){
$('.box').fadeIn(1000)
})
})
</script>
</body>
</html>
自定义动画
如果系统动画不能满足外面的要求，那么外面就可以使用jQuery给我们提供的自定义动画，这种方式可以设置各种需要的动画效果。
要实现自定义动画，我们需要使用animate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery自定义动画</title>
<style>
.box {
width: 250px;
height: 150px;
/*border: 1px solid #243A64;*/
border-radius: 10px;
overflow: hidden;
position: relative;
}
.box img {
width: 250px;
height: 150px;
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<img src="images/1.jpg" class="first">
<img src="images/2.jpg" class="last">
</div>
<button>点击动画开始</button>
<script src="js/jQuery-3.7.1.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script>
$(function () {
$('button').click(function () {
$('.box').animate({
'width': '50px',
'height': 0,
'top': '100px',
'left': '100px'
}, {
duration: 1000,
easing: 'easeInOutQuint'
})
})
})
/*
easing常见的值如下：
linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInExpo
easeOutExpo
easeInOutExpo
easeInSine
easeOutSine
easeInOutSine
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
*/
</script>
</body>
</html>
常见API操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见API操作</title>
</head>
<body>
<div class="container">
<ul class="list">
<li>这个是列表1</li>
<li>这个是列表2</li>
<li>这个是列表3</li>
<li class="active">这个是列表4
<div>这个是一个子标签</div>
</li>
<li>这个是列表5</li>
<li>这个是列表6</li>
<li>这个是列表7</li>
<li>这个是列表8</li>
<li>这个是列表9</li>
<li>这个是列表10</li>
</ul>
</div>
<input type="text" name="usrname" id="usrname" value="123456" />
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(function (){
$('li:first').css('color', 'red')
// 获取 ul 中 li 的个数
console.log($('.list').children('li').length)
// 获取 ul 的第三个 li
console.log($('.list').children().get(2))
// 获取 带有 active 的li的内容
console.log($('.active').html())
// 修改 带有 active 的li的内容
$('.active').html('<h3>这是修改后的</h3>')
// 也可以用 text() 方法来获取
console.log($('.active').text());
// 获取文本框的值
console.log($('#usrname').val())
// 给文本框设置值
$('input').val(3456)
// 通过属性选择器获取
$('input[name="usrname"]').val(789)
// 遍历所有的li
//console.log($('li').length);
// 语法：each( function(index, Element) )
// 将 DOM 对象转换为 jQuery 对象：$(DOM对象)
// 将 jQuery 对象转换为 DOM 对象：let xx = $(对象)
$('li').each(function (index, element) {
console.log(index + '. ' + $(element).html())
})
})
</script>
</body>
</html>
这篇关于前端三剑客 —— JavaScript （第九节）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
