• 中文
    • English
  • 注册
  • 查看作者
    • 5. JQuery选择器中的常用方法

      一. click()

      点击事件,使用方法:$(selector).click(function);

      二.  css()

      css() 方法返回或设置匹配的元素的一个或多个样式属性。使用方法:

      设置元素样式属性:$(selector).css(name,value):

      返回元素样式属性:$(selector).css(name)

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
          <script type="text/javascript">
              $(function () {
                  $("button").click(function () {
                      $("p").css("color","red");
                      alert($("p").css("color"));
                  });
              });
          </script>
      
      </head>
      <body>
      
      <p>段落</p>
      
      <button type="button">段落变色</button>
      </body>
      </html>

      三.  siblings() 

      siblings() 方法可以返回被选元素的所有兄弟元素(可以理解为,返回该元素的所有哥哥和弟弟),无论前后。使用方法:$(selector).siblings(filter),其中selector是字符串

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
          <script type="text/javascript">
              $(function () {
      
                  // $("#3").siblings().css("color","yellow"); //1245678都变成黄色
                  $("#3").siblings("span").css("color","yellow"); //678都变成黄色
              });
          </script>
      
      </head>
      <body>
      <div>
          <p>1</p>
          <p>2</p>
          <p id="3">3</p>
          <p>4</p>
          <p>5</p>
          <span>6</span> <br/>
          <span>7</span><br/>
          <span>8</span><br/>
      </div>
      
      </body>
      </html>

      四.  nextAll

      nextAll(selector) 方法返回被选元素之后的所有同级元素(可以理解为,返回该元素的所有弟弟)

      .next(selector) – 返回被选元素的后一个同级元素,其中selector是可选的,如果使用,则必须是字符串值

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
          <script type="text/javascript">
              $(function () {
                  // $("#3").nextAll().css("color","red");//45678变色
                  // $("#3").nextAll("span").css("color","red");//678变色
                  $("#3").next().css("color","red");//4变色
              });
          </script>
      
      </head>
      <body>
      <div>
          <span>0</span> <br/>
          <p>1</p>
          <p>2</p>
          <p id="3">3</p>
          <p>4</p>
          <p>5</p>
          <span>6</span> <br/>
          <span>7</span><br/>
          <span>8</span><br/>
      </div>
      
      </body>
      </html>

      五.  prevAll()

      prevAll(selector) 方法返回被选元素之前的所有同级元素。(可以理解为,返回该元素的所有哥哥)

      prev(selector):返回被选元素的前一个同级元素其中selector是可选的,如果使用,则必须是字符串值

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
          <script type="text/javascript">
              $(function () {
                  // $("#3").prevAll().css("color","red");//012变色
                  // $("#3").prevAll("span").css("color","red");//0变色
                  $("#3").prev().css("color","red");//2变色
              });
          </script>
      
      </head>
      <body>
      <div>
          <span>0</span> <br/>
          <p>1</p>
          <p>2</p>
          <p id="3">3</p>
          <p>4</p>
          <p>5</p>
          <span>6</span> <br/>
          <span>7</span><br/>
          <span>8</span><br/>
      </div>
      
      </body>
      </html>

      六.   slideToggle()

      slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。使用方法:$(selector).slideToggle(speed,callback)

      spped和callback都是可选参数,其中speed是速度,可以使用数字(毫秒)或者单词(”slow” 、”normal”、”fast”)来控制。callback用于在slideToggle函数执行完之后,要执行的函数。

       function repeat() {
            $("#mover").slideToggle("slow", repeat); //通过调用自身,用于反复显示隐藏
      }

      七.  hide()和show()

      hide():如果被选的元素已被显示,则隐藏该元素。使用方法:$(selector).hide(speed,callback),spped和callback都是可选参数,其中speed是隐藏的速度,可以使用数字(毫秒)或者单词(”slow” 、”normal”、”fast”)来控制。callback用于在hide函数执行完之后,要执行的函数。

      show():如果被选元素已被隐藏,则显示这些元素。使用方法:$(selector).show(speed,callback),spped和callback都是可选参数,其中speed是隐藏的速度,可以使用数字(毫秒)或者单词(”slow” 、”normal”、”fast”)来控制。callback用于在show函数执行完之后,要执行的函数。

      八.  val()

      val() 方法返回或设置被选元素(注意是元素的值,而不是元素内容)的值,元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

      返回被选元素的值:$(selector).val()

      设置备选元素的值:$(selector).val(value),value可选。

       $("input:text").val("哈哈哈");

      九.  text()

      text() 方法方法设置或返回被选元素的文本内容。

      返回被选元素的文本内容:$(selector).text()

      设置备选元素的文本内容:$(selector).text(value),value可选。

      //获取下拉框 选中 的内容
      $("select[name='test']>option:selected").each(function () {
      	console.log($(this).text());
      });

      十.  each()

      each() 方法规定为每个匹配元素规定运行的函数。使用方法:$(selector).each(function(index,element))

      index – 选择器的 index 位置

      element – 当前的元素(也可使用 “this” 选择器)

      //获取多选框 选中 的内容
      
      $(":checkbox:checked").each(function () {
          console.log($(this).val());
      
      });

      十一:attr()

      attr() 方法设置或返回被选元素的属性和值。

      十二:prop

      prop() 方法设置或返回被选元素的属性和值。

      prop() 方法主要用于检索属性值,例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected)如需检索 HTML 属性,请使用 attr() 方法代替。

      $("button").attr("disabled",true); //true不要用引号包裹
      
      $("button").attr("disabled",false);

      参考资料

      w3school

      菜鸟教程

      芈老头

      山东省·济宁市
    • 0
    • 0
    • 0
    • 1.2k
    • 请登录之后再进行评论

      登录

      赞助本站

      • 支付宝
      • 微信
      • QQ

      感谢一直支持本站的所有人!

      单栏布局 侧栏位置: