jQuery 互动版

什么是jQuery
jQuery 搭建安装开发环境 jQuery 选取html的语法形式 第一个示例程序 hello world 轻量级的jQuery有哪些优势 教程小节
jQuery 选择器的使用
什么是jQuery选择器 jQuery基础选择器 jQuery层次选择器 简单过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选择器 表单对象属性过滤选择器 表单选择器
jQuery 操作DOM元素
操作DOM元素属性 操作DOM元素内容 操作DOM元素样式 向DOM元素内追加内容 复制DOM元素 DOM元素的替换 包裹DOM元素 遍历DOM元素 删除DOM元素
jQuery 事件和应用
页面加载事件ready() 使用bind()方法绑定事件 使用hover()和toggle()切换事件 使用unbind()移除和解除绑定事件 one()一次性事件处理器函数 通过trigger()手动触发指定事件 元素获得focus()或失去blur()焦点事件 元素改变事件change()
jQuery 动画与特效
动画与特效中的显示show和隐藏hide 动画与特效的淡入淡出效果 动画与特效的滑动效果 animate()方法来自定义动画效果 stop()方法来停止动画或者效果
jQuery Ajax的使用
什么是AJAX AJAX方法load()从服务器加载数据 用getJSON()方法加载JSON格式数据 使用getScript()异步加载js文件并执行 以GET方式从服务器获取数据 以POST方式从服务器发送数据 Ajax序列化表单的值 用Ajax加载服务器数据
jQuery 自定义插件
自定义插件的准备工作 维护自定义插件的链接性 用插件构造一个有可折叠面板的页面 自定义你的jquery插件
在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

jQuery层次选择器

层次选择器通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中某类关系可以方便快捷地定位元素,详细说明如下表:

选择器 功能 返回值
ancestor descendant 根据祖先元素匹配所有的后代元素 元素集合
parent > child 根据父元素匹配所有的子元素 元素集合
prev + next 匹配所有紧接在prev元素后的相邻元素 元素集合
prev ~ siblings 匹配prev元素之后的所有兄弟元素 元素集合

提示:ancestor descendant parent > child 所选择的元素集合是不同的,前者的层次关系是祖先与后代,而后者是父子关系;另外 prev + next 可以使用 .next() 代替,而prev ~ siblings可以使用nextAll()代替。

示例如下:

(1)描述

所有的元素标记初始全部显示,然后通过jQuery层次选择器隐藏相对应的页面标记。

(2)代码实现


<script type="text/javascript">
$(function(){ //匹配后代元素
    $("div span").css("display","none");//隐藏div中所有的<span>标记
})
$(function(){ //匹配子元素
    $("div>span").css("display","none");//隐藏div中子span标记
})
$(function(){ //匹配后面元素
    $("#divMid + div").css("display","none");//隐藏id为divMid元素后的下一个div
    $("#divMid").next().css("display","none");
})
$(function(){ //匹配所有后面元素
    $("#divMid ~ div").css("display","none");//隐藏id为divMid元素后的所有div
    $("#divMid").nextAll().css("display","none");
})
$(function(){ //匹配所有相邻元素
    $("#divMid").siblings("div").css("display","none");//隐藏id为divMid元素的所有相邻div
})
</script>
任务:把上面jQuery中的操作一一的在代码框中重现。