jQuery----API部分用法

最新推荐文章于 2024-06-19 14:45:15 发布

王濤

最新推荐文章于 2024-06-19 14:45:15 发布

阅读量360

点赞数 1

文章标签： jquery javascript html html5

本文链接：https://blog.csdn.net/Anber_wang/article/details/105801429

版权

jQuery之隐式迭代

      首先我们先了解一下什么是 隐式迭代
             jQuery会自动操作获取到的伪数组中的说有标签对象
            设定和获取是不一样的，

在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用,这就叫做隐式迭代

我们先看一下下面的代码：

这个是 html 部分的

    <ul>
        <li name="li1">1</li>
        <li name="li2">2</li>
        <li name="li3">3</li>
        <li name="li4">4</li>
        <li name="li5">5</li>
        <li name="li6">6</li>
        <li name="li7">7</li>
        <li name="li8">8</li>
    </ul>

    <script>

        // 对ul中的所有li进行操作

        // 1,获取其中的属性
        // 获取 ul中li的name属性的属性值
        // 获取只会获取第一个标签的内容
        console.log($('ul>li').attr('name'));

        // 2,设定其中的class属性值
        // 设定属性属性值等,会给伪数组中所有的标签都设定上指定的样式,属性等
        $('ul>li').addClass('li1').attr('index' , 1);

    </script>

可以看到我们的代码中有 2 种情况，

下面请看情况1 获取标签时：

在这里通过 li 标签的 name属性获取标签，只获取到第一个

情况2 设定标签时：

可以看到，在我们进行对标签的设定时，它会自动进行循环遍历

jQuery之选项卡

接下来我们做一个小练习

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        .cont {
            width: 800px;
            height: 600px;
            border: 5px solid #333;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }

        .cont ul {
            width: 100%;
            height: 60px;
            display: flex;
        }

        .cont ul li {
            flex: 1;
            font-size: 35px;
            color: #fff;
            border-left: 2px solid blue;
            border-right: 2px solid blue;
            background: hotpink;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .cont ol {
            flex: 1;
            position: relative;
        }

        .cont ol li {
            width: 100%;
            height: 100%;
            font-size: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            background: burlywood;
            display: none;
        }

        /* 按钮标签 哪个标签有这个属性,哪个就显示特殊背景颜色 */
        .cont ul li.active {
            background: skyblue;
            color: black;
        }

        /* 内容标签 哪个标签有这个属性,哪个就显示 */
        .cont ol li.active {
            display: flex;
        }
    </style>
</head>

<body>
    <div class="cont">
        <ul>
            <li name="ulli" class="active">按钮1</li>
            <li name="ulli">按钮2</li>
            <li name="ulli">按钮3</li>
        </ul>
        <ol>
            <li name="olli" class="active">内容1</li>
            <li name="olli">内容2</li>
            <li name="olli">内容3</li>
        </ol>
    </div>

    <script src="jquery.min.js"></script>
    <script>
        // 给ul中的所有li,添加点击事件
        $('ul>li').click(function(){
            $(this).addClass('active').siblings().removeClass('active').parent().next().find('li').removeClass('active').eq($(this).index()).addClass('active');          
        })

    </script>

下面对这个jQ代码的解释：

             $(this)        // this是当前标签,但是是js语法,$(this)变成jq对象
             .addClass('active')   // 给当前标签,新增class属性值,也就是点中效果
             .siblings()        // 当前标签的兄弟标签
             .removeClass('active')        // 删除兄弟标签的class选中效果的属性值,也就是active属性值,其他class会保留
             上面是完成ul中li的设定,现在要设定ol中的li
             .parent()        // 找li的直接父级,ul   
             .next()          // 找ul的下一个兄弟标签,ol
             .children()      // 获取ol标签中,所有的子级标签    或者 .find('li')
             .removeClass('active')        // 给所有的li去除选中效果,也就是class active属性值 
             .eq($(this).index())        //   $(this).index()  获取当前点击标签的索引    
                                        //   .eq( $(this).index() )  按照点击的li标签的索引,在ul中找li标签  
             .addClass('active');        //  添加点击效果,也就是class active属性值

jQuery之操作的是标签的内容

大概有三种方式，分别是：

$().html 等于 js的 innerHTML
$().text 等于 js的 innerText
$().val() 等于 js的标签.value
特别注意: 标签的布尔属性,使用 prop() 来获取属性值

$().html() 方式介绍：

                   获取或者设定标签内容
                   没有参数是获取标签内容
                   有参数是设定标签内容
                   支持标签,可以获取标签,也可以设定标签
                   设定内容,是全覆盖,之前的内容都会被覆盖
                   等同于  innerHTML()

例如：

        <div>我是div的原始内容
            <span>我是span</span>
        </div>
        console.log($('div').html());
        // 设定  支持设定标签
        $('div').html('<a href="网址链接">汉字</a>');

通过上面的操作之后，div 标签里面的内容会全部被 “汉字” 这两个汉字给覆盖掉；另外，可以看到的是，这个方法是可以获得标签的，例如 图1 的图片里面的控制台

$().text()

                $().text()    获取或者设定标签内容
                 不支持标签,只能获取标签的文本内容
                 等同于  innerText()

上面的介绍中只说的它们的不同点哦

        // 获取
         console.log($('div').text());

        // 设定   不支持设定标签
         $('div').text('<a href="https://www.baidu.com">百度</a>');

如图 3、 4、所示：不支持标签,只能获取标签的文本内容，而且不支持写入链接

$().val()

等同于 JavaScript中的标签对象.value 获取标签的value()属性值(特别说明，这里的value只能获取form表单元素里面的标签内容)

    <input type="text">

    <button>点击</button>

    <script>
        $('button').click(function(){
            console.log($('input').val());
        })
    </script>

如图 5 所示

王濤

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery----API部分用法

jQuery之隐式迭代首先我们先了解一下什么是隐式迭代 jQuery会自动操作获取到的伪数组中的说有标签对象设定和获取是不一样的，在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用,这就叫做隐式迭代我们先看一下下面的代...
复制链接

扫一扫