- 搜索
德胜云资讯,添加一些关于程序相关的内容,仅供大家学习交流（https://www.wxclwl.com）
日期：2023/03/17 15:45作者：邓海来人气：
一、初步认识jquery
1、 环境搭建
大家可以访问jquery官网下载最新版本的jquery，如果是本地开发，建议下载开发版（development便于代码修改和调试），如果是项目上线使用压缩版（compressed体积小、效率高），jquery是js的脚本库，直接在head标签中通过script标签引入即可使用。
<head><script type="text/javascript" src=" jquery 路径"></script> </head>
2、$(document).ready：等当前页面全部加载完成后执行的方法
3、jquery对象转化为DOM对象
Jquery对象是一个类数组对象，而DOM对象就是一个单独的DOM元素，俩者是不同的概念
4、DOM对象转化为jquery对象
二、jquery选择器
1、id选择器
语法：$(“#id”)，id值是唯一的，假如有多个元素共有一个相同的id，那么只有第一个元素会被选择到
2、class选择器
语法：$(“.class”)，通过class样式类名获取节点，跟id选择器相比，缺点是效率变低了，优点是可以选择多个。
跟js相比，js需要循环对每个对象进行操作，而class选择器内部是自带循环的。
3、元素选择器
语法：$(“element”)，根据标签名称获取对象，跟js相比，js需要循环对每个对象进行操作，而元素选择器内部是自带循环的。
4、全选择器
语法:$(“*”)，表示选中当前页面中的所有元素
5、层级选择器
6、基本筛选选择器
7、内容筛选选择器
注意点：
contains是查找包含指定文本的元素，而has是查找包含指定选择器的元素
contains查找的内容如果包含在子元素中，那么同样符合
8、可见性筛选选择器
9、属性筛选选择器
10、子元素筛选选择器
11、表单元素选择器
12、表单对象属性筛选选择器
三、jquery的属性与样式
1、.attr()与.removeAttr()
对于元素的属性在js中，我们通过getAttribute、setAttribute、removeAttribute查看、设置和删除属性，在jquery直接通过.attr()与.removeAttr()就能搞定，具体的语法如下
获取属性值：attr(传入属性名)
设置属性值：attr(属性名, 属性值)
删除属性值：.removeAttr( attributeName )
2、.html()与.text()
.html()有俩种用法，一种是不带参数的用来获取集合中第一个元素的html内容，第二中是带参数的，用来设置每个元素的html内容，.html()内部使用的js的innerHTML属性，所以这个操作是针对整个html的内容。
.text()有俩种用法，一种是不带参数的，用来获取集合中内容的合并文本（含后代），第二中是带参数的，用来设置对应元素的文本。
3、.val()
.val()方法
.val()无参数，获取匹配的元素集合中第一个元素的当前值
.val( value )，设置匹配的元素集合中每个元素的值
.val( function ) ，一个用来返回设置值的函数
.html(),.text()和.val()的差异总结：
（1）.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
（2）.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
（3）.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
4、.addclass()
.addClass(classname)，是在指定元素的基础上新增新的样式，而不是替换原有样式
5、.removeClass()
该方法用来移除一个或多个样式，如果是多个样式，用空格隔开，如果不带参数，表示移除所有样式
6、.toggleClass()
简单来说，对应的元素上没有对应的样式则新增，有对应样式则删除
7、 .css()
获取：
(1).css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
(2).css( propertyNames )：传递一组数组，返回一个对象结果
设置：
(1) .css(propertyName, value )：设置CSS
(2).css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
(3).css( properties )：可以传一个对象，同时设置多个样式
