JavaScript jQueryDOM节点操作

//1.0jQuery的属性
/*
每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。
如：在img元素中，src就是元素的特性，用来标记图片的地址
JavaScript中操作特性的DOM方法主要有3个，
1.getAttribute()获取特性
2.setAttribute()设置特性
3.removeAttribute() 移出特性
在jQuery中操作特性的jQuery方法:
1.attr() 获取/设置属性
2.removeAttr() 移出属性
在jQuery中用一个attr()与removeAttr()就可以全部搞定了，
jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()
/
//1.1 attr()与removeAttr()的用法
/
attr()方法的用法:
1. $(element).attr(“属性名”);//获取属性名的属性值
2. $(element).attr(“属性”,“属性值”);//设置属性的属性值
3. $(element).attr(“属性名”,“函数值”);//设置属性的函数值
4. $(element).attr({“属性名”:“属性值”,“属性名”:“属性值”});//给指定元素设置多个属性值
removeAttr()方法的用法:
1. $(element).removeAttr(“属性名”);//移出对应的属性

//1.0 jQuery选择器
/*
页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。
jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。
jQuery几乎支持主流的css1~css3选择器的写法，我们从最简单的也是最常用的开始学起:
/
//1.1 ID选择器 $("#id");
/
id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。
原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器
注意:id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，
将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的
*/

// 1.0 jQuery属性的.html()与.text()方法
/*
读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，
JavaScript中提供innerHTML与innerText属性
jQuery针对这样的处理提供了2个便捷的方法.html()与.text()
/
// 1.1 $(element).html()方法
/
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容.
1. $(element).html() 获取element元素的HTML内容
2. $(element).html(“htmlString”) 为每一个匹配元素添加html内容

        重要说明：$(element) .html()方法内部使用的是DOM的innerHTML属性来处理的，
        所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）
    */

//1.0 jQuery属性 动态操作class
/*
1. $(element).addClass();//为每个匹配元素所要增加的一个或多个样式名
- 方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上
2. $(element).removeClass();//每个匹配元素移除的一个或多个用空格隔开的样式名
3. $(element).toggleClass();
//在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,
取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
/
/
JavaScript中通过className属性来动态的操作class类
*/

//1.0 jQuery样式操作$(element).css()方法
/*
通过JavaScript获取DOM元素上的style属性，我们可以动态的给元素赋予样式属性。
在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了:
$(element).css()方法:获取元素样式属性的计算值或者设置元素的CSS属性
/
//1.1 $(element).css()方法使用方法
/
1. $(element).css(“属性名”) //获取匹配元素集合中的第一个元素的样式属性的计算值
2. $(element).css([“属性名1”,“属性名2”]) //传递一个数组，返回一个对象结果
3. $(element).css(“属性”,“属性值”) //设置元素的css样式
4. $(element).css({“属性1”:“属性值1”,“属性2”:“属性值2”}) //可以传一个对象，同时设置多个样式
5. $(element).css({属性名,function}) //可以传入一个回调函数，返回取到对应的值进行处理
*/

    //1.2 注意事项
    /*
        浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px
        $(element).css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理
        当一个数只被作为值（value）的时候，jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，
        例如 .css("width",50}) 与 .css("width","50px"})一样