jQuery用法和bootstrap框架

donghongbz

2020-06-07

bootstrap的js代码是依赖于jQuery的，也就意味着你在开发项目时，使用Bootstrap动态效果的时候，一定要导入jQuery

jQuery绑定事件以及事件应用举例

绑定事件的两种方法

// 第一种
    $(‘#d1‘).click(function () {
            alert(‘你好呀‘)
    });
  
// 第二种(功能更加强大 还支持事件委托)
    $(‘#d2‘).on(‘click‘,function () {
            alert(‘好嗨哟‘)
    })

左侧菜单（有显隐效果）

<script>
    $(‘.title‘).click(function () {
        // 先给所有的items加hide
        $(‘.items‘).addClass(‘hide‘)
        // 然后将被点击标签内部的hide移除
        $(this).children().removeClass(‘hide‘)
    })
</script>

返回顶部

<script>
    $(window).scroll(function () {
        if($(window).scrollTop() > 300){
            $(‘#d1‘).removeClass(‘hide‘)
        }else{
            $(‘#d1‘).addClass(‘hide‘)
        }
    })
</script>

自定义登录校验

# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>

<script>
    let $userName = $(‘#username‘)
    let $passWord = $(‘#password‘)
    $(‘#d1‘).click(function () {
        // 获取用户输入的用户名和密码 做校验
        let userName = $userName.val()
        let passWord = $passWord.val()
        if (!userName){
            $userName.next().text("用户名不能为空")
        }
        if (!passWord){
            $passWord.next().text(‘密码不能为空‘)
        }
    })
    $(‘input‘).focus(function () {
        $(this).next().text(‘‘)
    })
</script>
input实时监控

 
<input type="text" id="d1">

<script>
    $(‘#d1‘).on(‘input‘,function () {
        console.log(this.value)  
    })
</script>

hover事件

<script>
    // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开
    //     alert(123)
    // })

    $(‘#d1‘).hover(
        function () {
            alert(‘我来了‘)  // 悬浮
    },
        function () {
            alert(‘我溜了‘)  // 移开
        }
    )
</script>

页面加载（等待页面加载完毕再执行代码）

# js 等待页面加载完毕再执行代码
window.onload = function(){
  // js代码
}

"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
  // js代码
})
# 第二种
$(function(){
  // js代码
})
# 第三种
"""直接写在body内部最下方"""

动画效果

【 浏览器console 里的操作】$(‘#d1‘).hide(5000)
w.fn.init [div#d1]
$(‘#d1‘).show(5000)
w.fn.init [div#d1]
$(‘#d1‘).slideUp(5000)
w.fn.init [div#d1]
$(‘#d1‘).slideDown(5000)
w.fn.init [div#d1]
$(‘#d1‘).fadeOut(5000)
w.fn.init [div#d1]
$(‘#d1‘).fadeIn(5000)
w.fn.init [div#d1]
$(‘#d1‘).fadeTo(5000,0.4)
w.fn.init [div#d1]