jQuery操作标签

class 操作

// 语法上肯定比js简洁
// class 操作
jQuery操作
addClass()  // 添加指定的CSS类名

removeClass()  // 移除指定的css类名

hasClass()  // 判断样式存不存在

toggleCLass()  // 切换CSS类名，如果有就移除，没有就添加

// DOM操作
classList.add()  
classList.remove()
classList.contains()
classList.toggle()

样式操作

$divEle.css('border','5px solid black')

位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
/*
实时监测距离
	$(window).scroll(function () {
        if($(window).scrollTop() > 600){
            alert('超过600了 架不住了')
        }
    })
*/

文本值操作

HTML代码：
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
文本值：
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
值：
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

事件操作

'''js绑定'''
	标签对象.onclick = function(){}
  标签对象.onchange = function(){}
'''jQuery绑定'''
	jQuery对象.click(function(){})
  jQuery对象.change(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)}  # 移走触发
)

值监听事件

<!--
jQuery绑定事件有两种方式
	$('#d1').click(function(){})
	$('#d1').on('click',function(){})
有时候第一种绑定事件的方式无法生效 那么就使用第二种
-->
<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()
    })

事件冒泡

// 在多个标签嵌套的并且都有相同事件的情况下 会出现逐级汇报的现象
<div id='d1'>我是div
    <p id='d2'>我是p标签
        <span id='d3'>我是span标签</span>
    </p>
</div>
方式1
	return false
方式2
	e.stopPropagation()

eg:
<script>
    $('#d1').click(function () {
        alert('div')
        // return false
    })
     $('#d2').click(function () {
        alert('p')
        // return false
    })
     $('#d3').click(function (e) {
        alert('span')
        // return false
        e.stopPropagation() /*关键字取消*/
    })
</script>

事件委托

// 针对动态创建的标签 提前写好的事件默认是无法生效的

$('body').on('事件类型','选择器',function(){})

# 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})

动画效果 animate()

hide  // 隐藏
show	// 显示
slideUp  // 滑入
slideDown  // 滑出
fadeIn	// 淡入
fadeOut  // 淡出
animate  // 创建自定义动画

bootstrap前端框架

# bootstrap框架
	内部提供了很多漂亮的标签样式和功能 我们只需要CV使用即可

# bootstrap版本
	推荐使用v3版本

# 基本使用
	必须先导入后使用
  	1.本地导入
    2.cdn导入
    	bootcdn
 	bootstrap需要使用jQuery来实现动态效果
 
# 文件组成
	bootstrap需要导入两个文件
  	一个是css文件
    一个是js文件
  
"""使用前端框架 几乎不需要自己写css 只需要写class即可"""

布局容器

class = 'container'  					两边有留白
class = 'container-fluid'			没有留白

栅格系统

class = 'row'  默认开设一行均分12份
class = 'col-md-n'  指定需要几份(电脑屏幕)
// 栅格参数可以做到响应式布局xs sm md lg...
手机：col-xs
平板：col-sm
桌面显示器：col-md
大桌面显示器：col-lg

如果一行十二份用不完 可以调整位置
col-md-offset-1~12

表格样式

参考官网即可 有样式有源码 拷贝使用即可
# 表格样式
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>

图标样式

图标网站：http://www.fontawesome.com.cn/

<span class="glyphicon glyphicon-user"></span>
# 更多图标

bootstrap官网查看更多内容

https://v3.bootcss.com/