jQuery
目录
jQuery
作业讲解
前情提要
"""
1.一定要明确目前的标签到底是什么对象
如果是原生js代码查找出来的对象 那么只能调用原生js的对象方法
如果是jQuery查找出来的对象 那么只能调用jQuery对象方法
2.原生js对象与jQuery对象的关系(**)
可以将jQuery对象看成是数组包了标签对象
原生js对象就是标签对象
eg:
['jason', ]
'jason'
$('#d1')[0] // jQuery对象转原生js对象
$(标签对象) // 原生js对象转jQuery对象
"""
代码
<script>
// let startBtn = $('#d2')[0];
let startBtn = document.getElementById('d2')
let stopEle = document.getElementById('d3')
let inputEle = document.getElementById('d1')
// 4.专门定义一个展示时间的函数
function showTime(){
// 2.获取当前时间对象
let cTimeObj = new Date()
// 3.添加到input标签value属性中
inputEle.value = cTimeObj.toLocaleString()
}
// 6.定义一个存储定时器对象的全局变量(多个函数都要用)
let timeObj = null;
// 1.先给开始按钮绑定一个点击事件
startBtn.onclick = function () {
// 8.判断变量是否已经指代了定时器 其实就是判断是否已经有了一个任务 如果有了就不要再新建
if(!timeObj){
// 5.循环定时任务
timeObj = setInterval(showTime, 1000) // 如果起了多个任务 变量只能指向最后一个
}
}
// 7.给停止按钮绑定一个取消定时器的点击事件
stopEle.onclick = function () {
clearInterval(timeObj) // 移除任务 并不会清空变量的值
// 清空变量的值
timeObj = null
}
</script>
补充
原生js代码查找标签绑定的变量名推荐使用 xxxEle
jQuery代码查找标签绑定的变量名推荐使用 $xxxEle
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() > 600){
alert('超过600了 架不住了')
}
})
"""
文本值操作
jQuery DOM
text() innerText
html() innerHTML
val() value
转js对象 files
'''不写值就是获取 写了就是设置'''
属性操作
$('div').attr('style') # 获取第一个标签的style属性值
$('div').attr('class','c1') # 批量设置单个
$('div').attr({'name':'jason','pwd':123}) # 批量设置多个
$('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()
事件操作
'''js绑定'''
标签对象.onclick = function(){}
标签对象.onchange = function(){}
...
'''jQuery绑定'''
jQuery对象.click(function(){})
jQuery对象.change(function(){})
...
克隆操作
$(选择器).clone();
1.clone()：克隆匹配的DOM元素
2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
// clone方法不加参数true，克隆标签但不克隆标签带的事件
$("#b1").on("click", function () {
$(this).clone().insertAfter(this);
});
// clone方法加参数true，克隆标签并且克隆标签带的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this);
});
</script>
悬浮事件
$('#d1').hover(function () {alert(123)})
鼠标悬浮上去和移开各自触发一次
如果想要将悬浮和移开分开执行不同的操作 需要写两个函数
$('#d1').hover(
function () {alert(123)}, # 悬浮触发
function () {alert(123)} # 移走触发
)
值监听事件
//jQuery第一种监听事件方法
$("#helloBtn").click(function() {
alert("Hello world!");
});
//jQuery第二种监听事件方法
$("#helloBtn").bind("click"，function() {
alert("Hello world!");
});
//jQuery第三种监听事件方法
$("#helloBtn").on("click"，function() {
alert("Hello world!");
})；
//jQuery第四种监听事件方法
$("body").on({
click: function() {
alert("Hello world!");
}
}, "button");
//jQuery第五种监听事件方法
$("body").on("click", "button", function() {
alert("Hello world!");
});
});
<body>
<button id="helloBtn">Hello</button>
</body>
分析
（1）第一种事件监听方法click()，是一种比较常见的、便捷的事件监听方法。
（2）第二种事件监听方法bind()，已被jQuery 3.0弃用。自jQuery 1.7以来被 on() 方法（即第三种事件
监听方法）所取代，虽然在这里也能使用且不报错，而且此方法之前比较常见，但是不鼓励使用它。
（3）第三种事件监听方法on()，从jQuery 1.7开始，所有的事件绑定方法最后都是调用on() 方法来实现的，使用on() 方法实现事件监听会更快、更具一致性。
（4）第四种和第五种方法，监听的是 body 上所有 button 元素的 click 事件。DOM 树里更高层的一个元素监听发生在它的 children 元素上的事件，这个过程叫作事件委托（event delegation）。
阻止后续事件
"""
如果给已经有事件的标签绑定事件 那么会依次执行
如果想要取消后续时间的执行 可以使用两种方式阻止
"""
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(){})
jQuery动画
显示与隐藏
// show()方法和hide()方法是jQuery中最基本的动画方法，具体语法如下：
$element.show([speed],[easing],[fn]);
$element.hide([speed],[easing],[fn]);
speed:三种预定速度之一的字符串（"show","normal"或者"fast")或表示动画数值。
easing:用来指定切换效果，默认是"swing",可用参数"inear"。
fn:在动画完成时执行的函数，每个元素执行一次。
$("element").show("slow"); //元素将在600毫秒内慢慢地显示出来
$("element").show("normal"); //元素将在400毫秒内慢慢地显示出来
$("element").show("fast"); //元素将在200毫秒内慢慢地显示出来
$("element").hide("1000"); //元素将在1000毫秒(1秒)内慢慢地隐藏
滑动式动画
// slidUp()和slideDown()方法通过改变高度值实现动画效果。具体语法如下：
$element.slidUp([speed],[easing],[fn]);
$element.slideDown([speed],[easing],[fn]);
speed:三种预定速度之一的字符串（"show","normal"或者"fast")或表示动画数值。
easing:用来指定切换效果，默认是"swing",可用参数·"inear".
fn:在动画完成时执行的函数，每个元素执行一次。
淡入淡出效果
// fadeln()和fadeOut()方法通过改变透明度实现动画效果。具体语法如下：
$element.slidUp([speed],[easing],[fn]);
$element.slideDown([speed],[easing],[fn]);
speed:三种预定速度之一的字符串（"show","normal"或者"fast")或表示动画时长的毫秒数值。
easing:用来指定切换效果，默认是"swing",可用参数"inear".
fn:在动画完成时执行的函数，每个元素执行一次。
animate
语法一：
// jQuery提供了animate()方法完成自定义动画效果
$element.animate(styles,speed,easing,callback)
styles // 代表动画属性和最终值的样式属性以及属性值的集合{属性:属性值,属性:属性值}
speed // 可选。规定动画的速度。默认是 "normal"。(毫秒 （比如 1500）"slow" "normal" "fast")
easing // 可选。规定在不同的动画点中设置动画速度的 easing 函数。
callback // 可选。animate 函数执行完之后，要执行的函数。
$("div").animate( {width:"1000px"},5000,function(){alert("调整完成")})
语法二：
$element.animate(styles,options)
styles // 必需。规定产生动画效果的 CSS 样式和值（同上）。
options // 可选。规定动画的额外选项。
// 可能的值：
speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
通过animate()方法实现动画效果，但不支持以下CSS样式属性:
backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
Color
outlineColor
前端框架 —— 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
表格样式
参考官网即可 有样式有源码 拷贝使用即可
# 表格样式
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/
总结
尤其是前端框架 几乎都是直接看官网拷贝样式即可
