前端三剑客 —— 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>

<head>

<title>jQuery简单使用</title>

<style>

.box {

width: 400px;

height: 30px;

background: #243A64;

color: white;

}

</style>

</head>

<body>

$(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>

<head>

<title>jQuery选择器</title>

</head>

<body>

<div id="msg">这个是一个div</div>

<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 active">这个是一个列表</li>

<li class="item">这个是一个列表</li>

<div id="msg">这个是一个div</div>

<ul>

<li class="item">这个是一个列表</li>

</ul>

</div>

$(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>

<head>

<title>jQuery动画</title>

<style>

.box {

width: 150px;

height: 150px;

background: #8B0000;

}

</style>

</head>

<body>

$(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>

<head>

<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>

<button>点击动画开始</button>

$(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>

<head>

<title>常见API操作</title>

</head>

<body>

<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>

$(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>