jQuery基础(二)

2023-05-16

:eq获取到的索引号的index从0开始因此eq(2)是标签的第三个标签

选择器筛选

        $(function(){

           

            $("nav>li>a").mouseover(function(){

                $(this).siblings("ul").show();

            });

            $("nav>li>a").mouseout(function(){

                $(this).siblings("ul").hide();

            });

        });

获取标签的子级元素方法有两种:

$("li“).eq(2).css("color","pink");=$("li :eq(2)“).css("color","pink");

此方法更推荐第一种因为我们使用第一种可以将变量放置到方法里面去设置,而第二种就是一个字符串;

tab栏切换案例

 制作分析:利用jQuery 中index()方法能获取我们按钮节点的索引,按钮和图片的元素节点一一对应通过index值就可以确定图片的节点了,只需要设定样式即可

制作:

    // 利用定位让图片的盒子都重叠在一起,此时我们隐藏的是包裹img的盒子li

    // 要确定好隐藏的是哪一个盒子,在css设置时要将一个盒子作为页面加载输出

    // 的第一个img,然后随着事件的更替动态改变盒子内容的显示与隐藏

jQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式。

1.参数只写属性名,则是返回属性值。

$(this).css("color");

2.参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号。

$(this).css("color","red");

3.参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号。

$(this).css({"color":"white","font-size":"20px"});

以上方法是修改值,我们可以使用像Dom操作元素一样去直接设定一个类,通过类的方式直接修改大部分的css样式

jQuery中修改css类

1.作用等同于以前的className,可以操作类样式,注意操作类里面的参数不要加点。

添加类:$("div").addClass("current");

删除类:$("div").removeClass("current");

切换类:$("div").toggleClass("current");

注意:切换类的使用是我们第一次点击就会调用方法里面的类,而第二次就会自动去除方法里面的类,依次出现不同的效果.

tab栏切换案例

获取我们点击的导航区域得到属于导航模块标签的缩引,利用其索引链接底部内容让底部与上面导航相连部分显示其余部分隐藏

css样式设定问题:想让盒子内部文字水平垂直居中应该给文字的盒子设置弹性盒子,给上一级则无效。

