• Jquery元素筛选、html()和text()和val三者区别


    <!DOCTYPE html>

    <html lang="en">

    <head>

       <meta charset="UTF-8">

       <title>Document</title>

       <script type="text/javascript" src="jquery.1.11.1.min.js"></script>

    </head>

    <body>

       //html页面

        <ul style="position: relative;">

          <li>li1</li>

          <li class="bigFont">li2</li>

          <li>li3</li>

          <div>div</div>

          <li class="four">li4</li>

          <li><span class="a">li5</span></li>

        </ul>

         <ul>

          <li>li1</li>

          <li>li2</li>

          <li>li3</li>

        </ul>

        <h1>1</h1>

        <h1 class="five">2</h1>

        

         <p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用。</p>

         <h3>选中下面的文字,看看它的颜色</h3>

         <h3>选中下面的文字,看看它的颜色</h3>

         <h3>选中下面的文字,看看它的颜色</h3>

        

     <script type="text/javascript">

          $("li").eq(1).css("color","red");                 //索引为1的li元素,即第二个li元素

          $("ul li:first").html("选第一个元素");                //选第一个li

          $("li:last").html("这是最后一个");                    //选最后一个li

          $("ul").find(".four").css("font-size","30px");       //从ul容器里找类名为four的元素

          $(".four").next().css("font-size","50px");           //选中类名为four的后一个元素

          $("li:first").nextAll().css("font-size","50px");     //选中第一个li标签的后面所有元素

          $(".four").prev().css("font-size","10px");           //选中类名为four的前一个元素

          $(".four").prevAll().css("font-size","10px");        //选中类名为four的前面面所有元素

          $(".four").parent().css("background","blueviolet");     //选中类名为four的父元素标签,

          $(".a").parents().css("background","indianred");     //选中的是类名为a的祖先标签,整个html的颜色都会变化,

          $(".a").offsetParent().css("background","yellow");      //最近定位的祖先元素                    //

          $("h1").siblings().css("font-size","50px");       //和h1同一个级别的标签都会被选中

          $("ul").children(".four").text();                 //ul下面的子元素,类名为four的被选中

          $("h1").val();                                 //取h1标签对应的文本值,这个方法只能无参

          $("h1").html();                                //取h1标签对应的文本值,无参取值

          $("h1").html("123");                           //为h1标签赋值,有参赋值

          $("h1").text();                                //取h1标签对应的文本值,无参取值

     

      html()和text()和val()三者区别

       val()方法是取值,无参时,效果和html()一样,有参时可以为input框赋值,其他标签好像赋不了

       html()方法取值, $("p").nextAll("h3").html();控制台打印只会取第一个h3的值

       text()方法取值, $("p").nextAll("h3").html();控制台打印只会取三个h3的值

       如果是带参的html("aaa")和text("aaa")效果一样

     

      </script>

    </body>

    </html>

  • 相关阅读:
    fiddler配置及使用教程
    获取字符串中出现次数最少的字符
    引用数据类型的深拷贝
    jquery一些方法
    常用字体
    图片模拟
    返回上一页并刷新
    移动端网页调试神器
    input一些限制
    使用transform后z-index失效的解决方法
  • 原文地址:https://www.cnblogs.com/binghuaZhang/p/10841590.html
Copyright © 2020-2023  润新知