标签操作

样式操作

class属性操作

jQuery语法	相当于DOM	描述
addClass()	classList.add()	添加class属性值
removeClass()	classList.remove()	移除class属性值
hasClass()	classList.contains()	查询是否有class属性值
toggleClass()	classList.toggle()	如果已有属性值，那么删除；如果没有这个属性值，那么添加；

css操作

jQuery里操作css样式的语法更为简单

标签对象.css(属性,值)  // 等价于DOM中：标签对象.style.属性 = 值

如：设置第一个p标签颜色为红色

$('p:first').css('color', 'red')  
// 等价于DOM中：document.getElementsByTagName('p')[0].style.color = 'red'

位置操作

方法	描述
scrollTop()	获取匹配元素相对滚动条顶部的偏移
scrollLeft()	获取匹配元素相对滚动条左侧的偏移
position()	获取匹配元素相对父元素的偏移
offset()	获取匹配元素在当前窗口的相对偏移或设置元素位置

常用操作

$(window).scrollTop()  // 获取滚动条距离顶端的偏移量

实时监测距离顶部的距离：

$(window).scroll(function () {
    if($(window).scrollTop() > 600){
        alert('超过600了 架不住了')
    }
})

文本值操作

jQuery语法	描述	相当于DOM
text()	只获取文本	innerText
html()	获取文本和标签	innerHTML
val()	获取标签的value值	value

如果括号内不写值，那么就是获取；如果括号内写了值，那么就是设置。

属性操作

方法	描述
attr(属性名)	返回第一个匹配元素的属性值
attr(属性名, 属性值)	为所有匹配元素设置一个属性值
attr({属性1: 值1, 属性2:值2})	为所有匹配元素设置多个属性值
removeAttr(属性名)	从每一个匹配的元素中删除一个属性
prop(属性名)	动态返回第一个匹配元素的布尔值
prop(属性名,属性值)	动态为所有匹配元素设置一个属性值

attr在对一些动态属性时，不建议使用，比如单选框、复选框，网页选择更改时，attr获取的属性值并不会更改。

所以再对一些动态属性时，可以使用prop动态获取和设置。

文档处理

方法	描述
$(A).append(B)	把B追加到A内容的末尾
$(A).prepend(B)	把B放在A内容的最前面
$(A).after(B)	让B跟在A后
$(A).before(B)	把B放到A的前面
$(A).empty()	清空A的内容
$(A).clone()	克隆A，参数为true会同时克隆事件

事件操作

常见事件

事件	描述
click()	单击事件
dbclick()	双击事件
hover()	鼠标指针悬停事件和鼠标指针离开事件
focus()	聚焦事件
blur()	失焦事件

绑定方式

// 第一种
$().click(function(){
    
})
// 第二种
$().on('click',function(){
    
})

克隆案例

<button id="d1">克隆按钮</button>
<script>
    $('#d1').click(function () {
    // $('body').append($(this).clone())  // 不克隆事件
    $('body').append($(this).clone(true))  // 克隆事件
})
</script>

悬浮事件hover()

hover()有两次触发条件：鼠标悬浮和鼠标移开，如果要使这两个事件有不同操作，需要写两个函数。

$('p').hover(
    function () {  // 悬浮触发
        this.style.color = 'red'
    },
    function () {  // 移走触发
        this.style.color = 'black'
    }
)

监听input输入值事件

<input type="text" id="i1">
<script>
    $('#i1').on('input',function () {
        console.log($(this).val())
    })
</script>

阻止后续事件

如果给已经有事件的标签绑定事件，那么会依次执行；比如form表单中的重置按钮已经有了一个重置的事件。

如果想要取消后续事件的执行，可以使用两种方式阻止：

方式一：函数返回false

$('#d1').click(function () {
    alert(123)
    return false  //  取消当前标签对象后续事件的执行
})

方式二：使用特殊方法

$('#d1').click(function (e) {
    alert(123)
    e.preventDefault()
})

事件冒泡概念

在多个标签嵌套的并且都有相同事件的情况下，会出现逐级汇报的现象，称为事件冒泡。

事件委托

针对动态创建的标签，提前写好的事件默认是无法生效的。比如我先给所有p标签设置了单击事件，打开网页后添加的p标签都是没有单击事件的。

这时候就需要用到事件委托：把一个标签里的一个事件都委托给子标签。

// 将body内所有的点击事件交给p标签处理
$('body').on('click', 'p', function (){
    $(this).css('color','red')
})

动画效果

动画(speed单位毫秒)	描述
hide(speed)	以左上角为终点消失
show(speed)	以左上角为起点出现
slideUp(speed)	以顶部为终点收起
slideDown(speed)	以顶部为起点展开
fadeIn(speed)	淡入
fadeOut(speed)	淡出
animate()	自定义动画

自定义动画实现点赞效果：

点赞动画示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <Meta charset="UTF-8">
  <Meta http-equiv="x-ua-compatible" content="IE=edge">
  <Meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点赞动画示例</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>

bootstrap框架

bootstrap框架内部提供了很多好看的标签样式和功能，我们只需要在编写时给标签加上class属性值就可以使用样式了。

在使用bootstrap框架之前，需要导入css、js，如果要使用动态效果还需要jQuery。

详情：全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

布局容器

class值	作用
container	固定宽度并在页面居中，两边留有空白
container-fluid	宽度占满页面

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

class值	作用
row	默认开设一行均分12份
col-md-1	占一行的1/12
col-md-2	占一行的2/12
...	...
col-md-12	占一行的12/12
偏移量
col-md-offset-1	向右偏移1/12
col-md-offset-2	向右偏移2/12
...	..
col-md-offset-12	向右偏移12/12
其他设备
col-xs-	超小屏幕手机 (<768px)
col-sm-	小屏幕平板 (≥768px)
col-md-	中等屏幕桌面显示器 (≥992px)
col-lg-	大屏幕大桌面显示器 (≥1200px)

表格样式

链接：表格样式官网说明

class值	作用
table	美化表格
table-hover	每一行对鼠标悬停状态作出响应
table-striped	每一行增加斑马条纹样式
table-bordered	为表格和其中的每个单元格增加边框
table-condensed	表格更加紧凑
状态类	通过这些状态类可以为行或单元格设置颜色
active	鼠标悬停在行或单元格上时所设置的颜色
success	标识成功或积极的动作（浅绿）
info	标识普通的提示信息或动作（浅蓝）
warning	标识警告或需要用户注意（淡黄）
danger	标识危险或潜在的带来负面影响的动作（淡红）

表单样式

链接：表单样式官网说明

class值	作用
form-control	设置宽度为100%并美化

按钮

链接：按钮详细说明

class值	作用
btn	按钮样式
颜色
btn-default	默认样式
btn-primary	蓝色（首选项）
btn-success	绿色（成功）
btn-info	浅蓝（一般信息）
btn-warning	黄色（警告）
btn-danger	红色（危险）
尺寸
btn-lg	大按钮
btn-sm	小按钮
btn-xs	超小尺寸
btn-block	拉伸至父元素100%的宽度，并变为了块级元素