JQuery基础使用与样式篇总结

敲你码呢? 2020-04-30 04:04:13
1. 什么是 jQuery
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少,做的多"的JavaScript库,所以jQuery库本质上
还是JavaScript代码,它只是对JavaScript语言进行包装处理。
通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发。
jQuery不需要特别的安装,只需要我们在页面标签内中,通过<script>标签引入jQuery库即可:

jQuery语法是通过选取 HTML 元素,并对选取的元素执行某些操作
基础语法:$(selector).action();
$美元符号定义jQuery
- selector:选择符需要查找的元素
- action():执行对元素的操作
例:

2. jQuery对象与JS中的DOM对象
在JQuery库中,可以通过JQuery自带的方法获取页面元素的对象叫做JQurey对象
比如:

DOM对象与jQuery对象的区别:
1.DOM对象是通过原生的JS获取的对象,DOM对象只能使用JS中的方法和属性
2.jQuery对象是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。
jQuery可以使用jQuery库里面的方法,但是不能使用JS中的方法;
JS对象jquery对象都只能只能调用本身提供的方法和属性,不能混用对方的方法和属性;
jQuery链式写法:

3. DOM对象与jQuery对象之间的转换
① DOM对象转换为jQuery对象
例:

② jQuery对象转换为一个DOM对象
例:

使用jQuery中的get()方法,提供一个索引就可以进行转换
例:

4.jQuery常用选择器
① ID选择器:$("#id"):ID是唯一的,同样的id只能使用一次

② class选择器 $(".classname"):类选择器,可以多选,但效率没有id选择器高

③ element元素选择器 $("标签名称"):搜索指定元素标签名的所有节点,这个是一个合集的操作。

5. jQuery中获取属性的方法
① 获取或则设置属性attr() :attr()方法来获取和设置元素属性
例:

② 移出属性removeAttr(name)
例:

③ 获取或则设置属性prop()
例:

④ 移出属性removeProp(name)
例:

经过使用发现Attr和Prop似乎差不多,其实二者是有区别的:
attr是HTML中就有的,是元素的选项|附加项,值只能为string类型,可使用自定义属性;
prop值类型多样化,可以访问DOM对象中的属性,因为它本身就是对象的成员
6.jQuery中动态操作class
① addClass():为每个匹配的元素添加指定的类名
例:

② removeClass():从所有匹配的元素中删除全部或者指定的类

③ toggleClass():如果存在就删除一个类/如果不存在就添加一个类

7. jQuery中操作属性的方法
① html():取得第一个匹配元素的html内容
例:

② text():取得所有匹配元素的内容
例:

③ val():获得匹配元素的当前value值
例:

经过使用发现html和text似乎差不多,其实二者是有区别的:
html处理的是元素内容,text处理的是文本内容
如果处理的对象只有一个子文本节点,那么html处理的结果与text是一样的
8.jQuery中操作样式的方法
① css():访问匹配元素的样式属性
例:

② width():取得匹配元素当前计算的宽度值(px)
例:

③ height():取得匹配元素当前计算的高度值(px)
例:

下面是关于高度是否包含内外边框的高度获取,这里就不一一列举了
innerWidth():获取第一个匹配元素内部区域宽度(包括内边距、不包括边框)
innerHeight():获取第一个匹配元素内部区域高度(包括内边距、不包括边框)
outerWidth():获取第一个匹配元素外部高度(默认包括内边距和边框)
outerHeight():获取第一个匹配元素外部高度(默认包括内边距和边框)。

...全文
11 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

2,099

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 非技术区
社区管理员
  • 非技术区社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