jQuery HTML

jQuary获取HTML内容和属性
重要的部分，操作DOM的能力
获取内容-text(),html()以及val()
text():设置和返回所选元素的文本内容
html():设置和返回所选元素内容（包括HTML）标记，是文本里面的html标记
val():设置和返回表单字段的值,即value的缩写，获得输入的字段值。input标签，类型为text
实例：
获取文本内容和HTML内容
$('#button_1').click(function(){
alert('Text:'+ $('#text').text();
})；
$('#button_2'.click(function(){
alert('HTML:'+$('#html').html();
})；

获得输入的字段值
$('#button_3').click(function(){
alert('value:"+$('#test').val()；
})；

获取属性值，使用.attr(),如何获得链接属性href的值
$('#button_3').click(function(){
alert('attr:"+$('#test').attr()；
})；

设置内容-text(),html(),val()
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});

以上三个jQuary方法具有相同的回调函数，回调函数有两个参数：1）备选元素列表中当前元素的下标；2）原始值。然后以元素新值返回希望使用的字符串
$('#button_1').click(function(){
$('#text').text(function(i, origText){
return 'old text:' + origText + 'new text is hello world'

});
})；

attr()设置和改变属性值
$('#button_3').click(function(){
$('#test').attr('href','www.baidu.com');
})；

attr()也允许同时设置多个属性
$('#b1').click(function(){
$('#set').attr(
'title':'hello world!,
'href':'www.baidu.com
);
});

attr()的回调函数，同样包含两个参数，被选元素的下标及原始值
$('#bu1').click(function(){
$('#name').attr(function(i, origText){
return orgiText + '/jQuary'
}
}

现货黄金16字口诀：
买入不急，平仓不贪，止损不拖，操作不乱

jQuary添加元素
append:在被选元素的结尾添加元素
prepend:在被选元素的开头加入元素
after:在被选元素之后加入元素
before:在被选元素之前加入元素

$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
我们可以创建若干元素，这些元素可以通过text/HTML,jQuary或者JavaScript/DOM来创建，然后通过append方法追加到文本中。对prepend,after,before同样有效
$("#ceshi1205").click(function () {
var a = "<p>Text_HTML</p>"
var b = $("<p></p>").text("Tetx_jQuary");
var c = document.createElement("p");
c.innerHTML="Text_DOM";
$("#test1205").append(a,b,c);
})

jQuary删除元素，使用以下两个方法：
remove():删除被选元素（包括其子元素）
empty():从被选元素中删除子元素
$("#test1205").remove();
过滤被删除的元素，允许对删除元素进行过滤，删除出class='abc'的所有<p>元素
$('p').remove('abc')

获取并设置css的类，通过jQuary对css元素进行操作
方法如下：
addClass()-向被选元素添加一个或多个类
removeClass()-从被选元素删除一个或多个类
toggleClass()-对被选元素进行添加/删除类的切换操作
css()-设置或返回样式属性

.myFont{
font-weight:bold;
font-size:20px;
}
.green{
color:green;
}

$("#ceshi1205").click(function () {
$("div").addClass("myFont");
})
$("#ceshi1205").click(function () {
$("div").addClass("green");
})

添加多个类：
$("button").click(function(){
$("#div1").addClass("important blue");
});
$("#ceshi1205").click(function () {
$("div").toggleClass("green");
})

CSS方法
设置或返回被选元素的一个或多个样式属性
返回指定的css的值，语法如下：css('property');返回首个元素的匹配值
$('p').css('background-color')
设置css的值：
$("#ceshi1205").click(function () {
$("#div1205").css("background-color","yellow");
})

设置多个css的属性值，采用键值对的形式，构建字典
$("#div1205").css({"background-color":"yellow","font-size":"40px"});

jQuary处理元素和浏览器窗口的尺寸
1.width()方法-设置或返回元素的宽度（不包括内边距、边框和外边距）
2.height()方法-设置或返回元素的高度（不包括内边距、边框和外边距）
$("#ceshi1205").click(function () {
var x = $("#div1205");
var text_width = x.width();
var text_height = x.height();
$("#temp").text("text_"+text_width+" text_height:"+text_height);
})

3.innerWidth()方法：返回元素的宽度（包括内边距）
4.innerHeight()方法：返回元素的高度（包括内边距）
$("#ceshi1205").click(function () {
var x = $("#div1205");
var text_width = x.innerWidth();
var text_height = x.innerHeight();
$("#temp").text("text_"+text_width+" text_height:"+text_height);
})

5.outerWidth()方法：返回元素的宽度（包括内边距和边框）
6.outerHeight()方法：返回元素的高度（包括内边距和边框）
$("#ceshi1205").click(function () {
var x = $("#div1205");
var text_width = x.outerWidth();
var text_height = x.outerHeight();
$("#temp").text("text_"+text_width+" text_height:"+text_height);
})

jQuary遍历
遍历，意为移动，根据其相对于其它元素来查找或者选取HTML元素。以某一项开始，并沿着这个选择移动，直到抵达您希望的元素为止。
对于jQuary，在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞），这种移动被称为DOM遍历.在遍历方法中，最大种类就是树遍历。
div
ul
li li
span b
<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。