标签：jQuery function 标签 Bootstrap 事件 操作 btn class
目录一.jQuery操作标签
1.class操作
# class操作
jQuery操作
addClass() # 添加指定css类名
removeClass() # 移除指定css类名
hasClass() # 判断样式是否存在
toggleClass() # 切换css类名，存在移除，不存在新增
2.样式操作
$divEle.css('border','5px solid black')
'给div块级标签 添加5px厚度的 边框 为红色'
3.位置操作
offset() # 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() # 获取匹配元素相对父元素的偏移
scrollTop() # 获取匹配元素相对滚动条顶部的偏移
scrollLeft() # 获取匹配元素相对滚动条左侧的偏移
可以通过获取滚动条进行额外的操作
二.文本值操作
text()
html() # 括号内写值设置所有匹配元素的内容 不写值就是获取所有匹配元素的内容
val()
'files需要转化为js对象'
三.属性操作
$('div').attr('style') # 获取第一个标签的style属性值
$('div').attr('class','c1') # 批量设置单个
$('div').attr({'name':'jason','pwd':123}) # 批量设置多个
$('div').removeAttr('class') # 批量移除
'获取标签属性的时候 针对动态属性 不适用attr()'
'针对动态属性的默认标签checked'
'通过attr获取checked什么都没有'
'而通过prop可以获取checked对应的布尔值 有就true 没有false'
对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
四.文档处理
# 内部添加
$(A).append(B) # 把B追加到A
$(A).prepend(B) # 把B前置到A
# 外部添加
$(A).after(B) # 把B放到A的后面
$(A).before(B) # 把B放到A的前面
# 清空内容
$('body').empty()
五.事件操作
1.1克隆事件
click(function(){...}) 关键字.clone
克隆事件代码
<button id="d1">晚安</button>
<script>
$('#d1').click(function () {
// $('body').append($(this).clone()) // 不克隆事件
$('body').append($(this).clone(true)) // 克隆事件
})
</script>
1.2悬浮事件
hover(function(){...})
悬浮事件代码
$('#d1').hover(function () {alert(123)})
$('#d1').hover(
function () {alert(123)}, # 悬浮触发
function () {alert(123)} # 移走触发
)
1.3值监听事件
$('#d1').on('click',function(){})
值监听代码
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log($(this).val())
})
</script>
1.4阻止后续事件
方式1. return faklse # 消当前标签对象后续事件的执行
方式2. 关键字.preventDefault()
组织后续事件
1.方式1(推荐使用)
$('#d1').click(function () {
alert(123)
return false // 取消当前标签对象后续事件的执行
})
2.方式2(自带关键字)
$('#d1').click(function (e) {
alert(123)
e.preventDefault()
})
1.5冒泡事件
# 多个标签嵌套相同的事件，会重复执行事件
方式1. return false # 阻止事件传播
方式2. 关键字.stopPropagation()
1.6委托事件
'针对动态创建的标签 提前写好的事件默认是无法生效的'
关键字 on
$('body').on('事件类型','选择器',function(){})
'将body内所有的点击事件交给选择器标签处理'
六.动画效果
hide # 隐藏
show # 显示
# 滑动显示
slideUp
slideDown
# 淡入淡出
fadeIn
fadeOut
animate
七.bootstrap框架
# 1.bootstrap版本
推荐使用v3版本
# 2.基本使用
本地导入
cdn导入 'bootcdn'
bootstrap需要使用jQuery来实现动态效果
'必须先导入后使用'
# 3.文件组成
bootstrap需要导入两个文件
一个是css文件
一个是js文件
八.bootstrap框架基本使用
# 布局容器
class = 'container' # 两边有留白
class = 'container-fluid' # 没有留白
# 栅格系统
class = 'row' 默认开设一行均分12份
class = 'col-md-n' 指定需要几份(电脑屏幕) # 栅格参数可以做到响应式布局xs sm md lg...
如果一行十二份用不完 可以调整位置 # col-md-offset-3
# 表格样式
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不能加!!!
# 按钮样式
class = 'btn'btn-info
# 按钮颜色
class="btn btn-info"
class="btn btn-danger"
class="btn btn-warning"
class="btn btn-primary"
class="btn btn-success"
# 按钮尺寸
class="btn btn-success btn-sm"
class="btn btn-success btn-lg"
class="btn btn-success btn-block"
# 图标
http://www.fontawesome.com.cn/ 更多图标
标签：jQuery,function,标签,Bootstrap,事件,操作,btn,class 来源： https://www.cnblogs.com/xwkg/p/16217383.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。