修改jQuery对象的样式和内容

1，修改class(addClass，removeClass，toggleClass)

var element = $('#demo');

//addClass(className)
element.addClass('red b10 m10 p10');

//removeClass(className)
element.removeClass('red m10 p10');

//可以使用函数
element.addClass(function(index, className)
{
    // 如果element有多个元素的话，index是每个元素的索引值
    // className是每个元素的既有class
    return 'red';
})

element.removeClass(function(index, className)
{
    return 'b10';
})

//！！注意:addClass 和 removeClass都是批量操作！！
//这里就是为所有li元素增加red类
$('li').addClass('red');

//需求：如果有hide类，就删除。如果没有hide类，就追加
//方法一：自己编写函数实现
// if(element.hasClass('hide'))
// {
//  element.removeClass('hide');
// }else{
//  element.addClass('hide');
// }

//方法二：toggleClass(names[,switch])
//切换类，如果原来有指定类，那么删除这个类。如果原来没有指定类，那么添加这个类
//switch,是切换条件
$('li').each(function(index)
{
    $(this).toggleClass('red',index % 3 === 0);
    // this指向每个DOM元素
})

2，获取/设置样式(css)

var element = $('#demo');

//单个设置样式
element.css('width',200);

//批量设置样式
element.css
({
    'background-color':'red',   //"-"这种形式的属性名，要用引号括起来
    height:200,                 //jQuery默认数字的单位是px，所以可以不写
    border:'1px solid #000',    //属性值是一个字符串，所以要用引号括起来
    marginTop:100,              //驼峰形式的属性名，不需要用引号
    width:'-=50'                //可以使用表达式
})

//通过函数设置样式
element.css('height',function(index,value)
{
    //index：如果element有多个元素的话，index是每个元素的索引值
    //value：当前height的值
    return parseInt(value,10) + 50;
})

// 获取样式的值
console.log(element.css('height'));
console.log(element.css(['height','width','border']));
// console.log(element.css('height width border')); //!!这样是不可以的！！

3，获取尺寸(width，height，innerWidth，innerHeight，outerWidth，outerHeight)

// 个人觉得，以下方法用来获取尺寸就可以了，设置尺寸最好还是用css方法

var element = $('#demo');
//总结1：单位会自动转换为px
//总结2：操作对象是集合里的第一个元素，而不是全部

//width([value])/height([value])
//获取/设置元素高度和宽度，不包括内外边距和边框
console.log(element.width());
console.log(element.height());

//innerWidth([value])/innerHeight([value])
//获取/设置元素高度和宽度，包含内边距，不包含边框和外边距
//如果有参数，那么会根据参数值修改元素本身的宽高，但是不会改变边框和边距
console.log(element.innerWidth());
console.log(element.innerHeight());

//outerWidth([value])/outerHeight([value])
//获取/设置元素高度和宽度，包含内边距和边框，外边距不一定
//参数: true(包含外边距)，false(不包含外边距)，数值(通过改变元素本身的宽高，修改宽高)
console.log(element.outerWidth());
console.log(element.outerHeight());
console.log(element.outerWidth(true));
console.log(element.outerHeight(true));

4，获取偏移量和位置(offset，position)

// 个人觉得，以下方法用来获取尺寸就可以了，设置尺寸最好还是用css方法

var demo = $('#demo');
var element = $('.item');

//offset(coordinates)
//总结1：返回对象集合中的第一个元素相对于文档的偏移位置(top,left)
//总结2：以像素计算
//总结3：只对可见元素有效
//总结4：包含内外边距和边框

console.log(element.offset());
//console.log(element.offset({top:50,left:50}));  可以通过这种方式设置偏移量

//position()
//总结1：返回最近relative的父级元素的偏移位置(top,left)。如果找不到则返回相对于文档的偏移位置
//总结2：忽略内外边距和边框
console.log(element.position());  //只能获取，不能设置

5，获取/设置滚动条的位置(scrollTop，scrollLeft)

//scrollLeft(value),scrollTop(value)
//总结1：对可见元素和隐藏元素都有效

//获取滚动条位置
console.log(demo.scrollTop());
console.log(demo.scrollLeft());

//设置滚动条位置 
demo.scrollTop(300);
demo.scrollLeft(100);

6，修改元素内容(html，text)

var elements = $('li');

//html()
//html(content)
//总结1：获取的时候，对象集里的第一个元素起作用
//总结2：设置的时候，对象集里的所有元素起作用
console.log(elements.html());
console.log(elements.html('<strong>test</strong>'));

