jQuery的使用

标签：jQuery function 菜单 Title text v1 使用 click

1、初识jQuery

jQuery是一个别人封装好的模块（类库），代码量更少的实现我们想要的功能。

1）下载jQuery

jQuery官网》

jQuery的使用_ide

有两个版本：

一个时压缩生产版本：Download the compressed, production jQuery 3.6.0 》jquery-3.6.0.min.js (这里的min表示生产)

一个时非压缩开发版本：Download the uncompressed, development jQuery 3.6.0 >

2）代码引入

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

3）根据jQuery的用法来进行操作即可

jQuery的使用_ide_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="info"></h1>
<!--引用jQuery-->
<script src="jquery-3.6.0.min.js"></script>
<script>
    $("#info").text("欢迎指导");
</script>
</body>
</html>

2、jQuery教程》https://www.runoob.com/jquery/jquery-tutorial.html

参考文档：https://jquery.cuishifeng.cn/jQuery_selector_context.html

3、选择器

寻找想要的标签

1）ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="info"></h1>
<h1 id="info1"></h1>
<h1 id="info2"></h1>
<!--引用jQuery-->
<script src="jquery-3.6.0.min.js"></script>
<script>
    $("#info")
</script>
</body>
</html>

2）class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 class="info">class的</h1>
<h2 class="info"></h2>
<h3 class="info2">1234567890</h3>
<script src="jquery-3.6.0.min.js"></script>
<script>
    $(".info").text("class选择器")；
</script>
</body>
</html>

jQuery的使用_jquery_03

3）标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 class="info">class的</h1>
<h2 class="info"></h2>
<h3 class="info2">1234567890</h3>
<script src="jquery-3.6.0.min.js"></script>
<script>
    $("h1").text("class选择器")
</script>
</body>
</html>

jQuery的使用_html_04

4）多选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 class="info"></h1>
<h2 class="info"></h2>
<h3 class="info3">1234567890</h3>
<div id="v1">
    sdf
</div>
<script src="jquery-3.6.0.min.js"></script>

<script>

$("h1,.info3,#id").text("xxxxx") 
</script>
</body> 
</html>

5）层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 class="info"></h1>
<h2 class="info"></h2>
<h3 class="info3">1234567890</h3>
<div id="v1">
    <h1>
        sdf
    </h1>
    <ul>
        <li>xxx</li>
        <li>xxx</li>
    </ul>
</div>
<script src="jquery-3.6.0.min.js"></script>
<script>
    $("#v1 li").text("yyy");
</script>
</body>
</html>

jQuery的使用_ide_05

4、筛选器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="v1">
        <h1>
            sdfg
        </h1>
        <ul id="menu">
            <li>x1</li>
            <li id="xx">x2</li>
            <li>x3</li>
        </ul>
    </div>

<script src="jquery-3.6.0.min.js"></script>
<script>
//父级
    $("#xx").parent();
//爷爷级
    $("#xx").parent().parent();
//    孩子
    $("#menu").children();
//    兄弟下一个
    $("#xx").next();
//    兄弟上一个
    $("#xx").prev();
//    所有的兄弟
    $("#xx").siblings();
//    子孙中寻找
    $("#v1").find("li");
    $("#v1").find("#xx");
    $("#v1").find(".v1");
</script>
</body>
</html>

5、样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="v1">
    <h1>
        sdf
    </h1>
    <ul>
        <li>xxx</li>
        <li>xxx</li>
    </ul>
</div>
<script src="jquery-3.6.0.min.js"></script>
<script>
    $("v1").addClass("增加样式");
    $("v1").removeClass("删除样式");
    $("v1").hasClass("判断是否有样式");
    $("v1").toggleClass("跳动样式");
</script>
</body>
</html>

6、链式编程

菜鸟教程连接https://www.runoob.com/jquery/jquery-chaining.html

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>
<body>

<p id="p1">菜鸟教程!!</p>
<button>点我</button>

</body>
</html>

7、案例：

1）使用jQuery实现如下效果点击头部实现打开和闭合菜单

