jQuery 属性

属性

名称	说明	举例
操作节点属性
attr(key ,value);	获取添加属性值	$('target').attr(key);//读元素属性 $('target').attr(key ,value);//设置元素属性
removeAttr()	删除属性值	$('target').input.removeAttr('key');
prop()同attr()
removeProp()同removeAttr()	用来删除由.prop()方法设置的属性集。
val()	获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值。	$('target').val();

attr()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
</style>
</head>
<body>
<img src="http://ruyic.com/blog/uploads/image/201602/pic1454919599341872.jpg"/>
<script>
    //attr()与prop()基本用法是一样的
    $('img').click(function(){
        //alert($(this).attr('src').indexOf('.jpg'));
        
        /***
        if($(this).attr('src').indexOf('.jpg')==62){
        $(this).attr('src' ,'http://ruyic.com/blog/uploads/image/201705/pic1494667867965667.jpeg');
        }else{
        $(this).attr('src' ,'http://ruyic.com/blog/uploads/image/201602/pic1454919599341872.jpg');
        }
        ***/
        
        if($(this).prop('src').indexOf('.jpg')==62){
                $(this).prop('src' ,'http://ruyic.com/blog/uploads/image/201705/pic1494667867965667.jpeg');
            }else{
                $(this).prop('src' ,'http://ruyic.com/blog/uploads/image/201602/pic1454919599341872.jpg');
            }
    });
</script>
</body>
</html>

removeAttr()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>removeAttr()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
</style>
</head>
<body>
<button>button</button>
<input type="text" title="hello" />
<div></div>
 
<script>
    /***
    .removeAttr() 方法使用原生的JavaScript removeAttribute()函数,
    但是它的优点是可以直接在一个jQuery对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。
    注意: Internet Explorer8，9 ，和11中，使用.removeAttr()删除一个内联onclick 事件处理程序不会达到预期的效果，
    为了避免潜在的问题，使用 .prop()代替：
    $element.prop("onclick", null);
    console.log("onclick property: ", $element[0].onclick);
    ***/

    var inputTitle = $("input").attr("title");
    
    $("button").click(function(){
        var input = $('input:text');
        if (input.attr("title") == inputTitle){
            input.removeAttr("title")
        }else{
            input.attr("title", inputTitle);
        }
        $("div").html("input title is now " + input.attr("title"));
    });
</script>
</body>
</html>

prop()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prop()操作节点的布尔属性</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
h1{margin-bottom:20px;}
</style>
</head>
<body>

<h1>操作节点的布尔属性</h1>
<p>苹果：<input type="checkbox" id="fruit01" name="checkbox[]" value="0"></p>
<p>香蕉：<input type="checkbox" id="fruit02" name="checkbox[]" value="1"></p>
<p>葡萄：<input type="checkbox" id="fruit03" name="checkbox[]" value="2"></p>
<p>西瓜：<input type="checkbox" id="fruit04" name="checkbox[]" value="3"></p>
<p>鸭梨：<input type="checkbox" id="fruit05" name="checkbox[]" value="4"></p>
<p>橘子：<input type="checkbox" id="fruit06" name="checkbox[]" value="5"></p>
<input type="button" id="quanxuan" value="全选" />
<input type="button" id="buxuan" value="全不选" />
<input type="button" id="fanxuan" value="反选" />

<script>
    $('#quanxuan').click(function(){
        $('input[type=checkbox]').prop('checked' ,true);
    });
    
    $('#buxuan').click(function(){
        $('input[type=checkbox]').prop('checked' ,false);
    });
    
    $('#fanxuan').click(function(){
        $('input[type=checkbox]').each(function(){
            if($(this).prop('checked')){
                $(this).prop('checked',false);
            }else{
                $(this).prop('checked',true);
            }
        });
    });
    
