jQuery学习笔记（2.0）

最新推荐文章于 2024-07-22 14:10:07 发布

mez_Blog

最新推荐文章于 2024-07-22 14:10:07 发布

阅读量599

点赞数 12

分类专栏： jQuery 文章标签： jquery 学习笔记

本文链接：https://blog.csdn.net/mez_Blog/article/details/137193956

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.jQuery实现下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>
      <a href="#">微博</a>
      <ul>
        <li><a href="#">微博</a></li>
        <li><a href="#">微博</a></li>
        <li><a href="#">微博</a></li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li><a href="#">微博</a></li>
        <li><a href="#">微博</a></li>
        <li><a href="#">微博</a></li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li><a href="#">微博</a></li>
        <li><a href="#">微博</a></li>
        <li><a href="#">微博</a></li>
      </ul>
    </li>
  </ul>

  <script>
    $(function(){
      $(".nav>li").mouseover(function(){
        $(this).children("ul").show();   //jquery的当前元素
      });
      //鼠标离开
      $(".nav>li").mouseout(function(){
        $(this).children("ul").hide();
      })
    })
  </script>
</body>
</html>

2.选择某个节点的兄弟节点：$("ol .item").siblings("li").css("color","red") //将ol下的类名为item的节点的所有li兄弟节点的样式进行设置（不包括item节点自己）。

3.选择当前元素之后的所有元素：nextAll，选择当前元素之前的所有元素prevtAll

4.第二种方式根据索引选择节点：$("ul li").eq(2).css("color","red") //以前的方式$("ul li:eq(2)").css...

5.判断是否有某个类名：$("ul li").hasClass("current") //返回true或false的布尔值

6.排他思想：$(function(){

$("button").click(function(){ //隐式迭代

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

$(this).siblings("button").css("background",""); //隐式迭代

})})

7.添加类：$(function(){

$("div").click(function(){

//当点击div时，添加类名current

$(this).addClass("current")

})

//当点击div时，删除类名current

$("div").click(function(){

$(this).removeClass("current")

})

//当点击div时，切换类名(如果有，就去掉，如果没有，就添加)

$("div").click(function(){

$(this).toggleClass("current")

})

8.类操作与className的区别：原生js中className会覆盖原来的类名，而jQuery不会。

$(".one").addClass("current") //在原先类名的基础上，追加类名，不影响以前的类名

$(".one").removeClass("current") //只删除current类，原来的one保留

9.jQuery效果：

显示隐藏：show() hide() toggle()

滑动：slideDown() slideUp() slideToggle()

淡入淡出：fadeIn() fadeOut() fadeToggle() fadeTo()

自定义动画：animate()

show([speed,[easing],[fn]])

speed：预定速度设置：slow,normal,fast

easing:指定切换效果，默认是swing

fn：回调函数，在动画完成时执行的函数

hide([speed,[easing],[fn]])

$("button").eq(1).click(function(){

$("div").hide("slow") //hide(1000,function(){

// alert(1)}) "fast" easing

})

toggle([speed,[easing],[fn]])

$("button").eq(2).click(function(){

$("div").toggle("slow") //toggle(1000,function(){

// alert(1)}) "fast" easing //一般情况下，都不需要加参数，直接显示隐藏

})

mez_Blog

关注

12
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery学习笔记（2.0）

2.选择某个节点的兄弟节点：$("ol .item").siblings("li").css("color","red") //将ol下的类名为item的节点的所有li兄弟节点的样式进行设置（不包括item节点自己）。4.第二种方式根据索引选择节点：$("ul li").eq(2).css("color","red") //以前的方式$("ul li:eq(2)").css...$(".one").addClass("current") //在原先类名的基础上，追加类名，不影响以前的类名。
复制链接

扫一扫