前端-常用jquery基础篇

时间：2021-03-10 12:55:23 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：on() 开发 name code jquery基础 color 属性 rgba write

一。jquery简介

jquery是基于javascript类库的框架，它里面提供了许多javascript类库，和一些css样式表的封装，使用起来比较方便，简化了用户与浏览器的交互，提高了系统的性能和开发效率。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

二。jquery 中标签获取

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    jquery下载地址：http://code.jquery.com/  在线使用手册：https://www.runoob.com/manual/jquery/-->
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery_test01.js"></script>
</head>
<body>
<div class="box" id="box1">box1
    <span>00000</span>
</div>

<div class="box2" id="box2">box2</div>

<a href="http://www.baidu.com">百度</a>

<div class="box3">box3
    <ul>
        <li>1000000</li>
        <li>2000000</li>
        <li>3000000</li>
        <li name="python">111</li>
        <li name="java">222</li>
        <li name="c++">333</li>
        <li name="log">444</li>
        <li name="js">555</li>
        <div class="aaa">
            <a href="http://www.baidu.com">百度</a>
        </div>
    </ul>
</div>
</body>
</html>

使用js文档操作jquery：

js文档内容：

//添加"$(function(){})"这个函数中的js代码会等到页面加载完毕之后才会去执行
$(function () {
    //jquery 通过id去选择元素
    // var box1 = $("#box1");
    //获取节点的文本内容
    //console.log(box1.text());
    //通过属性过滤
    // var lis = $(".box3 li[name=python]");
    // console.log(lis.text())


    //选择父节点、子节点、兄弟节点
　　//目前标签位置
    // var lis = $(".box3 li[name=python]");
    //获取该目前标签节点的父节点标签
    // console.log(lis.parent())

    //获取目前标签节点的子节点标签
    // console.log($(".box3").children())

    //获取兄弟节点标签
    // console.log($(".box3 li[name=python]").siblings());

    //获取前一个兄弟节点
    // console.log($(".box3 li[name=python]").prev());

    //获取他前面所有的兄弟节点
    // console.log($(".box3 li[name=python]").prevAll());

    //获取他后面一个的兄弟节点
    // console.log($(".box3 li[name=python]").next());

    //获取他后面所有的兄弟节点
    // console.log($(".box3 li[name=python]").nextAll());


    //从选择的标签中再选择；与find联用 查找box3下div标签下的a标签的内容
    // console.log($(".box3").find($("a")).text());


    //选择，过滤选择；查找包含a标签的div
    // var aaa = $("div").has("a");
    // console.log(aaa)

    //选择过滤；通过div标签查找类属性不为box的标签
    // console.log($("div").not(".box"))

    //选择过滤；通过div标签查找类属性为box的标签
    // console.log($("div").filter(".box"))

    //选择第4个div元素
    // console.log($("div").eq(3).text());


});

三。jqery操控CSS

