捕获内容和属性
1.DOM 操作
获得内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容，如果不带值则是返回值，如果带值则是修改值，如：$('p').text('我要修改原来的文本');
html() - 设置或返回所选元素的内容（包括 HTML 标记）,如果不带值则是返回值，如果带值则是修改值，如：$('p').html("<b>Hello world!</b>");
val() - 设置或返回表单字段的值,如果不带值则是返回值，如果带值则是修改值，如：$('input').val("修改input框的默认value值");
获取属性 - attr() 或 prop()
对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法，如果带有属性值则是修改属性值，如果不带属性值则是返回属性值：如 $('a').attr('href' : 'www.guiqingyuang.com');
对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。
例：<a href="https://www.runoob.com" target="_self" class="btn">少时诵诗书</a>
例子里 <a> 元素的 DOM 属性有: href、target 和 class，这些属性就是 <a> 元素本身就带有的属性，或者说在 IDE 里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用 prop 方法。
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是空字符串。
例：<a href="#" id="link1" action="delete" rel="nofollow">删除</a>
例子里 <a> 元素的 DOM 属性有: href、id 和 action，很明显，前两个是固有属性，而后面一个 action 属性是我们自己自定义上去的，<a> 元素本身是没有这个属性的。处理这些属性时，建议使用 attr 方法。
attr 方法还支持同时修改多个属性，如：<a href="http://www.runoob.com" id="runoob">教程坎坎坷坷</a>
$(document).ready(function(){
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
// 通过修改的 title 值来修改链接名称
title = $("#runoob").attr('title');
$("#runoob").html(title);
});
});
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是 undefined。
text()、html() 以及 val() 的回调函数
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
例：$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){ //这里function传两个参数，第一个是下标，第二个参数是原来的值
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
例：$("#btn2").click(function(){
$("#test2").html(function(i,origText){ //这里function传两个参数，第一个是下标，第二个参数是原来的值
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
例：$(document).ready(function(){
$("button").click(function(){
$("#runoob").attr("href", function(i, origValue){ //这里function传两个参数，第一个是下标，第二个参数是原来的值
return origValue + "/jquery";
});
});
});
jQuery - 添加元素
添加新的 HTML 内容
添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容 如： $("p").append("追加文本");
- prepend() - 在被选元素的开头插入内容 如： $("p").prepend("在开头追加文本");
- after() - 在被选元素之后插入内容 如： $("img").after("在后面添加文本");
- before() - 在被选元素之前插入内容 如： $("img").before("在前面添加文本");
append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML
例：
$('#lia').click(function(){
var la1 = '<p>文本内容</p>'; // 使用 HTML 标签创建文本
var la2 = $('<div></div>').text('文本内容222'); // 使用 jQuery 创建文本
var la3 = document.createElement('h1');
la3.innerHTML="我是通过dom创建的文本";
$('span').prepend(la1, la2, la3);
});
通过 after() 和 before() 方法添加若干新元素
例：$('#btnnn').click(function(){
var laa1 = '<h2> 20120120 </h2>';
var laa2 = $('<i></i>').text('我是使用jq方法添加的文本');
var laa3 = document.createElement('button');
laa3.innerHTML = '我是添加的按钮';
var bsns = $('#huaaa').after(laa1, laa2, laa3);
console.log('bsns==>', bsns);
})
删除元素
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素） remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
例：$('#btna').click(function(){ //这里是移除所有带有listarr类的li标签和标签里面的内容
$('#hua>li').remove('.listarr');
})
empty() - 从被选元素中删除子元素
例： $(function(){
// remove 删除内容包括标签
// $('#btna').click(function(){
// $('.box-aa,p').remove();
// });
// empty(m铁) 删除内容，保留标签
$('#btna').click(function(){
$('.box-aa,p').empty();
});
})
获取并设置 CSS 类
附：jquery中 first() 与 :first 的区别
首先 jQuery 中默认有的方法是 .first()，而 :first 是 jQuery 选择器支持的语法 $('div:first')。
实际上，.first() 方法就是 .eq(0) 的封装而已。
比如 p:first 就是第一个P元素，p:last就是最后一个P元素（相对于整个页面）。除了这两个之外的怎么办？可以通过eq来遍历。如.eq(2)
操作 CSS
addClass() - 向被选元素添加一个或多个类
$(function(){
$('#btn').click(function(){
$('.lia1,.lasta,p').addClass('on');
$('.lia2,.listall').addClass('on1');
});
$('.lia1,.lasta,p').addClass('on1 on2');//添加多个类
})
removeClass() - 从被选元素删除一个或多个类
例： $('.lia1,.lasta').removeClass('ass vvb df');
toggleClass() - 对被选元素进行添加/删除类的切换操作
例：$('.lia1,.lasta').toggleClass('ass vvb df');
css() - 设置或返回样式属性
例： $('#btn').click(function(){
// 获取css属性
var aa = $('li').css('backgroundColor');
console.log('aa==>', aa); //默认情况只获取第一个li的属性，要获取其他的需要使用伪类的nth-child()来获取
var bb = $('li:nth-child(5)').css('backgroundColor');
console.log('bb==>', bb);
//但是nth-child()方法并不好，所以使用eq()来遍历,需要注意的是是从下标0开始算的，不是像nth-child()直接写位置的
var cc = $('li').eq(3).css('backgroundColor');//这里eq(3)的实际位置是内容004的位置。
console.log('cc==>', cc);
//设置css属性
$('li').eq(4).css({
'backgroundColor':'#45ffff',
'border':'solid 1px #f00'
})
})
尺寸方法
width() width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() outerHeight() 方法返回元素的高度（包括内边距和边框）。
需要注意的地方，设置了 box-sizing 后，width() 获取的是 css 设置的 width 减去 padding 和 border 的值。
.test{width:100px;height:100px;padding:10px;border:10px;box-sizing:border-box;}
- width() 获取为: 60
- innerWidth() 获取值为: 80
- outWidth() 获取值为: 100
