jQuery 教程 (四)

最新推荐文章于 2024-09-13 23:32:49 发布
最新推荐文章于 2024-09-13 23:32:49 发布
阅读量140 收藏
点赞数 1
分类专栏： javascript 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_82471222/article/details/139931766
版权

jQuery 遍历

jQuery 遍历 - 祖先

jQuery parent() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML -jQuery parent() 方法</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    

</head>
<body>
    <div id="parent">
        <div id="child">    
            <p>这是一个子元素。</p>
        </div>
        <div id="sibling">
            <p>这是一个同级元素。</p>
    </div>
    </div>
    <p>这是一个父元素。</p>

    <p>这是另一个父元素。</p>

    <div id="grandparent">
        <div id="great-grandparent">
            <div id="great-great-grandparent">
                <p>这是一个伟大的曾祖元素。</p>
            </div>
        </div>
    </div>


    <p>这是另一个父元素。</p>


    <p>这是一个父元素</p>


    <p>这是另一个父元素。</p>
    <button id="btn">获取child元素的父元素</button>

    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                var parent = $("#child").parent();
                alert(parent.attr("id"));
            });
        });
    </script>
</body>
</html>

jQuery parents() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML -jQuery parents() 方法</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    

</head>
<body>
    <div id="container">
        <div id="inner">
            <p>This is the inner div</p>
        </div>

        <p>This is the outer div</p>

    </div>
    <button id="btn">Click me</button>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                var innerDiv = $("#inner");
                var outerDiv = innerDiv.parents("#container");
                alert(outerDiv.html());
            });
        });
    </script>
</body>
</html>

jQuery parentsUntil() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML -jQuery parentsUntil() 方法</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    

</head>
<body>
    <div id="container">
        <div id="child1">
            <div id="grandchild1">
                <p>This is the first grandchild</p>
            </div>
        </div>
    </div>
    <div id="sibling1">
        <p>This is the first sibling</p>
    </div>
    <div id="sibling2">
        <p>This is the second sibling</p>
    </div>

    <div id="sibling3">
        <p>This is the third sibling</p>

    </div>

    <div id="sibling4">
        <p>This is the fourth sibling</p>

    </div>

    <div id="sibling5">

        <p>This is the fifth sibling</p>    
    </div>
    <button id="btn">Get Parents Until</button>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                var $parents = $("#child1").parentsUntil("#container");
                console.log($parents);
            });
        });

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

jQuery 遍历 - 后代

jQuery children() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML -jQuery children() 方法</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    

</head>
<body>
    <div id="container">
        <p>This is the first paragraph.</p>
        <p>This is the second paragraph.</p>
        <div>
            <p>This is the third paragraph.</p>
            <p>This is the fourth paragraph.</p>
    </div>

    </div>
    <button id="btn">获取子元素</button>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                var children = $("#container").children();
                console.log(children);// 输出：init {0: p, 1: p, 2: div, length: 3, prevObject: init, context: document}
            });
        });
    </script>
</body>
</html>

jQuery find() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML -jQuery find() 方法</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    

</head>
<body>
    <div id="container">
        <p>This is the first paragraph.</p>
        <p>This is the second paragraph.</p>
        <p>This is the third paragraph.</p>
        <p>This is the fourth paragraph.</p>
        <p>This is the fifth paragraph.</p>
    </div>
    <button id="btn">Click me</button>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                var p = $("#container").find("p");
                console.log(p);//获取所有p标签,输出结果为：init {0: p, 1: p, 2: p, 3: p, 4: p, length: 5, prevObject: init, context: document, selector: '#container p'}
            });
        });
    </script>
</body>
</html>

jQuery 遍历 - 同胞(siblings)

jQuery siblings() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML -jQuery siblings() 方法</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    

</head>
<body>
    <div id="parent">
        <div id="child1">Child 1</div>
        <div id="child2">Child 2</div>
        <div id="child3">Child 3</div>
    </div>
    <button id="btn1">Prev Sibling</button>
    <button id="btn2">Next Sibling</button>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#child2").siblings().css("background-color","red");
            });
            $("#btn2").click(function(){
                $("#child2").nextAll().css("background-color","green");
            });
        });
    </script>
</body>
</html>

jQuery next() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML -jQuery next() 方法</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    

