jQuery 基础知识(二)

前面已经介绍HTML、CSS和javaScript，这三个前端语言，俗称前端三剑客。下面来学习一个javaScript简化并封装好的库——jQuery库。

01 - jQuery选择集过滤

  • 选择集过滤的介绍

选择集过滤就是在选择标签的集合里面过滤自己需要的标签

  • 选择集过滤的操作

      • has(选择器名称)方法，表示选取包含指定选择器的标签

      • eq(索引)方法，表示选取指定索引的标签

has方法的示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <div id="test">测试</div>
  <div id="test2">开发</div>
  <script>
    $(function () {
      //  has方法的使用
      var $div = $("div").has("input");
      //  设置样式
      $div.css({ "background": "red" });
    });
  </script>

  <div>
    这是第一个div
    <input type="text" id="mytext">
  </div>

  <div>
    这是第二个div
    <input type="text">
    <input type="button">
    <br />
    <span id="test2">开发</span>
  </div>

  <div>
    <span id="test3">开发</span>
  </div>


</body>

</html>

运行结果：

 

 

 

eq方法的示例代码:

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  设置样式
        $div.css({"background":"red"});

        //  eq方法的使用
        var $div = $("div").eq(1);
        //  设置样式
        $div.css({"background":"yellow"});
    });
</script>

<div>
    这是第一个div
    <input type="text" id="mytext">
</div>

<div>
    这是第二个div
    <input type="text">
    <input type="button">
</div>

说明：

  • 选择集过滤可以使用has方法和eq方法来完成

  • jquery给标签设置样式使用css方法

  • 返回拥有一个 <span> 元素在其内的所有 <p> 元素，如上例子。

02 - jQuery选择集转移

选择集转移就是以选择的标签为参照，然后获取转移后的标签。

  • 选择集转移操作

    • $('#box').prev(); 表示选择id是box元素的上一个的同级元素

    • $('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素

    • $('#box').next(); 表示选择id是box元素的下一个的同级元素

    • $('#box').nextAll(); 表示选择id是box元素的下面所有的同级元素

    • $('#box').parent(); 表示选择id是box元素的父元素

    • $('#box').children(); 表示选择id是box元素的所有子元素

    • $('#box').siblings(); 表示选择id是box元素的其它同级元素

    • $('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素

选择集转移的示例代码:

<script>
    $(function(){
        var $div = $('#div01');

        $div.prev().css({'color':'red'});
        $div.prevAll().css({'text-indent':50});
        $div.next().css({'color':'blue'});
        $div.nextAll().css({'text-indent':80});
        $div.siblings().css({'text-decoration':'underline'})
        $div.parent().css({'background':'gray'});
        $div.children().css({'color':'red'});
        $div.find('.sp02').css({'font-size':30});
    });  
</script>

<div>
    <h2>这是第一个h2标签</h2>
    <p>这是第一个段落</p>
    <div id="div01">这是一个<span>div</span><span class="sp02">第二个span</span></div>
    <h2>这是第二个h2标签</h2>
    <p>这是第二个段落</p>
</div>

03 - jQuery读取和设置元素内容

  • html的使用方法

jquery中的html方法可以获取和设置标签的html内容：

<script>
    $(function(){

        var $div = $("#div1");
        //  获取标签的html内容
        var result = $div.html();
        alert(result);
        //  设置标签的html内容，之前的内容会清除
        $div.html("<span style='color:red'>你好</span>");
        //  追加html内容
        $div.append("<span style='color:red'>你好</span>");

    });
</script>

<div id="div1">
    <p>hello</p>
</div>

说明:
给指定标签追加html内容使用append方法
获取和设置元素的内容使用: html方法
给指定元素追加html内容使用: append方法。

 

 

工欲善其事，必先利其器！

posted @ 2023-02-10 10:57  全栈测试开发日记  阅读(25)  评论(0)    收藏  举报