Jquery01基础

最新推荐文章于 2024-06-17 23:55:48 发布

Big_Study_Father

最新推荐文章于 2024-06-17 23:55:48 发布

阅读量201

点赞数

分类专栏： jsp jQuery

本文链接：https://blog.csdn.net/Big_Study_Father/article/details/105359097

版权

jsp 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

1. jQuery入口函数；$

<body>
    <div class="temp"></div>
    <script>
        $('div').hide();
    </script>

    <!--1.jquery 入口函数 等页面加载完了再执行juqery代码  -->
    <script>
        $(document).ready(function(){
            // $('div')将其包装成jquery对象，就可调用相应方法。
            $('div').show();
        });
        //两种方式效果相同
        $(function(){
            $('div').show();
        })
    </script>

    <!--2. jquery顶级对象$,也就是jquery的别名 -->
    <script>
        $(function(){
            alert(11);
        });
        //两种方式效果相同
        jQuery(function(){
            alert(22);
        });
    </script>

    <!--3. jquery对象和DOM对象 -->
    <script>
        //1).原生js获取的对象即DOM对象
        var myDiv = document.querySelector('div');
        console.log(myDiv);
        //2).jQuery对象，jQuery方式获取的对象
        $('div');
    </script>

</body>

2. jQuery对象与DOM对象;两种对象的转换

    <div class="temp"></div>
    <div class="temp"></div>

    <!--3. jquery对象和DOM对象 -->
    <script>
        //1).原生js获取的对象即DOM对象
        var myDiv = document.querySelector('div');
        console.log(myDiv);
        //2).jQuery对象，jQuery方式获取的对象
        console.log($('div'));
        
        //3). 两种对象方法不可混用
        myDiv.style.backgroundColor='red';
    </script>

    <video src="mov.mp4"></video>

    <!--4. 两种对象的相互转换  -->
    <script>
        //1). DOM转换为jquery对象
        var myVideo=document.querySelector('video');
        //$(myVideo).play();转换为jquery对象后不可调用该方法
        
        //2). 想要jquery对象使用原生js的方法，转换
        $('video')[0];
        $('video').get(0).play();
        $('div').get(1).style.backgroundColor('orange');
    </script>

3. jquery基础选择器；jquery层级选择器;jquery筛选选择器

名称	用法	描述
ID选择器	$(’"#id")	获取指定ID的元素
全选选择器	$(’*’)	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$(“div”)	获取同一类标签元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素

名称	用法	描述
子代选择器	$(“ul>li”)	使用>号，只获取亲儿子层级元素
后代选择器	$(“ul li”)	获取所有后代元素

语法	用法	描述
:[first,last]	$(‘li:[first,last]’)	获取第一个元素
:eq(index)	$(“li:eq(2)”)	第三个li元素
:[even,odd]	$(“li:[eve,odd]”)	序号为奇/偶数的元素

语法	用法	说明
parent	$(“li”).parent();	获取父级元素
children	$(“li”).children();	相当于$(“ul>li”)获取子级元素
find(selector)	$(“ul”).find("")	相当于$(“ul li”)后代选择器
siblings(selector)	$(".first").siblings(“li”);	查找兄弟节点
nextAll([expr])	$(.first).nextAll()	当前元素之后的元素
prevtAll([expr])	$(.last).prevAll()	当前元素之前的元素
hasClass(class)	$(‘div’).hasClass(“protected”)	检查是否含有某个特定的类，返回true
eq(index)	$(“li”).eq(2)	$(“li”).eq(2)

4. 隐式迭代；选择器实例

    <div class="navi">我是navi div</div>

    <p>我是p</p>
    <ol>
        <li>我是ol的li</li>
        <li id="ame">我是ol的li</li>
        <li>我是ol的li</li>
    </ol>
    <ul>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
    </ul>
    <script>
        var li0=document.getElementById('ame');
        li0.focus();
        
        $(function(){
            $(".navi").hide();
        });

        console.log($("ul li").text());
    </script>

    <div>surprise</div>
    <div>surprise</div>
    <div>surprise</div>
    <div>surprise</div>

    <script>
        //隐式迭代
        $('div').css('background','pink');
        $('div').css('width','100px');
    </script>

    <ul>
        <li>选择奇数</li>
        <li>选择奇数</li>
        <li>选择奇数</li>
        <li>选择奇数</li>
        <li>选择奇数</li>
        <li>选择奇数</li>

    </ul>
    <ol>
        <li>随机选择</li>
        <li>随机选择</li>
        <li>随机选择</li>
        <li>随机选择</li>
        <li>随机选择</li>
        <li>随机选择</li>
    </ol>

    <script>

        $("ul li:odd").css("color","blue");
        $("ul li:odd").css("font-size","large");
        console.log($("ul li:odd"));

        $("ol li:eq(2)").css('fontSize','29px');
        $("ol li:last").css('color','red');
    </script>

    <div class="gf">
        爷爷
        <div class="father">
        爹<div class="son">儿子
            <p>ame</p>
            <span>bmcCanFind</span>
        </div>
            <div class="son">brother</div>

    </div>
</div>

    <script>
        //parent 子元素继承了父元素的属性
        $(".father").parent().css("color","blue");
        $(".son").children().css("color","red");
        $(".son").find('span').css("color","orange");
        
    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
        <button>bt1</button>
        <button>bt1</button>
        <button>bt1</button>
        <button>bt1</button>
        <button>bt1</button>
        <button>bt1</button>
        <button>bt1</button>
    <script >
        $(function(){
            $("button").click(function(){
                // 选择自己
                $(this).css("background","red");
                $(this).siblings('button').css('background','blue');
            })
        })
    </script>

</body>
</html>

5.下拉菜单实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            /*  */
            list-style-type: none;
        }
        a{
            /*  */
            text-decoration: none;
            font-size: 14px;
        }

        .nav{
            margin: 100px;
        }

        .nav>li{
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a{
            display: block;
            width: 100%;
        /*  */
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        .nav>li>a:hover{
            background-color: #eee;
        }
        .nav ul{
            display: none;
            position: absolute;
            top:41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC58;
            border-right: 1px solid #FECC58;
        }

        .nav ul li{
            border-bottom: 1px solid #FECC58;
        }
        .nav ul li a:hover{
            background-color:#FFF5DA;
        }




    </style>

</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>

        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>

            </ul>
        </li>

    </ul>

    <script>
        $(function(){
            //子代中的li 鼠经过上调用函数
            $(".nav>li").mouseover(function(){
                //this jQuery中的当前元素
                $(this).children('ul').show();
            })

            $(".nav>li").mouseleave(function(){
                $(this).children('ul').hide();
            })

        });
    </script>

</body>
</html>

Big_Study_Father

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery01基础

1. jQuery入口函数；$<body> <div class="temp"></div> <script> $('div').hide(); </script>  <scrip...
复制链接

扫一扫