繁依Fanyi0

这个屌丝很懒，什么也没留下！

热门标签

前端三剑客 —— JavaScript （第十节）

作者：繁依Fanyi0 | 2024-04-17 04:44:00

踩

内容回顾：

jQuery 动画

jQuery 官网地址：http://www.jquery.com

系统动画

自定义动画

要实现自定义动画，我们需要使用animate

常见API操作

jQuery 动画

jQuery 操作DOM

<!DOCTYPE html>

<head>

<title>jQuery操作DOM</title>

</head>

<body>

<li>这个是列表1</li>

<li>这个是列表2</li>

<li>这个是列表3</li>

<li class="active">这个是列表4</li>

<li class="show">这个是列表5</li>

<li>这个是列表6</li>

<li>这个是列表7</li>

<li>这个是列表8</li>

<li>这个是列表9</li>

<li>这个是列表10</li>

</ul>

$(function () {

// 一：添加子节点

// 1. 给 ul 最后添加一个 li

$('.list').append('<li>这个是列表11</li>')

// 2. 给 ul 开头添加一个 li

$('.list').prepend('<li>这个是列表0</li>')

// 还要可以使用 appendTo 或者 prependTo

// 3. 使用 appendTo 将匹配的元素插入到目标元素的最后面

// appendTo 的使用方式：$('要添加的内容').appendTo('父组元素')

$('<li>这个是列表12</li>').appendTo('.list')

// 4. 使用 prependTo 将所有元素插入到目标前面

// prependTo 使用语法：$('要添加的内容').prependTo('父组元素')

$('<li>这个是列表-1</li>').prependTo('.list')

// ----------添加兄弟节点-----------------

// 5. 在 .active 的前面添加一个 li

// before( content [, content ] ) :根据参数设定，在匹配元素的前面插入内容

$('.active').before('<li>添加的兄弟节点前</li>')

$('.active').css('color', 'red')

$('.show').css('color', 'blue')

// 6. 在 .active 的后面添加一个 li

// after( content [, content ] ) :在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。

$('.active').after('<li>添加的兄弟节点后</li>')

// 7. 还可以使用 insertBefore( target ) :在目标元素前面插入集合中每个匹配的元素

$('.active').insertBefore('.show')

//-------------父节点操作----------------

// 8. 给 ul 添加父给节点 div

$('ul').wrap('<div class="container"></div>')

// 9. 删除 ul 的父级元素 div

$('ul').unwrap('div')

// 删除 active 节点

$('.active').remove()

// 复制 .show 对应的li到 msg

$('.msg').append($('.show').clone())

})

</script>

</body>

</html>

jQuery 事件处理

<!DOCTYPE html>

<head>

<title>jQuery事件处理</title>

</head>

<body>