</head>
<body>
    <div id="parent">
        <div id="child1">Child 1</div>
        <div id="child2">Child 2</div>
        <div id="child3">Child 3</div>
    </div>
    <button id="btn">Next</button>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                $("#child1").next().css("background-color","red");
            });
        });
    </script>
</body>
</html>

jQuery nextAll() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML -jQuery nextAll() 方法</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    

</head>
<body>
    <div>
        <p>This is the first paragraph.</p>
        <p>This is the second paragraph.</p>
        <p>This is the third paragraph.</p>
        <p>This is the fourth paragraph.</p>
    </div>
    <p>This is the fifth paragraph.</p>

    <p>This is the sixth paragraph.</p>

    <button id="btn">获取下一个元素</button>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                var next = $("#btn").nextAll();
                console.log(next);
            });
        });
    </script>
</body>
</html>

jQuery nextUntil() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML -jQuery nextUntil() 方法</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    

</head>
<body>
    <div id="container">
        <p>This is the first paragraph.</p>
        <p>This is the second paragraph.</p>
        <p>This is the third paragraph.</p>
        <p>This is the fourth paragraph.</p>
        <p>This is the fifth paragraph.</p>
        <p>This is the sixth paragraph.</p>
        <p>This is the seventh paragraph.</p>
        <p>This is the eighth paragraph.</p>
        <p>This is the ninth paragraph.</p>
    </div>
    <br>
    <button id="btn">Next Until</button>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                var $container = $("#container");
                var $next = $container.nextUntil("p:last");//获取直到最后一个p标签之前的所有元素
                console.log($next);
                $next.css("background-color","yellow");//设置背景色为黄色
            });
        });
    </script>
</body>
</html>

jQuery 遍历- 过滤

jQuery first() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML -jQuery first() 方法</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    

</head>
<body>
    <div>
        <p>jQuery first() 方法</p>
        <p>jQuery first() 方法用于选取第一个匹配元素。</p>
        <p>语法：$(selector).first()</p>
        <p>例子：</p>
        <p>获取第一个&lt;p&gt;元素：</p>
        <pre>
            $(selector).first();
        </pre>
        <p>获取第一个&lt;div&gt;元素的第一个&lt;p&gt;元素：</p>
        <pre>
            $(selector).first().first();
        </pre>
    </div>

    <script>
        $(document).ready(function(){
            //获取第一个&lt;p&gt;元素
            var firstP = $("p").first();
            console.log(firstP);

            //获取第一个&lt;div&gt;元素的第一个&lt;p&gt;元素
            var firstDivP = $("div").first().first();
            console.log(firstDivP);
        });
    </script>
</body>
</html>

jQuery last() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML -jQuery last() 方法</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    

</head>
<body>
    <div id="container">
        <p>第一段</p>
        <p>第二段</p>
        <p>第三段</p>
        <p>第四段</p>
    </div>

    <button id="btn">获取最后一个段落</button>

    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                var lastP = $("#container p:last");
                alert(lastP.text());
            });
        });
    </script>
</body>
</html>

jQuery eq() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML -jQuery eq() 方法</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    

</head>
<body>
    <div id="container">
        <p>第一段</p>
        <p>第二段</p>
        <p>第三段</p>
        <p>第四段</p>
        <p>第五段</p>
    </div>

    <button id="btn">点我</button>

    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                var $p = $("#container p:eq(2)"); //获取第3个p元素
                $p.text("修改后的段落"); //修改第3个p元素的文本
            });
        });
    </script>
</body>
</html>

jQuery filter() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML -jQuery eq() 方法</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    

</head>
<body>
    <div id="container">
        <p>第一段</p>
        <p>第二段</p>
        <p>第三段</p>
        <p>第四段</p>
        <p>第五段</p>
    </div>

    <button id="btn">点我</button>

    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                var $p = $("#container p:eq(2)"); //获取第3个p元素
                $p.text("修改后的段落"); //修改第3个p元素的文本
            });
        });
    </script>
</body>
</html>

jQuery not() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HTML -jQuery not() 方法</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    

</head>
<body>
    <div>
        <p>Hello, world!</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
        <p>jQuery not() 方法</p>
    </div>
    <button id="btn">点击</button>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                $("p:not(:first)").hide();
            });
        });
    </script>
</body>
</html>

