$()下的常用方法

1.filter() not() 过滤

filter : 过滤选择
not : filter的反义词不选择

<div class="box1">11111</div>
<div class="box2">22222</div>
<script>
$(function(){
    $('div').filter('.box1').css('background','red');    //设置的是box1
    $('div').not('.box1').css('background','blue');    //设置的不是box1而是box2
});
</script>

2.has() 包含

<div>div1<span class="box">span</span></div>
<div class="box">div2</div>
<script>
$(function(){
    //filter针对的是当前元素，has()z针对的是当前元素里面的元素
    $('div').has('span').css('background','red');        //第一个变红色
    $('div').has('.box').css('background','red');      //第一个变红色
    $('div').filter('.box').css('background','red');  //第二个变红色
    
});
</script>

3.next() 下一个 prev()上一个

    <h1>标题标题标题</h1>
    <p>111</p>
    <div>222</div>
    <script>
    $(function () { 
        $('h1').next().css('background','red');
        $('p').prev().css('background','blue');    
    })    
    </script>

4.find() eq()查找

<div>
    <h3>h3</h3>
    <h2>h2</h2>
    <h3>h3</h3>
    <h3>h3</h3>
    <h2>h2</h2>
    <h2>h2</h2>
</div>
<h2>h2</h2>
<script>
$(function(){
    $('div').find('h3').css('background','blue');    
    $('div').find('h2').eq(0).css('background','red');    
});
</script>

5. index() 索引就是当前元素在所有兄弟节点中的位置

<ul>
    <li>11</li>
    <li>22</li>
    <li class="three">33</li>
    <li>44</li>
    <li>55</li>
</ul>
<script>
    $(function () { 
        alert($('.three').index());  //弹出来是2     
    })    
</script>

6.addClass()添加样式 removeClass 移除样式

7.width() //width

innerWidth() //width + padding

outerWidth() //width + padding + border

outerWidth(true) //width + padding + border + margin

<div>div</div>
div{ width:100px; height:100px; background:red; padding:10px; border:10px blue solid; margin:10px;}
<script>
$(function(){
    alert( $('div').width() );  //width    100
    alert( $('div').innerWidth() );  //width + padding  120    
    alert( $('div').outerWidth() );  //width + padding + border      140
    alert( $('div').outerWidth(true) );  //width + padding + border + margin  160    
});
</script>

8.insertBefore()把一个节点添加到一个指定节点的前面; insertAfter()把一个节点添加到一个指定节点的后面(外部的前面或后面)

appendTo相当于原生的appendChild appendTo把一个节点添加到一个指定节点内部的最后面

prependTo相当于原生的 appendTo把一个节点添加到一个指定节点内部的最前面

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script>
        $(function(){
        $('span').insertBefore($('div'));
        })
    </script>

</head>
<body>
    <div>div</div>
    <span>span</span>
</body>
</html>

span标签被剪切到div标签前面

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script>
        $(function(){
        $('div').insertAfter($('span'));
        })
    </script>
</head>
<body>
    <div>div</div>
    <span>span</span>
</body>
</html>

div标签被剪切到span标签前面

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script>
        $(function(){
        $('div').appendTo($('span'));
        })
    </script>
</head>
<body>
    <div>div</div>
    <span>span</span>
</body>
</html>

把div标签剪切放到span标签里面的最后面

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script>
        $(function(){
        $('div').prependTo($('span'));
        })
    </script>
</head>
<body>
    <div>div</div>
    <span>span</span>
</body>
</html>

把div标签剪切放到span标签里面的最前面

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script>
        $(function(){
        //$('span').insertBefore('div');//把span标签剪切到div标签的前面
        //$('div').before($('span'));//div的标签前面是span

        //区别 ：后续操作变了
    
        //$('span').insertBefore( $('div') ).css('background','red');//span变成红色    
        //$('div').before( $('span') ).css('background','red');//div变成红色

        })
    </script>
</head>
<body>
    <div>div上</div>
    <span>span下</span>
</body>
</html>

insertBefore insertAfter appendTo prependTo和before after append prepend 都可以把标签调换到一样的位置，但是后续操作加样式却不一样了

9.remove()删除节点

$('div').remove()  
<div></div>
<span><span>
div标签被删掉

10.指定元素的一个或多个事件绑定事件处理函数
要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script>
$(function(){

    /*$('div').click(function(){
        alert(123);
    });*/
    
    /*$('div').on('click',function(){
        alert(123);
    });*/
    
    /*$('div').on('click mouseover',function(){
        alert(123);
    });*/
    
    $('div').on({
        'click' : function(){
            alert(123);
        },
        'mouseover' : function(){
            alert(456);
        }
    });    
});
</script>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>

11.scrollTop()滚动条相对于其顶部的偏移。

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script>
        $(function(){
        $(document).click(function(){
        alert($(window).scrollTop());
        });        
            });
    </script>
</head>
<body style="height:2000px">    
内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</body>
</html>

滚动条垂直位置和滚动区隐藏区域的顶部高度像素值是相同的。如果滚动条是在最顶部，或者这个元素没有可滚动的，那么这个数字是0。

posted @ 2016-06-23 18:01 Cutelady 阅读(366) 评论(0) 收藏举报

刷新页面返回顶部

Cutelady0927

爱生活，爱前端。

$()下的常用方法