2,100
社区成员
发帖
与我相关
我的任务
分享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"})一样
⑥$(element).width()和$(element).height()
（1）.$(element).width()
-获取或设置元素的宽度
（2）.$(element).height()
-获取或设置元素的高度
获取第一个匹配元素内部区域高度（包括内边距、不包括边框）。
1.$(element).innerWidth();
2.$(element).innerHeight();
获取第一个匹配元素外部高度（默认包括内边距和边框）。
1.$(element).outerWidth();
2.$(element).outerHeight();
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：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"})一样
⑥$(element).width()和$(element).height()
（1）.$(element).width()
-获取或设置元素的宽度
（2）.$(element).height()
-获取或设置元素的高度
获取第一个匹配元素内部区域高度（包括内边距、不包括边框）。
1.$(element).innerWidth();
2.$(element).innerHeight();
获取第一个匹配元素外部高度（默认包括内边距和边框）。
1.$(element).outerWidth();
2.$(element).outerHeight();
...全文
请发表友善的回复…
发表回复
