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():获取第一个匹配元素外部高度(默认包括内边距和边框)。