jquery基础（3）

一、获取和设置元素相关尺寸

width()、height()	获取元素width和height
innerWidth()、innerHeight()	包括padding的width和height
outerWidth()、outerHeight()	包括padding和border的width和height
outerWidth(true)、outerHeight(true)	包括padding和border以及margin的width和height

举例如下：
//获取和设置元素的尺寸
      //获取div宽度 高度
		     var wd = $('div').width();
			 var gd = $('div').height();
			 console.log(wd);*/
      //修改div宽度 高度
			$('div').width(500);
			$('div').height(500); */
//innerWidth()、innerHeight()：包括padding的width和height 
		  var inkd =  $('div').innerWidth();
		  console.log(inkd); 
		  var ingd = $('div').innerHeight();
		  console.log(ingd);
//outerWidth()、outerHeight()：包括padding和border的width和height  
		  var outkd =$('div').outerWidth();
		  console.log(outkd);
		  var outgd = $('div').outerHeight();
		  console.log(outgd);
//outerWidth(true)、outerHeight(true)：包括padding和border以及margin的width和heigh
		  var otw = $('div').outerWidth(true);
		  console.log(otw);
		  var oth = $('div').outerHeight(true);
		  console.log(oth);

二、获取页面元素的绝对/相对位置

1.获取页面某一元素的绝对X,Y坐标，可以用offset()方法：

		<div id="div_1" style="position: relative; margin: 20px; padding: 5px; border: 2px solid red; width: 200px;height: 200px;background-color: aqua;color: crimson;">
			<div id="div_2" style="width: 100px;height: 100px;background-color: chartreuse; border: 2px solid chocolate; position: absolute; top: 10px;">获取和设置元素尺寸</div>
		</div>


//获取div相对页面的绝对位置
        var a = $('#div_1').offset();
		alert(a.top+','+a.left);
		
//设置偏移坐标
         $('div_2').offset({top:200,left:200});


//使用函数设置偏移坐标
        $		   $('#div_1').click(function(){
			 		$("#div_2").offset(function(n,c){
			 			newPos=new Object();
			 			newPos.left=c.left+100;
			 			newPos.top=c.top+100;
			 			return newPos;
			   })
		   }) 

其它方法参考菜鸟教程
2.获取相对(父元素)位置

var X = $('#DivID').position().top;
var Y = $('#DivID').position().left;

三、属性操作

1.attr() 设置或返回被选元素的属性值

//为所有图像设置src和alt属性
$("img").attr({ src: "test.jpg", alt: "Test Image" })

2.prop()获取在匹配的元素集中的第一个元素的属性值

//取出或设置某个属性的值
         var width_1 = $('#div_1').prop('style')
		  console.log(width_1)
		  //设置
		  $('div').prop({
			  style:"width:800px;height:800px;border:2px solid red;background-color: chartreuse;"
		  }) 

3.html()取得第一个匹配元素的html内容

//取出或设置html内容
          var $htm = $('div').html();
		  console.log($htm);
//设置html内容    会直接替换掉原内容
		 // $('#div_1').html('<p>这是一个悲伤的故事</p>')
		 // $('body').html('你就是个傻子')

更多属性操作请查看
4.取得所有匹配元素的内容

//取得所有匹配元素的内容
         $("p").text("Hello world!")
         $('p').text()   //返回p元素的文本内容
//使用函数来设置所有匹配元素的文本内容
         $("p").text(function(n){
              return "这个 p 元素的 index 是：" + n;
       });

四、循环
1.each()循环
语法：$(selector).each(function(index,element))
必需。为每个匹配元素规定运行的函数。
index - 选择器的 index 位置。
element - 当前的元素（也可使用 “this” 选择器）

          $('ul>li a').each(function(index,value){
			  console.log($(this).text())
		  })
		  2.  $.each($('ul>li a'),function(index,value){
					 	console.log($(this).text())
				 })

2.map()循环
将一个数组中的元素转换到另一个数组中。
作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中

	$.map($('ul>Li a'),function(index,value){
					console.log($(index).text())
				})

详情请查看菜鸟教程