修改元素样式

一、修改元素样式

通过给元素添加或移除类来改变元素样式

1、jquery对象.addClass(class/function(index,currentClassName){}):jquery对象中的每一个DOM元素都可添加相同的指定一个或多个类

2、jquery对象.removeClass(classfunction(index,currentClassName){}):jquery对象中的每一个DOM元素都可移除相同的指定一个或多个类

3、jquery对象.hasClass(name):判断jquery对象是否有指定类

例：if(li.hasClass('hiden red')){
               li.removeClass('hiden');
}else{

li.addClass('red');

}

4、jquery对象.toggleClass(name(可有多个)/function()):若jquery对象有这些类，则删除该类，若无，则添加；

5、jquery对象.toggleClass(name(可有多个),boolean表达式):若,boolean表达式为真，则添加该类。

二、设置元素样式

多用于设置少数样式

1、jquery对象.css('样式名',value):给jquery对象的指定样式设置值

2、jquery对象.css({}):批量设置样式

如：element.css({
width:200（可用表达式，如'+=50'表示width加50）,
height:100,
   'background-color'或(backgroundColor):'red',//-出现时，若不加引号，会报错，或用驼峰形式
   border:'10px solid #000'
});

3、jquery对象.css('样式名',function(index,value（value为name的当前值）){})

4、jquery对象.css(name):获取name值

5、jquery对象.css(name数组):获取name数组值

三、获取元素尺寸

1、jquery对象.width():获取jquery对象指定元素的宽

2、jquery对象.height():获取jquery对象指定元素的高

3、jquery对象.innerWidth():获取jquery对象指定元素的宽加上内边距

4、jquery对象.innerHeight():获取jquery对象指定元素的高加上内边距

5、jquery对象.outerWidth():获取jquery对象指定元素的宽加上内边距加上边框

6、jquery对象.outerHeight():获取jquery对象指定元素的高加上内边距加上边框

说明：5、6中若有参数true,则加上外边距，若为false，不加

四、获取或设置元素位置(例见设置元素位置.html)

1、jquery对象.offset():获取到的元素位置相对于文档,返回一个对象，只对可见元素有效

2、jquery对象.position():获取到的元素位置相对于父元素，并且忽略外边距，获取由position设置的位置,返回一个对象

3、jquery对象.scrollTop():获取竖直滚动条的位置

4、jquery对象.scrollLeft():获取水平滚动条的位置

说明：若括号里有值，则是设置滚动条的位置

1、jquery对象,html():获取jquery对象的第一个DOM对象的html

2、jquery对象.text():获取jquery对象的所有DOM对象的文本

3、jquery对象,html(content):设置jquery对象的所有DOM对象的html为content

4、jquery对象.text(content):设置jquery对象的所有DOM对象的文本为content

五、移动或插入元素（例：插入或移动元素.html）

1、jquery对象.append(content（可为html字符串，jquery对象，数组）):将content插入到jquery对象中每一个DOM对象的内部内容的最后

2、jquery对象.prepend(content（可为html字符串，jquery对象，数组）):将content插入到jquery对象中每一个DOM对象的内部内容的最前

3、jquery对象.after(content（可为html字符串，jquery对象，数组）):将content插入到jquery对象中每一个DOM对象的后面

4、jquery对象.before(content（可为html字符串，jquery对象，数组）):将content插入到jquery对象中每一个DOM对象的前面

6、jquery对象.appendTo(element)、jquery对象.prependTo(element)、jquery对象.insertBefore(element)、jquery对象.insertAfter(element)

说明：三者都是前者插入到element的某个位置，并且可指定多个插入位置

六、包裹元素（例见包裹元素.html）

1、jquery对象.wrap(content/jquery对象):用content包含jquery对象的DOM元素，一个content只包含一个DOM元素，直至所有都包含为止，是复制content，而不是移动DOM元素

2、jquery对象.wrapAll(content/jquery对象):用一个content包含jquery对象的所有DOM元素，是复制content，而不是移动DOM元素

3、jquery对象.wrapInner(content/jquery对象):用一个content包含jquery对象DOM元素的文本内容

如:element.wrapInner($('div'));

结果为:<p>

<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veritatis.</div>

</p>

4、jquery对象.unwrap():取消包裹

七、移除元素（例见移除对象.html）

1、jquery对象.remove():移除所有匹配对象，只移除事件和数据(data),html中的内容被移除

2、jquery对象.detach():移除所有匹配对象，不移除事件和数据(data)，html中的内容被移除

3、jquery对象.empty()：移除所有匹配对象，只移除所有文本内容和子节点

八、复制和替换元素（例见复制和替换元素.html）

1、jquery对象.clone():若参数为(true):则进行深度复制，即自己和子元素的数据和事件都会进行复制；若参数为（true,false）则只复制自己的数据和事件；若参数为（false/无）：则不复制自己和子元素的数据和事件

2、jquery对象.replaceWith(content):用content替换jquery对象（所有匹配的元素）

3、content.replaceAll(jquery对象):用content替换jquery对象,content为jquery对象

说明：replaceAll()以及五中的6都具有破坏性，在链式法则中要用.end()返回上一级对象

九、处理表单元素的值（例见处理表单元素的值.html）

1、jquery对象.val():获取表单元素的值

/*var text=$("[name='text']");
  console.log(text.val());*/
  /*var radio=$("[name='radio']:checked");
  console.log(radio.val());*/
  //console.log($("[name='select']").val());
  //console.log($("[name='multiSelect']").val());

  //console.log($("[name='checkbox']:checked").val());//当选择多个时，只会显示第一个的值

console.log($("[name='checkbox']:checked").map(function(index,docElement){
            return $(this).val();

  }).toArray());

2、jquery对象.val(值)设置元素的值

说明：其中radio、checkbox、下拉菜单多选的括号中的值要为数组（string或数字）