前端03-jquery

已于 2022-04-25 18:24:42 修改
阅读量74 收藏
点赞数
文章标签： 前端
于 2022-04-19 23:49:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30774825/article/details/124271915
版权

jquery 选择器

<!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/jquery-1.12.4.min.js"></script>
    <!-- <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script> -->
    <script>
        // $(function(){  //redy函数等body里的标签加载完完就调用,window.onload 是在body里面的标签和资源都加载完再执行
        //     var $div=$('#box')
        //     $div.html('hello world')
        // })

        //jquery选择器
        $(function (){
            var $p=$('.pbox')
            $p.html('你好啊,类选择器')
            
            $('#box').html('你好啊,id选择器')

            alert($('li a').html())     //html里面没有参数,代表获取内容,有参数代表设置内容
            $('li a').html('哈哈哈,疯了')  //层级选择器

        })
        //选择集   选择的是一个集合,而不是某个标签
    </script>
</head>
<body>
    <div id="box"></div>
    <p class="pbox"></p>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li><a href="">你好啊,跳转链接</a></li>
    </ul>
</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/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('div').has('p').html('哈哈哈')
            $('div').not('.box').html('啧啧啧')
            $('div').eq(2).html('啦啦啦啦')
        })
    </script>
</head>
<body>
    <div>item 1</div>
    <div class="box">item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div><p>hahaha</p></div>
</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/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('.box').parent().siblings().html('hahhahah')
        })
        //查看标签是否获取到   >0
        console.log($('.box').length)
    </script>
</head>
<body>
    <div>item 1</div>
    <div>item 2</div>
    <div>
        <div class="box">
            item
            <p>这是我们的<span>span标签</span></p>
            <p class="pbox">hahaha</p>
        </div>
    </div>
    <div>item 4</div>
    <div>item 5</div>
</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只有一个作用 -->
    <script src="./jquery/jquery-1.12.4.min.js"></script>   
    <script>
        /* css() 一个参数是get   多个参数是set*/
        $(function(){
            $('li').click(function(){
                // $(this).css('background','red')
                $(this).css({'background':'red','font-size':'30px'})
            })
            $('li').mousemove(function(){
                $(this).css({'background':'white',fontSize:'16px'})
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
    </ul>
</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/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('button').click(function(){
                // $('.box').addClass('divbox')   //增加额外样式
                // $('box').removeClass('box')    //移除样式
                $('.box').toggleClass('divbox')   //先判断是否有该样式,没有则添加,有则移除
            })
        })
    </script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        .divbox {
            font-size: 32px;
            color:#666fab;

        }
    </style>
</head>
<body>
    <div class="box">
        哈哈哈
    </div>
    <button>按钮</button>
</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>
    <style>
        body{
            font-family: '雅黑';
        }
        body,ul {
            margin: 0px;
            padding: 0px;
        }
        ul {
            list-style: none;   /* 清除列表前面的style .*/
        }
        .menu {
            width: 200px;
            margin: 20px auto 0;
        }
        .menu .level1,.menu li ul a {
            display: block; 
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            background-color: #3366cc;
            color: #fff;
            font-size: 16px;
            text-indent: 10px;   
        }
        .menu li ul a {
            background-color: #336677;
        }

   
        .menu li ul {
            display:none;
        }
        .menu li ul.current{
            display: block;
        }
        .menu li ul li a:hover{
            background-color: #f6b544;
        } 
    </style>
    <script src="./jquery/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('.level1').click(function(){
                $(this).next().slideToggle().parent().siblings().children('ul').slideUp()
            })
        })
    </script>
</head>
<body>
        <ul class="menu">
            <li>
                <a href="#" class='level1'>手机</a>
                <ul>
                    <li><a href="#">iphone x 256g</a></li>
                    <li><a href="#">红米4A 全网通</a></li>
                    <li><a href="#">华为mete10</a></li>
                    <li><a href="#">vivo x20A</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class='level1'>笔记本</a>
                <ul class="current">
                    <li><a href="#">macbook pro</a></li>
                    <li><a href="#">ThinkPad</a></li>
                    <li><a href="#">外星人</a></li>
                    <li><a href="#">惠普</a></li>
                </ul></li>
            <li>
                <a href="#" class='level1'>电视</a>
                <ul>
                    <li><a href="#">海信</a></li>
                    <li><a href="#">长虹</a></li>
                    <li><a href="#">tcl</a></li>
                </ul></li> 
            <li>
                <a href="#" class='level1'>化妆品</a>
                <ul>
                    <li><a href="#">兰芝</a></li>
                    <li><a href="#">娇兰</a></li>
                    <li><a href="#">兰蔻</a></li>
                </ul></li>
        </ul>