$(function () {

// 1. 点击事件

/*$('#btn').click(function () {

console.log($(this).html())

})*/

// 2. 监听事件，使用 on

/*$('#btn').on('click', function () {

console.log($(this).html())

})*/

$('#btn').on('click', 'body', function () {

console.log('body 触发了 click 事件')

})

$('body').click(function () {

console.log('body')

})

$('input[type]').blur(function () {

console.log('你离开了文本框')

})

$('input[type]').focus(function () {

console.log('你点击了文本框')

})

</script>

</body>

</html>

Ajax

<!DOCTYPE html>

<head>

<title>jQuery对ajax操作</title>

</head>

<body>

$(function () {

$('#btn').on('click', function () {

// https://autumnfish.cn/api/joke/list?num=5

$.ajax({

url: 'https://autumnfish.cn/api/joke/list',

method: 'get',

data: {num: 5},

timeout: 5000, // 超时时间

dateType: 'json', // 服务端返回 json 格式数据

success: function (data) {

console.log(data)

error: function (er) {

console.log(er)

beforeSend: function () {

console.log('数据加载中')

}

})

</script>

</body>

</html>

jQuery 特效案例

全选效果

<!DOCTYPE html>

<head>

<title>jQuery特效-全选效果</title>

<style>

ul {

list-style: none;

}

</style>

</head>

<body>

<ul>

</ul>

$(function () {

$('#all').click(function () {

if ($(this).prop('checked')) {

$('#choice').text('取消') // 修改文件

$('li>input').prop('checked', true)

} else {

$('#choice').text('全选')

$('li>input').prop('checked', false)

}

})

</script>

</body>

</html>

tab切换

<!DOCTYPE html>

<head>

<title>tab切换</title>

<style>

* {

margin: 0;

padding: 0;

}

li {

list-style: none;

}

.tab {

margin: 30px auto 0;

width: 500px;

height: 300px;

border-radius: 10px;

border: 1px solid gainsboro;

}

.tab>.tab-title {

width: 500px;

height: 40px;

}

.tab>ul.tab-title>li {

width: 165px;

height: 40px;

float: left;

line-height: 40px;

text-align: center;

border-left: 1px solid gainsboro;

border-bottom: 1px solid gainsboro;

cursor: pointer;

}

.tab>ul.tab-title>li:last-child {

width: 167px;

}

.tab>.tab-content {

width: 480px;

height: 240px;

display: none;

font-size: 18px;

padding: 10px;

}

.active {

background: salmon;

border-top-right-radius: 10px;

border-top-left-radius: 10px;

}

</style>

</head>

<body>

</ul>

<li>这个是内容1</li>

</ul>

<li>这个是内容2</li>

</ul>

<li>这个是内容3</li>

</ul>

</div>

$(function () {

// 1. 获取所有的标题

$('.tab-title>li').on('click', function () {

//console.log($(this).index());

// 2. 获取所点击的tab的下标，通过 index() 方法获取

let index = $(this).index()

// 3. 当点击的title与index相等时，则添加 active 样式，而其他的兄弟节点删除这个样式

$('.tab-title>li') // 获取到所有的选项卡

.eq(index) // 判断点击的选项卡是否与当前的下标一致

.addClass('active') // 如果一致则添加 active 样式

.siblings() // 获取当前点击的选项卡的所有兄弟节点

.removeClass('active') // 删除兄弟节点的 active 样式

$('.tab-content') // 获取所有的内容区

.eq(index) // 判断内容的下标是否与点击选项卡的下标一致

.show(100) // 显示当前下标对应的内容

.siblings('.tab-content') // 获取所有带tab-content样式的兄弟节点

.hide(100) // 把这些兄弟节点隐藏起来

})

</script>

</body>

</html>

下拉菜单

<!DOCTYPE html>

<head>

<title>jQuery特效-下拉菜单</title>

<style>

* {

padding: 0;

margin: 0;

}

ul {

list-style: none;

}

.wrap {

width: 330px;

height: 30px;

margin: 100px auto 0;

background: #243A64;

padding-left: 10px;

position: relative;

}

.wrap li {

float: left;

width: 100px;

height: 30px;

margin-right: 10px;

position: relative;

}

.wrap a {

color: white;

text-decoration: none;

display: block;

width: 100px;

height: 30px;

text-align: center;

line-height: 30px;

background: #317FE5;

}

.wrap li ul {

position: absolute;

display: none;

}

</style>

</head>

<body>

<ul>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

</div>

$(function () {

$('.wrap>ul>li').hover(function () {

$(this).children('ul').stop(true).slideToggle(200)

})

</script>

</body>

</html>

自定义动画

<!DOCTYPE html>

<head>

<title>jQuery特效-自定义动画</title>

<style>

#show {

height: 200px;

width: 300px;

border: 1px solid red;

background: slateblue;

}

.show {

height: 200px;

width: 300px;

border: 1px solid red;

background: saddlebrown;

position: absolute;

left: 0px;

top: 0px;

}

.showImg, .showImg > img {

width: 200px;

height: 350px;

border: 4px solid floralwhite;

border-radius: 20px;

position: relative;

}

.showImg > img {

position: absolute;

left: 0;

top: 0;

}

.showImg > img:last-child {

opacity: 0;

left: 100px;

width: 0;

}

</style>

</head>

<body>

</div>

$(function () {

$('.showImg').mouseenter(function () {

$('.showImg>img:first').animate({

"position": 'absolute',

'left': '50%',

'width': 0,

'opacity': 0

}, 2000, function () {

$('.showImg>img:first').hide()

$('.showImg>img:last').animate({

'left': 0,

'width': '100%',

'opacity': 1

}, 2000)

})

</script>

</body>

</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/438277