程序员-张师傅
关注
专栏目录
学习JQuery插件开发教程
we
07-10 718
如果你跟我一样，jQuery属于入门级的，那么我建议你看我下一篇jQuery教程：自己动手开发jquery插件 ，这篇插件比较容易理解和模范，适合新手开发jQuery插件。推荐你去看一看。 在逛codeproject网站的时候，突然看到一篇文章：How to write plugin in Jquery. 如果对E文好的同学 ，可以看上面的连接。 现在我把上面网站的及结合自己的想法写这篇文章。希望能得到大牛们的支持和谅解。。。大鸟飞过。。。欢迎拍装。 插件编写的目的是给已经有的一系列方法或函数做一个封装，以
jQuery 教程
freeking101的博客
04-26 2709
菜鸟教程 --- jQuery 教程：https://www.runoob.com/jquery/jquery-tutorial.html jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery简介 什么是 jQuery ？ jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。 jQuery 库包含以下功能： HTML...
JS和JQuery教程
zhansan的博客
06-15 202
JQuery入门，选择器，DOM 操作，事件和动画
jquery教程
weixin_45991188的博客
03-08 2832
jquery教程 jQuery简介  jQuery也就是JavaScript和查询（Query）即 辅助JavaScript开发的类库。  jQuery是一个兼容多浏览器的javascript库。  核心理念是 write less,do more (写得更少,做得更多)。  jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多 JavaSc...
jQuery超详细入门教程
MsWRight的博客
05-21 4465
jquery其实总的来说东西不是很多 期间发现一点问题就是界面中使用本地存储之后，刷新后虽然数据不会丢失，但是刷新会整个页面重新渲染，有些只想在修改数据之前加载的内容也会被重新加载。 然后是我jquery总结的一些知识点 jQuery $是jQuery的别称，jQuery顶级对象 jQuery是一个js函数库，包含以下功能 html元素选取 html元素操作 css操作 html事件函数 js特效和动画 html DOM遍历和修改 AJAX Utilities 除此之外，jQuer还提供了大量的插件 j
jQuery入门到精通学习教程，收藏我这篇就够了_jquery教程
2401_85111850的博客
05-25 396
});});});
2024年最新jQuery入门到精通学习教程，收藏我这篇就够了_jquery教程
2401_84302761的博客
05-01 746
});});});
jQuery详细教程，基础内容罗列
weixin_53761834的博客
11-04 3260
jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。 jQuery 库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 除此之外，jQuery 还提供了大量的插件。
jQuery基础教程第四版第四章练习
旺财飞飞飞的博客
10-03 313
//(1)(2)题 $(function () { var $html = $('html'); $html.hide().fadeIn(2000) $('p').hover( //hover的移入和移出函数 function () { $(this).css('background', 'red') }, function () { $(this).css('background', 'none') } ) }) //(3.
jQuery极简教程
my_future的博客
12-07 257
jQuery极简教程 文章目录jQuery极简教程一、隐藏和显示二、淡入淡出 一、隐藏和显示 在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素 代码如下（示例）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="//l
jQuery基础教程（第四版）中文
04-08
《jQuery基础教程（第四版）中文》是一本深入浅出介绍jQuery库的指南，适合初学者和有一定经验的开发者。jQuery是JavaScript的一个强大框架，它简化了DOM操作、事件处理、动画效果以及Ajax交互，极大地提高了开发...
jquery基础教程中文版2015
06-26
**jQuery基础教程中文版2015** jQuery是一款强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。2015年发布的这个基础教程，旨在帮助初学者快速掌握jQuery的核心概念和技术。 一、...
jquery基础教程第四版源码
02-25
《jQuery基础教程第四版》是一本深受欢迎的前端开发指南，专注于jQuery库的使用和实践。jQuery是一个轻量级、高性能的JavaScript库，它极大地简化了JavaScript操作DOM（文档对象模型）、事件处理、动画制作以及Ajax...
前端用html写excel文件直接打开
全易
09-10 695
html文件直接用excel打开
-webkit-box-reflect属性与倒影效果的实现
最新发布
读心悦
09-13 416
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 410
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
Layout 布局组件快速搭建
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1324
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
jQuery教程：优化表格排序与jQueryUI应用
"《jQuery基础教程第四版》是一本深入浅出的jQuery技术指南，针对jQuery 1.10.x和2.0.x版本进行了详尽讲解。该书前六章聚焦于jQuery的核心组件，包括选择器、事件处理、动画、DOM操作（如12.2节中的移动和插入元素，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员-张师傅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值