标签：jQuery 12 框架 标签 bootstrap 事件 btn class 属性
目录标签操作
样式操作
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%的宽度，并变为了块级元素 |
图片
链接：图片详细说明
| class值 | 作用 |
|---|---|
| img-rounded | 图片四个角变圆滑 |
| img-circle | 图片border-radius设为50% |
| img-thumbnail | 图片有个边框 |
组件
链接：组件
更多图标：http://www.fontawesome.com.cn/
JS效果
链接：JS效果
标签：jQuery,12,框架,标签,bootstrap,事件,btn,class,属性 来源： https://www.cnblogs.com/yume-zbh/p/16216417.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。