首页 > 其他分享 >jQuery基础知识

jQuery基础知识

时间：2023-01-01 23:23:05浏览次数：57  
标签：jQuery hide 标签 基础知识 menus xx 5px

1、jquery

jQuery是一个javaScript第三方模块（第三方类库）。

2、jquery快速上手

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1 id = "txt">yyy</h1>

<script src="static/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    //利用jquery中的功能实现某些内容
    // 找到id = txt的标签,并修改为xx 
    $("#txt").text("xx");
</script>
</body>
</html>

3、寻找标签（直接寻找）

  • id选择器（通过id寻找）
<h1 id = "txt">yyy</h1>

<script src="static/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    //利用jquery中的功能实现某些内容
    // 找到id = txt的标签,并修改为xx
    $("#txt").text("xx");
</script>
  • 样式选择器
<h1 class = "c1" id = "txt">yyy</h1>

<script src="static/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    //利用jquery中的功能实现某些内容
    // 找到样式等于c1,并修改为xx
    $(".c1").text("xx");
</script>
  • 标签选择器
<body>

<h1 class = "c1" id = "txt">yyy</h1>

<script src="static/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    //利用jquery中的功能实现某些内容
    // 找到标签为h1的标签,并修改为xx
    $("h1").text("xx");
</script>
</body>
  • 层级选择器
    image
  • 多选择器
    image
  • 属性选择器
    image

4、间接寻找标签

  • 找到上一个兄弟
    image
  • 找父子
    image
    image

菜单切换

#案例：点击展开菜单/关闭菜单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus {
            height: 800px;
            width: 200px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: gold;
            padding: 10px 5px;
        }

        .menus .content a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted burlywood;
            cursor: pointer;//鼠标放上去会变成小手
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="menus">
    <div class=idtem>
        <div class="header" onclick="clickMe(this)">上海</div>
        <div class="content hide" >
            <a href="">宝山</a>
            <a href="">青浦</a>
            <a href="">浦东</a>
        </div>
    </div>
    <div class=idtem>
        <div class="header" onclick="clickMe(this)">北京</div>
        <div class="content hide" >
            <a href="">东城</a>
            <a href="">海淀</a>
            <a href="">朝阳</a>
        </div>
    </div>
    <div class=idtem>
        <div class="header" onclick="clickMe(this)">上海2</div>
        <div class="content hide" >
            <a href="">宝山</a>
            <a href="">青浦</a>
            <a href="">浦东</a>
        </div>
    </div>
    <div class=idtem>
        <div class="header" onclick="clickMe(this)">北京2</div>
        <div class="content hide" >
            <a href="">东城</a>
            <a href="">海淀</a>
            <a href="">朝阳</a>
        </div>
    </div>

</div>

<script src="static/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    function clickMe(self){
        // $(self).next() 表示当前点击的标签,找到兄弟标签的下一个
        var hasHide = $(self).next().hasClass("hide")//判断标签是否含有样式hide
        if(hasHide){
            $(self).next().removeClass("hide");//删除标签样式
        }
        else{
            $(self).next().addClass("hide");//添加样式
        }
    }
</script>
</body>
</html>

# 案例优化，每次只展开一个菜单，实现菜单切换
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus {
            height: 800px;
            width: 200px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: gold;
            padding: 10px 5px;
        }

        .menus .content a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted burlywood;
            cursor: pointer;//鼠标放上去会变成小手
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="menus">
    <div class=idtem>
        <div class="header" onclick="clickMe(this)">上海</div>
        <div class="content hide" >
            <a href="">宝山</a>
            <a href="">青浦</a>
            <a href="">浦东</a>
        </div>
    </div>
    <div class=idtem>
        <div class="header" onclick="clickMe(this)">北京</div>
        <div class="content hide" >
            <a href="">东城</a>
            <a href="">海淀</a>
            <a href="">朝阳</a>
        </div>
    </div>
    <div class=idtem>
        <div class="header" onclick="clickMe(this)">上海2</div>
        <div class="content hide" >
            <a href="">宝山</a>
            <a href="">青浦</a>
            <a href="">浦东</a>
        </div>
    </div>
    <div class=idtem>
        <div class="header" onclick="clickMe(this)">北京2</div>
        <div class="content hide" >
            <a href="">东城</a>
            <a href="">海淀</a>
            <a href="">朝阳</a>
        </div>
    </div>

</div>

<script src="static/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    function clickMe(self) { //实现每次只能展示一个菜单
        $(self).next().removeClass("hide");//删除标签样式
        //找到父亲，找到父亲的兄弟姐妹，再去每个兄弟的子孙中，寻找class = "content"样式，并进行隐藏
        $(self).parent().siblings().find(".content").addClass("hide")
    }
