jQuery操作标签class操作addClass(); // 添加指定的CSS类名。removeClass(); // 移除指定的CSS类名。hasClass(); // 判断样式存不存在toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。 CSS$("p").css("color", "red"); // 将所有p标签的字体设置为红色位置操作$(window).scrollTop() // 获取右侧滚动条距离顶端的位移量 文本值操作HTML代码： html()// 取得第一个匹配元素的html内容html(val)// 设置所有匹配元素的html内容 文本值： text()// 取得所有匹配元素的内容text(val)// 设置所有匹配元素的内容 值： val()// 取得第一个匹配元素的当前值val(val)// 设置所有匹配元素的值 属性操作$('div').attr('style') // 获取第一个标签的style属性值$('div').attr('class','c1') // 批量设置单个 class设置为c1$('div').attr({'name':'jason','pwd':123}) // 批量设置多个$('div').removeAttr('class') // 批量移除用于 prop() // 获取属性removeProp() // 移除属性 文档处理添加到指定元素 $(A).append(B)// 把B追加到A$(A).appendTo(B)// 把A追加到B 添加到指定元素 $(A).prepend(B)// 把B前置到A$(A).prependTo(B)// 把A前置到B 添加到指定元素外部的后面 $(A).after(B)// 把B放到A的后面$(A).insertAfter(B)// 把A放到B的后面 添加到指定元素外部的前面 $(A).before(B)// 把B放到A的前面$(A).insertBefore(B)// 把A放到B的前面 移除和清空元素 remove()// 从DOM中删除所有匹配的元素。empty()// 删除匹配的元素集合中所有的子节点。 事件操作事件绑定
移除事件
克隆操作<button id="d1">是兄弟就来砍我!!!</button> <script>
$('#d1').click(function () {
$('body').append($(this).clone()) // 不克隆事件
$('body').append($(this).clone(true)) // 克隆事件
}) </script>悬浮事件$('#d1').hover(function () {alert(123)})
鼠标悬浮上去和移开各自触发一次
如果想要将悬浮和移开分开执行不同的操作 需要写两个函数
$('#d1').hover( function () {alert(123)}, # 悬浮触发 function () {alert(123)} # 移走触发
)值监听事件<input type="text" id="d1"><script>
$('#d1').on('input',function () { console.log($(this).val())
})</script>// 动态返回输入的值阻止后续事件'如果给已经有事件的标签绑定事件 那么会依次执行
'如果想要取消后续时间的执行 可以使用两种方式阻止1.方式1(推荐使用)
$('#d1').click(function () { alert(123) return false // 取消当前标签对象后续事件的执行
})2.方式2(自带关键字)
$('#d1').click(function (e) { alert(123)
e.preventDefault()
})事件冒泡'在多个标签嵌套的并且都有相同事件的情况下 会出现逐级汇报的现象 方式1 return false 方式2 e.stopPropagation() 事件委托事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。 '针对动态创建的标签 提前写好的事件默认是无法生效的
$('body').on('事件类型','选择器',function(){})
// 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})
// 如果body内有多个button 不需要去给每一个都绑定一个事件
1.可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件。
2.可以实现当新增子对象时无需再次对其绑定（动态绑定事件）动画效果// 隐藏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]]) // 修改淡化效果为给定的值（值介于 0 与 1 之间）。// 自定义（了解即可）animate(p,[s],[e],[fn]) 前端框架# bootstrap框架 内部提供了很多漂亮的标签样式和功能 我们只需要CV使用即可# bootstrap版本 推荐使用v3版本# 基本使用 必须先导入后使用 1.本地导入 2.cdn导入 bootcdn bootstrap需要使用jQuery来实现动态效果 # 文件组成 bootstrap需要导入两个文件 一个是css文件 一个是js文件 """使用前端框架 几乎不需要自己写css 只需要写class即可""" 布局容器Bootstrap 需要为页面内容和栅格系统包裹一个
<div class="container"> // 两边有留白 ... </div>
<div class="container-fluid"> // 没有留白 ... </div> 栅格系统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'# 按钮颜色<a href="" class="btn btn-info">言多必失</a> <a href="" class="btn btn-danger">言多必失</a> <a href="" class="btn btn-warning">言多必失</a> <a href="" class="btn btn-primary">言多必失</a> <a href="" class="btn btn-success">言多必失</a># 按钮尺寸<a href="" class="btn btn-success btn-sm">言多必失</a> <a href="" class="btn btn-success btn-lg">言多必失</a> <a href="" class="btn btn-success btn-block">言多必失</a> 图标样式<span class="glyphicon glyphicon-user"></span># 更多图标http://www./ 补充学习编程，一定要会看官方文档，不仅是bootstrap框架 |
|
|
