jQuery基础DOM和CSS操做

$('#box').html();//获取 html 内容
$('#box').text();//获取文本内容，会自动清理 html 标签
$('#box').html('<em>www.li.cc</em>');//设置 html 内容
$('#box').text('<em>www.li.cc</em>');//设置文本内容，会自动转义 html标签
$('#box').html($('#box').html() + '<em>www.li.cc</em>');//追加数据
$('input').val();//获取表单内容
$('input').val('www.li.cc');//设置表单内容
$("input").val(["check1","check2", "radio1" ]);//value 值是这些的将被选定
$('div').attr('type');//获取属性的属性值
$('div').attr('type', 'button');//设置属性及属性值
$('div').attr('title', function () {//经过匿名函数返回属性值
return '我是域名';
});
$('div').attr('title', function (index, value) {//能够接受两个参数
return value + (index+1) + '，我是域名';
});
$('div').removeAttr('title'); //删除指定的属性
$('div').css('color');//获取元素行内 CSS 样式的颜色
$('div').css('color', 'red');//设置元素行内 CSS 样式颜色为红色
var box = $('div').css(['color', 'height', 'width']);//获得多个 CSS 样式的数组对象
$('div').addClass('red');//添加一个 CSS 类
$('div').addClass('red bg');//添加多个 CSS 类
$('div').removeClass('bg');//删除一个 CSS 类
$('div').removeClass('red bg');//删除多个 CSS 类
$('div').width();//获取元素的长度，返回的类型为 number
$('div').width(500);//设置元素长度，直接传数值，默认加 px
$('div').width('500pt');//同上，设置了 pt 单位
$('div').width(function (index, value) { //index 是索引，value 是本来值
return value - 500; //无须调整类型，直接计算
});
$('div').height();//获取元素的高度，返回的类型为 number
$('div').height(500);//设置元素高度，直接传数值，默认加 px
$('div').height('500pt');//同上，设置了 pt 单位
$('div').height(function (index, value) { //index 是索引，value 是本来值
return value - 1; //无须调整类型，直接计算
});
alert($('div').width());//不包含
alert($('div').innerWidth());//包含内边距 padding
alert($('div').outerWidth());//包含内边距 padding+边框 border
alert($('div').outerWidth(true));//包含内边距 padding+边框 border+外边距 margin
$('strong').offset().left;//相对于视口的偏移
$('strong').position().left;//相对于父元素的偏移
$(window).scrollTop();//获取当前滚动条的位置
$(window).scrollTop(300);//设置当前滚动条的位置

一．DOM 简介
因为课程是基于 JavaScript 基础上完成的，这里咱们不去详细的了解 DOM 究竟是什么。
只须要知道几个基本概念：
1.D 表示的是页面文档 Document、O 表示对象，即一组含有独立特性的数据集合、M
表示模型，即页面上的元素节点和文本节点。
2.DOM 有三种形式，标准 DOM、HTML DOM、CSS DOM，大部分都进行了一系列的
封装，在 jQuery 中并不须要深入理解它。
3.树形结构用来表示 DOM，就很是的贴切，大部分操做都是元素节点操做，还有少部
分是文本节点操做。

二．设置元素及内容
咱们经过前面所学习的各类选择器、过滤器来获得咱们想要操做的元素。这个时候，我
们就能够对这些元素进行 DOM 的操做。那么，最经常使用的操做就是对元素内容的获取和修改。

在常规的DOM元素中，咱们可使用 html()和 text()方法获取内部的数据。html()方法
能够获取或设置 html 内容，text()能够获取或设置文本内容。
$('#box').html();//获取 html 内容
$('#box').text();//获取文本内容，会自动清理 html 标签
$('#box').html('<em>www.li.cc</em>');//设置 html 内容
$('#box').text('<em>www.li.cc</em>');//设置文本内容，会自动转义 html标签

注意：当咱们使用 html()或 text()设置元素里的内容时，会清空原来的数据。而咱们期
望可以追加数据的话，须要先获取本来的数据。
$('#box').html($('#box').html() + '<em>www.li.cc</em>');//追加数据
若是元素是表单的话，jQuery 提供了 val()方法进行获取或设置内部的文本数据。
$('input').val();//获取表单内容
$('input').val('www.li.cc');//设置表单内容
若是想设置多个选项的选定状态，好比下拉列表、单选复选框等等，能够经过数组传递操做。
$("input").val(["check1","check2", "radio1" ]);//value 值是这些的将被选定

三．元素属性操做
除了对元素内容进行设置和获取，经过 jQuery 也能够对元素自己的属性进行操做，包
括获取属性的属性值、设置属性的属性值，而且能够删除掉属性。

$('div').attr('title');//获取属性的属性值
$('div').attr('title', '我是域名');//设置属性及属性值
$('div').attr('title', function () {//经过匿名函数返回属性值
return '我是域名';
});
$('div').attr('title', function (index, value) {//能够接受两个参数
return value + (index+1) + '，我是域名';
});

