jQuery框架的介绍以及基本用法--操作dom

好好学习泰酷辣

已于 2022-07-09 14:43:54 修改

阅读量325

点赞数

文章标签： jquery javascript 前端

于 2021-03-17 10:10:58 首次发布

本文链接：https://blog.csdn.net/weixin_42529276/article/details/114736148

版权

jQuery框架的介绍以及基本用法–操作dom

概念
jQuery是一个优秀的javascript轻量级框架之一，兼容css3和各大浏览器，提供了dom，events，animate，ajax等简易操作，其本质就是js，并且jquery的插件非常丰富。
jquery插件：利用jquery技术实现具有特定功能的效果。
jQuery版本

1.x：兼容IE6，7，8，使用最为广泛，官方只做bug修复，功能不再新增
2.x：不兼容IE6,7，8，很少使用，官方只做bug修复，功能不再新增
3.x：不兼容IE6，7，8，只支持最新浏览器，但是很多老jQuery插件不支持这个版本
功能：3.x > 2.x > 1.x
开发版本和生产版本：命名为jQuery-x.x.x.js为开发版本，代码格式好，方便开发人员查看源码，但是体积稍微大；命名为jQuery-x.x.x.min.js为生产版本，代码格式格式差，不便于阅读代码，但是体积稍微小

js和jquery的区别
1. 加载完成事件不同：
  js加载事件每个页面只能有一个，并且是下面的加载完成事件覆盖上面的
  jquery的加载完成事件可以有多个
2. 对象不同
  jquery本质是js对象数组
  jquery对象只能调用jquery对象的成员，js对象同理。两者必须需要进行对象转换才可以互相调用对方的成员
  转换方式：
  1. js->jquery
    格式：$(js对象)
  2. jquery->js
    格式：jquery[索引值]
jQuery的使用
1.导入jQuery文件：
<script type=“text/javascript” src = “js/jquery-3.3.1.min.js”>
2. 验证是否导入成功(使用jquery的功能)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js事件与jquery事件的区别</title>
</head>
<!-- 导入jquery框架 -->
<!-- ..表示退出一层文件夹 -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

<script type="text/javascript">
    //js的加载完成事件
    window.onload = function () {
        alert("js的加载完成事件")
    };

    //jquery的加载完成事件
    $(function () {
      alert("jquery的加载完成事件")
    });
</script>

<body>

</body>
</html>

jQuery选择器
5.1 基本选择器
语法

选择器名称	语法	说明
标签选择器	$(“标签名”)	获取所有匹配标签名称的所有元素
id选择器	$(“#id的属性值”)	获取指定id匹配的元素
类选择器	$(“.class的属性值”)	获得指定class匹配的所有元素

注意：
如果需要满足多个选择器要求的为交集选择器，格式为：$(“选择器1选择器2…”)；
如果只需要满足其中一个选择器要求为并集选择器，格式为：$(“选择器1,选择器2…”)，每个选择器之间用逗号隔开

5.2 层级选择器
语法

选择器名称	语法	说明
后代选择器	$(“A B”)	选择A元素内部所有B元素
子选择器	$(“A > B”)	选择A元素内部的所有的子元素B

操作兄弟元素

语法	说明
$(选择器1 + 选择器2)	选择选择器1的后面下一个兄弟选择器2的元素
$(选择器1 ~ 选择器2)	选择选择器1的后面所有兄弟选择器2的元素

5.3 属性选择器
语法

选择器名称	语法	说明
属性选择器	$(“A[属性名]”)	包含指定属性的选择器
属性选择器	$(“A[属性名=‘值’]”)	包含指定属性等于指定值的选择器
属性选择器	$(“A[属性名!=‘值’]”)	指定属性不等于指定值的选择器
属性选择器	$(“A[属性名^=‘值’]”)	指定属性以指定值开头的选择器
属性选择器	$(“A[属性名$=‘值’]”)	指定属性以指定值结束的选择器
属性选择	$(“A[属性名*=‘值’]”)	指定属性包含指定值的选择器
复合属性选择器	$A[属性名=值][属性名=值]…	包含多个属性条件的选择器

5.4 基本过滤选择器(从选择出来的元素中过滤)

语法

选择器名称	语法	说明
首元素选择器	:first	获得选择的元素的第一个元素
尾元素选择器	:last	获得选择的元素的最后一个元素
非元素选择器	:not(selecter)	不包括指定内容的元素
偶数选择器	:even	偶数，从0开始计数
奇数选择器	:odd	奇数，从1开始计数
等于索引选择器	:eq(index)	指定索引元素
大于索引选择器	:gt(index)	大于指定索引元素
小于索引选择器	:lt(index)	小于指定索引元素
标题选择器(h标签)	:header	获得标签元素，固定写法

5.5 表单属性过滤选择器
语法

选择器名称	语法	说明
可用元素选择器	:enabled	获得可用元素
不可用元素选择器	:disabled	获得不可用元素
选中选择器	:checked	获得单选或复选框选中的元素
选中选择器	:selected	获得下拉框选中的元素

6. jQuery的DOM操作
6.1 jQuery对DOM树中的文本和值进行操作
语法

API方法	说明
val([value])	获得/设置value属性相应的值
text([value])	获得/设置元素的文本
html([value])	获得/设置元素的标签体所有内容

6.2 jQuery对DOM树中的属性进行操作
语法

API方法	说明
attr(name[,value])	获得/设置属性的值，如果属性存在则是修改，如果属性不存在则是新增
prop(name[,value])	获得/设置属性的值(checked,selected)
removeAttr(name)	删除属性
注意：

attr和prop都可以设置复选框的选中与不选中状态，但是attr是通过设置页面标签上的属性checked控制选中与不选中，可以被看到；prop是设置节点对象内存中的属性控制选中与不选中，页面上不能被看到
如果使用prop设置复选框的选中状态，attr不能获取属性值，因为prop操作状态是内存中的，不是页面标签上的，不过可以设置boolean类型值的属性
prop适合获取属性值为boolean的值，如果框被选中，则返回true，没被选中则返回false。

6.3 jQuery对class进行操作
语法

API方法	说明
css(name[,value])	获取/设置指定的CSS样式，操作标签的style属性
addClass(value)	addClass(类样式名)给指定的对象添加新的类样式，指定类样式名字即可
removeClass(value)	removeClass(类样式名)删除指定的类样式名，只是删除属性值，属性还在
toggleClass(value)	toggleClass(类样式名)切换样式，如果没有类样式，则添加，如果有类样式，就删除

6.4 jQuery创建插入对象
语法

API方法	说明
$(“<a></a>”)	创建A元素对象
appned(element)	添加最后一个子元素，两者之间是父子关系
prepend(element)	添加成第一个子元素，两者是父子关系
before(element)	添加到当前元素的前面，两者之间是兄弟关系
after(element)	添加到当前元素后面，两者是兄弟关系

6.5 删除标签

API	说明
remove()	删除元素
empty()	清空子元素

好好学习泰酷辣

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery框架的介绍以及基本用法--操作dom

jQuery框架概念jQuery是一个优秀的javascript轻量级框架之一，兼容css3和各大浏览器，提供了dom，events，animate，ajax等简易操作，其本质就是js，并且jquery的插件非常丰富。jquery插件：利用jquery技术实现具有特定功能的效果。......
复制链接

扫一扫