袁磊老师的课，小方的jQuery笔记（二），老周在边上陪着，真好！

最新推荐文章于 2019-05-14 16:58:56 发布

赵俸堃是我的名字

最新推荐文章于 2019-05-14 16:58:56 发布

阅读量255

点赞数

分类专栏：前端基础袁磊老师的课 jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/qq_43511842/article/details/88190977

版权

前端基础同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

袁磊老师的课

19 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

3月5日
老师说
1.你的jQuery文件一定要和html文件放在一个文件夹下！
2. var str = "<div class='box'>"这里，注意双引号中不能再用双引号，只能用单引号！
3. 表单操作要用val（）来获取

 var sr = $("#disname").val();

 // val是value的缩写，可以用val来获取表单

如果该方法未设置参数，则返回被选元素的当前值 get
如果设置参数的话，会在input中显示这个参数 set
看一下我们的代码

<body>
    <input type="text">
    <button>确认添加</button>
    <ul></ul>
    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            $("button").click(function(){
                var sr = $("input").val("lalala");
            })
        })
    </script>
</body>

效果图：
在这里插入图片描述

点击确认后：

toggleClass() 方法是点击进行class的设置与移除
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #list>li{
            width: 160px;
            height: 33px;
            border: 1px solid #c00;
            line-height: 33px;
            text-align: center;
            font-size:14px;
            margin: 5px;
            list-style:none;
        }
        #list>.hg{
            background-color: #ff0;
            font-weight: bold;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <ul id = "list">
        <li>addClass</li>
        <li>addClass</li>
        <li>addClass</li>
        <li>addClass</li>
        <li>addClass</li>
        <li>addClass</li>
        <li>addClass</li>
        <li>addClass</li>
        <li>addClass</li>
    </ul>

    <script src="jquery.min.js"></script>
    <script>
        $("#list>li").click(function(){
            // $("#list>li").toggleClass("hg");
            // // toggleClass方法是设置和删除括号中的类

            $(this).toggleClass("hg");
            // 当想单独点一个设置一个的话，用this即可
        })
        
        </script>
</body>
</html>

效果：
在这里插入图片描述

下面是老师带着写的练习：（效果，自己拿去试）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #list>li{
            width: 160px;
            height: 33px;
            border: 1px solid #c00;
            line-height: 33px;
            text-align: center;
            font-size:14px;
            margin: 5px;
            list-style:none;
        }
        #list>.hg{
            background-color: #ff0;
            font-weight: bold;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <h2>第<span>0</span>个li </h2>
    <ul id = "list">
        <li>addClass</li>
        <li>addClass</li>
        <li>addClass</li>
        <li>addClass</li>
        <li>addClass</li>
        <li>addClass</li>
        <li>addClass</li>
        <li>addClass</li>
        <li>addClass</li>
    </ul>

    <script src="jquery.min.js"></script>
    <script>
        $("#list>li").click(function(){
            $(this).toggleClass("hg");
            // 当想单独点一个设置一个的话，用this即可
        })
        $("#list>li").mouseover(function(){
            var index = $("#list>li").index(this) + 1;  //前面$符号括号中添加的而一定是和上一行括号里的对应起来，必须相同
        //    从0开始数的，因为效果是将鼠标放在第一个上面的时候显示的是第1个，上面一行代码还进行了+1操作，所以，是从0开始数的。
            $("h2 span").text(index);
        })
        // 双击一个li， 后面的li里的内容改变
        $("#list>li").dblclick(function(){
            $(this).next().text("ZHAO");
        })
        
        </script>
</body>
</html>

赵俸堃是我的名字

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
袁磊老师的课，小方的jQuery笔记（二），老周在边上陪着，真好！

3月5日老师说1.你的jQuery文件一定要和html文件放在一个文件夹下！2. var str = &quot;&amp;lt;div class='box'&amp;gt;&quot;这里，注意双引号中不能再用双引号，只能用单引号！3. 表单操作要用val（）来获取 var sr = $(&quot;#disname&quot;).val(); // val是value的缩写，可以用val来获取表单如果该方法未设置参数
复制链接

扫一扫

专栏目录