【jquery】基础DOM和CSS操作

一.DOM简介

二.设置元素和内容

如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递操作。

$("input").val(["check1","check2", "radio1" ]); //value 值是这些的将被选定

三.元素属性操作

四.元素样式操作

在 CSS 获取上，我们也可以获取多个 CSS 样式，而获取到的是一个对象数组，如果用传统方式进行解析需要使用 for in 遍历。

var box = $('div').css(['color', 'height', 'width']);             //得到多个 CSS 样式的数组对象for (var i in box) {                                              //逐个遍历出来alert(i + ':' + box[i]  );}

jQuery 提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。

var box = $('div').css(['color', 'height', 'width']);$.each(box, function (attr, value) {                         //遍历 JavaScript 原生态的对象数组alert(attr + ':' + value);});

使用$.each()可以遍历原生的 JavaScript 对象数组，如果是 jQuery 对象的数组怎么使用.each()方法呢？

$('div').each(function (index, element) {               //index 为索引，element 为元素 DOMalert(index + ':' + element);});

在需要设置多个样式的时候，我们可以传递多个 CSS 样式的键值对即可。

$('div').css({'background-color' : '#ccc','color' : 'red','font-size' : '20px'});

如果想设置某个元素的 CSS 样式的值，但这个值需要计算我们可以传递一个匿名函数。

$('div').css('width', function (index, value) {return (parseInt(value) - 500) + 'px';});

（1）：我们还可以结合事件来实现 CSS 类的样式切换功能。

$('div').click(function () {                                  //当点击后触发$(this).toggleClass('red size');});                          //无样式和指定样式之前的切换

（2）:默认的 CSS 类切换只能是无样式和指定样式之间的切换，如果想实现样式 1 和样式 2之间的切换还必须自己写一些逻辑。

$('div').click(function () {$(this).toggleClass('red size');                  //一开始切换到样式 2  if ($(this).hasClass('red')) {                 //判断样式 2 存在后    $(this).removeClass('blue');}               //删除样式 1   else {

    $(this).toggleClass('blue');}});           //添加样式 1，这里也可以 addClass

（3）：上面的方法较为繁琐，.toggleClass()方法提供了传递匿名函数的方式，来设置你所需要切换的规则。

$('div').click(function () {$(this).toggleClass(function () {      //传递匿名函数，返回要切换的样式return $(this).hasClass('red') ? 'blue' : 'red size';});});

（4）：注意：上面虽然一句话实现了这个功能，但还是有一些小缺陷，因为原来的 class 类没有被删除，只不过被替代了而已。所以，需要改写一下。

$('div').click(function () {$(this).toggleClass(function () {if ($(this).hasClass('red')) {$(this).removeClass('red');return 'green';} else {$(this).removeClass('green');return 'red';} });});

五.CSS方法

alert($('div').width());   //不包含alert($('div').innerWidth()); //包含内边距 paddingalert($('div').outerWidth()); //包含内边距 padding+边框 borderalert($('div').outerWidth(true)); //包含内边距 padding+边框 border+外边距 margin