jQurey
jQuery操作
操作标签
class操作
addClass(); // 添加指定的CSS类名。
removeClass(); // 移除指定的CSS类名。
hasClass(); // 判断样式存不存在
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
样式操作
css("color","red") //DOM操作：tag.style.color="red"
// 案例
$divEle.css('border','5px solid black')
位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() // 获取匹配元素相对父元素的偏移
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
scrollTop()---实时监测距离案例
$(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的值
'''不写值就是获取 写了就是设置'''
属性操作
$('div').attr('style') # 获取第一个标签的style属性值
$('div').attr('class','c1') # 批量设置单个
$('div').attr({'name':'jason','pwd':123}) # 批量设置多个
$('div').removeAttr('class') # 批量移除
获取标签属性的时候，针对动态属性，尤其是复选框，不建议使用attr()，而是用prop。
prop('checked') // 结果是布尔值
prop('checked',false) // 动态设置
removeProp() // 移除属性
文档处理
# 内部添加
$(A).append(B)// 把B追加到A
$(A).prepend(B)// 把B前置到A
# 外部添加
$(A).after(B)// 把B放到A的后面
$(A).before(B)// 把B放到A的前面
# 清空内容
$('body').empty()
事件操作
jquery绑定事件
方式1：jQuery对象.events(function(){...})
jQuery对象.click(function(){...})
jQuery对象.hover(function(){...})
jQuery对象.blur(function(){...})
jQuery对象.focus(function(){...})
jQuery对象.change(function(){...})
jQuery对象.keyup(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)} # 移走触发
)
值监听事件
绑定事件方式2：jQuery对象.on( events [, selector ],function(){})
events： 事件
selector: 选择器（可选的）
function: 事件处理函数
移除事件jQuery对象.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序
阻止后续事件
如果给已经有事件的标签绑定事件，那么会依次执行,
如果想要取消后续时间的执行，可以使用两种方式阻止
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(){})
示例：表格中每一行的编辑和删除按钮都能触发相应的事件。
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})
动画效果
// 基本
show() // 展示
hide() // 隐藏
toggle() // 如果在展示中就隐藏起来,如果是隐藏状态就展示出来
// 滑动
slideDown() // 向下滑动
slideUp() // 向上
slideToggle() // 判断状态如何取反
// 淡入淡出
fadeIn() // 淡入
fadeOut() // 淡出
fadeToggle() // 判断状态如何取反
// 自定义（了解即可）
animate(p,[s],[e],[fn])
前端框架
bootstrap框架
bootstrap框架内部提供了很多漂亮的标签样式和功能,我们只需要CV使用即可.
bootstrap版本推荐使用v3版本.它是一个是css文件和一个jd文件组成.bootstrap需要使用jQuery来实现动态效果,一般都是直接导入jQuery和bootstrap的.
基本使用:
必须先导入后使用
1.本地导入
2.cdn导入
<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>
布局容器
class = 'container' 两边有留白
class = 'container-fluid' 没有留白
栅格系统
class = 'row' 默认开设一行均分12份
class = 'col-md-n' 指定需要几份(电脑屏幕)
col-md-offset-n 调整位置
# 栅格参数可以做到响应式布局xs sm md lg...
lg对应屏幕>=1200px，小于 1920px 台式1920*1080显示器
md对应屏幕>=992px，小于1200px 适合笔记本
sm对应屏幕>=768px，小于992px 适合平板
xs对应屏幕<=768 手机端屏幕
表格样式
参考官网即可 有样式有源码 拷贝使用即可
# 表格样式
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/
作业
<!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 style="position: fixed;bottom: 200px;right: 20px;">
<button id="fanhui">返回顶部</button>
</div>
<div id="d1" style="height: 400px;width: 300px;background: indianred">
<input type="checkbox" id="c1">全选
<input type="checkbox" id="c2">A
<input type="checkbox" checked id="c3">B
<input type="checkbox" id="c4">C
<input type="checkbox" id="c5">反选
</div>
<div id="d2" style="height: 1000px;width: 300px;background: green">
<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>
<th class="success">操作</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td>1</td>
<td>jason</td>
<td>male</td>
<td>18</td>
<td><button>删除</button></td>
</tr>
<tr class="success">
<td>2</td>
<td>kevin</td>
<td>male</td>
<td>28</td>
<td><button>删除</button></td>
</tr>
<tr class="info">
<td>3</td>
<td>tony</td>
<td>female</td>
<td>38</td>
<td><button>删除</button></td>
</tr>
<tr class="warning">
<td>4</td>
<td>jerry</td>
<td>male</td>
<td>48</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>5</td>
<td>oscar</td>
<td>male</td>
<td>58</td>
<td><button>删除</button></td>
</tr>
</tbody>
</table>
</div>
<SCRIPT>
$('#fanhui').click(function () {
$(window).scrollTop(0);
})
$("#c1").click(function () {
if ($("#c1").prop('checked')){
$(':checkbox').prop('checked',true);
}else {
$(':checkbox').prop('checked',false);
}
})
$('#c5').click(function () {
if($('#c5').prop('checked')){
let $uncheck=$(':not(:checked)')
let $check=$(':checked')
$uncheck.prop('checked',true);
$check.prop('checked',false);
}
})
$("#d2 button").click(function () {
$(this).parent().parent().empty()
})
</SCRIPT>
</body>
</html>
浙公网安备 33010602011771号