jQuery基础使用与样式

jQuery基础使用与样式
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Adobe Dreamweaver JavaScript
作者：黄富滔
撰写时间：2020年5月02日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
知识点罗列：
1、jQuery简介：
什么是jQuery？jQuery是一个JavaScript函数库，是一种轻量级的“写的少，做的多”的JavaScript库，使代码更加简化，用更少的代码，实现更多的功能。
2、 jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示：除此之外，jQuery还提供了大量的插件
3、jQuery对象与Javascript对象的区别
①.DOM对象是通过原生的JS获取的对象，DOM对象只能使用JS中的方法和属性
②.jQuery对象是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。
③jQuery可以使用jQuery库里面的方法，但是不能使用JS中的方法
JavaScript中的DOM对象
例如：document.getElementById(\”box\”);
jQuery对象
在JQuery库中，可以通过本身自带的方法获取页面元素的对象叫做JQurey对象
例如： $(\”.box\”);
Javascript DOM对象与jQuery对象的互相转换
Javascript对象转换为jQuery对象
var box =document.getElementByid(“box”);
var $box=$(box);
JQuery对象转换为Javascript DOM对象（有两种方法）
（1）var $box=$(“#box”);
var box=$box[0];
（2）var $box=$(“#box”);
var box=$box.get(0);
4、jQuery基本选择器和基本筛选器
基本选择器：像CSS那样来获取页面元素
1.1 ID选择器 $(\”#id\”);
1.2 class选择器 $(\”.classname\”);
1.3 element元素选择器 $(\”标签名称\”);
1.4 全选择器 $(\”*\”)
1.5 层级选择器
选择器描述
$(\”ancestor descendant\”) 后代选择器：选择给定的祖先元素的所有后代元素，一个元素的后可能该元素的一个孩子，孙子，曾孙等
$(\”parent > child\”) 子选择器：parent的直接子元素
$(\”prev + next\”) 相邻兄弟选择器：匹配所有紧接在 prev 元素后的 next 元
$(\”prev ~ siblings\”) 一般兄弟选择器：匹配 prev 元素之后的所有 siblings 元素

基本筛选选择器
筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器
筛选选择器的用法与CSS中的伪元素相似，选择器用冒号\”:\”开头，基本筛选器的描述见jQuery API文档

选择器   描述   例子
$(\”:first\”)   获取匹配第一个元素    $(\’li:first\’);
$(\”:last\”)   获取匹配的最后个元素    $(\’li:last\’);
$(\”:not(selector)\”)    去除所有与给定选择器匹配的元素   $(\”input:not(:checked)\”)
$(\”:even\”)   匹配所有索引值为偶数的元素，从 0 开始计数   $(\”li:even\”)
$(\”:odd\”)   匹配所有索引值为奇数的元素，从 0 开始计数   $(\”li:odd\”)
$(\”:eq(index)\”)   匹配一个给定索引值的元素，从 0 开始计数   $(\”li:eq(1)\”)
$(\”:gt(index)\”)    匹配所有大于给定索引值的元素，从 0 开始计数   $(\”li:gt(0)\”)
$(\”:lt(index)\”)    匹配所有小于给定索引值的元素，从 0 开始计数    $(\”li:gt(2)\”)
$(\”:focus\”)   匹配当前获取焦点的元素。

$(\”:root\”) 择该文档的根元素。在HTML中，文档的根元素，和$(\”:root\”)选择的元素一样，永远是<html>元素。 $(\”:root\”).css(\”background-color\”,\”yellow\”);

5、jQuery的一些方法
方法：
获得内容的和设置内容三个方法（jQuery属性的.html()方法 .text()方法 .val()方法）
①jQuery属性的.html() 与 .text()方法
读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，
JavaScript中提供innerHTML与innerText属性
jQuery针对这样的处理提供了2个便捷的方法.html()与.text()

$(element).html()方法
获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容.
（1）. $(element).html()
-获取element元素的HTML内容
（2）. $(element).html(\”htmlString\”)
-为每一个匹配元素添加html内容
重要说明：$(element) .html()方法内部使用的是DOM的innerHTML属性来处理的，
所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容

$(element).text()方法
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，
或设置匹配元素集合中每个元素的文本内容为指定的文本内容。
（1） . $(element).text()
-获取element元素的文本内容
（2） . $(element).text(\”textString\”)
– 用于设置匹配元素内容的文本

$(element).html()与 $(element).text()之间的差异

.html与.text的异同:
.html与.text的方法操作是一样，只是在具体针对处理对象不同
.html处理的是元素内容，.text处理的是文本内容
.html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用
如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的
火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器

②jQuery属性的val()方法
$(ele).val()方法主要是用于处理表单元素的值,比如 input, select 和 t extarea。
jQueryt中的value属性
（1）. $(ele).val()
-获取匹配的元素集合中第一个元素的当前值
（2）. $(ele).val(value)
-设置匹配的元素集合中每个元素的值

通过$(ele).val()处理select元素，当没有选择项被选中，它返回null
$(ele).val()方法多用来设置表单的字段的值

③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()

attr()与removeAttr()的用法
attr()方法的用法:

（1）. $(element).attr(\”属性名\”);
-获取属性名的属性值
（2）. $(element).attr(\”属性\”,\”属性值\”);
-设置属性的属性值
（3）. $(element).attr(\”属性名\”,\”函数值\”);
– 设置属性的函数值
（4）. $(element).attr({\”属性名\”:\”属性值\”,\”属性名\”:\”属性值\”});
-给指定元素设置多个属性值
removeAttr()方法的用法:
$(element).removeAttr(\”属性名\”);
-移出对应的属性

④jQuery属性动态操作class

1.$(element).addClass(类名);
-为每个匹配元素所要增加的一个或多个样名
– 方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

2.$(element).removeClass(类名);
– 每个匹配元素移除的一个或多个用空格隔开的样式名
3. $(element).toggleClass(类名);
-如果已经有了该类，就删除该类；如果没有该类，就添加。

如果添加多个类，每个类之间用空格隔开

⑤jQuery样式操作$(element).css()方法
通过JavaScript获取DOM元素上的style属性，我们可以动态的给元素赋予样式属性。
在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了:
$(element).css()方法:获取元素样式属性的计算值或者设置元素的CSS属性
$(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})
-可以传入一个回调函数，返回取到对应的值进行处理
说明：
浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px
$(element).css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理
当一个数只被作为值（value）的时候，jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，
例如 .css(\”width\”,50}) 与 .css(\”width\”,\”50px\”})一样