HTML基础（6）
jQuery操作标签
'''语法上肯定比js简洁'''
# class操作
jQuery操作 DOM操作
addClass() classList.add()
removeClass() classList.remove()
hasClass() classList.contains()
toggleClass() classList.toggle()
# 样式操作
$divEle.css('border','5px solid black')
# 位置操作
$(window).scrollTop() 获取右侧滚动条距离顶端的位移量
"""
实时监测距离
$(window).scroll(function () {
if($(window).scrollTop() > 1000){
alert('超过1000执行代码段')
}
})
"""
文本值获取
# 代码示例：
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容" />
</body>
<script type="text/javascript">
//1．获取设置元素内容html()
console.log($("div").html());
// $("div").html("123");
//2．获取设置元素文本内容text()
console.log($("div").text());
$("div").text("123");
//3.获取设置表单值val()
console.log($("input").val());
$("input").text("123")
</script>
'''
jQuery DOM
text() innerText
html() innerHTML
val() value
转js对象 files
不写值就是获取 写了就是设置
'''
文档处理
# append（）
向每个匹配的元素内部添加内容
$("p").append("<b>Hello</b>");
# appendTo（）
把所有匹配的元素追加到另一个指定的元素集合中
$("p").appendTo("div");
'//把p的内容追加到div中'
# prepend()
向每个匹配的元素内部前置内容
<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>");
'//结果为<p><b>Hello</b>I would like to say: </p> '
# prependTo()
把所有匹配的元素前置到拎一个指定的元素集合中
<p>I would like to say: </p><div id="foo"></div>
$("p").prependTo("#foo");
'//结果为<div id="foo"><p>I would like to say: </p></div>'
# after()
向每个匹配的元素之后插入内容
<p>I would like to say: </p>
$("p").after("<b>Hello</b>");
'//结果是：<p>I would like to say:</p><b>Hello</b>'
# insertAfter()
把所有段落插入到一个元素之后。与 $("#foo").after(“p”)相同
<p>I would like to say: </p> <div id="foo">Hello</div>
$("p").insertAfter("#foo");
//结果为<div id="foo">Hello</div><p>I would like to say: </p>
上述两个的区别
$("span").insertBefore($("div")).css("backgroundColor", 'red'); //设置的是span的样式
$("div").before($("span")).css("backgroundColor", 'red');
//设置的是div的样式
#before()
向每个匹配的元素之前插入内容
<p>I would like to say: </p>
$("p").before("<b>Hello</b>");
//结果是：[ <b>Hello</b><p>I would like to say: </p> ]
# 清空内容
$('body').empty()
事件操作
# on() 方法
语法: 元素集合.on(事件类型, 事件处理函数)
隐式迭代: 元素集合内有多少元素, 就会给多少元素绑定事件
'''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>
悬浮事件
# 代码示例：
实例
当鼠标指针悬停在上面时，改变 <p> 元素的背景颜色：
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});
'''
鼠标悬浮上去和移开各自触发一次
如果想要将悬浮和移开分开执行不同的操作 需要写两个函数
'''
值监听事件
"""
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()
})
事件冒泡
# 冒泡的概念
是因为事件会按照 DOM 的层次结构像水泡一样不断向上直至顶端
# 事件冒泡引发的问题
事件冒泡可能会引起预料之外的效果。本来只想触发<span>元素的 click 事件，然而<div>元素和<body>元素的 click 事件也同时被触发了。因此，有必要对事件的作用范围进行限制
'''
解决冒泡问题的两种方式
方式1
return false
方式2
e.stopPropagation()
'''
事件委托
"""
针对动态创建的标签 提前写好的事件默认是无法生效的
"""
# 事件委托(委派/代理):
将多个子元素(li)的事件监听委托给父辈元素(ul)处理
监听回调是加在了父辈元素上
当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
# 使用事件委托的好处
添加新的子元素, 自动有事件响应处理，所以在常用的新增表格行元素中存在按钮的时候，点击事件可以使用委托，就不用每次新增元素都得绑定一次事件
$('body').on('事件类型','选择器',function(){})
# 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})
动画效果
# 基本效果
hide
show
# 滑动效果
slideUp
slideDown
# 淡入淡出
fadeIn
fadeOut
# animate() 方法
jQuery animate() 方法用于创建自定义动画
自定义动画案例
# 实现一个点赞效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞动画示例</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
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-md-offset-3
'也可以实现平板 手机 兼容的页面布局'
表格样式
'''单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列'''
.pull-left 左浮
.pull-right 右浮
class='form-control'
针对radio和checkbox不能加!!!
按钮和图片
# 按钮样式
class = 'btn'
# 可作为按钮使用的标签或元素
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式
# 图片样式
<img src="..." class="img-responsive" alt="Responsive image">
# 图片形状
通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
图标
# 图表样式
<span class="glyphicon glyphicon-user"></span>
# 更多图标
http://www.fontawesome.com.cn/
'''
出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用
注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格
'''
浙公网安备 33010602011771号