Jquery-Dom和css操作

/**
*              一 应用jQuery设置元素及内容
*
*              1.如何获取/设置,元素中的HTML内容?
*              2.如何获取/设置,元素中的文本内容?
*              3.如何获取/设置,表单中的文本内容?
*
*
*/

$(function(){
//获取html内容id=box
$('#box').html();
//设置html内容会覆盖掉原来的内容
$('#box').html('<em>新内容</em>');
//只获取文本内容,不包含html标签
$('#box').text();
//设置文本内容,标签会在html页面显示,股不应该设置
$('#box').text('<em>这是新的内容</em>');
//获取表单中的文本内容
$('input').val();
//设置表单的文本内容(value值)
$('input').val('表单中新的文本内容');
$('input').val();
//设置input中某些值被选中
$('input').val(['男','读书']);
})

/**
*      二 应用jQuery操作元素属性
*   1.如何获取/设置,某个元素的属性值
*   2.如何获取/设置,某个元素的多个属性值
*   3.如何通匿名fn来设置某个元素属性值
*   4.如何删除元素指定的属性
*
*/
$(function(){
//获取某个元素的属性的值
$('div').attr('id');
//设置某个元素属性的值
$('div').attr('title','我的title');
//设置多个属性的值
$('div').attr({'title':'我的title','class':'cla','date':'2015'});
//index标志当前设置的是哪一个div,value在设置之前的value值
$('div').attr('title',function(index,value){
return '我的title';
})
//删除属性
$('div').removeAttribute('title');
})

/**
*        三  应用jQuery操作元素样式
*      1.如何获取/设置,某个元素内单个/多个css样式
*      2.如何通过fn来设置元素css样式
*      3.如何给元素添加单个/多个css类
*      4.如何删除某个元素单个/多个css类
*      5.如何切换默认样式和制定的样式?
*      6.如何通过fn设置切换规则
*/
$(function(){
//获得css样式的值
$('div').css('color');
//设置css样式的值jQuery设置比默认的高
$('div').css('color','green');
//获得原生的对象的值
var box=$('div'[/b]).css(['width','color','height']);
//利用javaScript的方式获取得到的值
for(var i in box){
alert(i+':'+box[i])
}
//利用jQuery的方式得到多个属性的值
$.each(box,function (attr, value) {
alert(attr+':'+value);
})
//用来迭代对象
$('div').each(function (index,element) {
alert(index+':'+element);
});
//使用连缀的方式进行多个样式的书写
$('div').css('color','gray').css('width','300px');
//利用集合的方式
$('div').css({'color':'blue',
'width' : '200px',
'height' :'300px'
}
);
//通过计算的方式进行叠加,index是当前div的下标,value是当前的div,width属性的原始值
$('div').css('width',function (index,value) {
return parseInt(value)+200+'px';
});
})
/**
*          四 应用jQuery操作元素样式
*
*          1.如何获取/设置,某个元素行内单个/多个css样式
*          2.如何通过fn来设置元素css类
*          3.如何给元素添加单个/多个css类
*          4.如何删除某个元素的单个/多个css类
*          5.如何切换默认样式和指定的样式
*          6.如何通过fn设置切换规则
*
*/
$(function(){
//添加class
$('div').addClass('red');
//添加多个class
$('div').addClass('red bg');
//删除class
$('div').removeClass('red');
//删除多个class
$('div').removeClass('red bg');
$('div').click(function(){
//当点击时添加class
$('div').addclass('red');
//第一次点击切换为red再次点击切换为默认的颜色
//$('div').toggleClass('red');
if ($('div').hasClass('blue')){
//$('div').removeClass('blue');
//$('div').addClass('red');
//另一种(链式)写法
$('div').removeClass('red').addClass('blue');
}else {
$('div').removeClass('red');
$('div').addClass('blue');
}
})

})
/**
*          五 jQuery中css方法应用
*   1.如何获取/设置元素的宽度
*   2.如何通过fn获取/设置元素的宽度
*   3.如何获取/设置元素长度
*   4.如何通过fn获取/设置元素长度
*
*   5.如何获得元素,包含内边距的边框,高度?
*   6.如何获得元素,包含边框,内边距的边框,高度?
*   7.如何获得元素,包含边框,内边,外边距距的边框,高度?
*
*   8.如何获得某个元素相对于可视窗口的位置偏移量?
*   9.如何获得某个元素对父元素的偏移量
*   10.如何获得/设置,垂直滚动条的值
*
*/
$(function(){
//得到div的宽度
$('div').css('width');//返回的string
$('div').width();//返回的是int对象
//可以智能的该边单位等300pt
$('div').width('300px');
$('div').width(function (index,value) {
return value+200+'px';
});
$('div').height('400');
$('div').height(function (index,value) {
return value+300;
});

$('div').innerWidth();
$('div').outerWidth();

//距离可视边框的偏移量
$('div').offset().left;
$('div').offset().top;
//
$(window).scrollTop();//获得滚动条相对没有偏移时的偏移量
$(window).scrollTop(300);//进行定位
})
/**
*
*          六 应用jQuery创建节点
*
*          1.创建节点
*          2.插入节点
*/

$(function(){

//给div追加新的内容(方式1)
var box=$('<strong>新的内容</strong>');
$('div').append(box);
//给div追加新的内容(方式2)(下标,旧内容)
$('div').append(function(index,html){
return '<strong>新的内容</strong>';
})
//将已有的strong内容添加到div中去
$('strong').appendTo('div');

//在div前面进行添加(方式一)
$('div').prepend('<strong>添加到前面</strong>');
//在div前面进行添加(方式二)参数同上
$('div').prepend(function (index, html) {
return '<strong>添加到前面</strong>';
})
//将已有的strong内的内容移动到div的前面
$('strong').prependTo('div');
//将strong内容添加到div后面(兄弟)
$('div').after('<strong>后面的内容</strong>');
$('div').after(function (index,html) {
return '<strong>后面的内容</strong>';
});
$('div').before('<strong>前面的内容</strong>');
$('div').before(function (index, html) {
return '<strong>前面的内容</strong>';
});
$('strong').insertAfter('div');
$('strong').insertBefore('div');
})
/**
*      七 应用jQuery节点操作
*      1.包裹节点操作
*      2.节点替换,克隆,删除操作
*/
$(function(){
//外部节点包裹
$('div').wrap('<strong></strong>');
//div方法abc的后面
$('div').wrap('<strong>abc</strong>');
//多层包裹
$('div').wrap('<strong><em></em></strong>');
//移除单层包裹当多层时有几层就要调用几次
$('div').unwrap();
//对div进行整体包裹
$('div').wrapAll();
//内部节点包裹
$('div').wrapInner('<strong></strong>');

//将div克隆,并添加到body总
$('div').clone().appendTo('body');
$('div').click(function (){

alert('123');
}
)
$('div').clone(true).appendTo('body');

})