前端——jQuery操作标签、jQuery事件操作、jQuery动画效果、bootstrap基础使用

---

一、jQuery操作标签

1. class操作

var $pEle = $("p")  # 创建jQuery对象时，取名为：$名字Ele
$pEle.addClass()	# 添加指定的CSS类名						
$pEle.removeClass()	# 移除指定的CSS类名 						
$pEle.hasClass()	# 查看是否存在css属性							
$pEle.toggleClass()	# 切换CSS类名，如果有就移除，如果没有就添加	

2.样式操作

$divEle.css(‘border’,‘5px solid black’)

3.位置操作

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

eg：
$(window).scrollTop() 获取左侧滚动条距离顶端的位移量

4.文本值操作

方法	作用
text()	不填参数为获取文本，填写为设置文本
html()	不填参数为获取html文档，填写为设置html文档
val()	不填参数为获取用户输入的内容，填写为设置用户输入的内容

5.属性操作

可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。

$(‘div’).attr(‘style’) # 获取第一个标签的style属性值
$(‘div’).attr(‘class’,‘c1’) # 批量设置单个
$(‘div’).attr({‘name’:‘jason’,‘pwd’:123}) # 批量设置多个
$(‘div’).removeAttr(‘class’) # 批量移除
获取标签属性的时候 针对动态属性 尤其是复选框 不建议使用attr
此时需要使用prop

6.文档处理

内部添加

$(A).append(B)// 把B追加到A
$(A).prepend(B)// 把B前置到A

外部添加

$(A).after(B)// 把B放到A的后面
$(A).before(B)// 把B放到A的前面

清空内容

$(‘body’).empty()

---

二、jQuery事件操作

有时候第一种绑定事件的方式无法生效 那么就使用第二种
语法1：

标签对象.事件类型(
function (参数列表){
函数体
}
)

语法2：

标签对象.on(事件类型,
function (参数列表){
函数体
}
)

1.事件操作

语法

jQuery对象.事件类型(function(参数列表){
函数内容
})

示例：
jQuery对象.change(function(){})

克隆操作
语法：

标签对象.clone() 此时克隆的标签是没有原标签事件的
标签对象.clone(true) 此时克隆的标签是有具备原标签事件的

2.悬浮事件

悬浮事件在只设置一个事件时会触发俩次，鼠标刚悬浮以及鼠标离开时都会触发。

标签对象.hover(
	function () {
			alert("悬浮触发")
	},  # 悬浮触发
	function () {
		alert("移走触发")
	}  # 移走触发
)

3.监听事件

持续对input标签进行监听只要用户输入就会触发事件

$(‘#d1’).on(‘input’,function () {
console.log($(this).val())
})

4.阻止后续事件

如果该标签对象已有事件，但并不希望我们设定以外的事件触发时可以使用俩种办法结束我们编写的事件以外的事件触发。
方法1:

$(“#d”).click(function (){
事件代码
return false 关键点，只要返回false就能停止其向上层标签发送提示
})

方法2：

$(“#d”).click(function (e){
事件代码
e. preventDefault() 关键点，只要设置参数（参数名随意设置）调用preventDefault就能停止其向上层标签发送提示
})

5.事件冒泡

当嵌套的标签都拥有同一个事件时，内部的标签触发事件后外层标签也会触发，逐步向外直到嵌套结束。此时我们可以使用来种方法来结束事件的冒泡。

<div οnclick=“f1”>
<div οnclick=“f1”>
<div οnclick=“f1”>
</div>
</div>

方法1:

function f1(){
事件代码
return false 关键点，只要返回false就能停止其向上层标签发送提示
}

方法2：

function f1(e){
事件代码
e. stopPropagation() 关键点，只要设置参数（参数名随意设置）调用stopPropagation就能停止其向上层标签发送提示
}

6.事件委托

针对动态创建的标签 提前写好的事件默认是无法生效的，此时需要使用事件委托，来为动态创建的标签设置事件。

$(‘body’).on(‘事件类型’,‘选择器’,function(){})

---

三、js动态效果

s: 规定显示效果的速度(时间)
e: 规定在动画的不同点上元素的速度,默认值为 “swing”
fn: 动态效果方法执行完之后，要执行的函数
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

---

四、bootstrap基础使用

1. bootstrap框架介绍

内部提供了很多漂亮的标签样式和功能 我们只需要CV使用即可

2. bootstrap版本

推荐使用v3版本

3. bootstrap基本使用

必须先用script标签导入后使用

1. 本地导入
2. cdn导入

bootstrap需要使用jQuery来实现动态效果，注意导入顺序

4. bootstrap文件组成

bootstrap需要导入两个文件
一个是css文件
一个是js文件

5. 布局容器

class = ‘container’ 两边有留白
class = ‘container-fluid’ 没有留白

6. 栅格系统

class = ‘row’ 默认开设一行均分12份
class = ‘col-md-n’ 指定需要n份(切割浏览器界面)

7.表格样式

表格样式
class=“table table-hover table-striped table-bordered”

单元格颜色
class=“active”
class=“success”
class=“warning”
class=“danger”
class=“info”

表单样式
.pull-left 左浮
.pull-right 右浮
class=‘form-control’
针对radio和checkbox不能加!!!

8. 按钮

按钮样式
class = ‘btn’
按钮颜色
<a href=“” class=“btn btn-info”>言多必失
<a href=“” class=“btn btn-danger”>言多必失
<a href=“” class=“btn btn-warning”>言多必失
<a href=“” class=“btn btn-primary”>言多必失
<a href=“” class=“btn btn-success”>言多必失
按钮尺寸
<a href=“” class=“btn btn-success btn-sm”>言多必失
<a href=“” class=“btn btn-success btn-lg”>言多必失
<a href=“” class=“btn btn-success btn-block”>言多必失

9. 图标样式

<span class=“glyphicon glyphicon-user”>

更多图标

10.bootstrap基础使用总结

上文列出的只是很少一部分，bootstrap框架将前端样式的设计简化了，主需要引入css和js就能轻松完成样式设计，最具体的使用需要去bootstrap官方网站查看