jQuery的使用_jquery_06

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .group{
            width: 300px;
            border: 1px solid #ddd;
        }
        .group .header{
            background-color: gold;
            padding: 8px 5px;
        }
        .group .menu a{
            display: block;
        }
        /*隐藏样式*/
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="group">
        <div class="item">
            <div class="header" onclick="clickMenu(this);">头部</div>
            <div class="menu">
                <a href="https://www.cs.com/liunaixu/">菜单1</a>
                <a href="https://www.cs.com/liunaixu/">菜单2</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMenu(this);">头部</div>
            <div class="menu">
                <a href="https://www.cs.com/liunaixu/">菜单1</a>
                <a href="https://www.cs.com/liunaixu/">菜单2</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMenu(this);">头部</div>
            <div class="menu">
                <a href="https://www.cs.com/liunaixu/">菜单1</a>
                <a href="https://www.cs.com/liunaixu/">菜单2</a>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        <!--给所有class=header 的标签设置点击事件-->
        $(".header").click(function () {
/*            if($(this).next().hasClass('hide')){
                // $(this)点击的事件
                $(this).next().removeClass('hide');
            }else {
                $(this).next().addClass('hide');
            }
            */
// 使用toggleClass()也可以实现上面的效果
            $(this).next().toggleClass('hide');
        });
    </script>
</body>
</html>

2）实现点开任意一个其他都关闭

jQuery的使用_jquery_07

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .group{
            width: 300px;
            border: 1px solid #ddd;
        }
        .group .header{
            background-color: gold;
            padding: 8px 5px;
        }
        .group .menu a{
            display: block;
        }
        /*隐藏样式*/
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="group">
        <div class="item">
            <div class="header" onclick="clickMenu(this);">头部</div>
            <div class="menu hide">
                <a href="https://www.cs.com/liunaixu/">菜单1</a>
                <a href="https://www.cs.com/liunaixu/">菜单2</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMenu(this);">头部</div>
            <div class="menu hide">
                <a href="https://www.cs.com/liunaixu/">菜单1</a>
                <a href="https://www.cs.com/liunaixu/">菜单2</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMenu(this);">头部</div>
            <div class="menu hide">
                <a href="https://www.cs.com/liunaixu/">菜单1</a>
                <a href="https://www.cs.com/liunaixu/">菜单2</a>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        <!--给所有class=header 的标签设置点击事件-->
        $(".header").click(function () {
            //自己展开
            $(this).next().removeClass('hide');
            //别人，给他关闭
            $(this).parent().siblings().find('.menu').addClass("hide");
        });
    </script>
</body>
</html>

8、值和文本操作

1）值操作

<input type='text' id='v1' />
// 获取值
$("#v1").val()

// 设置值
$("#v1").val("xxxxxx")

2)文本操作

<div id='v2'>xxxxx</div>

//获取文本
$("#v2").text()

//设置文本
$("#v2").text(“yyyyyy”)

3）扩展

基于jQuery去创造标签。

$("<a>").text(“yyyyyy”)

案例：Web 聊天室，当输入框为空时点击发送提示不能为空，当输入空有内容时点击发送将输入框内的内容放到放到下方区域中。

jQuery的使用_html_08

代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="text" placeholder="请输入内容" id="txt">
        <input type="button" value="发送" id="btn">
    </div>
    <div id="content-area" style="width: 800px; background-color: #dddddd; border:1px solid #333;height: 500px;">
    </div>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $("#btn").click(function () {
            var content = $("#txt").val();
            if(content.length < 1){
                alert("输入不能为空");
                return;
            }
            var newDiv = $("<div>").text(content);
// 在id=content-area的标签内部添加值
            $("#content-area").append(newDiv)
        });
    </script>
</body>
</html>

9、attr()的属性操作

1）获取属性值

2）给属性赋值

jQuery的使用_ide_09

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--attr()属性操作-->
    <a id="t1" href="https://www.cs.com/liunaixu/">刘思江博客</a>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        <!--获取属性并在控制台上打印出来-->
        var data = $("#t1").attr("href")
        console.log(data)
        // 给属性赋值
        $("#t1").attr('href',"https://www.baidu.com")

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

10、prop属性，针对于checkbox的选项的使用

jQuery的使用_html_10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--checked默认选中-->
篮球<input type="checkbox" id="v2" checked />
足球<input type="checkbox" id="v3"/>
<script src="jquery-3.6.0.min.js"></script>
<script>
// 设置选项属性
    $("#v2").prop("checked",false)
    $("#v3").prop("checked",true)
</script>
</body>
</html>