</body>
</html>

选项卡的制作

点到哪个按钮哪个按钮变黄色,其他颜色为灰色,里面的字体随之改变

在这里插入图片描述
第一种–jquery:

<!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/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('input').click(function(){
            //点谁添加谁,其他去除
               $(this).addClass('active').siblings().removeClass('active')
               
               $('.tab_con div').eq($(this).index()).addClass('current').siblings().removeClass('current')


            })
        })
    </script>
    <style>
        .tab_cons {
            width: 500px;
            height: 350px;
            margin: 50px auto 0;
            background-color: gold;
        }
        .tab_btns input{
            width: 60px;
            height: 30px;
            background-color: #ddd;
            border: 0;
            outline: none;    
        }
        .tab_btns {
            height: 30px;
        }
        .tab_btns .active{
            background: gold;
        }
        .tab_con {
            height: 350px;
            background: gold;
        }
        .tab_con div {
            height: 300px;
            line-height: 300px;
            text-align: center;
            display: none;
            font-size: 30px;
        }
        .tab_con .current {
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab_cons">
        <div class="tab_btns">
            <input type="button" value="按钮一" class="active">
            <input type="button" value="按钮二">
            <input type="button" value="按钮三">
        </div>
        <div class="tab_con">
            <div >按钮一对应的内容</div>
            <div class="current">按钮二对应的内容</div>
            <div>按钮三对应的内容</div>
        </div>
    </div>
</body>
</html>

第二种–vue:

<!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/vue.js"></script>
    <script>
       window.onload =function(){
           new Vue({
                el:'#app',
                data:{
                    num:0   //num代表点击哪个按钮
                }
           })
       }
    </script>
    <style>
        .tab_cons {
            width: 500px;
            height: 350px;
            margin: 50px auto 0;
            background-color: gold;
        }
        .tab_btns input{
            width: 60px;
            height: 30px;
            background-color: #ddd;
            border: 0;
            outline: none;    
        }
        .tab_btns {
            height: 30px;
        }
        .tab_btns .active{
            background: gold;
        }
        .tab_con {
            height: 350px;
            background: gold;
        }
        .tab_con div {
            height: 300px;
            line-height: 300px;
            text-align: center;
            display: none;
            font-size: 30px;
        }
        .tab_con .current {
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="tab_cons">
            <div class="tab_btns">
                <!-- 将num值绑定到点击事件     三目表达式必须是在数组里[ 判断语句? 对的: 错的]-->
                <input @click='num=0' type="button" value="按钮一" :class="[num ==0? 'active' : '']">
                <input @click='num=1' type="button" value="按钮二" :class="[num ==1? 'active' : '']">
                <input @click='num=2' type="button" value="按钮三" :class="[num ==2? 'active' : '']">
            </div>
            <div class="tab_con">
                <div :class="[num ==0? 'current' : '']">按钮一对应的内容</div>
                <div :class="[num ==1? 'current' : '']">按钮二对应的内容</div>
                <div :class="[num ==2? 'current' : '']">按钮三对应的内容</div>
            </div>
        </div>
    </div>
    
</body>
</html>

jquery动画

在这里插入图片描述

<!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/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('.box').animate({'width':'500px'},10000,'swing',function(){
                $('.box').animate({'height':'500px'},5000,'linear',function(){
                    alert('所有的都走完了')
                })
            })
    
        })
    </script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #666bbb;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
