计时器

<!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前端第三方框架的更多相关文章

  1. jquery前端验证框架

    1.validationEngine.jquery.css  样式包 2.jquery.validationEngine-zh_CN.js 中文语言包 3.jquery.validationEngin ...

  2. 关于引入多个jquery冲突的问题（附一个很好用的validate前端验证框架及使用方法）

    废话不多说,进入正题: 如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看: <script src="${ctxStatic}/jquery/jquery-1.8 ...

  3. Angular4.0引入第三方框架，eg: bootstrap、jquery

    最近学习angular4.0,在练习是需要使用jquery和bootstrap.但是查阅了,大多数都是angular2的方法,或者是angular4.0的方法但是不准确.花了一些时间终于捣腾出来了,把 ...

  4. 前端UI框架小汇总

    前言: 近期,小弟根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总[ ...

  5. 走进webpack（2）--第三方框架（类库）的引入及抽离

    在当代的前端开发中,很少会用原生JS来开发页面,最基本的都会使用jQuery来节省我们开发的时间和效率,而angular,vue,react的出现更是为前端开发者带来了福音.那么这篇文章就说说如何用w ...

  6. 前端UI框架选择区别对比推荐

    UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...

  7. 5 个优秀前端 UI 框架

    随着 Web 技术的不断发展,前端开发框架层出不穷,各有千秋,今天小编为大家奉上前端 UI 框架的开源项目,希望大家能够喜欢!如果大家有 UI 框架相关的开源项目,也可以托管到码云上,我们会及时给予推 ...

  8. Dojo前端开发框架与jQuery前端开发框架，对比分析总结

    最近Dojo和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD.相同的选择器 引擎Sizzle等.作为业界知名的Jav ...

  9. 前端Js框架汇总

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

随机推荐

  1. js获取元素本身相关值

    Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集 ...

  2. 什么是持续集成（CI）？

    持续集成(CI)是每次团队成员提交版本控制更改时自动构建和测试代码的过程. 这鼓励开发人员通过在每个小任务完成后将更改合并到共享版本控制存储库来共 享代码和单元测试.

  3. I2C总线完全版——I2C总线的结构、工作时序与模拟编程

    I2C总线的结构.工作时序与模拟编程 I2C总线的结构.工作时序与模拟编程I2C总线(Inter Integrated Circuit)是飞利浦公司于上个世纪80年代开发的一种"电路板级&q ...

  4. python学习笔记（八）——文件操作

    在 windows 系统下,我们通过 路径+文件名+扩展名的方式唯一标识一个文件,而在 Linux 系统下通过 路径+文件名唯一标识一个文件. 文件分类:文件主要可以分为文本文件和二进制文件,常见的如 ...

  5. vim recording的使用方法

    使用vim时无意间触碰到q键,左下角出现"recording"这个标识,觉得好奇,遂在网上查了一下,然后这是vim的一个强大功能.他可以录 制一个宏(Macro),在开始记录后,会 ...

  6. 《深入理解ES6》笔记—— JavaScript中的类class（9）

    ES5中的近类结构 ES5以及之前的版本,没有类的概念,但是聪明的JavaScript开发者,为了实现面向对象,创建了特殊的近类结构. ES5中创建类的方法:新建一个构造函数,定义一个方法并且赋值给构 ...

  7. 【vue 开发】Vue中splice的使用

    splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值(该方法会改变原始数组) index:数组开始下标 len: 替换/删除的长度 item:替换的值,删 ...

  8. Android M 版本以后的特殊权限问题分析

    现象 桌面悬浮框在6.0以后,会因为SYSTEM_ALERT_WINDOW权限的问题,无法在最上层显示. 问题原因 SYSTEM_ALERT_WINDOW,设置悬浮窗,进行一些黑科技 WRITE_SE ...

  9. SQLite实现数据库的储存2+SQLite数据库可视化工具SQLite Stadio

    今日所学 SQLite实现数据库的储存 查看数据库的两种方法 Android 中 SQLite 数据库的查看 - woider - 博客园 SQLite Studio安装教程 [SQLite]可视化工 ...

  10. Arrays工具类与Collections工具类

    Arrays工具类 : Arrays.sort():对指定数组进行排序,从小到大 Arrays.toString():返回数组的内容的字符串表示形式 Arrays.asList():数组转List,但 ...