Web前端——jQuery 基础总结-CSDN博客

本文链接：https://blog.csdn.net/weixin_43860260/article/details/95359750

一、概述

jQuery 是一个简洁的 JavaScript 框架，只是封装了 JavaScript 的原生源码而已
jQuery 设计宗旨：Write less，Do more
jQuery 封装了 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作，事件处理，动画设计，Ajax 交互

1、下载jQuery

jQuery官网下载
 jQuery 1.4版本下载
 jQuery 1.8版本下载
 jQuery 1.11版本下载
 jQuery 2.1版本下载
 jQuery 3.3版本下载

jQuery 1.10完全参考手册下载

目前jQuery有三个大版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
功能不再新增。因此一般项目来说，使用1.x版本就可以了，
最终版本：1.12.4
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
最终版本：2.2.4
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
目前该版本是官方主要更新维护的版本。
最新版本：3.2.1（2017年3月20日）
jquery-xxx.js 与 jquery-xxx.min.js区别：
jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

jQuery有压缩版和源码版

压缩版：容量小，适合在项目中使用，jquery-1.8.3.min.js
源码版：容量大，适合在调试和开发中使用，jquery-1.8.3.js

2、导入 jQuery 的 js 文件

<script src="jQuery/jquery-1.8.3.min.js"></script>

3、jQuery 的写法
第一种写法：

<script src="jQuery/jquery-1.8.3.min.js"></script>
<script>
    $(function () {
        alert("hello jquery!");
    });
</script>

第二种写法：

 <script src="jQuery/jquery-1.8.3.min.js"></script>
    <script>
        $(document).ready(function () {
           alert("hello jquery!");
        });
    </script>

在这里插入图片描述

二、jQuery 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="jQuery/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            $("#mydiv").css("color", "red");//注意双引号的使用
            $("#my\\[div\\]").html("含有转义字符的div");//注意转义字符的使用
        });
    </script>
</head>
<body>
<div id="mydiv">这是一个DIV</div>
<div id="my[div]">这是一个DIV</div>
</body>
</html>

浏览器打开：
在这里插入图片描述

基本选择器
1. 标签选择器（元素选择器）
  -语法： $("html标签名") 获得所有匹配标签名称的元素
2. id选择器
  -语法： $("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器
  -语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
4. 并集选择器：
  -语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
层级选择器
1. 后代选择器
  -语法： $("A B ") 选择A元素内部的所有B元素
2. 子选择器
  -语法： $("A > B") 选择A元素内部的所有B子元素
属性选择器
1. 属性名称选择器
  -语法： $("A[属性名]") 包含指定属性的选择器
2. 属性选择器
  -语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
3. 复合属性选择器
  -语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
过滤选择器
1. 首元素选择器
  -语法： :first 获得选择的元素中的第一个元素
2. 尾元素选择器
  -语法： :last 获得选择的元素中的最后一个元素
3. 非元素选择器
  -语法： :not(selector) 不包括指定内容的元素
4. 偶数选择器
  -语法： :even 偶数，从 0 开始计数
5. 奇数选择器
  -语法： :odd 奇数，从 0 开始计数
6. 等于索引选择器
  -语法： :eq(index) 指定索引元素
7. 大于索引选择器
  -语法： :gt(index) 大于指定索引元素
8. 小于索引选择器
  -语法： :lt(index) 小于指定索引元素
9. 标题选择器
  -语法： :header 获得标题（h1~h6）元素，固定写法
表单过滤选择器
1. 可用元素选择器
  -语法： :enabled 获得可用元素
2. 不可用元素选择器
  -语法： :disabled 获得不可用元素
3. 选中选择器
  -语法： :checked 获得单选/复选框选中的元素
4. 选中选择器
  -语法： :selected 获得下拉框选中的元素

三、jQuery 样式的操作

<script>
    $(function () {
        $("#mydiv").css("color", "red");//注意双引号的使用
        $("#mydiv").css("width", "500px");
        $("#mydiv").css({height: "300px", backgroundColor: "blue", margin: "0 auto", width: "100px"});
    });
</script>

注意：在上面的代码中，div 的宽度设置了两个值，下面的width: "100px"起作用

四、jQuery对象、JavaScript对象之间的转换

JQuery对象在操作时，更加方便。
JQuery对象和js对象方法不通用的.
个人理解：jQuery对象是 js 对象的数组
两者相互转换
jq – > js : jq对象[索引] 或者 jq对象.get(索引)
js – > jq : $(js对象)

1、例如：js 获取对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script>
        //js对象
        window.onload = function () {//设置文档加载完毕
            var d = document.getElementById("mydiv");
            var t = document.getElementById("myinput");
            alert(d.innerHTML);//获取div 的值
            alert(t.value);//获取input的值
        }
    </script>
</head>
<body>
<div id="mydiv">这是一个DIV</div>
<input type="text" id="myinput" value="文本框">
</body>
</html>

例如：jq 获取对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="jQuery/jquery-1.8.3.min.js"></script>
    //引入jQuery
    <script>
        //jq对象
        $(function () {
            var d = $("#mydiv");//获取对象
            var t = $("#myinput");//获取对象
            //alert(d.innerHTML);//会报错
            alert(d.html());//html并非属性，而是方法
            alert(t.val());
        });
    </script>
</head>
<body>
<div id="mydiv">这是一个DIV</div>
<input type="text" id="myinput" value="文本框">
</body>
</html>

上面两种代码， js 和 jq 获取方法的结果是一样的

2、JavaScript 对象转换成 jQuery 对象
在这里插入图片描述

3、jQuery 对象转换成 JavaScript 对象
jQuery 对象可以看成 JavaScript 对象的数组

在这里插入图片描述

五、DOM操作

jQuery操作HTML时，封装了自己的内置函数

1. 内容操作

html(): 获取/设置元素的标签体内容 内容 --> 内容
text(): 获取/设置元素的标签体纯文本内容 内容 --> 内容
val()：获取/设置元素的value属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="jQuery/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            //获取myinput的value值
            var val = $("#myinput").val();
            alert(val);
            $("#myinput").val("李四");
            //获取mydiv的标签体内容
            var html = $("#mydiv").html();
            alert(html);
            $("#mydiv").html("<p>aaaa</p>");
            //获取mydiv文本内容
            var text = $("#mydiv").text();
            alert(text);
            $("#mydiv").html("<h1>bbb</h1>");
        });
    </script>
