修改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]));