$(this).addClass("rrr").siblings().removeClass("rrr");===$(this).css("backgroundColor","pink").siblings().css("backgroundColor","");

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery基础(二) 的相关文章

  • 由于固定导航,增加了 FancyBox v2 的顶部和底部边距

    我目前正在开发一个网站 该网站将来将具有响应能力 该网站主要由图像组成 单击这些图像会加载到 FancyBox 中 FancyBox v2 现在具有响应能力 因此可以在屏幕尺寸发生变化时重新调整图像等的大小 作为我设计的一部分 我有两个固定
  • 向特定客户端发送消息以及消息发送用户

    我是 SignalR 的初学者 我创建了一个基于 SignalR 的基本聊天应用程序 我面临的问题是我想向特定客户端以及发送消息的用户发送消息 这个怎么做 我知道要向特定客户端发送消息 我们可以这样做 Clients Client Cont
  • JavaScript / jQuery 中的范围[重复]

    这个问题在这里已经有答案了 显然我写了太多的 CoffeeScript 因为我现在意识到我对纯 JS 中的作用域没有基本的了解 玩了一段时间后 我无法弄清楚以下问题 document ready function var myUrl htt
  • Jquery:选择器找不到类?

    我正在尝试推进 Jquery autcomplete 功能 我希望 Jquery 自动完成在表中创建新行 到目前为止 这有效 但我希望 Jquery 添加一个删除按钮 因此用户可以删除他添加的项目之一 document ready func
  • jquery datatable ajax 无数据可用 mvc

    我有一张桌子是在 document ready功能 我还使用 jQuery DataTables 插件 由于某种原因 当页面加载时 ajax 调用控制器并返回数据并将其设置为我的网格所有获取的数据 但是尽管所有数据都加载到数据表中 但仍获取
  • JQuery hide() 和 fadeOut() 、 show() 和 fadeIn() 之间的区别

    我是 jQuery 新手 目前 我正在我的跨平台移动应用程序之一中使用 jQuery 我需要根据各自的条件隐藏和显示我的一些页面内容 我发现以下两种方法对我来说效果很好 myControlId fadeOut myControlId hid
  • 从 thymeleaf 获取数据到模态引导程序、jquery

    我正在尝试获取模态视图的 id 这是为了更新 onclick 元素 但我找不到方法 知道如何为 boostrap 5 完成此操作 或我可以用其他方法吗 谢谢 tr a inactivate a div class modal fade mo
  • 选择变量的嵌套元素 - jQuery

    我希望将变量传递给函数并让函数选择该变量中的元素 我不熟悉这种情况的语法 但是有人可以建议吗 例如 当在容器内单击按钮时 我希望将该容器存储在变量中 好吧 我有那部分 但后来我希望选择该容器中的某个元素 例如 container div e
  • 使用模数按字母顺序对列表进行排序

    我在获取元素列表并按字母顺序对它们进行排序方面没有任何问题 但我很难理解如何使用模数来做到这一点 更新 这是按我的方式工作的代码 但是 我更喜欢下面提供的答案的可重用性 因此接受了该答案
  • PNG 透明度问题 - 带有黑色阴影的褪色图像 - IE 中的边框

    我使用图像旋转器在主页上显示一些图像 所有图像均为 PNG 格式 问题出在 IE 7 8 中 图像旁边有黑色阴影 我花了几个小时来解决这个问题 但仍然不知道问题出在哪里以及如何删除它 没有人有类似的问题和提示吗 如何解决 尝试使用 img
  • 我想检查 $('#td1').text() === "x" 是否?

    我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西 但它不起作用 添加检查代码后它就停止了 我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • 使用 jQuery/JS 打开时使
    标签的内容具有动画效果

    我只想要 HTML5 的内容details标记为 滑行 动画打开 而不是仅仅弹出打开 立即出现 这可以用 jQuery Javascript 实现吗 Fiddle http jsfiddle net 9h4Hq HTML
  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • 如何以编程方式处理 JqGrid 事件?

    我正在使用JqG rid 的 ASP NET 包装器 http www trirand net demoaspnet aspx 我想以编程方式连接一些网格的处理程序events http www trirand com jqgridwiki
  • jQuery Mobile 表单验证

    我有一个移动网站 除了验证之外一切都工作正常 基本上我希望从用户那里获取值 然后在单独的页面 process php 上处理它们 但是 在这样做之前 我需要检查以确保字段已填充 我已经研究了几种方法来做到这一点 但似乎没有一种有效 我现在有
  • jQuery 获取元素内的鼠标位置

    我希望制作一个控件 用户可以在 div 内单击 然后拖动鼠标 然后松开鼠标以指示他们想要的内容有多长 这是针对日历控件的 因此用户将指示特定事件的时间长度 看起来最好的方法是在父 div 上注册一个 mousedown 事件 而父 div
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • jQuery 对象相等

    如何确定两个 jQuery 对象是否相等 我希望能够在数组中搜索特定的 jQuery 对象 inArray jqobj my array 1 alert deviceTypeRoot deviceTypeRoot False alert d
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示