直接再html写js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery操控css</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<!--    js代码，调整了样式-->
    <style type="text/css">
        .box3{
            height: 500px;
            width: 300px;
            background: aqua;
        }
        .box4{
            height: 500px;
            width: 300px;
            background: rebeccapurple;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="box1">box1</div>
<br>
<div class="box2">box2</div>
<br>
<div class="box3 hide">box3</div>
<br>
<div class="box4">box4</div>
<input id="btn" type="button" value="点击">
<script type="text/javascript">
    //修改box1的字体颜色为红色
    $(".box1").css("color","red")
    //修改box2的字体为28px,宽为100px,高为300px，背景颜色为 浅蓝色
    $(".box2").css({
        fontSize:"28px",
        width:"100px",
        height:"300px",
        background:"cyan"
    })
    //设置box3的展示属性：在点击“点击”按钮时隐藏box3
     $("#btn").click(function () {
        //addClass新增一个类属性方法
        // $(".box3").addClass("hide");
         //移除类属性方法,
        // $(".box3").removeClass("hide");

         //两样式之间做切换:有这个样式就添加，没有这个样式就移除，相当于展示与隐藏密码的样式。
         // $(".box3").toggleClass("hide")


         //用于隐藏的函数
         //快速隐藏
         // $(".box4").hide()
         //慢慢的消失
         // $(".box4").fadeOut()
         //慢慢从底部收回去
         // $(".box4").slideUp()
         //快速的反复隐藏及展示
         // $(".box4").toggle()
         //慢慢的(从上往下，从下往上)反复隐藏及展示
         // $(".box4").slideToggle()
         //慢慢的(慢慢的消失)反复隐藏及展示
         // $(".box4").fadeToggle()
     })

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

四。jqery,层级操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <style type="text/css">
        /*鼠标移动至H3时增加背景颜色*/
        .left_menu_list h3:hover{
            background: darkorange;
        }
        .left_menu_list a:hover{
            background: aqua;
        }
    </style>
</head>
<body>
<!--侧边菜单-->
<div class="left_title">
    <div class="left_title">
        菜单列表
    </div>
    <div class="left_menu_list">
        <ul>
            <li>
                <h3>接口管理</h3>
                <ul>
                    <li><a href="">添加接口</a></li>
                    <li><a href="">接口列表</a></li>
                </ul>
            </li>
            <li>
                <h3>接口管理</h3>
                <ul>
                    <li><a href="">添加接口</a></li>
                    <li><a href="">接口列表</a></li>
                </ul>
            </li>
            <li>
                <h3>接口管理</h3>
                <ul>
                    <li><a href="">添加接口</a></li>
                    <li><a href="">接口列表</a></li>
                </ul>
            </li>
            <li>
                <h6>接口管理</h6>
                <ul>
                    <li><a href="">添加接口</a></li>
                    <li><a href="">接口列表</a></li>
                </ul>
            </li>
            <li>
                <h7>接口管理</h7>
                <ul>
                    <li><a href="">添加接口</a></li>
                    <li><a href="">接口列表</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--写在html中-->
<script type="text/javascript">
    h3s= $(".left_menu_list h3");
    console.log(h3s)
    //当点击外层菜单标签时，
    h3s.click(function () {
        //点击h3标签时，隐藏掉下一个兄弟节点
        $(this).next().slideToggle();
        //点中后设置颜色,没实现
        $(this).css({
            background:"6BB9FF"
        })
    })

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

五。jqery,输入框,提交、新增、删除操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<!--案例一-->
<form action="" method="post">
    账号：<input type="text" name="user" id="user">
    <br>
    密码：<input type="password" name="pwd" id="pwd">
    <input type="button" id="btn">
</form>

<!--案例二,添加新的HTML内容-->
<!--<form action="" method="post">-->
<!--    <input type="button" id="btn" value="添加输入框">-->
<!--    <input type="button" id="del" value="删除输入框">-->
<!--    <br>-->
<!--    <div class="box1">-->
<!--        <div>-->
<!--        参数：<input type="text" name="user" id="user">-->
<!--        值：<input type="text" name="pwd" id="pwd">-->
<!--        </div>-->

<!--    </div>-->
<!--</form>-->
<script>
    // 案例一，提交账号密码，若以from表单方式直接提交会在入参中附带明文的账号密码，通过添加点击事件的方式获取进行加密提交可以更好的保护入参：
    $("#btn").click(function () {
        var user= $("#user").val()
        var pwd= $("#pwd").val()
        console.log(user,pwd)

    })

    // 案例二,新增，点击“添加输入框”添加一个输入框
    // $("#btn").click(function () {
    //     var aStr = "<div>\n" +
    //         "        参数：<input type=\"text\" name=\"user\" id=\"user\">\n" +
    //         "        值：<input type=\"text\" name=\"pwd\" id=\"pwd\">\n" +
    //         "        </div>";
    //     $(".box1").append(aStr)
    //
    // })
    //
    // //删除，若输入框为1的时候不删除
    // $("#del").click(function () {
    //     var box1 = $(".box1").children()
    //     var box1len = $("div").has("input").length
    //     // console.log(box1len)
    //     if(box1len == 2){
    //
    //     }else {
    //         box1.eq(-1).remove()
    //     }
    // })
</script>
</body>
</html>

前端-常用jquery基础篇

标签：on() 开发 name code jquery基础 color 属性 rgba write

原文地址：https://www.cnblogs.com/newsss/p/14504862.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行