一、css修改样式
- 修改单个样式
ele.css(‘属性名’，‘属性值’)
$('.box').css('width','200px') == $('.box').css('width',200)
修改数字类型的属性值时，可以不加引号，直接写数字，不加单位
- 修改多个样式
ele.css({
属性名1：‘属性值1’,
属性名2：‘属性值2’
})
$('.box').css({
width: 300,
height: 300,
backgroundColor: '#ccc'
})
- 通过修改类名来修改样式
// 1. 添加类名： addClass()
$('button').eq(0).click(function() {
$('.box').addClass('red')
})
// 2. 移除类名: removeClass()
$('button').eq(1).click(function() {
$('.box').removeClass('red')
})
// 3. 切换类名: toggleClass(), 从有到无，或从无到有
$('button').eq(2).click(function() {
$('.box').toggleClass('red')
})
tab栏切换案例
现在有简便的方法去实现 tab 栏切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
margin: 40px auto;
}
.tabs-detail {
padding: 40px;
}
.tabs-detail div {
margin-bottom: 20px;
display: none;
}
.tabs {
overflow: hidden;
background-color: #f7f7f7;
border: 1px solid #eee;
border-bottom: 1px solid #e4393c;
}
.tabs li {
float: left;
list-style: none;
width: 20%;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: #999;
cursor: pointer;
}
.tabs li:hover {
color: #e4393c
}
.tabs li.current {
background: #e4393c;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<ul class="tabs">
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(1.3万+)</li>
</ul>
<div class="tabs-detail">
<div class="intro" style="display: block;">品牌： 海康威视（HIKVISION）</div>
<div class="order">包装清单 行车记录仪主机、电源线、静电贴、充电插头、保修卡、说明书</div>
<div class="guarantee">本产品全国联保，享受三包服务，质保期为：1年质保</div>
<div class="eval">618活动购买送了内存卡，价格实惠，昨天安装车上试用了下，清晰度很好，1600p</div>
</div>
</div>
<script src="./jquery.js"></script>
<script>
$(function() {
// 获取所有的 li，注册点击事件
$('li').click(function() {
// 给当前点击的 li 添加类名修改样式，并将其他兄弟元素 li 移除样式
$(this).addClass('current').siblings().removeClass('current')
// 添加序号
let index = $(this).index()
// 通过对应的序号来显示对应的 content 内容
$('.tabs-detail>div').eq(index).show().siblings().hide()
})
})
</script>
</body>
</html>
三、显示和隐藏
1. 显示和隐藏：show([speed], [easing], [fn]) \ hide() \ toggle()
[speed] 表示动画执行速度 fast || slow || normal || 毫秒数 400
[easing]: 动画效果 swing(缓动效果)[默认] || linear(匀速效果)
[fn]: 回调函数，动画结束后执行
// 1. 显示某个元素 show([speed], [easing], [fn])
$('button').eq(0).click(function() {
$('.box').stop().show('slow', function() {
$('.box').css('background', 'red')
})
})
// 2. 隐藏某个元素 hide()
$('button').eq(1).click(function() {
$('.box').stop().hide('slow', function() {
$('.box').css('background', 'red')
})
})
// 3. 切换显示某个元素 toggle()（从无到有，从有到无）
$('button').eq(2).click(function() {
$('.box').stop().toggle('slow', function() {
$('.box').css('background', 'red')
})
})
2. 下拉显示和上拉隐藏：slideDown([speed], [easing], [fn]) \ slideUp() \ slideToggle()
// 1. 下拉显示某个元素 slideDown
$('button').eq(0).click(function() {
$('.box').stop().slideDown()
})
// 2. 上拉隐藏某个元素 slideUp
$('button').eq(1).click(function() {
$('.box').stop().slideUp()
})
// 3. 切换上拉显示和下拉隐藏元素 slideToggle
$('button').eq(2).click(function() {
$('.box').stop().slideToggle()
})
3. 淡入和淡出效果：fadeIn([speed], [easing], [fn]) \ fadeOut() \ fadeToggle() \ fadeTo(speed, opacity, [easing], [fn])
fadeTo() 表示过度到指定的透明度
speed 为完成动画需要的时间
opacity 为动画结束后元素的透明度（0-1）
4. 停止动画排队：stop()
多个动画同时调用会产生一个排队的效果； 使用 stop() 方法可以解决动画排队的问题
就是在做动画之前都加上一个 . stop（），保证一次只有一个动画在进行
5. 自定义动画：animate(params, [speed], [easing], [fn])
params 指定要进行动画效果的样式属性，使用对象的格式，属性名必须遵循驼峰式命名
只能用于属性值是数字的属性，例如宽高、top、left 等
$('button').click(function() {
$('.box').stop().animate({
width: 400,
height: 400,
left: 200,
top: 200,
})
})
四、jQuery属性操作
<input type="text" value="123">
<input type="checkbox">
<a href="http://www.baidu.com" class="current">百度链接</a>
<div index="3" data-age="18">Hello</div>
- 获取、修改元素的属性
语法：ele.prop(‘属性名’， ‘属性值’)
如果只写属性名就是获取，写了属性值就是修改
// 修改了输入框的 value 值为 456
$('input').eq(0).prop('value', '456')
// 修改了复选框的默认状态为选中
$('input').eq(1).prop('checked', true)
// 修改了 a 链接的地址
$('a').prop('href', 'http://www.tencent.com')
- 获取、修改元素的自定义属性
ele.attr(‘属性名’,‘属性值’)
//给 div 设置了一个自定义属性，属性值为 123
$('div').attr('index', 123)
有一种方法可以达到类似的效果，就是 ele.属性名 = 属性值
这样相当于在当前元素对象中添加了一个属性，并且赋值
$('div').index = 123
- 获取或设置元素在内存中的数据 (数据在标签上不可见)
$('div').data('uname', 'John')
console.log($('div').data('uname'));
五、获取、修改元素的内容
// 1. 获取或修改元素中的带有 html 标签的内容 ele.html('text')
console.log($('div').html())
$('div').html('<p>hello world</p>')
// 2. 获取或修改元素中的纯文本内容 ele.text('text')
console.log($('div').text())
$('div').text('<p>hello world</p>')
// 3. 获取或修改表单元素的值 val()
console.log($('input').val());
$('input').val('456');
六、jQuery遍历元素
1. ele.each(callback(i, item))
回调函数里面第一个参数是元素的索引，第二个元素才是当前的原生DOM元素（使用的时候要转化成jQuery元素）
<div>hello1</div>
<div>hello2</div>
<div>hello3</div>
<div>hello1</div>
<div>hello2</div>
<div>hello3</div>
<div>hello1</div>
<div>hello2</div>
<div>hello3</div>
<script>
$('div').each(function(i, item){
console.log(i, $(item))
})
</script>
2. 顶级对象遍历（可以遍历数组、伪数组、对象、元素集合，非常强大）
格式：$.each(要遍历的对象，回调函数)
// 1. $.each() 方法可以用于遍历任何对象，不仅仅是元素集合，数组、对象、伪数组都可以
const arr = [3, 5, 85, 12, 5, 478]
const obj = {
name: 'John',
age: 18,
gender: 'man'
}
// 2. 使用方法，接受 2 个参数：要遍历的对象 和 回调函数
$.each(arr, function(i, item) {
console.log(i, '===', item);
})
$.each(obj, function(key, value) {
console.log(key, '---', value);
})
$.each($('li'), function(i, item) {
console.log(i, $(item)); //此处打印的还是原生 DOM 对象
})
// 3. 使用 $.each() 方法求出所有 li 中的数值和
let sum = 0
$.each($('li'), function(i, item) {
let num = parseInt($(this).text()) //转换成数字型
// console.log(num);
sum += num
})
console.log(sum);
七、创建、添加、删除元素
- 创建元素
let span = $(’<span>hello world</span>’)
- 添加创建好的元素到页面的任意位置
// 2.1 追加到所有子元素的末尾
$('.box').append(span)
// 2.2 添加到所有子元素的开头
$('.box').prepend(span)
// 2.3 添加到某个元素的前面
$('.foo').before(span)
// 2.4 添加到某个元素的后面
$('.foo').after(span)
- 删除元素
3.1 删除当前元素（包括自己） remove()
3.2 删除当前元素内部的所有内容（不包括自己） empty()
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
