JQuery基础例题详解（下）

于 2022-04-10 16:57:36 发布
阅读量650 收藏
点赞数 1
分类专栏： jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47010003/article/details/124079303
版权

四、jQuery遍历

4.1 祖先parent()方法

parent()方法返回被选元素的父元素
parents()方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素<html>
parents(“ul”)方法返回被选元素的所有<ul>祖先元素
$(“button”).parentsUntil(“#div1”)返回介于<button>与<div>之间的所有祖先元素

$("button").parent().css("backgroundColor","#111");
$("button").parents().css("border","solid 2px #f00");
$("button").parentsUntil("#div1").css("border","solid 2px #f00");

4.2 children()方法

$(“div”).children() 方法返回被选元素<div>的所有直接子元素；
$(“div”).children(“p.iii”) 返回类名为”iii“的所有<p>元素，并且他们是<div>的直接子元素；
$(“div”).find(“span”) 返回属于<div>后代的所有<span>元素

4.3 siblings()方法

$(“h1”).siblings 返回被选元素的所有同胞元素
$(“h1”).siblings(“p”) 返回属于<h1>的同胞元素的所有<p>元素
$(“h1”).next() 返回<h1>的下一个同胞元素
$(“h1”).nextAll() 返回<h1>后的所有的同胞元素
$(“h1”).nextUntil(“h6”) 返回介于两个给定参数之间的所有跟随的同胞元素
$(“h1”).prev();方法取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈的元素集合
$(“h1”).prevAll();方法查找当前元素之前所有的同辈元素
$(“h1”).preUntil()；方法查找当前元素之前使用的同辈元素，直到遇到匹配的那个元素为止

4.4 first()方法

$(“div p”).first(); 选取首个<div>元素内部的第一个<p>元素
$(“div p”).last(); 选择最后一个<div>元素中的最后一个<p>元素
$(“p”).eq(1); 索引号从0开始，因此首个元素的索引号是0而不是1。当前的例子选取第二个<p>元素
$(“p”).filter(“.url”)返回带有类名”url“的所有元素
$(“p”).not(“.url”)；返回不带有类名”url“的所有<p\元素

素心如月桠
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【jquery系列|Jquery总结篇】包含各种实例，文末有彩蛋！
孙叫兽的博客
11-09 1870
孙叫兽，前端全栈工程师，微信公众号：电商程序员，如果本文对你有帮助，记得收藏点赞+关注。 jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程，很容易学习。（注：本文不演示效果） 演示jQuery 的 hide() 函数，隐藏当前的 HTML 元素。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信公众号：电商程...
JQuery练习题1
05-10
jQuery练习题1
jquery实例教学一
weixin_34129145的博客
01-12 697
jquery实例教学一 今天我们继续探讨jquery的相关内容。 首先，我们看看基本过滤选择器：                         一、选中单行或双行 能不能选中指定的某一个呢？   二、筛选大于，小于的   三、注意选择的顺序呦 :not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClas...
jQuery练习题
weixin_30256505的博客
09-17 403
1.js的入口函数和jquery入口函数的区别？ JS入口函数：window.onload=function(){ } JQuery入口函数: $(document).ready(function(){ }) JS的window.onload事件必须要等到所有内容，以及外部图片之类的文件加载完之后，才会去执行。 JQuery入口函数是在所有标签加载完之后，就会去执行。 接着，通过J...
JQuery基础例题详解（上）
哈哈
04-09 286
引言 jQuery语法就是 $() 注意在EL表达式中是${},大括号 1.jQuery选择器 1.1 3种选择器 例题：点击button按钮，p标签的内容全部隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam
JQuery基础例题详解（中）
哈哈
04-10 829
3. jQuery HTML $().html();//获取html元素 $().text();//获取文本内容 $().val();//获取表单元素的value值
详解JQuery基础动画操作
10-17
在本文中，我们将深入探讨jQuery中的基础动画操作，这些操作为网页动态效果的实现提供了强大的支持。jQuery使得在网页上创建各种复杂的动画效果变得简单易行，无需掌握复杂的JavaScript动画技术。 1. 隐藏与显示 ...
Jquery基础之事件操作详解
12-01
页面加载完毕后浏览器会通过javascript为Dom元素加载事件，使用Javascript时候使用的是[removed]方法，而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同。 [removed]方法 $(document).ready()...
jQuery事件与动画基础详解
12-10
今天我们就谈谈jquery中的事件和简单动画吧，它们毕竟基础是进阶华丽的根本！！ 1.事件 1.window事件 ready 准备就绪 2.鼠标事件 方法 执行时机 click(fn) 单击鼠标 $(document).ready(function(){ $("dd>img")...
谈谈jQuery Ajax用法详解
10-23
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等...大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性，本文给大家介绍jquery ajax用法详解，感兴趣的朋友一起学习吧
16个基于jQuery的实例特效
Sunny
03-25 1023
1.基于jQuery隐藏登录入口代码（演示地址）2.基于jQuery多项选择文本框（演示地址）3. 基于jQuery伸缩型菜单（演示地址）4.基于jQuery竖形动感菜单（演示地址）5.基于jQuery横向动感菜单（演示地址
【jQuery】案例代码+思路解析
丧心病狂Loli控的博客
07-06 364
  ❶ 排他性 $("button").click(function() { $(this).siblings().css("backgroundColor", ""); $(this).css("backgroundColor", "tomato"); })   ❷ 隐藏下拉菜单 $(".nav>li").mouseover(function() { // 鼠标经过，ul显示 $(this).children("ul").show(); }) $(".
jQuery练习题及答案
热门推荐
weixin_40693633的博客
07-03 8万+
一．选择题1. 下面哪种不是jquery的选择器?(  )  C。A、基本选择器                          B、层次选择器C、css选择器                                   D、表单选择器2. 当DOM加载完成后要执行的函数，下面哪个是正确的?(  )  CA、jQuery(expression, [context])  B、jQuery...
常用jquery方法 总结
wang_lianglove的专栏
12-05 997
非常全的jQuery常用技巧总结 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的
jQuery的几个经典案例
马某人的博客
07-08 2万+
案例一：使用jQuery完成下拉列表左右选择&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉列表左右选择&lt;/title&gt; &lt;script type="text/javascript" src=&quo
Jquery练习题
small_qianzai的博客
09-19 1778
1.使用jquery修改div元素的背景色(随意颜色) 第一个已点击第二个未点击 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.4.1.min.js">...
jq和js用mousemove获取鼠标当前位置
甲戌天火的博客
07-26 8742
html> lang="en"> charset="UTF-8"> jq获取鼠标的位置 div{ width: 500px; height: 500px; background-color: #585858; margin: 0; pa
jQuery实例大全[经典收集]
路虽远，行则将至；事虽难，做则必成！
03-11 8712
blueTable 基于jQuery的表格排序插件 v0.1<br /><br />用jquery写的表格排序的插件代码，做了一些细化，内部功能也做了一些扩展，增加了扩展名（后缀名）排序的双相选择，可以对后缀名和文件名排序分别制定排序方式；还增加了对表格被选中行排序的功能。<br />演示地址     下载地址<br /><br />jQuery carousel 可控制的左右图片滚动，每点击一下“向左”或“向右”按钮，图片会滚动一下，carousel 插件专一用来定制各式各样的滚动，不但是图片滚动，也可以
10018---jQuery--遍历
xxxcyzyy的博客
12-05 331
什么是遍历？ jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。 以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。 下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始， 轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。 图示解析
jquery源码逐行详解
最新发布
05-18
jQuery 是一个非常流行的 JavaScript 库，它简化了 JavaScript 代码的编写和操作 DOM 的过程。以下是 jQuery 源码的逐行详解： ```javascript (function( global, factory ) { "use strict"; if ( typeof module === "object" && typeof module.exports === "object" ) { // 如果是 CommonJS 规范，则添加到模块中 // 在 Node.js 环境中，module 对象代表当前模块，exports 对象是 module 的属性，用于指定模块对外输出的接口。 // 通过 exports 对象把模块导出，其他文件就可以通过 require() 函数来引用该模块。 module.exports = global.document ? factory( global, true ) : function( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }; } else { // 如果是浏览器环境，则将 jQuery 添加到全局对象 window 中 factory( global ); } // 在这里传入了两个参数，global 和 factory，分别表示全局对象和一个工厂函数 }(typeof window !== "undefined" ? window : this, function( window, noGlobal ) { "use strict"; var deletedIds = []; var document = window.document; var slice = deletedIds.slice; var concat = deletedIds.concat; var push = deletedIds.push; var indexOf = deletedIds.indexOf; // ... ``` 这段代码定义了一个立即执行函数，其目的是为了防止变量污染全局作用域。如果是在 Node.js 环境中，那么需要将 jQuery 添加到模块中，否则将 jQuery 添加到全局对象 window 中。然后定义了一些变量，包括 deletedIds、document、slice、concat、push 和 indexOf 等。这些变量都是为了后面的代码服务。 ```javascript var version = "3.6.0", // 定义了一个空函数 jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }, // ... ``` 这里定义了 jQuery 的版本号和 jQuery 函数。jQuery 函数是一个工厂函数，用于创建 jQuery 对象，其实现是通过调用 jQuery.fn.init 函数实现的。 ```javascript jQuery.fn = jQuery.prototype = { // jQuery 对象的方法和属性 }; jQuery.fn.init.prototype = jQuery.fn; ``` 这里定义了 jQuery 对象的原型，包括 jQuery.fn 和 jQuery.prototype。jQuery.fn 和 jQuery.prototype 是等价的，都是为了扩展 jQuery 对象的方法和属性。同时还将 jQuery.fn.init 的原型指向了 jQuery.fn，这样可以让 jQuery.fn.init 实例化出来的对象拥有 jQuery.fn 的方法和属性。 ```javascript jQuery.extend = jQuery.fn.extend = function() { // ... }; jQuery.extend({ // 一些静态方法和属性 }); jQuery.fn.extend({ // 一些实例方法和属性 }); ``` 这里定义了 jQuery 的 extend 方法，用于实现对象的合并。同时还定义了一些静态方法和属性，以及一些实例方法和属性。 ```javascript jQuery.expr = { // ... }; jQuery.expr[ ":" ] = { // ... }; ``` 这里定义了 jQuery 的表达式引擎，用于实现选择器的解析。其中，jQuery.expr 是一个对象，存储了所有的选择器类型。jQuery.expr[ ":" ] 表示的是伪类选择器。 ```javascript jQuery.ajax = function( url, options ) { // ... }; jQuery.fn.load = function( url, params, callback ) { // ... }; ``` 这里定义了 jQuery 的 ajax 和 load 方法，用于实现异步请求和载入 HTML 片段。 ```javascript var // Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ in case of overwrite _$ = window.$; jQuery.noConflict = function( deep ) { // ... }; if ( typeof noGlobal === "undefined" ) { window.jQuery = window.$ = jQuery; } ``` 这里定义了 jQuery 的 noConflict 方法，用于解决命名冲突问题。同时还保存了 window.jQuery 和 window.$ 的引用，以便在需要时恢复原来的状态。最后，将 jQuery 和 $ 添加到全局对象 window 中。 以上是 jQuery 源码的部分逐行详解，希望能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

素心如月桠

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

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

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

打赏作者

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

抵扣说明：

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

余额充值