司*琦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VMWare VMNet 8的配置使用详解
09-30
主要介绍了VMWare VMNet 8的配置使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VMware虚拟机配置固定IP
weixin_40283268的博客
10-12 5232
打开“控制面板\网络和 Internet\网络连接”的“更改适配器设置”，发现VMnet1和VMnet8的网络适配器没有了。打开“控制面板”–》“网络和 Internet”–》“网络和共享中心”，点击“更改适配器设置”。右击“VMware Network Adapter for VMnet8”，点击“属性”。选择“共享”，选择“VMnet8”对应的网络连接，这里对应“以太网5”.右击当前使用的网络，点击“属性”，再次共享网络给VMnet8。选择“VMnet8”，点击“更改设置”，调整子网IP地址。
Centos7 虚拟机配置静态IP（详细步骤，图文）
qq_42339115的博客
06-15 1万+
centos7 虚拟机配置静态IP 前言 ： 需安装好虚拟机，若未安装请移步：安装centos7虚拟机详细步骤. 配置步骤: 1. 进入主界面 2. 右键，然后选择打开终端 3. 在终端中输入 su root 然后回车，输入密码 4. 查看ip： 在终端中输入 ip addr 5. 在VMware虚拟机左上角任务栏点击编辑（E），点击虚拟网络编辑器（N）,点击类型是NAT模式那一栏（第二张图蓝色那一栏），记住最下面的ip地址（红圈圈起来的） 6. 进入/etc/sysconfig/netw
虚拟机网络配置最佳实践
最新发布
Bisikl的博客
07-15 500
每块网卡MAC地址都不一样，这里配置的值要与 ip addr 命令查看到的ens33 信息中。点击 VMware Network Adapter VMnet8 设置虚拟网卡。link/ether xx:xx:xx:xx:xx:xx一致。登录 Linux 系统后，进入网卡配置文件所在目录。其他信息可按上面文档中进行配置。
VMware虚拟机网络配置详解
GSON的博客
11-25 1974
打开，我们可以在选项栏的“编辑”下的“虚拟网络编辑器”中看到，那么这些都是有什么作用呢？其实，我们现在看到的VMnet0表示的是用于桥接模式下的虚拟交换机；VMnet1表示的是用于仅主机模式下的虚拟交换机；VMnet8表示的是用于NAT模式下的虚拟交换机。同时，在主机上对应的有VMware Network Adapter VMnet1和VMware Network Adapter VMnet8两块虚拟网卡，它们分别作用于仅主机模式与NAT模式下。
VMware+CentOS 7 静态IP设置方法（保姆级教程，建议收藏）
Java框架、并发编程、分布式、微服务、Redis、HarmonyOS、中间件等技术
07-10 3862
VMware中的虚拟机每次重启IP都会变化，为了解决这个问题需要设置静态IP。 ​ 一、查看虚拟网址信息 ipconfig -all 在VMware安装的宿主机查看网址信息，发现多出如下两个虚拟网卡 以太网适配器 VMware Network Adapter VMnet1 以太网适配器 VMware Network Adapter VMnet8 二、将虚拟机中的系统静态IP绑定到VMnet8上 1、获取VMnet8虚拟网卡的网段 由于IP一直变化，我们想固定IP，可以通过将虚拟机中
VMware 配置虚拟机网络
weisian的博客
03-15 3583
初次完成时，虚拟机的网络服务虽然已经启动，但是和宿主机的网络还没有打通，所以还需要经过以下的步骤，将宿主机和虚拟机的网络打通。（1）、下载和安装VMware-Workstation-Pro.exe软件，推荐16.0版本。（3）、VM创建一个虚拟机，并且使用本地已下载centOS7镜像完成一个环境的搭建。（2）、下载centOS7镜像，可以在阿里云下载。（2）、网络选择NAT共享模式，之后确定即可。2、通过VM软件配置网络。（1）、点击编辑虚拟机。
虚拟机net模式设置固定ip
腾蛟起凤吕学士
12-30 2700
虚拟机net模式设置固定ip 前言： 自己装的虚拟机，通过net模式可以固定ip就像是一台服务器一样，不过只限于主机和虚拟机之间。当主机有网时，虚拟机就可以联网。 这里记录一下配置过程。 环境：VMware15 + centOS7 一、设置主机的vMnet8 1. 开始 -> 设置 -> 网络和internet -> 更改适配器选项 net模式用的是vMnet8网卡，有些人的电脑打开可能没有这个，移除重装即可解决 解决本地电脑没有vMnet8参考： 打开VM
VMware配置VMnet8网络
weixin_39272255的博客
11-01 9463
一、简介 1、NAT模式（VMnet8）可以实现虚拟机之间、虚拟机和主机之间以及虚拟机和外部的网络通信； 2、虚拟机的IP只需要配置NAT网段中的IP，访问外部host可以通过宿主机IP访问。它不需要有外部网络独立的IP（即物理交换机网段中的IP）； 3、虚拟机的网络配置确定后，就可以很少变动。因为NAT配置不变，宿主机连接的网络变化，不影响虚拟机。 二、配置步骤 1、关闭主机的防火墙（好像可以不用关闭） 2、关闭虚拟机的防火墙 切换root用户，输入以下命令 centos7使用的防火墙不是iptable
vmware配置net8虚拟网络
dongyuguoai的博客
11-09 1万+
一、配置网络共享机制 1. 打开网络共享中心（我的物理机连的wifi） 2. 点击“无线网络连接（xxx）”-“属性”-“共享”-勾选“允许网络其他用户通过此计算机的Internet连接来连接”-下拉菜单选“VMware Network Adapter VNnet8”-“确定” 二、配置物理机的NET8网络属性 1. 打开网络共享中心（我的物理机连的wifi） 2. 查看自己...
VMware VMnet8 模式共享主机网络配置静态 IP 和 DNS
热门推荐
好记性不如烂笔头
08-08 2万+
一、简介 NAT网络模式： 1. 宿主机可以看做一个路由器，虚拟机通过宿主机的网络来访问  Internet； 2. 可以安装多台虚拟机，组成一个小型局域网，例如：搭建 hadoop 集群、分布式服务。 二、配置 1. VMnet8 设置静态 IP 2. Centos 网络设配器为 NAT 模式 3. VMware 虚拟网络设置 4. 启动虚拟机 5. 修改网络设置 ...
为Vmnet8配置一个ip地址
二哈
04-13 6845
1. 打开vmware的虚拟网络编辑器，更改设置之后好可以看到：（记录下子网地址） 2. 打开Windows上的系统设置-更改网络适配器选项，右键属性： 找到Internet协议版本（TCP/IPV4)： 修改为使用下面的ip地址，设置的时候使用虚拟网络编辑器中的子网地址中的任意一个ip地址 ...
虚拟机中vmnet1和vmnet8
winter_sleepers的博客
08-09 1万+
1.为什么安装虚拟机后，会向本地连接里添加两个虚拟连接（VMnet1和VMnet8），这两个连接有分别什么作用，之间有什么区别吗？2.为什么虚拟机ping宿主机能ping通，但是宿主机ping虚拟机不通（我的是VMware ACE，使用的是Nat连接模式)，这其间需要设置吗？或是本就ping不通。3.虚拟机中的Ubuntu版的Linux系统怎么和宿主机win XP系统共享文件。谢谢热心的朋友解答一
VMware 网卡VMnet0、VMnet1、VMnet8的区别与配置
基于Oracle11G
11-07 1万+
VMware 网卡VMnet0、VMnet1、VMnet8的区别与配置
win7修改VMware Network Adapter VMnet8为静态ip地址
会飞的鱼
02-02 5546
win7上面用虚拟机学习大数据，有时候本地VMware虚拟网卡的ip会突然被重新分配。导致SecureCRT连接到虚拟服务器失败。 突然就遇到了，这里被重新配置了IPv4地址，导致原来SecureCRT的session连接失败了。 所以要给这个虚拟网卡配一个静态ip。 右键电脑底部网络图标，打开网络与共享中心-》更改适配器设置找到这个虚拟网卡。 右键这个虚拟网卡-》选择属性打开 DNS服务器...
VMware虚拟机中配置静态IP
qq_47283939的博客
08-01 1万+
vmware虚拟机中配置静态ip
vm虚拟机NAT网络模式静态IP的设置
S2smple的博客
11-01 5027
vm虚拟机NAT网络模式静态IP的设置
vmware虚拟机网络模式-NAT模式
weixin_34133829的博客
03-31 2987
本文纯属自己保留，以供学习。望原作者勿怪。 原文地址：http://www.linuxidc.com/Linux/2016-09/135521p2.htm 刚刚我们说到，如果你的网络ip资源紧缺，但是你又希望你的虚拟机能够联网，这时候NAT模式是最好的选择。NAT模式借助虚拟NAT设备和虚拟DHCP服务器，使得虚拟机可以联网。其网络结构如下图所示： 在NAT模式中，主机网卡直接与虚...
虚拟机WMware NAT方式共享物理主机IP地址上网设置方式
banlei1559的博客
04-01 810
物理主机：通常也叫作宿主机，是安装 VMware 软件的主机。 虚拟机：是运行在 VMware 软件上的主机。 虚拟机网卡认识： VMnet0：虚拟机桥接模式的网卡。VMnet1：虚拟机仅主机模式的网卡。VMnet8：虚拟机 NAT 模式的网卡，是VMware为物理主机分配的虚拟网卡，物理主机通过这块 VMnet8 网卡与虚拟机操作系统进行通信。 如下图所示： 第一步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值