/***
<input type="checkbox" id="fruit01" name="checkbox[]" value="0" checked="checked">
checked属性根本没必要像网上流传的那样写写成checked="checked"
要想让它选中就选一个checked就行了
<input type="checkbox" id="fruit01" name="checkbox[]" value="0" checked>
为什么?因为选中没选中,这个属性就称之为布尔属性,只有两种可能
有这个属性就行了,他肯定是选中状态,不管值是什么,不需要要什么值
要没选中,就没有这个属性就行了
比如还有：
<input disabled type="button" id="fanxuan" value="反选"  />
不用是写disabled="disabled"
还有
<option value="" selected/></option>
就写一个selected
这种布尔属性，只关心他有没有这个属性就够了,不用关系他的值，写他的值也没有意义
对这类布尔属性,不要用他的attr()来操作，会出一些莫名其妙的bug
所以他的作者有专门为他封装了一个布尔属性的操作方法prop()
***/
</script>
</body>
</html>

Checked属性显示一个复选框，因为它的变化和属性

<!DOCTYPE html>
<html>
<head>
<title>Checked属性显示一个复选框，因为它的变化和属性</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
body{padding:100px;}
div, p{width: 20%;background:ghostwhite;padding:5px;margin-bottom:20px;margin-top:20px;}
</style>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 
<script>
$( "input" ).change(function() {
  var $input = $(this);
  $( "p" ).html(
    ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
</body>
</html>

CSS

名称	说明	举例
CSS
addClass()	添加样式	$(target).addClass("myClass1 myClass2");
css()	设置匹配元素的css样式(行内样式) 获取匹配元素集合中的第一个元素的样式属性的计算值	$(target).css('color' ,'red');//添加行内样式 $(target).css('background-color');//获取属性值
toggleClass()	切换样式
hasClass()	判是否有样式	<div id="mydiv" class="foo bar"></div> $('#mydiv').hasClass('foo');返回true $('#mydiv').hasClass('foo').toString();//boolean对象转换字符串
removeClass()	移除样式	$(target).removeClass("myClass1 myClass2"); $(target).removeClass();//移除所有样式

addClass()

<!DOCTYPE html>
<html>
<head>
<title>addClass()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
body{padding:100px;}
.glee-0,.glee-1,.glee-2{float:left;margin:10px;height:100px; width:100px;background:orange;}
.glee-1{background:pink;}
.glee-2{background:yellow;}
.glee{background: yellow;color:red;}
.rose{background:red;color:orange;}
</style>
</head>
<body>
    <p>p 01</p>
    <p>p 02</p>
    <p>p 03</p>
    <span style="display:block;clear: both;height: 50px;"></span>
    
    <div>One`s real value first lies in to what degree and</div>
    <div>what sense he set himself</div>
    <div class="glee">一个人的真正价值首先决定于他在什么程度上和在什么意义上从自我解放出来.</div>
    <div>2018 04 16</div>
    <p>这是jquery写入的样式：</p>
    
<script>
    //给每个p标签加一个样式glee-1 ,glee-2 ,glee-3
    $('p').addClass(function(index){
        return 'glee-'+index;
    });
    
    //给含有.glee样式的div在增加一个.rose样式
    $("div").addClass(function(index, currentClass){
        var addedClass;
        if(currentClass === "glee"){
            addedClass = "rose";
        }
        return addedClass;
    });
    
    //并把含有样式的div样式属性的属性值插入p标签内
    $('p:last').append(
        $('div').filter('.glee').attr('class')
    );
</script>
</body>
</html>

css()

操作节点的css属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作节点的css属性</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
div{height:100px;width:100px;border:1px solid green;}
</style>
</head>
<body>
<div>点击变大</div>
<script>
    $('div').click(function(){
        var width_glee = parseInt($('div').css('width'));
        var height_glee = parseInt($('div').css('height'));
        var border_glee = parseInt($('div').css('borderBottomWidth'));
        
        $(this).css('width' ,width_glee + 10 + 'px');
        $(this).css('height' ,height_glee + 10 + 'px');
        $(this).css('borderBottomWidth' ,border_glee + 1 + 'px');
    });
    
    /***
    获取速写的CSS属性(例如： margin, background, border) 是不支持的，
    虽然有些浏览器有这个功能，但是不能保证。
    例如，如果你想获取已经渲染的border-width，可以使用$( elem ).css( "borderTopWidth" ), $(elem).css("borderBottomWidth")，
    其他的也是如此，依此类推。
    ***/
</script>
</body>
</html>

css()

点击div得到它的背景颜色

<!DOCTYPE html>
<html>
<head>
<title>css()点击div得到它的背景颜色</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
div{width:60px; height:60px; margin:5px; float:left; }
</style>
</head>
<body>
 
<span id="result">&nbsp;</span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>

<script>
$('div').click(function(){
    var color = $(this).css('background-color');
    $('#result').html('color:'+color);
});
</script>
</body>
</html>

hasClass()

<!DOCTYPE html>
<html>
<head>
<title>hasClass()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
body{padding:100px;}
.bee{background:yellow;color:red;}
.honeybee{background:red;color:orange;}
</style>
</head>
<body>
<div class="bee">点击切换样式</div>
<script>
    //css()添加行内样式
    $('div').css({'height':'200px', 'width':'200px'});
    
    //切换样式
    //$(this).hasClass('glee')返回的是一个bool值
    
    $('div').click(function(){
        if($(this).hasClass('bee')){
            $(this).addClass('honeybee').removeClass('bee');
        }else{
            $(this).addClass('bee').removeClass('honeybee');
        }
        
        //把bee样式bool值写入div
        var b = $(this).hasClass("bee").toString()
        $(this).html(b);
    });
</script>
</body>
</html>

toggleClass()

<!DOCTYPE html>
<html>
<head>
<title>toggleClass()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
body{padding:100px;}
.glee{background: yellow;color:red;}
.rose{color:orange;}
p{margin:10px;cursor: pointer;height: 100px;width: 100px;}
.highlight{background:red;color:white;}
</style>
</head>
<body>
<h3>example 01</h3>
<div class="glee rose">toggleClass()点击切换样式</div>

<h3>exemple 02</h3>
<p>Click to toggle (<span>clicks: 0</span>)</p>
<p class="highlight">highlight (<span>clicks: 0</span>)</p>
 
<script>
//css()添加div行内样式
$('div').css({'height':'200px', 'width':'200px', 'border':'1px solid #ddd', 'margin':'10px'});

//example 01
//toggle相当于：addClass()removeClass()之间切换
//toggleClass()切换样式有无
$('div').click(function(){
    $(this).toggleClass('rose glee');
});

//examole 02
//.toggleClass()第二个参数判断样式类是否应该被添加或删除。
//如果这个参数是true，样式类将被添加;参数是false，样式类被移除。
var count = 0;
$('p').click(function() {
    count++;
    $(this).find( "span" ).text( "clicks: " + count );
    $(this).toggleClass("highlight", count%3 === 0);
});
</script>
</body>
</html>

尺寸/位置

名称	说明	举例
位置
height()	获得高度
innerHeight()	获得padding的高度，不包括border
outerHeight(bool)	参数为true时获取内外边距和border的高度
width()	获取宽度
innerWidth()	获取包括padding的宽度,不包括border
outerWidth()	参数为true时获取内外边距和border的宽度
位置
offset()
offsetParent()	离匹配元素最近的有postiton属性的元素
position()	相对与offoParent()的坐标
scrollLeft()	纵向滚动条的位置
scrollTop()	横向滚动条的位置

位置

<!DOCTYPE html>
<html>
<head>
<title>位置</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
body{padding:100px;}
div{
height:100px;
width:100px;
border:10px solid #ddd;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div>div</div>
<p></p>
<script>
var width = $('div').width();
var height = $('div').height();
//innerHeight():height + padding
var innerHeight = $('div').innerHeight();
//width()同上
var innerWidth = $('div').innerWidth();
//outerHeigth():heigth + padding + border
var outerHeight = $('div').outerHeight();
//同上
var outerWidth = $('div').outerWidth();
//outerHeigth(true):heigth + padding + margin + border
//默认参数为false,不会把margin计算进去,参数为true时会把margin计算进去
var outerHeight_true = $('div').outerHeight(true);
//同上
var outerWidth_true = $('div').outerWidth(true);
$('p').html(
'width()='+width+'<br/>'+
'height()='+height+'<br/>'+
'innerHeight()='+innerHeight+'<br/>'+
'innerWidth()='+innerWidth+'<br/>'+
'outerHeight()='+outerHeight+'<br/>'+
'outerWidth()='+outerWidth+'<br/>'+
'outerHeight(true)='+outerHeight_true+'<br/>'+
'outerWidth_true(true)='+outerWidth_true
);
</script>

DOM操作的两个简单实例

查看修改删除

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查看 修改 删除</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
table{border-collapse:collapse;width:600px;margin: 30px;}
tr{height: 30px;}
th{border:1px solid gray;}
td{border:1px solid gray;text-align:center;}
a{margin-right:10px;text-decoration:none;}
#popDIV{background:#fff;z-index:3;margin-top:50px;width:200px;padding:20px;border:1px solid gray;position:absolute;top:120px;left:20%;display:none;}
#popDIV p{border-bottom:1px solid gray;height:30px;line-height:30px;}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>工资</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>资深前端工程师</td>
<td>15000</td>
<td><a href="###">View</a><a href="###">Eidet</a><a href="###">Delet</a></td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
<td>资深JAVA程序员</td>
<td>12000</td>
<td><a href="###">View</a><a href="###">Eidet</a><a href="###">Delet</a></td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>项目经理</td>
<td>10000+提成</td>
<td><a href="###">View</a><a href="###">Eidet</a><a href="###">Delet</a></td>
</tr>
</table>
<div id="popDIV">
<a href="###" style="display:block;text-align:right;font-size:12px;color:red;">关闭</a>
<p><strong>姓名：</strong><span></span></p>
<p><strong>年龄：</strong><span></span></p>
<p><strong>职位：</strong><span></span></p>
<p><strong>工资：</strong><span></span></p>
</div>
<script>
$('.view').click(function(index){
//var name = $(this).parents("tr").children().first().text();
//$('div>p').eq(0).children('span').text(name);
//添加遮罩层
var maskHeight = $(document).height();
var maskWidth = $(document).width();
$('<div><div>').appendTo($('body'));
$('div.mask').css({
'opacity':0.4,
'background':'#000',
'position':'absolute',
'left':0,
'top':0,
'width':maskWidth,
'height':maskHeight,
'z-index':2
});
//显示
var arr = [];
$(this).parent().siblings().each(function(){
arr.push($(this).text());
});
//alert(arr);
$('#popDIV').show().children('p').each(function(index){
$(this).children('span').text(arr[index]);
});
});
//删除,删除效果配合ajax效果做
$('.del').click(function(){
$(this).parents('tr').remove();
});
$('#popDIV>a').click(function(){
$('#popDIV').hide();
$('.mask').remove();
});
</script>
</body>
</html>

ddd

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动公告</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
ul{list-style-type:none;margin: 30px;}
li{height: 30px;line-height: 30px;}
</style>
</head>
<body>
<ul>
<li>One`s real value first lies in</li>
<li>to what degree and</li>
<li>what sense he set himself</li>
<li>一个人的真正价值首先觉得于他在什么程度上</li>
<li>和在什么意义上从自我解放出来</li>
<li>2018 04 15</li>
<li>A man is not old as long as he is</li>
<li>seeking something</li>
<li>A man is not old until</li>
<li>regrets take the placc of dreams</li>
<li>只要一个还有追求，他就没有老</li>
<li>直到后悔取代了梦想，一个人才算老</li>
<li>2018 04 16</li>
</ul>
<script>
setInterval(function(){
var newLi = $('ul>li:first').clone(true);
$('ul').append(newLi);
$('ul>li:first').remove();
},1000);
/*
克隆第一行
把克隆插入最后一行
删除第一行
.....
不断重复
最简单的一个滚动
注意:
这样是不推荐的
因为频繁操作DOM,程序效率很低
尽量避免操作DOM
看实例课程的图片滚动,的方法做这个效果
 */
</script>
</body>
</html>

jquery对象与DOM对象的关系与转换

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery对象与DOM对象的节点与转换</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
h1{margin-bottom:20px;}
</style>
</head>
<body>
<h1>jquery对象与DOM对象的关系与转换</h1>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
<p id="test">test</p>
<script>
    //下面一行充分证明$(选择器)返回值不是DOM对象
    //$('#text').style.background = 'blue';
    //Cannot set property 'background' of undefined
    
    //不能设置background属性
    //下面两行,充分证明,DOM对象,也不是$()的返回值
    //var test = document.getElementById('test');
    //test.css('background' ,'blue');
    //Uncaught TypeError: test.css is not a function
    
    //$()返回的到底是什么?是对象,但不是DOM对象,而是jquery对象
    /*
    jquery对象与DOM对象有什么关系?
    答:jquery按选择器,选中一个或多个DOM对象
    把这些DOM对象放在jquery对象上,
    索引分别是0 1 2 3...N
    */
    
    console.log($('li'));
    //jqeruy对象转化为DOM对象,直接[index]取值即可
    $('li')[2].style.background = 'red';
    
    //知道原理用上面的[index],手册上还有下面的方法
    
    //也可以用get(index)方法
    $('li').get(3).style.background = 'pink';
    
    //DOM对象,转化为jquery对象,直接把DOM对象,传给$()
    var test = document.getElementById('test');
    $(test).css('background' ,'yellow');
    
    //DOM集合同样转$()对象
    var lis = document.getElementsByTagName('li');
    console.log($(lis));
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery对象的遍历</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
input{margin-right:20px;}
</style>
</head>
<body>

<p>苹果：<input type="checkbox" id="fruit01" name="checkbox[]" value="0"></p>
<p>香蕉：<input type="checkbox" id="fruit02" name="checkbox[]" value="1"></p>
<p>葡萄：<input type="checkbox" id="fruit03" name="checkbox[]" value="2"></p>
<p>西瓜：<input type="checkbox" id="fruit04" name="checkbox[]" value="3"></p>
<p>鸭梨：<input type="checkbox" id="fruit05" name="checkbox[]" value="4"></p>
<p>橘子：<input type="checkbox" id="fruit06" name="checkbox[]" value="5"></p>


<input type="button" id="fanxuan" value="反选(jquery)" />
<input type="button" id="fanxuan2" value="反选(js原生态)" />

<script>
var bu = document.getElementById('fanxuan2');

bu.onclick = function(){

    //var cbs = $('input[type=checkbox]');
    
    var cbs = document.getElementsByTagName('input');
    
    //alert(cbs.length-2);
  
    for(var i=0;i<cbs.length-2;i++){
    
        if(cbs[i].checked){
            cbs[i].checked = false;
        }else{
            cbs[i].checked = true;
        }
     
    }
}

/*

//面向函数式思路,回调函数
$('#fanxuan').click(function(){
//each()意思是每一个
//在回调函数中this是谁？
//循环过程中,循环到那个DOM对象,回调函数中的this就指向那个DOM对象
$('input[type=checkbox]').each(function(){
    console.log(this);
    
        if($(this).prop('checked')){
            $(this).prop('checked',false);
        }else{
            $(this).prop('checked',true);
        }
    });
});

*/
$('#fanxuan').click(function(){
    //each()意思是每一个
    //在回调函数中this是谁？
    //循环过程中,循环到那个DOM对象,回调函数中的this就指向那个DOM对象
    $('input[type=checkbox]').each(function(){
        //this是DOM对象在简化一些
        this.checked = !this.checked;
    });
});

</script>
</body>
</html>

jquery实现文本向上自动滚动，鼠标放上去就停止

直接贴代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jqery上下滚动</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
ul, li {
	margin: 0;
	padding: 0;
}
#scrollDiv {
	width: 300px;
	height: 100px;
	line-height: 25px;
	border: #ccc 1px solid;
	overflow: hidden;
}
#scrollDiv li {
	height: 25px;
	padding-left: 10px;
}
</style>
<script type="text/javascript">
	function AutoScroll(obj) {

		$(obj).find("ul:first").animate({
			marginTop: "-25px"
		}, 500, function() {
			$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
		});
	}
	$(document).ready(function() {
		var myar = setInterval('AutoScroll("#scrollDiv")', 1000)
		$("#scrollDiv").hover(function() { clearInterval(myar); }, function() { myar = setInterval('AutoScroll("#scrollDiv")', 1000) }); //当鼠标放上去的时候，滚动停止，鼠标离开的时候滚动开始
	});
</script>
</head>
<body>
  <div id="scrollDiv">
    <ul>
      <li><a href="http://www.sina.com">欢迎浏览新浪网</a></li>
      <li><a href="http://www.163.com">欢迎浏览网易</a></li>
      <li><a href="http://www.csdn.com">欢迎进入程序员之家</a></li>
      <li><a href="http://www.51aspx.com">很好的源代码下载区</a></li>
      <li><a href="http://www.msdn.com">msdn</a></li>
      <li><a href="http://www.baidu.com">欢迎浏览百度网</a></li>
      <li><a href="http://www.sina.com">我爱你中国</a></li>
      <li><a href="http://www.163.com">为什么我眼里包含泪水</a></li>
      <li><a href="http://www.csdn.com">因为我爱你爱的深沉</a></li>
      <li><a href="http://www.51aspx.com">这永远汹涌着我们的悲愤的河流，</a></li>
      <li><a href="http://www.msdn.com">这无止息地吹刮着的激怒的风，</a></li>
      <li><a href="http://www.baidu.com">和那来自林间的无比温柔的黎明……</a></li>
      <li><a href="http://www.msdn.com">——然后我死了，</a></li>
      <li><a href="http://www.baidu.com">连羽毛也腐烂在土地里面。</a></li>
    </ul>
  </div>
</body>
</html>

转自：http://blog.163.com/qingqin_g114/blog/static/183417218201141252510696/

jquery 位置

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>样式操作 2</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{
    padding: 0;margin: 0;
}
.h{
    height: 20px;
    border: 10px solid pink;
    padding:5px;
    margin:5px;
    background: red;
}
</style>
</head>
<body>
<p></p>

<script>

    //只计算元素本身
    var h = $('p').height();
    alert('height:'+ h);
    
    //outerHeight元素本身+border+padding，不计算margin
    //outerHeight默认值为false,如果为true会把padding,border,margin都计算进去
    var outerhp = $('p').outerHeight();
    alert('outerHeight获得的高度：'+ outerhp);
    
    //innerHeight元素+padding的高度，不计算border,margin
    var innerhp = $('p').innerHeight();
    alert('innerHeight获得的高度：'+ innerhp);
    
</script>
</body>
</html>

offset()获取元素的位置

offsetParent()离匹配元素最近的position属性的元素

position()相对offsetParent()的坐标

scrollTop()纵向混动条的位置

scrollLeft()横向滚动条的位置

offset()获取元素的位置

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>offset()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
.h{
    height: 200px;
    width: 200px;
    margin:50px;
    background: red;
}
</style>
</head>
<body>
<p></p>

<script>
    var a = $('p').offset();
    alert(a.left);//距离顶部的位置
    alert(a.top);//距离左侧的位置
</script>
</body>
</html>

position()相对offsetParent()的坐标

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>position()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
div{
    height: 200px;
    width:200px;
    background: red;
    position:relative;
    left: 20px;
    top:20px;
}
p{
    height: 50px;
    width: 50px;
    background: yellow;
    position:absolute;
    left: 100px;
    top: 50px;
}
</style>
</head>
<body>
<div>div
    <p>ppp</p>
</div>

<script>
    var a = $('p').position();
    var b = $('p').offset();
    
    alert('position:得到的值'+a.left);//相对父元素的距离
    alert('offset:得到的值'+b.left);//相对整个document文档的距离
</script>
</body>
</html>

scrollTop()纵向混动条的位置

scrollLeft()横向滚动条的位置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动条位置</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{
    padding: 0;margin: 0;
}
button{
    width: 200px;
    height: 30px;line-height: 30px; border: 1px solid green;background: none;text-align: center;
    position: fixed;
    top:30px;left:100px;
}
</style>
</head>
<body style="height: 3000px; width: 3000px;">

<button>移动滚动条 点击查看位置</button>

<script>
    var h = $(window).scrollTop();
    var w = $(window).scrollLeft();
    $('button').click(function(){
        alert('滚动条距离顶部'+h+'像素');
        alert('滚动条距离左侧'+w+'像素');
    });
</script>
</body>
</html>

参考网站：

http://www.runoob.com/jquery/traversing-add.html

jQuery 属性

Leave a Reply