jQuery基础使用与样式篇

开发工具与关键技术：vs JavaScript
作者：王民
撰写时间：2020年4月30日

知识点罗列：
一.jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示： 除此之外，jQuery还提供了大量的插件
jQuery是一个JavaScript脚本库，不需要特别的安装，只需要我们在页面标签内中，通过

2. class选择器 $(".classname");
   类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选
   同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的
   3 .element元素选择器 $(“标签名称”);
   元素选择器，根据给定html标记名称选择所有的元素
   搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持
   4 全选择器 $("")
   全选择器,也就是 选择器
   在CSS中，经常会在第一行写下这样一段样式
   * {padding: 0; margin: 0;}
   通配符意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递选择器来选中文档页面中的元素
   5 层级选择器
   文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，
   可以把文档树当作一个家谱，那么节点与节点之间就会存在父子，兄弟，祖孙的关系了。
   选择器中的层级选择器就是用来处理这种关系
   子元素 后代元素 兄弟元素 相邻元素
   通过一个列表，对比层级选择器的区别
   选择器 描述
   $(“ancestor descendant”) 后代选择器：选择给定的祖先元素的所有后代元素，一个元素的后代可能该元素的一个孩子，孙子，曾孙等
   $(“parent > child”) 子选择器：parent的直接子元素
   $(“prev + next”) 相邻兄弟选择器：匹配所有紧接在 prev 元素后的 next 元素
   $(“prev ~ siblings”) 一般兄弟选择器：匹配 prev 元素之后的所有 siblings 元素
   很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，
   为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。
   筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器
   筛选选择器的用法与CSS中的伪元素相似，选择器用冒号":"开头，基本筛选器的描述见jQuery API文档： $(":first")获取匹配第一个元素例如:$(‘li:first’);
   $(":last")获取匹配的最后个元素例如:$(‘li:last’);等等。
   三.jQuery的属性
   每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。
   如：在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()
3. attr()与removeAttr()的用法
   attr()方法的用法:
   1. $(element).attr(“属性名”);获取属性名的属性值
   2. $(element).attr(“属性”,“属性值”);设置属性的属性值
   3. $(element).attr(“属性名”,“函数值”);设置属性的函数值
   4. $(element).attr("属性名":"属性值","属性名":"属性值");给指定元素设置多个属性值removeAttr()方法的用法:1.$(element).removeAttr(“属性名”);移出对应的属性
   （attr、removeAttr都是jQuery为了属性操作封装的，直接在一个 jQuery 对象上调用该方法，很容易对属性进行操作， 也不需要去特意的理解浏览器的属性名不同的问题）
   2 prop()与removeProp()的用法
   prop()方法的用法:
   1. $(element).prop(“属性名”);获取属性名的属性值
   2. $(element).prop(“属性名”,“属性值”);设置属性的属性值
   3. $(element).prop(“属性名”,“函数值”);设置属性的函数值
   4. $(element).prop("属性名":"属性值","属性名":"属性值");给指定元素设置多个属性值removeProp()方法的用法:1.$(element).removeProp(“属性名”);移出对应的属性
   dom中有个概念的区分：Attribute和Property翻译出来都是
   “属性”
   《js高级程序设计》书中翻译为“特性”和“属性”。
   简单理解，Attribute就是dom节点自带的属性，值只能为string类型
   而Property是这个DOM元素作为对象，其附加的内容，值类型多样化：property因为是对象的成员，类型可多样化(boolean, string, number等)如果获取DOM对象中的属性，推荐使用property
   获取Attribute就需要用attr，获取Property就需要用prop
   四、jQuery的属性与样式之增加样式.addClass()
   通过动态改变类名（class），可以让其修改元素呈现出不同的效果。在HTML结构中里，多个class以空格分隔，当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得很麻烦。同样的jQuery开发者也考虑到这种情况，增加了一个.addClass()方法，用于动态增加class类名
   1、.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名，这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上
   .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
   2.removeClass( )方法
   .removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
   .removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名
   （如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除）
   3.$(element).toggleClass();
   在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,
   取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
   五、读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，
   JavaScript中提供innerHTML与innerText属性
   jQuery针对这样的处理提供了2个便捷的方法.html()与.text()
   1 $(element).html()方法
   获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容.
   1.1 $(element).html() 获取element元素的HTML内容
   1.2 $(element).html("htmlString")为每一个匹配元素添加html内容重要说明：$(element) .html()方法内部使用的是DOM的innerHTML属性来处理的，
   所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）
   2 $(element).text()方法
   得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，
   或设置匹配元素集合中每个元素的文本内容为指定的文本内容。
   2.1 $(element).text() 获取element元素的文本内容
   2.2 $(element).text(“textString”) 用于设置匹配元素内容的文本
   3 $(element).html()与 $(element).text()之间的差异
   .html与.text的异同:
   .html与.text的方法操作是一样，只是在具体针对处理对象不同
   .html处理的是元素内容，.text处理的是文本内容
   .html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用
   如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的
   火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器
   4 jQuery属性的val()方法
   $(ele).val()方法主要是用于处理表单元素的值,比如 input, select 和 textarea。
   JavaScript中的value属性
   4.1 $(ele).val() 获取匹配的元素集合中第一个元素的当前值
   4.2 $(ele).val(value)设置匹配的元素集合中每个元素的值通过$(ele).val()处理select元素， 当没有选择项被选中，它返回null
   $(ele).val()方法多用来设置表单的字段的值
   如果select元素有multiple（多选）属性，并且至少一个选择项被选中，
   $(ele).val()方法返回一个数组，这个数组包含每个选中选择项的值
   通过JavaScript获取DOM元素上的style属性，我们可以动态的给元素赋予样式属性。
   在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了:
   $(element).css()方法:获取元素样式属性的计算值或者设置元素的CSS属性1.15.$(element).css()方法使用方法
   5.1 $(element).css(“属性名”) //获取匹配元素集合中的第一个元素的样式属性的计算值
   5.2 $(element).css([“属性名1”,“属性名2”]) //传递一个数组，返回一个对象结果
   5.3 $(element).css(“属性”,“属性值”) //设置元素的css样式
   5.4 $(element).css({“属性1”:“属性值1”,“属性2”:“属性值2”}) //可以传一个对象，同时设置多个样式
   5.5 $(element).css({属性名,function}) //可以传入一个回调函数，返回取到对应的值进行处理
   对于样式的设置，我学了addClass与css方法。addClass与.css方法各有利弊，一般是静态的结构，都确定了布局的规则，可以用addClass的方法，增加统一的类规则
   如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式。但是.addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。css方法是通过JavaScript大量代码进行改变元素的样式。 通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。如果通过.css()方法就需要指定每一个元素是一一的修改，日后维护也要一一的修改，比较麻烦。
   不过通过.css()方式可以很容易动态的去改变一个样式的属性，不需要在去繁琐的定义个class类的规则。一般来说在不确定开始布局规则，通过动态生成的HTML代码结构中，都是通过.css()方法处理的。可是.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。不过总的来说css的样式是有优先级的，当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如下
   外部样式 < 内部样式 < 内联样式
   .addClass()方法是通过增加class名的方式，那么这个样式是在外部文件或者内部样式中先定义好的，等到需要的时候在附加到元素上
   通过.css()方法处理的是内联样式，直接通过元素的style属性附加到元素上的
   通过.css方法设置的样式属性优先级要高于.addClass方法