addClass(); // 添加指定的CSS类名。 removeClass(); // 移除指定的CSS类名。 hasClass(); // 判断样式存不存在 toggleClass(); // 切换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') // 批量移除
用于checkbox
和radio
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()// 删除匹配的元素集合中所有的子节点。
.on( events [, selector ],function(){})
events: 事件
selector: 选择器(可选的)
function: 事件处理函数
jQuery对象.click(function(){}) jQuery对象.change(function(){}) jQuery绑定事件有两种方式 $('#d1').click(function(){}) $('#d1').on('click',function(){}) 有时候第一种绑定事件的方式无法生效 那么就使用第二种
.off( events [, selector ][,function(){}])
off()
方法移除用 .on()
绑定的事件处理程序。
<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 需要为页面内容和栅格系统包裹一个 .container
容器。我们提供了两个作此用处的类。注意,由于 padding
等属性的原因,这两种 容器类不能互相嵌套。
.container
类用于固定宽度并支持响应式布局的容器。
<div class="container"> // 两边有留白 ... </div>
.container-fluid
类用于 100% 宽度,占据全部视口(viewport)的容器。
<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.fontawesome.com.cn/
学习编程,一定要会看官方文档,不仅是bootstrap框架