jQuery基础使用与样式篇

开发工具与关键技术：Adobe Dreamweaver JavaScript
作者：陈石军
撰写时间：2020年5月2日

一．jQuery基本选择器
1.ID选择器$("#id")：id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器。注意：id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的。

2.class选择器$(".classname")：类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选，同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的。

3.1.3 element元素选择器$(“标签名称”)：元素选择器，根据给定html标记名称选择所有的元素，搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持。

4.全选择器$("*")：全选择器,也就是 选择器，在CSS中，经常会在第一行写下这样一段样式 {padding: 0; margin: 0;}通配符意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递选择器来选中文档页面中的元素。

5.层级选择器：文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点之间就会存在父子，兄弟，祖孙的关系了。选择器中的层级选择器就是用来处理这种关系子元素、后代元素、兄弟元素、相邻元素。下面这个例子就是jQuery选择器里的代码解释。
例子：
二．jQuery样式
1.$(element).css()方法：通过JavaScript获取DOM元素上的style属性，我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了:$(element).css()方法:获取元素样式属性的计算值或者设置元素的CSS属性。

2.$(element).css()方法使用方法：
$(element).css(“属性名”)//获取匹配元素集合中的第一个元素的样式属性的计算值。
$(element).css([“属性名1”,“属性名2”]) //传递一个数组，返回一个对象结果。
$(element).css(“属性”,“属性值”) //设置元素的css样式。
$(element).css({“属性1”:“属性值1”,“属性2”:“属性值2”})//可以传一个对象，同时设置多个样式。
$(element).css({属性名,function}) //可以传入一个回调函数，返回取到对应的值进行处理。
例子：