随机推荐

  • ubuntu软件安装报错

    出现E Unable to locate package get xff08 资源暂时不可用 xff0c 无法锁定管理目录 xff0c 是否有其他进程在占用 xff09 现获取root权限分开使用如下两条指令强制释放锁 1 sudo rm
  • Ubuntu安装软件

    1 利用APT工具安装软件 使用apt包管理工具 安装报E Unable to locate package get错误先root一下 使用语法 xff1a sudo apt get install 软件名 xff1b 2 deb软件包安装
  • JS中~location对象+navigator对象用法

    url xff08 统一资源定位符 xff09 包含的信息能指出文件的位置以及浏览器的处理方式 protocol host port path t query fragment http www itcast cn index htm1 n
  • JS中~偏移量设定方式与案例分析

    1 history对象方法 分析 xff1a 实现从主页跳转过来以后就会自动生成一个p标签并改写内容 xff0c 利用location对象修改herf方法值 xff0c 实现不用标签跳转 问题 xff1a 对于添加创建的元素使用方法遗忘 x
  • offsetWidth、clientWidth、scrollWidth三者的区别

    client可视区 client翻译过来就是客户端 xff0c 我们使用client系列的相关属性来获取元素可视区的相关信息 通过client系列的相关属性可以动态的得到该元素的边框大小 元素大小等 offsetWidth or offse
  • JS制作~淘宝固定侧边栏

    淘宝固定侧边栏 lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt meta http equiv 6
  • JS中~ flexible.js分析

    flexible js分析 1 document documentElement获取根标签 2 DOMContentLoaded 事件是文档加载完成时触发的事件 xff0c 文档加载完成是指DOM结构 xff08 所有文档标签 xff09
  • ubuntu磁盘挂载解决方法(2022/5/9)

    挂载磁盘 xff08 使用root权限去使用 xff09 注意 xff1a 1 建议全程以超级用户权限去调用 2 语法结构上的问题 xff08 mount 目标文件所在位置 43 一个空格 43 保存路径 xff09 3 挂载之前需要清空新
  • 缓动动画效果

    mouseenter 鼠标事件 当鼠标移动到元素上时就会触发mouseenter事件类似 mouseover xff0c 它们两者之间的差别是 mouseover鼠标经过自身盒子会触发 xff0c 经过子盒子还会触发 mouseenter
  • thinkphp根据时间戳查询时间范围内的记录

    这是获取当月月初和月末的时间戳 beginThismonth 61 mktime 0 0 0 date 39 m 39 1 date 39 Y 39 endThismonth 61 mktime 23 59 59 date 39 m 39
  • MySQL语句汇总(节选)

    create语句 xff0c 创建库 表 create database 数据库名 xff1b 创建数据库 create table 表名 xff08 列名1 数据类型 约束 xff0c 列名2 数据类型 约束 xff0c 列名3 数据类型
  • JS中~Dom和Bom方法汇总

    var newNode 61 document createElement 34 div 34 创建一个元素节点 var textNode 61 document createTextNode 34 hello world 34 创建一个文
  • ubuntu中文件夹的解压和创建用户组命令

    二 Windows下7ZIP软件的安装 因为Linux下很多文件是 bz2 xff0c gz结尾的压缩文件 xff0c 因此需要在windows下安装7ZIP软件 二 gzip压缩工具 gzip工具负责压缩和解压缩 gz格式的压缩包 gzi
  • JS高级部分对于数据、内存的解析

    内存中堆和栈道区别 xff1a 堆是在内存中开辟的一块较大容量的区域 xff0c 主要用来存放基本值类型的我们可以通过获取地址的方式去获得堆中的基本值类型 xff0c 且堆里面的内容一经存在便不会删除 xff0c 这也就是我们对一个变量实现
  • 原型链概念论述(一)

    对象中的静态成员和实例成员 xff1a 使用构造函数方法创建对象时 xff0c 可以给构造函数和创建的实例对象添加属性和方法 xff0c 这些属性和方法都叫做成员 实例成员 在构造函数内部添加给this 的成员 xff0c 属于实例对象的成
  • 原型链理论概述(二)

    面向对象的思维特点 xff1a 1 xff0e 抽取 xff08 抽象 xff09 对象共用的属性和行为组织 封装 成一个类 模板 xff09 2 xff0e 对类进行实例化 获取类的对象 面向对象编程我们考虑的是有哪些对象 xff0c 按
  • JS中~insertAdjacentHTML() 方法(插入元素到指定位置)

    insertAdjacentHTML 方法将指定的文本解析为 Element 元素 xff0c 并将结果节点插入到DOM树中的指定位置 它不会重新解析它正在使用的元素 xff0c 因此它不会破坏元素内的现有元素 这避免了额外的序列化步骤 x
  • JS中~ 面向对象编程制作tab栏

    面向对象编程制作tab栏 利用constructor属性接收实例对象传递过来的参数去获取和htm结构中的元素 xff0c 在类函数中对各种不同的功能封装成不同的函数 xff0c 在制作过程中相互调用 xff0c 第一步的点击上边按钮与此同时
  • 初识jquery

    jQuery 入口函数 1 function 2 document ready function 注意 xff1a 等着DOM结构渲染完毕即可执行内部代码 xff0c 不必等到所有外部资源加载完成 xff0c jQuery帮我们完成了封装
  • jQuery基础(二)

    xff1a eq获取到的索引号的index从0开始因此eq 2 是标签的第三个标签 选择器筛选 function 34 nav gt li gt a 34 mouseover function this siblings 34 ul 34