JQuery 选择器 + 事件

最新推荐文章于 2023-03-28 20:18:47 发布

梦さん

最新推荐文章于 2023-03-28 20:18:47 发布

阅读量319

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_45041558/article/details/125073351

版权

1. JQuery选择器

id选择器 $(“#myDiv”)
标签选择器 $(“div”)
类选择器 $(“.myClass”)
全选择器 $(“*”)
并集选择器 $(“selector1,selector2,selectorN”)
后代选择器 $(“div span a”)
属性选择器 $(‘input[type=submit]’) 选中input 元素属性type为submit
$(“form > input”) 在给定的父元素下匹配所有的子元素,不包含孙辈
$(“label + input”) 匹配所有紧接在 label 元素后的 input 元素
$(“form ~ input”) 找到所有与表单同辈的 input 元素

后三个选择器的代码使用

<!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>1:jquery选择器</title>
</head>
<body>
    <div class="container">
        <span>段落之前的span</span>
        <p id="pra"><span>段落内部的span</span></p>
        <span>段落之后紧邻的span</span>
        <span>段落之后不紧邻的span</span>
    </div>
    <!-- 
        首先引入jQuery依赖文件,必须先引依赖,再书写我们的 
        dist:distribution的简写,表示发售版,或者 市售版
    -->
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script>
        /* 
            #jQuery元素与js中的节点,是同一种元素吗?如果不是为什么?两者如何进行转换 


            <span id="etoak">xxxx</span>

            js:
                let nodeSp = document.getElementById('etoak')
                <span id="etoak">xxxx</span>

            jQuery:
                let $sp = $('span#etoak') 
                [<span id="etoak">xxxx</span>]

                nodeSp !== $sp

            jQuery元素是对js中各种节点的一个轻度的封装,jQuery元素不能使用js中
            所有 函数 属性 方法等,同理,js元素也不能使用jQuery的各种方法等
            例如
                nodeSp.innerHTML = xxxx
                $sp.html(xxxx)

            两者如何进行转换
                jQuery  => js
                $sp[0]
                $sp.get(0)

                js  => jQuery
                $(nodeSp)
            --------------------------------------------------------------
            jQuery选择器
                $(sel):这个sel就表示css选择器

                1:  $('tagName')
                    根据标签名获取多个jquery元素
                2:  $('.class')
                    根据class获取元素
                3:  $('#id')
                    根据id获取元素
                4:  $('tagName.class')
                    $('tagName#id')
                    获取具有特定class或者id的固定的标签的元素
                5:  $('sel1,sel2,selN')
                    只要符合其中任意一个就可以成功选取
                6:  $('sel1 sel2 selN')
                    根据左祖先右后代的层级关系获取最右侧的元素
                7:  $('*')
                    获取所有元素

                8:  $('sel1 > sel2')
                    获取特定元素的子元素,注意只能获取子元素,不能获取孙辈元素

                js渲染样式
                    xxx.style.样式名 = 样式值
                jQuery渲染样式
                    css('样式名','样式值')
                    css({
                        样式名:样式值,
                        样式名:样式值,
                        样式名:样式值,
                        样式名:样式值,
                    })
                    样式名必须使用小驼峰格式
        */
        $('div.container > span').css({
            backgroundColor:'coral',
            color:'whitesmoke',
        })
        /* 
                9:  $('sel1 + sel2')
                    以下三个条件缺一不可
                    a:向下选取
                    b:必须紧邻
                    c:互为兄弟
        */
        $('p#pra + span').css('border','solid 2px navy')
        /* 
                10: $('sel1 ~ sel2')
                    以下两个条件缺一不可
                    a:向下选取
                    c:互为兄弟
        */
        $('p#pra ~ span').css('text-decoration','underline')
    </script>
</body>
</html>

2.JQuery 事件

mouseover + mouseout 当鼠标移入和移出时触发事件
mousedown + mouseup 当鼠标按钮被按下或者松开时触发事件
click + dbclick 当鼠标单击或者双击时触发事件
mousemover 当鼠标移动时触发事件

<!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>2:jquery事件</title>
    <style>
        .tb,tr,td{
            border: solid 2px coral;
        }
        .tb{
            width: 200px;
            border-collapse: collapse;
        }
        #test{
            width:200px;
            height:200px;
            border:solid 1px crimson;
        }
        .red{
            background-color: crimson;
        }
        .blue{
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <button>点我试试!</button>

    <input type="button" value="添加一行">

    <table class="tb">
        <tr>
            <td>默认一行</td>
        </tr>
    </table>

    <div id="test">
        测试域
    </div>

    <ul class="myul">
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
    </ul>


    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script>
        /* 
            # jQuery四大核心函数
            所谓四大核心函数其实就是指jQuery的四种书写方式

                1:  $(sel)
                    内部书写选择器,用来从全文中获取一个或者多个jQuery元素
                    $('span#etoak')

                2:  $(html)
                    内部书写html标签,用来搭配一些方法使用
                    $('<span>xxxx</span>')

                3:  $(js节点)
                    用来进行转换,可以将js中的元素转换为jQuery元素
                    
                    $(document)
                    $(location)

                4:  $(document).ready()
                    表示全文加载无误,非常类似js中的 window.onload,但是全文可以
                    书写多个,从上往下执行, window.onload只能书写一个
                    一般来说在书写jQuery时,好的书写方式,如果涉及绑定事件,则在最外侧
                    书写ready(),其它所有的函数,都放置在ready(),表示全文无误后执行

                    $(document).ready(function(){

                        xxxxxx
                    })
                ----------------------------------------------------
        */
        $(document).ready(function(){
            /* 
                1:给元素绑定多个事件

                    sel.on('事件1 事件2 事件N',function(){
                        只要满足其中任意一个事件,则执行空参回调
                    })

                $(':contains(text)'):拿取包含特定文本的元素
                注意 jQuery的事件就是js的事件去掉on前缀
                mouseout:鼠标滑出
                mouseover:鼠标滑过
            */
            $('button:contains(点我)').on('click mouseout',function(){
                /* 
                    $(this):就表示通过选择器已经获取的元素列表
                    sel.attr('属性名',属性值)
                    将元素的某个属性名更改为属性值
                */
                $(this).attr('disabled',true)
            })

            /* 
                2:给元素绑定特定事件

                    sel.事件(function(){

                    })

                dblclick():双击
            */
            $(document).dblclick(function(){
                console.log('--------------------------')
            })

            $('input[type=button]').click(function(){
                /* 
                    A与B毫无关系,如果
                    A.append(B)
                    则A为父元素B为子元素,B追加在A的子元素之后
                    B.appendTo(A) 效果同上
                */
                $('.tb').append($('<tr><td>添加的一行</td></tr>'))
            })

            /* 
                3:      sel.hover(
                            function(){
                                鼠标滑过执行此函数
                            },
                            function(){
                                鼠标滑出执行此函数
                            },
                        )
            */
            $('div#test').hover(
                function(){
                    /* 
                        addClass():给元素添加class属性
                        removeClass():给元素删除class属性
                        toggleClass():如果元素存在class属性则删除,否则添加
                        id不能随意增删
                    */
                    $(this).removeClass().addClass('red')
                },
                function(){
                    $(this).removeClass().addClass('blue')
                }
            )

            /* 
                4:  迭代
                    sel.each(function(index,alias){
                        index:索引
                        alias:别名
                    })
            */
            $('.myul li').each(function(index){
                if(index===3){
                    $(this).css('background-color','coral')
                }
            })

        })
    </script>
</body>
</html>