案例：表格中的全选、取消和反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="全选" id="btnAll">
<input type="button" value="取消" id="btnClear">
<input type="button" value="反选" id="btnReverse">

<table border="1">
    <thead>
    <tr>
        <th>选择</th>
        <th>ID</th>
        <th>姓名</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox" /></td>
        <td>1</td>
        <td>大江东去</td>
    </tr>
        <tr>
        <td><input type="checkbox" /></td>
        <td>1</td>
        <td>大江东去</td>
    </tr>
        <tr>
        <td><input type="checkbox" /></td>
        <td>1</td>
        <td>大江东去</td>
    </tr>
    </tbody>
</table>
<script src="jquery-3.6.0.min.js"></script>
<script>
    $("#btnAll").click(function () {
        $("table input[type='checkbox']").prop('checked',true)
    })
    $("#btnClear").click(function () {
        $("table input[type='checkbox']").prop('checked',false)
    })
    $("#btnReverse").click(function () {
        $("table input[type='checkbox']").each(function () {
    /*        var old = $(this).prop('checked');
            if(old){
                $(this).prop('checked',false);
            }else{
                $(this).prop('checked',true);
            }
    */
    //上面的逻辑判断可以简化如下，只是判断
            var old = $(this).prop('checked');
            $(this).prop('checked',!old)
        })
    })
</script>
</body>
</html>

11、文档和标签的操作

1）创建标签

$("<div>")
$("<a>")

2)添加：追加

<div id='content'>
    <div>adsgf</div>
    //要想把标签添加到此处
</div>

var tag = $("<div>").text("xxxxx");
$("#content").append(tag)

添加：顶部插入

<div id='content'>
    //要想把标签添加到此处，内部的顶部
    <div>adsgf</div>
</div>

var tag = $("<div>").text("xxxxx");
$("#content").prepend(tag)；

添加：外部插入前

//要想把内容添加到此处，使用before
<div id='content'>
    <div>adsgf</div>
</div>
var tag = $("<div>").text("xxxxx");
$("#content").before(tag)；

添加：外部插入后

<div id='content'>
    <div>adsgf</div>
</div>
//要想把内容添加到此处，使用after
var tag = $("<div>").text("xxxxx");
$("#content").after(tag)；

3）删除标签

<div id="v1">
    <h1>
        sdfg
    </h1>
    <ul id="menu">
        <li>x1</li>
        <li id="xx">x2</li>
        <li>x3</li>
    </ul>
</div>  

$("#xx").remove()

4）清空文本内容

<div id='xxx'>
    asdfghjkl
</div>

如果时input框清空

$("#xxx").val("")

12、事件委托：删除动态数据的方法。

jQuery的使用_ide_11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="txt" />
<input type="button" value="添加" id="btnAdd">
    <ul id="dataList"
        <li>刘思江</li>
        <li>周杰伦</li>
        <li>江山</li>
    </ul>
<script src="jquery-3.6.0.min.js"></script>
<script>
    <!--点击并添加-->
    $("#btnAdd").click(function(){
        $("#dataList").append($("<li>").text($("#txt").val()));
    });
// 删除数据，只能删除添加之前的数据，若想删除动态的数据使用事件委托
/*    $("li").click(function () {
        $(this).remove();
    })
    */
// 通过父类查找
    $("#dataList").on("click","li",function () {
        $(this).remove();
    })
</script>
</body>
</html>

13、框架加载：优化12事件委托案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="txt" />
<input type="button" value="添加" id="btnAdd">
    <ul id="dataList"
        <li>刘思江</li>
        <li>周杰伦</li>
        <li>江山</li>
    </ul>
<script src="jquery-3.6.0.min.js"></script>
<script>
// 推荐，当页面'框架'加载完成之后执行。
    $(function () {
    //        写在这里面
        $("#btnAdd").click(function(){
            $("#dataList").append($("<li>").text($("#txt").val()));
        });
    // 删除数据，只能删除添加之前的数据，若想删除动态的数据使用事件委托
    /*    $("li").click(function () {
            $(this).remove();
        })
        */
        bindLi();
    })
    function bindLi() {
            // 通过父类查找
        $("#dataList").on("click","li",function () {
            $(this).remove();
        })
    }
</script>
</body>
</html>

标签：jQuery,function,菜单,Title,text,v1,使用,click
From： https://blog.51cto.com/u_15431495/5976281

相关文章

赞助商

阅读排行