jQuery简介

Posted on 2022-11-27 21:35 呱呱呱呱叽里呱啦阅读(54) 评论(0) 编辑收藏举报

注意

非可执行代码且非markdown格式的文字中使用的符号都是中文符号。
jQuery对象像是python中的列表，当读取属性时默认取第一个元素的属性值，当写入属性时则默认写入所有元素。

jQuery简介

即javascript库

引入方法

本地引入
CDN：

jQuery语法

jQuery(选择器).action()
或
$(选择器).action()

筛选器

基本筛选器

：$()
id：$(#d1)[0]
class：$(.c1)[0]
tag：$(span)[0]
tag+id：(div#d1)
tag+class：(div.c1)
tag/id/class：#d1,.c1,p
后代：$('div span')
儿子：$('div>span')
毗邻：$('div+span')
弟弟：$('div~span')
大儿子：$(ul li:first)
小儿子：$(ul li:last)
索引：$(ul li:eq(2))
非奇索引：$(ul li:even)
奇数索引：$(ul li:odd)
大于索引：$(ul li:gt(2))
小于索引：$(ul li:lt(2))
除外：$(ul li:not('#d1'))
包含子元素：$(ul li:has('p'))

属性筛选器

所有包含username属性：$('[username]')
所有包含username属性且值为george：$('[username="george"]')
所有包含username属性且值为george标签类型为p：$('p[username="george"]')

表单筛选器

$(':text') = $('input[type="text"]')
$(':disable')
$(':checked') return 带有checked和selected属性的标签/对象

筛选器方法

$().next()
$().nextAll()
$().nextUntil()
$().prev()
$().prevAll()
$().prevUntil()
$().parent()
$().parents()
$().children()
$().siblings()
$('div').find('p') = $('div p')

操作

类操作

JavaScript	jQuery
classList.add()	addClass()
classList.remove()	removeClass()
classList.contains()	hasClass()
classList.toggle()	toggleClass()

//<script src="jquery-3.5.1.min.js"></script>

$('#d1').hasClass('c1') //返回布尔值
$('div').addClass('c1')
$('div').removeClass('c1')
$('div').toggleClass('c1')

CSS操作

$('p').first().css('color','green').next().css('color','yellow') //类链式操作

位置操作

offset()：自身左上角相对于当前左上角的位置
position()：自身左上角相对于父标签左上角的位置
scrollTop()：即页面初始状态下屏幕某一像素点在页面下滑过程中经过的长度，可传参设值
scrollLeft()：即页面初始状态下屏幕某一像素点在页面右滑过程中经过的长度，可传参设值

尺寸操作

$('p').height()：即content高
$('p').width()：即content宽
$('p').innerHeight()：即content+padding高
$('p').innerWidth()：即content+padding宽
$('p').outerHeight()：即content+padding+border高
$('p').outerWidth()：即content+padding+border宽

文本操作

JavaScript	jQuery
innerText	text()
innerHTML	html()

$('div').text()
$('div').html()
$('div').text('文本') //清除内部标签，添加文本
$('div').html('<p>hahahahaha</p>') //清除内部标签，添加标签

获取值操作

JavaScript	jQuery
.value	.val()

$('input').val() //传值设值
$('input')[0].files[0]
$(':checkbox').val() //传值设值（给所有）

属性操作

JavaScript	jQuery
setAttribute	attr(name,value)
getAttribute	attr(name)
removeAttribute	removeAttr(name)

变量名惯例

JavaScript	jQuery
xxxEle	$xxxEle

let $pEle = $('p')
$pEle.attr()
$pEle.attr('id','d1')
$pEle.removeAttr('id')

// 针对checkbox、radio等，使用以下方法获取值或设值
$('#d1').prop('checked')
$('#d1').prop('checked',false)

文档操作

JavaScript	jQuery
createElement('p')	$(' ')
appendChild()	append()

let $pEle = $('<p>')
$pEle.text('hahhahahahaha')
$pEle.attr('id','d1')
$('#d2').append($pEle) //可将id为d2的标签下子标签视为python中的列表，此动作将在列表末尾追加$pEle（根据$pEle的赋值过程可能是多个标签）
$pEle.appendTo($('#d1'))
$('#d2').prepend($pEle) //添加为第一个子标签
$pEle.prependTo($('#d1'))
$('#d2').after($pEle) //同级别后面
$pEle.insertAfter($('#d1'))
$('#d2').before($pEle) //同级别前面
$pEle.insertBefore($('#d1'))
$('#d1').remove() //移除id为d1的标签及其所有子标签
$('#d1').empty() //净空id为d1的标签 $('#d1').html('')

事件

事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script> <!--!!!!!!!!!!!!!!!!!-->



</head>
<body>
    <button id="d1">ahhahahahha</button>
    <button id="d2">xixixixiiixix</button>
    <script type="text/javascript">
        $('#d1').click(function () {
            alert('ahhahahahha')
        });
        $('#d2').on('click', function () {
            alert('xixixixiiixix')
        })
    </script>
</body>
</html>

克隆事件

this：当前被操作的标签对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
    <style type="text/css">
        #d1 {
            height: 100px;
            width: 100px;
            background-color: orange;
            border-radius: 50%

        }

    </style>


</head>
<body>
    <button id="d1">ahhahahahha</button>

    <script type="text/javascript">
        $('#d1').on('click', function () {
            // $(this).clone().insertAfter($(this)) //默认只克隆html和css不克隆事件，卧槽竟然默认克隆id
            $(this).clone(true).insertAfter($(this)) //通过添加参数true来增加克隆事件的功能
        })
    </script>
</body>
</html>

自定义模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
        .cover {
                position: fixed;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                background-color: rgba(0,0,0,0.3);
                z-index: 99; 
        }
        .close {
                position: fixed;
                height: 100px;
                width: 200px;
                background-color: white;
                top: 50%;
                left: 50%;
                margin-top: -50px;
                margin-left: -100px;
                z-index: 100;
                text-align: center;
        }
        .deep {
                height: 700px;
                width: 1366px;

                background-color: orange;    
        }


        .zindex {
                height: 30px;
                width: 30px;
                background-color: green;
                border-radius: 50%;
                font-size: 6px;
        }
        .hide {
            display: none;
        }
    </style>


</head>
<body>
    <div class="deep">这是底层</div>
    <button class="zindex" id="btn1">弹</button>
    <div class="cover hide"></div>
    <div class="close hide">
        <p>这是最上层</p>
        <button class="zindex" id="btn2">退</button>
    </div>

    <script type="text/javascript">
        let $coverEle = $('.cover')
        let $closeEle = $('.close')
        $('#btn1').on('click', function () {
            $coverEle.removeClass('hide')
            $closeEle.removeClass('hide')
        });
        $('#btn2').on('click', function () {
            $coverEle.addClass('hide')
            $closeEle.addClass('hide')
        })
    </script>
</body>
</html>

多级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <style type="text/css">
        .left {
            float: left;
            background-color: darkgray;
            width: 20%;
            height: 100%;
            position: fixed;
        }
        .title {
            font-size: 36px;
            color: white;
            text-align: center;
        }
        .items {
            border: 1px solid green;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div class="left">
        <div class="menu">
            <div class="title">菜单一
                <div class="items">番茄炒蛋</div>
                <div class="items">青椒肉丝</div>
                <div class="items">拍黄瓜</div>
            </div>
            <div class="title">菜单二
                <div class="items">大盘鸡</div>
                <div class="items">回锅肉</div>
                <div class="items">蟹黄豆花</div>
            </div>
            <div class="title">菜单三
                <div class="items">青菜豆腐汤</div>
                <div class="items">紫菜蛋花汤</div>
                <div class="items">丸子汤</div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $('.title').on('click', function () {
            $('.items').addClass('hide')
            $(this).children().removeClass('hide')
        })
    </script>
</body>
</html>

返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .hide {
            display: none;
        }
        #d2 {
            position: fixed;
            bottom: 100px;
            right: 20px;
            height: 100px;
            width: 100px;
            background-color: green;
            text-align: center;
        }
    </style>
    <script src='jquery-3.5.1.min.js'></script>
</head>
<body>
    <a href="" id="d1"></a>
    <div style="height: 500px;background-color: green;"></div>
    <div style="height: 500px;background-color: yellow;"></div>
    <div style="height: 500px;background-color: orange;"></div>
    <a href="#d1" id="d2" class="hide">回到顶部</a>
    <script>
        $(window).scroll(function () {
            if($(window).scrollTop() > 100){
                $('#d2').removeClass('hide')
            }else{
                $('#d2').addClass('hide')
            }
        })
    </script>
</body>
</html>

自定义登录校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='jquery-3.5.1.min.js'></script>
</head>
<body>
    <div>username:
        <input type="text" name="name" id="name">
        <span style="color: red" id="s1"></span>
    </div>
    <div>password:
        <input type="text" name="pwd" id="pwd">
        <span style="color: red" id="s2"></span>
    </div>
    <button id="d1">提交</button>
    <script>
        $('#d1').click(function(){
            let username = $('#name').val();
            let pwd = $('#pwd').val();
            if(!username){
                $('#s1').text('用户名不能为空！')
            };
            if(!pwd){
                $('#s2').text('密码不能为空！')
            };
        })
        $('input').focus(function (){
            $(this).next().text('')
        })
    </script>
</body>
</html>

input框监控

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='jquery-3.5.1.min.js'></script>
</head>
<body>
    <input type="text" id="d1">
    <script>
        $('#d1').on('input', function (){
            console.log(this.value)
        })
    </script>
</body>
</html>

hover事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='jquery-3.5.1.min.js'></script>
</head>
<body>
    <p id="d1">hahahahahahhahahah</p>
    <script>
        $('#d1').hover(
            function (){
            alert('哈哈哈哈哈哈哈')}, //悬浮
            function (){
            alert('hahhahhhhahahahahha') //移开
            })
    </script>
</body>
</html>

按键事件

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <script>
        $(window).keydown(function (event){
            console.log(event.keyCode)
        })
    </script>
</body>
</html>

阻止后续事件

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <form>
        <span id="d1" style="color: green;"></span>
        <input type="submit" id="d2">
    </form>
    <script>
        $('#d2').click(function (e){
            $('#d1').text('hhahahahahah')
            return false //方式一
            // e.preventDefault() //方式二
        })
    </script>
</body>
</html>

阻止事件冒泡

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <div id="d1">div
        <p id="d2">p
            <span id="d3">
                span
            </span>
        </p>
    </div>
    <script>
        $('#d1').click(function (){
            alert('div')
        })
        $('#d2').click(function (){
            alert('p')
        })
        $('#d3').click(function (e){
            alert('span')
            // return false //方式一
            e.stopPropagation()
        })
    </script>
</body>
</html>

事件委托

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <button>啊哈哈哈哈哈哈哈</button>
    <script>
        $('body').on('click','button',function (){ //将body内所有click事件委托给button触发function
            alert('123')                          //可以影响到动态添加的具备click事件的标签
        })

    </script>
</body>
</html>

页面加载

//第一种
$(document).ready(function (){
    console.log('hahahhahahahahha')
})
//第二种
$(function (){
    console.log('hahahhahahhahah')
})
//第三种
//直接写在body内部最下方

动画效果

$('#d1').hide(3000)
$('#d1').show(3000)
$('#d1').slideUp(3000)
$('#d1').slideDown(3000)
$('#d1').fadeOut(3000)
$('#d1').fadeIn(3000)
$('#d1').fadeTo(3000,0.4)

each方法

$('p').each(function(index,obj){console.log(index,obj)})
$.each([1,2,3],function(index,obj){console.log(index,obj)})

data方法

$('div').data('info','hahahahahha')
$('div').first().data('info') // return 'hahahahahha'
$('div').last().removeData('info')

刷新页面返回顶部

（评论功能已被禁用）

相关博文：

· Django前后端通信

· Django-ORM简介

· jQuery

· jQuery基础

· jQuery

无情的学习机器

搜索

常用链接

随笔分类 (37)

随笔档案 (37)

文章分类 (1)

阅读排行榜

jQuery简介

注意

jQuery简介

引入方法

jQuery语法

筛选器

基本筛选器

属性筛选器

表单筛选器

筛选器方法

操作

类操作

CSS操作

位置操作

尺寸操作

文本操作

获取值操作

属性操作

文档操作

事件

事件绑定

克隆事件

自定义模态框

多级菜单

返回顶部

自定义登录校验

input框监控

hover事件

按键事件

阻止后续事件

阻止事件冒泡

事件委托

页面加载

动画效果

each方法

data方法