</script>
</body>
</html>

5、操作样式

  • addClass
  • removeClass
  • hasClass

6、值的操作

image

# 案例：将用户输入的用户名展示出来
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus {
            height: 800px;
            width: 200px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: gold;
            padding: 10px 5px;
        }

        .menus .content a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted burlywood;
            cursor: pointer;//鼠标放上去会变成小手
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<input type="text" id = "txtUser" placeholder="用户名">
<input type="text" id = "txtEmail" placeholder="邮箱">
<input type="button" value = "提交" onclick="getInfo()">

<ul id = "view">
</ul>

<script src="static/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    function getInfo() { //实现每次只能展示一个菜单
        //获取用户输入的用户名和密码
        var username = $("#txtUser").val()
        var email = $("#txtEmail").val()
        //创建li标签，并将内容写入到li标签中
        var newli = $("<li>").text(username);
        //将新创建的li标签，添加到ul中
        $("#view").append(newli)
    }
</script>
</body>
</html>

7、jQuery中的绑定事件

image

  • 在jQuery中删除某个标签
    image
# 注意细节！
$("li").click(function (){
        var text = $(this).text();//读取点击的li标签内容
        $(this).remove();
    });

//当页面框架加载完成之后执行的代码:
$(function () {
        //当页面框架加载完之后，进行的操作
    })

8、案例——表格操作

//案例：
删除一行表格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <table border="1">
        <thead>
            <tr>ID</tr>
            <tr>姓名</tr>
            <tr>操作</tr>
        </thead>
        <tbody>
            <td>1</td>
            <td>wuwu</td>
            <td>
                <input type="button" value="删除" class="delete">
            </td>
        </tbody>

        <tbody>
            <td>2</td>
            <td>wuwu</td>
            <td>
                <input type="button" value="删除" class="delete">
            </td>
        </tbody>
    </table>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
    $(function (){
        //找到所有class = "delete"的标签，绑定事件
        $(".delete").click(function (){
            //删除当前行操作
            $(this).parent().parent().remove();
        });

    })
</script>

</body>
</html>

标签：jQuery,hide,标签,基础知识,menus,xx,5px
From： https://www.cnblogs.com/N-lim/p/17019241.html

相关文章

  • jQuery——效果
    方法例句描述animate() 对被选元素应用“自定义”的动画clearQueue() 对被选元素移除所有排队的函数（仍未运行的）delay() 对被选元素的所有排队函数（......
  • 基于jQuery的三种AJAX请求
    基于jQuery的三种AJAX请求1.介绍get请求通常用于获取服务端资源（向服务器要资源）​ 例如：根据URL地址，从服务器获取HTML文件、CSS文件、JS文件、图片文件、数据资源等......
  • jQuery.fn.extend() 与 jQuery.extend()
    jQuery.fn如何扩展。jQuery插件$.fn(object)与$.extend(object)jQuery提供了两个方法帮助开发插件$.extend(object);扩展jQuery类本身；$.fn.extend(object);扩展jQuer......
  • Jquery中的attr()和prop()的区别
               ......
  • jquery改变css样式和vue改变样式的区别
    jQuery做的就是操作dom节点，从而去改变css样式；而vue不用操作DOM，只关心数据，是从数据绑定的角度去改变样式的先来看看jQuery，我用的是vue框架，所以先安装jQuerynpminstal......
  • 4.2 jQuery快速开发
    jQuery入门目标：能够说出什么是jQuery能够说出jQuery的优点能够简单使用jQuery能够说出DOM对象和jQuery对象的区别jQuery概述JavaScript库：仓库：可以把很多东西放到这个仓库里......
  • 使用jQuery操作节点
    DOM的分类：DOMcore指所有支持DOM的功能都可以进行使用操作HTMLDOM网页中的所有标签或节点CSSDOM指网页中的优化样式在控制台输出信息：console.log("元素的......
  • jQuery——事件方法
    jQuery的事件方法，标黄为常用事件。方法例句描述bind() 向匹配元素附加一个或更多事件处理器blur() 触发、或将函数绑定到指定元素的blur事件change......
  • java 学习基础知识点拾遗 导航页
    每种编程语言的知识点都是很多很杂的,java也是如此相信很多人学习的过程中都是深一脚浅一脚,最基础的东西可能有些也不是非常确定整理了最基本的一些知识点,可以说是java入......
  • 在前端js worker里使用dom并且加载jquery
    四个工具:nodejs+npmnpm安装的jsdomnpm安装的jquerynpm安装的browserify网址:browserify:https://browserify.org/jsdom:https://github.com/jsdom/jsdom/安......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99