jQuery+bootstrap框架

目录

• jQuery操作标签
  • class操作
  • CSS
  • 位置操作
  • 文本值操作
  • 属性操作
  • 文档处理
• 事件操作
  • 事件绑定
  • 移除事件
  • 克隆操作
  • 悬浮事件
  • 值监听事件
  • 阻止后续事件
  • 事件冒泡
  • 事件委托
  • 动画效果
• 前端框架
  • 布局容器
  • 栅格系统
  • 表格样式
  • 表单样式
  • 按钮与图片
  • 图标样式
• 补充

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')  // 批量移除

用于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()// 删除匹配的元素集合中所有的子节点。

事件操作

事件绑定

1. .on( events [, selector ],function(){})

• events： 事件

• selector: 选择器（可选的）

• function: 事件处理函数

  jQuery对象.click(function(){})
  jQuery对象.change(function(){})
  
  jQuery绑定事件有两种方式
  	$('#d1').click(function(){})
  	$('#d1').on('click',function(){})
  有时候第一种绑定事件的方式无法生效 那么就使用第二种
  

移除事件

1. .off( events [, selector ][,function(){}])

off() 方法移除用 .on()绑定的事件处理程序。

• events： 事件
• selector: 选择器（可选的）
• function: 事件处理函数

克隆操作

<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框架