//text()
//text(content)
//总结1：获取的时候，对象集里的所有元素起作用
//总结2：设置的时候，对象集里的所有元素起作用,且只更改文本内容
console.log(elements.text());
console.log(elements.text('<strong>test</strong>'));

jQuery对象的文档处理

1，插入/移动元素(append，prepend，before，after，appendTo，prepandTo，insertBefore，insertAfter)

var elements = $('li');

//append(content[,content,...,content])
//在元素内容的最后面追加内容
elements.append('<a href="#">阅读更多...</a>');

//prepend(content[,content,...,content])
//在元素内容的最前面追加内容
elements.prepend('<a href="#">阅读更多...</a>');

//before(content[,content,...,content])
//在元素的前面追加内容
elements.before('<a href="#">阅读更多...</a>');

//after(content[,content,...,content])
//在元素的后面追加内容
elements.after('<a href="#">阅读更多...</a>');

//appendTo(Target)：append()的反方法，破坏性操作

//prependTo(Target)：prepend()的反方法，破坏性操作

//insertBefore(Target)：before()的反方法，破坏性操作

//insertAfter(Target)：after()的反方法，破坏性操作

//例子：
$('h2').appendTo(elements);  // 把h2元素移动到elements元素内容的最后面

2，包裹元素(wrap，wrapAll，wrapInner，unWrap)

var elements = $('p');
var link = $('a');

//wrap(wrapper)：把所有对象各个都包裹起来
//例子1：用.box的div包裹elements
elements.wrap('<div class="box"></div>');

//例子2：用.item的div包裹elements
//注意：这里是先复制一份.item的div，然后再包裹elements
elements.wrap($('.item'));

//wrapAll(wrapper)：把所有对象集一次包裹起来
link.wrapAll($('<p></p>'));

//wrapInner(wrappr)：把元素内容包裹起来
elements.wrapInner($('.item'));

//unwrap(wrapper)：取消包裹(移除元素的父元素)
elements.unwrap();

3，移除元素(remove，detach，empty)

var element = $('p');

element.click(function(){
    $(this).css('fontSize','+=5');
}).data('demo','demo');

// remove([selector])
// 本身这个jQuery对象还是存在的，所以还可以用来插入到其他元素里
// 但是事件和数据不可以用
element.remove();

// detach([selector])
// 本身这个jQuery对象还是存在的，所以还可以用来插入到其他元素里
// 事件和数据也可以保留
element.detach();

//empty():清除全部元素内容，仅保留元素本身
element.empty();

4，复制和替换元素(clone，replaceWith，replaceAll)

// 复制元素：clone([even[,deepEven]])
// "clone()会复制元素本身和其子元素的内容，但不会复制数据和事件
$('.item').clone().appendTo(element);

// clone(true)和clone(true,true)的效果是一样的，元素本身和其子元素的数据和事件
$('.item').clone(true).appendTo(element);
$('.item').clone(true,true).appendTo(element);

// clone(true,false)，仅仅元素本身的数据和事件
$('.item').clone(true,false).appendTo(element);

// 替换元素1：replaceWith(content)
$('h2').replaceWith('<p>hello</p>');    

// 替换元素2：replaceAll(target)，相当于replaceWith的反方法
// $('<p>hello</p>').replaceAll($('h2'));

// !!注意：
// replaceAll与appendTo(),prependTo(),insertBefore(),insertAfter()一样，都具有破坏性，
// 在链式语法中，如果想选择先前选中的元素，要使用end()方法

5，处理表单元素值(val)

//val()         获取值
//val(value)    设置值

//文本框
    //获取值：直接用
    console.log($('[name="text"]').val());

    //设置值：直接用
    console.log($('[name="text"]').val(123));

//单选框
    //获取值：要加checked
    console.log($('[name="radio"]:checked').val());

    //设置值：数组形式
    console.log($('[name="radio"]').val(['2']));

//复选框
    //获取值：要加checked，还要加其他处理 
    console.log(
        $('[name="checkbox"]:checked').map(function(){
            return $(this).val();
        }).toArray()
    );
    //设置值：数组形式
    console.log($('[name="checkbox"]').val(['1','2']));

//下拉选择框(单选)
    //获取值：直接用 或者 加option:selected
    console.log($('[name="select"]').val());
    console.log($('[name="select"] option:selected').val());

    //设置值：直接用
    console.log($('[name="select"]').val(2));

//下拉选择框(多选)
    //获取值：直接用
    console.log($('[name="multiSelect"]').val());

    //设置值：数组形式
    console.log($('[name="multiSelect"]').val([2,3]));