jQuery学习记录二

最新推荐文章于 2022-04-01 20:16:40 发布

毋十三

最新推荐文章于 2022-04-01 20:16:40 发布

阅读量227

点赞数

本文链接：https://blog.csdn.net/qq_34117624/article/details/83069866

版权

这篇博客详细介绍了jQuery中设置元素样式的三种方法，包括链式编程的应用，并探讨了如何解决样式冲突问题。此外，还讲解了jQuery中的动画效果，如show/hide、slide和fade系列方法的使用，以及animate函数实现自定义动画。文章通过多个案例展示了元素操作和动画效果的实际应用。

摘要由CSDN通过智能技术生成

索引选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
    //页面加载
    $(function () {
      $("#btn").click(function () {
        //所有的li中索引为2的li
        $("ul>li:eq(2)").css("backgroundColor","green");
        //所有的li中索引小于5的li
        $("ul>li:lt(5)").css("backgroundColor","deeppink");
        //所有的li中索引大于5的li
        $("ul>li:gt(5)").css("backgroundColor","hotpink");
        //所有li中大于三小于五，也就是四
         $("ul>li:lt(5):gt(3)").css("backgroundColor","blue");
      });
    });
  </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<ul>
  <li>任贤齐</li>
  <li>张震岳</li>
  <li>罗大佑</li>
  <li>刘德华</li>
  <li>郭富城</li>
  <li>张学友</li>
  <li>黎明</li>
  <li>周星驰</li>
  <li>吴孟达</li>
  <li>周润发</li>
</ul>
</body>
</html>

案例：好友面板切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        #ul li{
            margin-bottom: 10px;
            background-color: orange;
            font-size: 20px;
            font-weight: bolder;
            cursor: pointer;
        }
        #ul li ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #ul li ul li{
            background-color: pink;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function () {
            $('#ul>li>ul').hide();
            $('#ul>li').mouseenter(function () {
                $(this).children('ul').show(500);
                /*找到兄弟节点中为 li 的节点的，将其他 ul 隐藏*/
                $(this).siblings('li').find('ul').hide(500);
            });
        });
    </script>
</head>
<body>
<div style="width: 200px;height: 500px;border: 1px solid red;">
    <ul id="ul" style="list-style: none;margin: 0;padding: 0;text-align: center">
        <li>
            幼儿园同学
            <ul>
                <li>tom</li>
                <li>rose</li>
                <li>jack</li>
            </ul>
        </li>
        <li>
            小学同学
            <ul>
                <li>tomm</li>
                <li>rosee</li>
                <li>jackk</li>
            </ul>
        </li>
        <li>
            中学同学
            <ul>
                <li>tommm</li>
                <li>roseee</li>
                <li>jackkk</li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>

元素样式设置的三种方式

        *第一种写法:
//        $("#dv").css("width","300px");
//        $("#dv").css("height","200px");

*第二种写法:链式编程
//$("#dv").css("width","300px").css("height","200px")

        *第三种写法:键值对的写法
        var json={"width":"200px","height":"100px","backgroundColor":"pink","border":"2px solid green"};
        $("#dv").css(json);

链式编程:对象不停的调用方法. ↑ 第二种写法就是链式编程的案例。

*调用方式：对象.方法().方法.方法().方法();

//对象调用方法,如果返回值还是当前这个对象，那么就可以继续的调用方法
//经验:在jQuery中,一般情况,对象调用的方法,这个方法的意思是设置的意思,那么返回来的几乎都是当前的对象,就可以继续的链式编程了

元素样式的设置

*总结:设置元素的样式可以使用css()方法,也可以使用addClass()或者是removeClass()方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    .cls{
      width: 200px;
      height: 100px;
      background-color: crimson;
    }
    .cls2{
      border: 2px solid green;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      $("#btn").click(function () {
        //为div设置类样式,同时应用多个类样式
        //$("#dv").addClass("cls");
        //$("#dv").addClass("cls").addClass("cls2");
        //$("#dv")

最低0.47元/天解锁文章

毋十三

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习记录二

索引选择器&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;title&lt;/title&gt; &lt;script src="jquery-1.12.1.js"&gt
复制链接

扫一扫