注意：attr()方法里的 function() {}，能够不传参数。能够只传一个参数 index，表示当前
元素的索引(从 0 开始)。也能够传递两个参数 index、value，第二个参数表示属性本来的值。
注意：jQuery 中不少方法均可以使用 function() {}来返回出字符串，好比 html()、text()、
val()和上一章刚学过的 is()、filter()方法。而若是又涉及到多个元素集合的话，还能够传递
index 参数来获取索引值，而且可使用第二个参数 value(并非全部方法都适合，有兴趣
能够本身逐个尝试)。
$('div').html(function (index) { //经过匿名函数赋值，并传递index
return '我是' + (index+1) + '号 div';
});
$('div').html(function (index, value) { //还能够实现追加内容
return '我是' + (index+1) + '号 div：'+value ;
});
注意：咱们也可使用 attr()来建立 id 属性，但咱们强烈不建议这么作。这样会致使整
个页面结构的混乱。固然也能够建立class 属性，但后面会有一个语义更好的方法来代替 attr()
方法，因此也不建议使用。
删除指定的属性，这个方法就不可使用匿名函数，传递 index 和 value 均无效。
$('div').removeAttr('title'); //删除指定的属性

四．元素样式操做
元素样式操做包括了直接设置 CSS 样式、增长 CSS 类别、类别切换、删除类别这几种
操做方法。而在整个 jQuery 使用频率上来看，CSS 样式的操做也是极高的，因此须要重点
掌握。

$('div').css('color');//获取元素行内 CSS 样式的颜色
$('div').css('color', 'red');//设置元素行内 CSS 样式颜色为红色
在 CSS 获取上，咱们也能够获取多个 CSS 样式，而获取到的是一个对象数组，若是用
传统方式进行解析须要使用 for in 遍历。
var box = $('div').css(['color', 'height', 'width']);//获得多个 CSS 样式的数组对象
for (var i in box) { //逐个遍历出来
alert(i + ':' + box[i]);
}
jQuery 提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法能够轻
松的遍历对象数组。
$.each(box, function (attr, value) { //遍历 JavaScript原生态的对象数组
alert(attr + ':' + value);
});
使用$.each()能够遍历原生的 JavaScript 对象数组，若是是 jQuery 对象的数组怎么使
用.each()方法呢？
$('div').each(function (index, element) { //index 为索引，element 为元素 DOM
alert(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';
});
除了行内 CSS 设置，咱们也能够直接给元素添加 CSS 类，能够添加单个或多个，而且
也能够删除它。
$('div').addClass('red');//添加一个 CSS 类
$('div').addClass('red bg');//添加多个 CSS 类
$('div').removeClass('bg');//删除一个 CSS 类
$('div').removeClass('red bg');//删除多个 CSS 类
咱们还能够结合事件来实现 CSS 类的样式切换功能。
$('div').click(function () {//当点击后触发
$(this).toggleClass('red size');//单个样式多个样式都可
});
.toggleClass()方法的第二个参数能够传入一个布尔值，true表示执行切换到 class类，false
表示执行回默认 class 类(默认的是空 class)，运用这个特性，咱们能够设置切换的频率。
var count = 0;
$('div').click(function () { //每点击两次切换一次 red
$(this).toggleClass('red', count++ % 3 == 0);
});
默认的 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
}
});

上面的方法较为繁琐，.toggleClass()方法提供了传递匿名函数的方式，来设置你所须要
切换的规则。
$('div').click(function () {
$(this).toggleClass(function () {
//传递匿名函数，返回要切换的样式
return $(this).hasClass('red') ? 'blue' : 'red size';
});
});
注意：上面虽然一句话实现了这个功能，但仍是有一些小缺陷，由于原来的 class 类没
有被删除，只不过被替代了而已。因此，须要改写一下。
$('div').click(function () {
$(this).toggleClass(function () {
if ($(this).hasClass('red')) {
$(this).removeClass('red');
return 'green';
} else {
$(this).removeClass('green');
return 'red';
}
});
});
咱们也能够在传递匿名函数的模式下，增长第二个频率参数。
var count = 0;
$('div').click(function () {
$(this).toggleClass(function () {
return $(this).hasClass('red') ? 'blue' : 'red size';
},count++ % 3 == 0);
//增长了频率
});
对于.toggleClass()传入匿名函数的方法，还能够传递 index 索引、class 类两个参数以及
频率布尔值，能够获得当前的索引、class 类名和频率布尔值。
var count = 0;
$('div').click(function () {
$(this).toggleClass(function (index, className, switchBool) {
alert(index + ':' + className + ':' + switchBool);
//获得当前值
return $(this).hasClass('red') ? 'blue' : 'red size';
},count++ % 3 == 0);
});

五．CSS 方法
jQuery 不但提供了 CSS 的核心操做方法，好比.css()、.addClass()等。还封装了一些特殊
功能的 CSS 操做方法，咱们分别来了解一下。

$('div').width();//获取元素的长度，返回的类型为 number
$('div').width(500);//设置元素长度，直接传数值，默认加 px
$('div').width('500pt');//同上，设置了 pt 单位
$('div').width(function (index, value) { //index 是索引，value 是本来值
return value - 500; //无须调整类型，直接计算
});

$('div').height();//获取元素的高度，返回的类型为 number
$('div').height(500);//设置元素高度，直接传数值，默认加 px
$('div').height('500pt');//同上，设置了 pt 单位
$('div').height(function (index, value) { //index 是索引，value 是本来值
return value - 1; //无须调整类型，直接计算
});

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

$('strong').offset().left;//相对于视口的偏移$('strong').position().left;//相对于父元素的偏移$(window).scrollTop();//获取当前滚动条的位置$(window).scrollTop(300);//设置当前滚动条的位置