jQuery基础1

                                     jQuery基础1
开发工具与关键技术：Visual Studio2015 与jQuery   作者：北道海棠     撰写时间：2019.05.15

一．jQuery对象与DOM对象
我们要清楚jQuery对象和DOM对象是不一样的，下面我们通过一个简单的例子来区分一下jQuery对象与DOM对象：

     < p id=”test”></p>

我们需要获取代码中id为text的p元素，然后给这个文本节点加上一些内容如：“你好！段落标签”；普通处理为通过标准JavaScript处理：

var p1 = document.getElementById(‘text’);
P.innerHTML = “你好！段落标签”；
p.style.color =”yellow”;

此法通过原生DOM模型提供的document.getElementById(“test”)方法获取的DOM元素就是一个DOM对象，再通过innerHTML与style属性处理文本与颜色。。
jQuery的处理：

 var $p2 = $(‘#test’);
 $p.html(‘你好！段落标签’).css(‘color’,’blue’)；//一个样式时 
              多个样式时：.css({‘*’: ’&’, ’*’:’&’, ’*’:’&’、、、、});键值对的形式

此法则是通过$（’#test’）方法会得到一个$p2的jQuery的对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。
在本质上jQuery库还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。
在这里我们如何把jQuery对象转成DOM对象？具体操作如下：
(1)

 JavaScript代码：
    var $one = $('one') //jQuery对象
    var one = $one[0] //转化成DOM对象

jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：
(2)

  jQuery代码 get()方法:
    var $div = $('div') //jQuery对象
    var div = $div.get(0) //通过get方法，转化成DOM对象

那么DOM对象转化成jQuery对象又如何进行呢？相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，通过传递不同的参数而产生不同的作用，如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象，通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了。具体操作如下：

JavaScript代码：
var div = document.getElementsByTagName('div'); //dom对象
                var $div = $(div); //jQuery对象 $(div)等价于jQuery(div)

通过getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，通过$(div)方法转化成jQuery对象。
通过对标准的JavaScript操作DOM与jQuyer操作DOM的对比，我们不难发现：
通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。
二．jQuery的属性与样式
jQuery的属性与样式其中的 .attr()与.renovate()
每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。如：在img元素中，src就是元素的特性，用来标记图片的地址。在这里操作DOM特性的方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法。在jQuery中用一个attr()与removeAttr()就可以全部搞定了，包括兼容问题。
在jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，其中attr()有四个表达式：
1

、attr(传入属性名)：获取属性的值
2、attr(属性名, 属性值)：设置属性的值
3、attr(属性名,函数值)：设置属性的函数值
4、attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

其中removeAttr()为删除方法：
.removeAttr(attributeName):为匹配的元素集合中的每个元素中移除一个属性（attribute）
attr、removeAttr都是jQuery为了属性操作封装的，直接在一个 jQuery 对象上调用该方法，很容易对属性进行操作，也不需要去特意的理解浏览器的属性名不同的问题，值得注意的是dom中有个概念的区分：Attribute和Property翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。简单理解，Attribute就是dom节点自带的属性，例如：html中常用的id、class、title、align src等，而Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等，从而获取Attribute就需要用attr，获取Property就需要用prop。由于太多了就不一一说明了附上一张jQuery 属性操作表