jQuery和bootstrap
'''
jQuery代码查找标签绑定的变量名推荐使用$xxxEle
'''
# addClass() 增加css类名 相当于原生js中的classList.add()
var $divEle = $('div').first()
$divEle.addClass('c3')
S.fn.init [div.c1.c2.c3, prevObject: S.fn.init(1)]
# removeClass() # 移除css类名 相当于原生js中的classList.remove()
$divEle.removeClass('c3')
S.fn.init [div.c1.c2, prevObject: S.fn.init(1)]
# hasClass() # 判断有没有指定的css类名 相当于原生js中的classList.contains()
$divEle.hasClass('c2')
true
# toggleClass() # 有则移除， 无则添加 相当于原生js中的classList.toggle()
$divEle.toggleClass('c4')
S.fn.init [div.c1.c2.c4, prevObject: S.fn.init(1)]
# 样式操作
增加一个粉红色的实现边框
$divEle.css('border','3px solid pink')
# 位置操作
$(window).scrollTop() 用于获取左侧滚动条距离顶端的位置
"""
实时监测距离
$(window).scroll(function () {
if($window).scrolltop() > 500){
alert('超过本页500了')
}
})
"""
-
文本值操作
jQuery DOM
# 获取文本
text() innerText
# 获取HTML标签
html() innerHTML
# 获取value值
val() value
"""
使用空括号就是获取，括号里面放操作代码就是设置
"""
# 实操
$('body').text()
"\n \n \n \n \n $(window).scroll(function(){\n if($(window).scrollTop() > 500){\n alert('超过500了')\n }\n })\n\n \n\n"
$('body').html()
`\n <div style="height: 600px;background-color: blueviolet"></div>\n <div style="height: 600px;background-color: blue"></div>\n <div style="height: 600px;background-color: rebeccapurple"></div>\n \x3Cscript>\n $(window).scroll(function(){\n if($(window).scrollTop() > 500){\n alert('超过500了')\n }\n })\n\n \x3C/script>\n\n`
$('body').val()
''
$('body').text('哎嘿')
S.fn.init [body, prevObject: S.fn.init(1)]
$('body').html('<h1> 芜湖</h1>')
S.fn.init [body, prevObject: S.fn.init(1)]
-
属性操作
# 获取第一个标签为style属性值
$('div').attr('style')
# 批量设置单个
$('div').attr('class','c1')
# 批量设置多个
$('div').attr({'name':'owen','pwd':111})
# 批量移除
$('div').removeAttr('class')
"""
获取标签属性的时候， 针对动态属性尤其是复选框不建议使用attr()
prop('checked') # 结果为布尔值
prop('checked',false) # 动态设置
"""
-
文档处理
# 内部添加
$(A).append(B) # 把B追加到A
$(A).prepend(B) # 把B前置到A
#外部添加
$(A).after(B) # 把B放到A前面
$(A).before(B) # 把B放到A前面
# 清空内容
$('body').empty() # 直接清空 body里面的所有东西
# 代码实操
let $pEle = $('<p>')
undefined
$pEle.text('这是一个p标签')
S.fn.init [p]
$('body').append($pEle)
S.fn.init [body, prevObject: S.fn.init(1)]
$('body').prepend($pEle)
S.fn.init [body, prevObject: S.fn.init(1)]
$('body').after($pEle)
S.fn.init [body, prevObject: S.fn.init(1)]
$('body').empty()
S.fn.init [body, prevObject: S.fn.init(1)]
jQuery事件操作
'''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('芜湖芜湖')})
# 想要将悬浮和移开分开执行不同的操作，就要写两个函数
$('#d1').hover(
function () {alert('今天要来点新鲜的吗')},
function () {alert('这么快就走啦')}
)
-
值监听事件
"""
jQuery绑定事件有两种方式
$('#d1').click(function(){})
$('#d1').on('click', function(){})
"""
# 实操
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log($(this).val())
})
</script>
-
阻止后续事件
"""
如果给已经有事件的标签绑定事件， 那么会依次执行
如果想要取消后续时间的执行有两种方式
"""
方式一:
$('#di').click(function(){
alert()
return false
})
方式二:
$('#d1').click(function (e) {
alert('bibibi')
e.preventDefault()
})
# 推荐使用第一个
- 事件冒泡
"""
在多个标签嵌套的并且都有相同事件的情况下， 会出现逐级汇报的现象
"""
方式1
return false
方式2
e.stopPropagation()
# 代码实现
<div id="d3"> 这是div标签
<p id="d2"> 这是p标签
<span id="d1"> 这是span标签</span>
</p>
</div>
<script>
$('#d1').click(function (){
alert('span')
return false
})
$('#d2').click(function (e){
alert('p')
e.stopPropagation()
})
$('#d3').click(function (){
alert('div')
return false
})
-
事件委托
"""
针对动态创建的标签，提前写好的事件默认都是无法生效的
"""
# 书写格式
$('body').on('事件类型','选择器',function(){})
# 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})
jQuery动画效果
hide # 隐藏
show # 展示
slideUp # 收起
sildeDown # 放下
fadeIn # 淡入(透明度, 时间)
fadeOut # 淡出(透明度, 时间)
animate # 自定义
前端第三方框架
# bootstrap 框架
内部提供了很多漂亮的标签样式和功能，我们只需要CV即可
# bootstrap版本
推荐使用V3
# 使用方式
先导入再使用
1、本地导入
2、cdn导入
# 文件组成
bootstrap需要导入两个文件
一个是css文件
一个是js文件
-
布局容器
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"
# 代码实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<h1 class="text-center">数据展示</h1>
<div class="col-md-8 col-md-offset-2">
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th class="text-center danger">序号</th>
<th class="warning">姓名</th>
<th class="success">性别</th>
<th class="info">年龄</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td>1</td>
<td>owen</td>
<td>male</td>
<td>20</td>
</tr>
<tr class="success">
<td>2</td>
<td>mary</td>
<td>female</td>
<td>28</td>
</tr>
<tr class="info">
<td>3</td>
<td>tony</td>
<td>female</td>
<td>38</td>
</tr>
<tr class="warning">
<td>4</td>
<td>jerry</td>
<td>male</td>
<td>48</td>
</tr>
<tr>
<td>5</td>
<td>oscar</td>
<td>male</td>
<td>58</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
-
表单样式
.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/
版权声明：本文为未月原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。