jQuery前端第三方框架
计时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="d1">
<button id="d2">开始</button>
<button id="d3">停止</button>
<script>
let startBtn = document.getElementById('d2')
let stopEle = document.getElementById('d3')
let inputEle = document.getElementById('d1')
function showTime(){
let cTimeObj = new Date()
inputEle.value = cTimeObj.toLocaleString()
}
let timeObj = null;
startBtn.onclick = function (){
if(!timeObj){
timeObj = setInterval(showTime, 1000)
}
}
stopEle.onclick = function (){
clearInterval(timeObj)
timeObj = null
}
</script>
</body>
</html>
jQuery操作标签
# class操作
jQuery操作 DOM操作
addClass();// 添加指定的CSS类名。 classList.add()
removeClass();// 移除指定的CSS类名。 classList.remove()
hasClass();// 判断样式存不存在 classList.contains()
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。 classList.toggle()
# 样式操作
$divEle.css('border','5px solid black')
# 位置操作
$(window).scrollTop() 获取左侧滚动条距离顶端的位移量
"""
实时监测距离
$(window).scroll(function () {
if($(window).scrollTop() > 600){
alert('超过600了 架不住了')
}
})
""
文本值操作
jQuery DOM
text() 取得所有匹配元素的内容 innerText
html() 取得第一个匹配元素的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(){})
...
# 克隆操作
<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()
})
事件冒泡
"""
在多个标签嵌套的并且都有相同事件的情况下 会出现逐级汇报的现象
"""
方式1
return false
方式2
e.stopPropagation()
事件委托
"""
针对动态创建的标签 提前写好的事件默认是无法生效的
"""
$('body').on('事件类型','选择器',function(){})
# 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})
动画效果
hide
show
slideUp 滑动
slideDown
fadeIn 淡入淡出
fadeOut
animate
前端框架
# 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
表单样式
.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
全局 CSS 样式网址:https://v3.bootcss.com/css/
jQuery前端第三方框架的更多相关文章
- jquery前端验证框架
1.validationEngine.jquery.css 样式包 2.jquery.validationEngine-zh_CN.js 中文语言包 3.jquery.validationEngin ...
- 关于引入多个jquery冲突的问题（附一个很好用的validate前端验证框架及使用方法）
废话不多说,进入正题: 如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看: <script src="${ctxStatic}/jquery/jquery-1.8 ...
- Angular4.0引入第三方框架，eg: bootstrap、jquery
最近学习angular4.0,在练习是需要使用jquery和bootstrap.但是查阅了,大多数都是angular2的方法,或者是angular4.0的方法但是不准确.花了一些时间终于捣腾出来了,把 ...
- 前端UI框架小汇总
前言: 近期,小弟根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总[ ...
- 走进webpack（2）--第三方框架（类库）的引入及抽离
在当代的前端开发中,很少会用原生JS来开发页面,最基本的都会使用jQuery来节省我们开发的时间和效率,而angular,vue,react的出现更是为前端开发者带来了福音.那么这篇文章就说说如何用w ...
- 前端UI框架选择区别对比推荐
UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...
- 5 个优秀前端 UI 框架
随着 Web 技术的不断发展,前端开发框架层出不穷,各有千秋,今天小编为大家奉上前端 UI 框架的开源项目,希望大家能够喜欢!如果大家有 UI 框架相关的开源项目,也可以托管到码云上,我们会及时给予推 ...
- Dojo前端开发框架与jQuery前端开发框架，对比分析总结
最近Dojo和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD.相同的选择器 引擎Sizzle等.作为业界知名的Jav ...
- 前端Js框架汇总
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
随机推荐
- Shiro快速使用
INI的文件的介绍:https://baike.baidu.com/item/ini%E6%96%87%E4%BB%B6/9718973?fr=aladdin Shiro的INI配置文件:http:/ ...
- java-jdbc-all
jdbc相关解析 JDBC(Java DataBase Connectivity,Java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语 ...
- 用 wait-notify 写一段代码来解决生产者-消费者问题？
只要记住在同步块中调用 wait() 和 notify()方法,如 果阻塞,通过循环来测试等待条件.
- JVM监控工具介绍jstack, jconsole, jinfo, jmap, jdb, jsta
JVM监控工具介绍 jstack - 如果java程序崩溃生成core文件,jstack工具可以用来获得core文件的java stack和native stack的信息,从而可以轻松地知道java程 ...
- 遇到的问题之“解决tomcat中文乱码问题”
方案1:在server.xml中添加了 URIEncoding="UTF-8" 属性 路径:C:\stop\apache-tomcat-8.5.69\conf 修改内容 如若方案1 ...
- 从零开始：微信小程序新手入门宝典《一》
为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习: 一:微信小程序的特点 张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使 ...
- ES6(Promise)等一个函数执行完后再执行另一个函数
function text1(){ return new Promise((resolve, reject) => { setTimeout(function () { resolve(cons ...
- 解决“WARNINGThe remote SSH server rejected X11 forwarding request.“警告
使用xshell连接服务器时,出现了"WARNING! The remote SSH server rejected X11 forwarding request.",意思是&qu ...
- IOH和MCH(北桥芯片的变化)
IOH位置架构图示意图 北桥芯片-MCH和北桥芯片-IOH区别 1.MCH是内存控制器中心的英文缩写,负责连接CPU,AGP总线和内存, 目前Intel的CPU已经把内存控制器(北桥芯片-MCH)总线 ...
- Blazor 在开发环境保存机密（User Secrets）
前言 在应用程序开发的过程中,有的时候需要在代码中保存一些机密的信息,比如微信appkey, 连接字符串,加密密钥,字符串,或者是用户名密码等.通常的做法是保存到一个配置文件中,例如 appsetti ...