JQuery用法与前端第三方框架

概要

• 练习题解析
• JQuery操作标签
• JQuery事件操作
• JQuery动画效果(了解)
• 前端第三方框架(基础)

内容

练习题讲解

​ 题目要求:

  1.js的dom操作编写一个页面计时器功能
        页面上有一个输入框 两个按钮
        点击开始按钮 输入框中自动展示时间(随秒数变化)
        点击结束按钮 时间停止
      '''
      测验:连续点击开始 再点击结束 是否还是上述的效果 
      如果不是 思考问题所在 代码如何修改!!!

答案思路及代码解析：

1.一定要明确你手上的标签到底是什么对象
	如果是原生js代码查找出来的对象 那么只能调用原生js的对象方法
    如果是JQuery查找出来的对象 那么只能调用JQuery对象方法
    
2.原生JS对象与JQuery对象的关系
	可以将jQuery对象看成是数组包了标签对象
    原生js对象就是标签对象
    eg: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

1、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(){})
  ...
 
# 克隆操作
	<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即可

十三、布局容器

calss = 'container'   表示的是两边留有空白
class = 'container-fluid'  表示的是没有留空白

十四、栅格系统

calss = 'row' 默认开设一行均分为12份
calss = 'col-md-n' 指定需要几份(电脑屏幕)

如果一行十二份用不完 可以调整位置
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/