</head>
<body>
<input id="myinput" type="text" name="username" value="张三"/><br/>
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
</html>

浏览器打开
在这里插入图片描述

2. 属性操作

通用属性操作
1. attr(): 获取/设置元素的属性
2. removeAttr():删除属性
3. prop():获取/设置元素的属性
4. removeProp():删除属性
- attr和prop区别？
  1. 如果操作的是元素的固有属性，则建议使用prop
  2. 如果操作的是元素自定义的属性，则建议使用attr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="jQuery/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            var name = $("#bj").attr("name");//获取北京节点的name属性值
            alert(name);//输出：beijing
            $("#bj").attr("name", "dabeijing");//设置北京节点的name属性的值为dabeijing
            alert($("#bj").attr("name"));//输出：dabeijing
        });
    </script>
</head>
<body>
<ul>
    <li id="bj" name="beijing">北京</li>
    <li id="tj" name="tianjin">天津</li>
</ul>
</body>
</html>

对class属性操作
1. addClass():添加class属性值
2. removeClass():删除class属性值
3. toggleClass():切换class属性
  - toggleClass(“one”):
    - 判断如果元素对象上存在class=“one”，则将属性值one删除掉。如果元素对象上不存在class=“one”，则添加
4. css():

3. CRUD操作

append():父元素将子元素追加到末尾
- 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
prepend():父元素将子元素追加到开头
- 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
appendTo():
- 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
prependTo()：
- 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头
after():添加元素到元素后边
- 对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
before():添加元素到元素前边
- 对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系
insertAfter()
- 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
insertBefore()
- 对象1.insertBefore(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系
remove():移除元素
- 对象.remove():将对象删除掉
empty():清空元素的所有后代元素。
- 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

六、jQuery 动画

在这里插入图片描述
动画效果函数可以在手册里面查找
jQuery 1.10完全参考手册下载

默认显示和隐藏方式
1. show([speed,[easing],[fn]])
  1. 参数：
    1. speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
    2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
      - swing：动画执行时效果是先慢，中间快，最后又慢
      - linear：动画执行时速度是匀速的
    3. fn：在动画完成时执行的函数，每个元素执行一次。
2. hide([speed,[easing],[fn]])
3. toggle([speed],[easing],[fn])
滑动显示和隐藏方式
1. slideDown([speed],[easing],[fn])
2. slideUp([speed,[easing],[fn]])
3. slideToggle([speed],[easing],[fn])
淡入淡出显示和隐藏方式
1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed,[easing],[fn]])

七、jQuery 遍历

js的遍历方式
- for(初始化值;循环结束条件;步长)
jq的遍历方式
1. jq对象.each(callback)
  1. 语法：
    jquery对象.each(function(index,element){});
    - index:就是元素在集合中的索引
    - element：就是集合中的每一个元素对象
```
 this：集合中的每一个元素对象
```
  2. 回调函数返回值：
    - true:如果当前function返回为false，则结束循环(break)。
    - false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
2. $.each(object, [callback])
3. for…of: jquery 3.0 版本之后提供的方式
  for(元素对象 of 容器对象)

八、jQuery 事件绑定

jquery标准的绑定方式
- jq对象.事件方法(回调函数)；
- 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
  - 表单对象.submit();//让表单提交
on绑定事件/off解除绑定
- jq对象.on(“事件名称”,回调函数)
- jq对象.off(“事件名称”)
  - 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
事件切换：toggle
- jq对象.toggle(fn1,fn2…)
  - 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…
- 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。