• 中文
    • 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.4k
  • 请登录之后再进行评论

    登录
    单栏布局 侧栏位置: