jQuery

已于 2022-10-15 16:08:12 修改
阅读量898 收藏 1
点赞数
分类专栏： 前端 文章标签： jquery javascript ecmascript
于 2022-08-22 17:29:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZhaoSong_/article/details/126470341
版权

文章目录

jQuery 

"""
jQuery内部封装了原生的js代码，还添加了很多的功能
能够通过书写更少的代码，完成js操作
类似于Python里的模块，在前端模块不叫模块，叫”类库“

兼容多个浏览器，使用jQuery就不需要考虑兼容问题
jQuery的宗旨：
	write less do more
	让你用更少的代码完成更多的事情
	
python中导入模块需要消耗资源，
jQuery在使用的时候也需要导入，但是它的文件特别的小，基本不影响速度
"""

菜鸟教程

jQuery API中文文档

BootCDN

jQuery下载

官网下载地址
在这里插入图片描述
在这里插入图片描述

  • 打开压缩过的链接直接 Ctrl+C复制，新建一个JS文件直接Ctrl+V进去就可以
    在这里插入图片描述
    在这里插入图片描述
    jQuery在使用前一定要确保已经导入了

针对导入问题

  1. 文件下载到了本地，如何解决多个文件反复书写引入语句的代码

    • 可以借助Pycharm自动初始化代码功能，完成自动添加

在这里插入图片描述2. 如果不下载jQuery文件，可以直接引用jQuery提供的CDN服务（基于网络直接请求加载)

  • CDN:内容分发网络
  • CDN有免费的有收费的
  • 前端免费的CDN网站: BootCDN
    在这里插入图片描述
    直接复制即可，但是要保证计算机有网络，才可以使用。
    在这里插入图片描述
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

在这里插入图片描述

jQuery基本语法

#jQuery基本语法
jQuery(选择器).action()
秉持着jQuery的宗旨，jQuery简写成$
jQuery()  等价于 $()

#jQuery与js代码对比
eg:将p标签内部的文本颜色改为红色
let pELe=document.getElementById('p1')
pELe.style.color='red'
'red'
#jQuery操作标签
$('p').css('color','blue')

查找标签

基本选择器
//id选择器
$('#d1')
S.fn.init [div#d1]0: div#d1length: 1[[Prototype]]: Object(0)
           
//class选择器
$('.c1')
S.fn.init [p.c1, prevObject: S.fn.init(1)]0: p.c1length: 1prevObject: S.fn.init [document][[Prototype]]: Object(0)
           
//标签选择器
$('span')
S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]0: span1: span2: spanlength: 3prevObject: S.fn.init [document][[Prototype]]: Object(0)
           
//jQuery对象如何变成标签对象
$('#d1')[0]
<div id=​"d1">​…​</div>​
document.getElementById('d1')
<div id=​"d1">​…​</div>​
           
//标签对象如何变jQuery对象呢
$(document.getElementById('d1'))
S.fn.init [div#d1]
$(document.getElementById('d1'))[0] //又转成了标签对象
<div id=​"d1">​…​</div>​
组合选择器/分组与嵌套
$('div')
S.fn.init(2) [div#d1, div.c1, prevObject: S.fn.init(1)]
              
$('div.c1')
S.fn.init [div.c1, prevObject: S.fn.init(1)]0: div.c1length: 1prevObject: S.fn.init [document][[Prototype]]: Object(0)
              
$('div#d1')
S.fn.init [div#d1, prevObject: S.fn.init(1)]0: div#d1length: 1prevObject: S.fn.init [document][[Prototype]]: Object(0)
           
$('*')
S.fn.init(18) [html, head, meta, title, script, style, body, span, span, div#d1, span, p, span, span, div.c1, span, span, script, prevObject: S.fn.init(1)]
               
$('#d1,.c1,p')
S.fn.init(3) [div#d1, p, div.c1, prevObject: S.fn.init(1)]
              
$('div span') #后代
S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]
              
$('div>span')#儿子
S.fn.init(2) [span, span, prevObject: S.fn.init(1)]0: span1: spanlength: 2prevObject: S.fn.init [document][[Prototype]]: Object(0)
              
$('div+span')#第一个
S.fn.init [span, prevObject: S.fn.init(1)]
              
$('div~span') #兄弟
S.fn.init(2) [span, span, prevObject: S.fn.init(1)]
基本筛选器
$('ul li') #ul下所有li
S.fn.init(10) [li, li, li, li, li, li, li.c1, li, li, li#d1, prevObject: S.fn.init(1)]
               
$('ul li:first') #大儿子
S.fn.init [li, prevObject: S.fn.init(1)]0: lilength: 1prevObject: S.fn.init [document][[Prototype]]: Object(0)
               
$('ul li:last')#小儿子
S.fn.init [li#d1, prevObject: S.fn.init(1)]0: li#d1length: 1prevObject: S.fn.init [document][[Prototype]]: Object(0)
           
$('ul li:eq(2)')#索引为2的
S.fn.init [document][[Prototype]]: Object(0)
           
$('ul li:even') #偶数
S.fn.init(5) [li, li, li, li.c1, li, prevObject: S.fn.init(1)]0: li1: li2: li3: li.c14: lilength: 5prevObject: S.fn.init [document][[Prototype]]: Object(0)
           
$('ul li:odd')#奇数
S.fn.init(5) [li, li, li, li, li#d1, prevObject: S.fn.init(1)]0: li1: li2: li3: li4: li#d1length: 5prevObject: S.fn.init [document][[Prototype]]: Object(0)
              
$('ul li:gt(2)')#索引大于2的
S.fn.init(7) [li, li, li, li.c1, li, li, li#d1, prevObject: S.fn.init(1)]
              
$('ul li:lt(2)')#索引小于2的
S.fn.init(2) [li, li, prevObject: S.fn.init(1)]
              
$('ul li:not("#d1")')#ul下所有li，除了id为d1的
S.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: S.fn.init(1)]
              
$('div:has("p")')#选取出包含一个或多个标签在内的标签，简单将就是div里面有p的div        
S.fn.init [div, prevObject: S.fn.init(1)]
属性选择器
$('[username]')
<input type=​"text" id username=​"zhangsan">​

$('[username="lisi"]')
<p username=​"lisi">​</p>​

$('p[username]')
<p username=​"lisi">​</p>​

$('[type]')

$('[type="text"]')
form表单筛选器
$('input[type="text"]')
S.fn.init [input, prevObject: S.fn.init(1)]

$('input[type="password"]')
S.fn.init [input, prevObject: S.fn.init(1)]

$(':password')  #等价于上面第二个
S.fn.init [input, prevObject: S.fn.init(1)]

$(':text')  ##等价于上面第一个
S.fn.init [input, prevObject: S.fn.init(1)]

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...
表单的对象属性
:enabled
:disabled
:checked
:selected


$(':checked')  #它会将checked 和selected都拿到
S.fn.init(2) [input, option, prevObject: S.fn.init(1)]0: input1: optionlength: 2prevObject: S.fn.init [document][[Prototype]]: Object(0)

$(':checked')[0]
<input type=​"checkbox" value=​"222" checked>​

$(':checked')[1]
<option value selected>​333​</option>​   slot 

$(':selected') #它不会，只拿selected
S.fn.init [option, prevObject: S.fn.init(1)]

$(':selected')[0]
<option value selected>​333​</option>​   slot 

$('input:selected') #自己加一个限制条件
S.fn.init [prevObject: S.fn.init(1)]
筛选器方法
$('#d1').next()   #同级别下一个
                     
$('#d1').nextAll()

              
$('#d1').nextUntil('.c1') #下面所有直到.c1,不包括.c1

              
$('.c1').prev()  #上一个

              
$('.c1').prevAll()

              
$('.c1').prevUntil('#d2')

              
$('#d3').parent()#第一级父标签

$('#d3').parent().parent()

           
$('#d3').parent().parent()

           
$('#d3').parent().parent().parent()

           
$('#d3').parent().parent().parent().parent()

           
$('#d3').parent().parent().parent().parent().parent()

           
$('#d3').parents()  #所有父标签
$('#d3').parentsUntil('body')
              
$('#d2').children()#儿子
S.fn.init(3) [span, p, span, prevObject: S.fn.init(1)]
              
$('#d2').siblings()#同级别上下所有

$('div p')等价于  $('div').find('p')
#find从某个区域内部筛选出想要的标签

#等价
$('div span:first')
$('div span').first()
$('div span:last')
$('div span').last()
$('div span:not(""#d3")')
$('div span').not('#d3')

操作标签

操作类
#操作类
"""
js版本                                  jQuery版本
classList.add()							addClass()
classList.remove()						removeClass()
classList.contains()					hasClass()
classList.toggle()						toggleClass()
"""
css操作
#css操作
    <p>111</p>
    <p>222</p>
'''一行代码将第一个p标签变成红色，第二个p标签变成蓝色'''
$('p').first().css('color','red').next().css('color','blue')
#jQuery链式操作，使用jQuery可以做到一行代码操作很多标签
#jQuery对象调用jQuery方法之后返回的还是一个jQUery对象，也就可以继续调用
位置操作
#位置操作
offset()
    $('p').offset()
    {top: 100, left: 100}

position()
	$('p').position()
	{top: 100, left: 100}
    
scrollTop()
	$(window).scrollTop()  #括号内不加参数就是不获取
    $(window).scrollTop(500)#加了参数就是设置
    
scrollLeft()
尺寸
#尺寸
$('p').height   #文本
20.8
$('p').width()   
866
$('p').innerheight()  #文本+padding
$('p').innerwidth()
$('p').outheight()   #文本+padding+boder
$('p').outwidth()
文本操作
"""
操作标签内部文本
js版本		jQuery版本
innerText		text()   括号内不加参数就是获取，加了参数就是设置
innerHTML		html()  括号内不加参数就是获取，加了参数就是设置
"""
$('div').text()
'\n        独步江湖，东方不败\n    '
$('div').html()
'\n       <p> 独步江湖，东方不败</p>\n    '
$('div').text('人生苦短，我学Python')
S.fn.init [div, prevObject: S.fn.init(1)]
$('div').html('人生路，冷冷的夜光')
S.fn.init [div, prevObject: S.fn.init(1)]
$('div').text('<h1>人生苦短，我学Python</h1>')
S.fn.init [div, prevObject: S.fn.init(1)]
$('div').html('<h1>人生苦短，我学Python</h1>')
S.fn.init [div, prevObject: S.fn.init(1)]
获取值操作
"""
js         jQuery
.value     .val()
""" 
$('#d1').val()
'vfdghjmhnbv'
$('#d1').val('520')  #括号内不加参数是获取，加了参数是设置
S.fn.init [input#d1]
$('#d2')[0].files[0]  #两个对象之间的转换
           
$(':checkbox').val(666)#所有的value值都改变成666
属性操作
"""
js							jQuery
setAttribute()				attr(name,value)
getAttribute()				attr(name)
removeAttribute()			removeAttr(name)


在用变量存储对象的时候，js推荐使用xxxEle   （标签对象）
在jQuery中推荐使用$xxxELe				（jQuery对象）
"""
let $pEle = $('p')

$pEle.attr('id')

$pEle.attr('class')

$pEle.attr('class','c1')

$pEle.attr('id','666')

$pEle.attr('password','456666')

$pEle.removeAttr('password','456666')

           
           
 """对于标签上有的能够看到的属性和自定义属性用attr
 对于返回布尔值比如checkbox,radio,option是否被选中用prop"""
$('#i2').prop('checked')
true
$('#i3').prop('checked',true)
S.fn.init [input#i3]
文档处理
"""
js                   jQuery
createElement('p')		$('<p>')

appendChild()			append()


"""
let $pELe = $('<p>')
$pELe.text('你好')
$pELe.attr('id','d6')
      
$('#d1').append($pELe)#和下面等价 ,内部尾部追加
$('#d1').append($pELe[0])
$pELe.appendTo($('#d1'))

$('#d1').prepend($pELe)  #内部头部追加
$pELe.prependTo($('#d1'))

$('#d2').after($pELe)  #放在某个标签后面
S.fn.init {}[[Prototype]]: Object(0)
$pELe.insertAfter($('#d2'))

$('#d1').before($pELe)#放在某个标签前面
$pEle.insertBefore($('#d1'))

$('#d1').remove()#将标签从DOM树中删除

$('#d1').empty()#清空标签内部所有的内容
，

jQuery事件

jQUery绑定事件的方式

<body>
    <button id="d1">吻我</button>
    <button id="d2">亲我</button>


    <script>
        //第一种
        $('#d1').click(function () {
            alert('别说话 吻我')
        })

        //第二种，功能强大，支持事件委托
        $('#d2').on('click', function () {
            alert('借钱给我，后面还你')
        })
    </script>
</body>
克隆事件
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jQuery-3.6.0-min.js"></script>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            background-color: orange;
            border: 1px solid blue;
           
        }
    </style>
</head>
<body>
    <button id="d1">倚天剑，点击传送</button>



    <script>
        $('#d1').on('click',function(){
            // console.log(this);  //this指代的永远是当前被操作的标签对象
            // $(this).clone().insertAfter($('body')) //clone默认只克隆html和css，不克隆事件
            $(this).clone(true).insertAfter($('body')) //括号里面 加参数true即可克隆html,css，事件
        })
    </script>
</body>
自定义模态框
/*模态框内部本质就是给标签移除或添加hide属性*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../jQuery-3.6.0-min.js"></script>
    <title>Document</title>
    <style>
        .cover{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128,125,128,0.4);
            z-index: 99;
        }
        .modal{
            position: fixed;
            height: 400px;
            width: 400px;
            background-color:white ;
            top: 50%;
            left:50%;
            margin-left: -300PX;
            margin-top: -200PX;
            z-index: 100;
        }
        .hide{
            display: none;

        }
    </style>
</head>
<body>
    <div>我是最下面的</div>
    <button id="d1">给i我出来</button>
    <div class="cover hide "></div>
    <div class="modal hide">
        <p>username：<input type="text" ></p>
        <p>password:<input type="text" ></p>
        <input type="button" value="确定" >
        <input type="button" value="取消" id="d2">

    </div>

    <script>
        let $coverEle=$('.cover')
        let $modalEle=$('.modal')

        $('#d1').click(function(){
            //将两个div标签的hide属性移除
            $coverEle.removeClass('hide')
            $modalEle.removeClass('hide')

        })
        $('#d2').on('click',function(){
            $coverEle.addClass('hide')
            $modalEle.addClass('hide')
        })
    </script>

</body>
</html>
左侧菜单
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jQuery-3.6.0-min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .left {
            float: left;
            background-color: darkgray;
            width: 20%;
            height: 100%;
            position: fixed;
        }

        .title {
            font-size: 20px;
            color: white;
            text-align: center;

        }

        .items {
            border: 1px solid black;
        }

        .hide {
            display: none;

        }
    </style>
</head>

<body>
    <div class="left">
        <div class="menu">
            <div class="title">菜单一
                <div class="items">111</div>
                <div class="items">222</div>
                <div class="items">333</div>
            </div>
            <div class="title">菜单二
                <div class="items">111</div>
                <div class="items">222</div>
                <div class="items">333</div>
            </div>
            <div class="title">菜单三
                <div class="items">111</div>
                <div class="items">222</div>
                <div class="items">333</div>
            </div>
        </div>
    </div>

    <script>
        $('.title').click(function () {
            // 先给所有items加hide,
            $('.items').addClass('hide')
            //然后将被点击的标签内部的hide值移除
            //this指代的是当前被操作的标签对象
            $(this).children().removeClass('hide')
        })
    </script>
</body>

</html>
返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jQuery-3.6.0-min.js"></script>
    <style>
        .hide{
            display: none;
        }
        #d1{
            position: fixed;
            background-color: black;
            right: 20PX;
            bottom: 20px;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
    <a href="" id="d1"></a>
    <div style="height: 500px;background:red;"></div>
    <div style="height: 500px;background:greenyellow;"></div>
    <div style="height: 500px;background:blue;"></div>
    <a href="#d1" class="hide">回到顶部</a>


    <script>
        $(window).scroll(function(){
            if ($(window).scrollTop()>300) {
                $('#d1').removeClass('hide')
            }else{
                $('#d1').addClass('hide')
            }
        })
    </script>
</body>
</html>
自定义登录校验
/*获取用户的密码和用户名的时候，如果用户没有填写，应该给用户提示*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jQuery-3.6.0-min.js"></script>
</head>
<body>
    <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>
</body>
</html>
input框实时监控
<body>
    <input type="text " id="d1">

    <script>
        $('#d1').on('input',function(){
            console.log(this.value);
        })
    </script>
</body>
hover事件
<body>
    <p id="d1">然后呢</p>

    <script>
        $('#d1').hover(
            function () {
            alert('来宾几位？')  //悬浮
        },
            function(){
                alert('溜了溜了')  //离开
            }

        )
    </script>
</body>
键盘按键按下事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jQuery-3.6.0-min.js"></script>
</head>
<body>
    <script>
        $(window).keydown(function(event){
            console.log(event.keyCode)
            if (event.keyCode == 16){
				alert('您按下了shift键')
            }  
        })
    </script>
</body>
</html>
阻止后续事件执行
<form action="">
        <span id="d1" style="color: red;"></span>
        <input type="submit" id="d2">
    </form>

    <script>
        $('#d2').click(function(e){
            $('#d1').text('晚上好！')
            //阻止标签后续时间的执行  方式1
            //return false
            //阻止标签后续时间的执行  方式2
            e.preventDefault()

        })
    </script>
阻止事件冒泡
<div id="d1">div
        <p id="d1">p
            <span id="d3">span </span>
        </p>
    </div>

    <script>
        $('#d1').click(function(){
            alert('div')
        })
        $('#d2').click(function(){
            alert('p')
            return false
        })
        $('#d3').click(function(e){
            alert('span')
            //阻止事件冒泡的方式1
            //return false
            //阻止事件冒泡的方式2
            e.stopPropagation()

        })
    </script>
事件委托
 <button>兄弟</button>

    <script>
        //给页面上所有的button 标签绑定点击事件
        // $('button').click(function(){  //无法影响到动态创建的标签
        //     alert(12)
        // })
        
        //事件委托
        $('body').on('click','button',function(){
            alert(123)  //将body里所有的点击事件交给的button按钮触发
        }) //在指定的范围内，将事件委托给某个标签，无论该标签是事先写好的还是后面动态创建的
    </script>
页面加载
/*等待页面加载完毕再执行代码*/
"""js中等待加载完毕执行代码"""

window.onload=function(){
	//js代码
}

"""
jQuery中等待页面加载完毕"""
#第一种
$(document).ready(function(){
	//js代码
})
#第二种
$(function(){
    //js代码
})
#第三种
直接写在body内部最下方
动画效果
 <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1115%2F101021113337%2F211010113337-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663751282&t=87b9d8397d8eb270544fa1ab7ec2d6e6" 
    alt="" width="500px" height="500px">

    <script>
        $('img').hide(5000)
        $('img').show(5000)
        $('img').slideUp(5000)
        // $('img').slideDown(5000)
        // $('img').fadeOut(5000)
        // $('img').fadeInt(5000)
        // $('img').fadeTo(5000,0.5)

    </script>

补充

#each()
#第一种方式
$('div').each(function(index){console.log(index)})
VM196:1 0
VM196:1 1
VM196:1 2
VM196:1 3
VM196:1 4
VM196:1 5
VM196:1 6
VM196:1 7
VM196:1 8

$('div').each(function(index,obj{console.log(index,obj)})
VM262:1 0 <div>​1​</div>​
VM262:1 1 <div>​2​</div>​
VM262:1 2 <div>​3​</div>​
VM262:1 3 <div>​4​</div>​
VM262:1 4 <div>​5​</div>​
VM262:1 5 <div>​6​</div>​
VM262:1 6 <div>​7​</div>​
VM262:1 7 <div>​8​</div>​
VM262:1 8 <div>​9​</div>​
S.fn.init(9) [div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
#第二种方式              
$.each([111,222,333,444],function(index,obj){console.log(index,obj)})
VM529:1 0 111
VM529:1 1 222
VM529:1 2 333
VM529:1 3 444
(4) [111, 222, 333, 444]
  """ 有了each后就不用写for循环，更方便""" 
#data()    
""" 能够让标签帮我们存储数据，并且用户肉眼看不见   """
$('div').data('info','回来吧，我原谅你了!')
S.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
               
$('div').first().data('info')
'回来吧，我原谅你了!'
               
$('div').last().data('info')
'回来吧，我原谅你了!'
               
$('div').first().removeData('info')
S.fn.init [div#d1, prevObject: S.fn.init(10)]
           
$('div').first().data('info')
undefined
过期的秋刀鱼-
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JQuery动态插入Bootstrap模态框（Modal）
互联网那些事
11-08 3180
这里所说的动态插入，是指用JS的append()方式追加元素内容，而不是静态写在HTML里面。 为什么会用到这种方式呢？比如登录框。有些网站在大部分页面都有登录按钮，如果是用Bootstrap的模态框调用的话，常规方式都是写在HTML里面，这就不太方便后期修改，因为你一旦要修改就要动到很多个页面！ 这里也不多说什么了，先看效果图： 这里用到的JQ版本是3.5.1，Bootstrap版本是4.6.1 var loginModal = " <div class=\"modal fade
jqModal弹窗插件
04-14
jqModal是我认为最强大方便的一个jquery弹窗插件
弹窗组件jqmodal的使用介绍
phplife的电子商务网上商城专栏
04-14 3859
大家在开发中为了有比较好的交互体验，很多时时候要用到各种各样的前端弹窗效果，我在工作中主要经常用到的最简单的一个弹出提示框的组件是: 一、jquery.alert.js jQuery Alert Dialogs Plugin 官网地址是:http://keleyi.com由于现在官网似乎已经打不开了，但阻档不了他的好用，如果有感兴趣的同学可以到 https://gitee.com/ydhcxh/jquery.alert.git下载体验 二、layui的弹窗组件，这个也十分好用，自不用説...
14个jQuery Modal对话框
03-10 784
显示快捷的信息给用户的一个好方法是使用jQuery模态对话框或窗口。 对话框还可以用来提醒他们警告，错误多。 如果做得正确，很好看的对话框可以是一个简单的方法来使您的网站的感觉没有很多额外的工作更加现代化。 许多框架，如Twitter的引导或Zurb基金会 ，将包括模态和对话。 但是，如果你想要的是一个非常好看的，易于使用的模态窗口不用从头滚动您自己，有很多图书馆都来帮助你。 这里有一些模式...
Java Web Jquery表单验证
最新发布
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery.modal:模态窗口系统插件
06-06
jQuery.spModal jQuery 的模态窗口系统插件。 安装 将文件复制到您的首选位置。 有关更多信息，请参阅。 例子 创建一个模态加载对话框（完整示例参见 ）： var loading = $ . spModal ( 'loading' ) ; loading . addButton ( 'Cancel' , function ( ) { loading . close ( ) ; } ) ; 创建一个模态消息对话框（完整示例参见 ）： var msg = $ . spModal ( 'message' , 'This is a test' , 'And this is a message...' ) ; // adds 'Accept' button var acceptBtn = msg . addButton ( 'Accept' ) ; accept
jQuery18种酷炫modal弹出层
09-27
一个强大的模态框弹出层插件,效果要比boostrap模态框要丰富得多，效果主要是通过css3中的transitions、transform 、opacity和animations等属性来控制。
Jquery浮动层插件modal（四种样式，附本人整理文档）
12-20
这是Jquery的一个浮动层插件，比较实用。压缩包中有4个文件夹和我整理说明的一个文档。这四个文件夹分别是4种浮动层样式。
jQuery.faModal:Fu**ing Awesome Modal window for jQuery，滚动条不烂
07-03
jQuery.faModal 模态 Windows 插件，滚动条不吸引人。 它小巧且易于为您的项目进行修改。 仅支持 CSS3 浏览器。 查看 初始化 < script src =" jquery.js " > </ script > < link rel =" stylesheet " href =" jquery.faModal.css " /> < script src =" jquery.faModal.js " > </ script > < script > $ ( document ) . ready ( function ( ) { $modal = $ ( '.my-modal' ) . faModal ( ) ; $ ( '.btn' ) . click ( function ( ) { $modal . faModal ( 's
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery插件jqModal 模态窗口
weixin_34246551的博客
12-21 443
http://dev.iceburg.net/jquery/jqModal/#examples jqModal Minimalist Modaling with jQuery What? jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web...
依赖jquery的modal弹窗
chen_daimaxz的博客
11-18 1426
最近维护一个PHP项目，那个bootStrap用的我头疼，有交互行为的组件或者方法还是自己简单写出来的顺手。不然维护起来实在太麻烦了。 /** * 参数分别是传入的html字符串，宽，高，点透明处是否关闭,是否展示弹窗右上角的× */ const $modal = function (content='',width="400",height="300",waperClose=true,showArrow){ let div = document.createEle
jquery.modal.js
昔人'
05-06 4935
/** * 模态框 Author:雨思 QQ:331406669 Date:2016-09-19 * $.modal.alert(msg,function(){}); * $.modal.confirm(msg,function(boolean){}); * $.modal.prompt(msg,function(false|value){}); * $.modal.msg(msg,fu

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

过期的秋刀鱼-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值