jQuery总结_安科网

项目需要用，总结一下相关知识，方便查看。

一、jQuery

1、什么是 jQuery?

（1）jQuery 是一个轻量级的 JavaScript 库，极大地简化了 JavaScript 开发。
（2）jQuery 封装了 JS、CSS、DOM 等并提供一致的、简洁的 API，简化了 JS 编程。
（3）jQuery 会频繁的操作 DOM，会影响性能（得与 MVVM 框架区分）。

2、如何引入 jQuery？

（1）引入 jQuery 相关文件（CDN 方式）。

【CDN：（此处选用 BootCDN，其他 CDN 亦可）】
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

（2）官网下载也行

【官网下载地址：】
    https://jquery.com/download/

（3）基本步骤：
　　Step1：引入 jQuery 相关 js 文件。
　　Step2：利用选择器定位到需要操作的节点（元素）。
　　Step3：操作节点（元素）。

【基本使用格式：】
    $(selector).action()
其中：
    $ 指 jQuery。
    selector 指查询的 HTML 元素（节点）。
    action 指对元素（节点）的操作。
    
【举例：（隐藏所有的 p 标签）】
    $("p").hide();

（4）文档就绪事件
　　jQuery 代码需要等 DOM 加载完成后再进行操作，否则可能不生效。

【方式一：】
$(document).ready(function() {
    // jQuery 代码
});

【方式二：（简写形式，效果同方式一）】
$(function() {
    // jQuery 代码
});

（5）小案例分析：
　　点击隐藏按钮，隐藏当前页面所有的 p 标签。

【小案例：】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery Demo</title>
        
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#hide").click(function() {
                    $("p").hide();
                });
                
                $("#show").click(function() {
                    $("p").show();
                })
            });
        </script>
    </head>
    <body>
        <button id="hide" style="background-color: cadetblue;">p hide</button>
        <button id="show" style="background-color: coral;">p show</button>
        <div style="margin-left: 100px; background-color: #5B6270; width: 200px; height: 500px;">
            <div style="margin-top: 20px;">Hello JS</div>
            <p>Hello</p>
            <p>Hello Java</p>
        </div>
    </body>
</html>

jQuery总结

二、jQuery 基本语法

1、选择器（定位 DOM 元素位置）

jQuery 选择器允许对 HTML 的单个元素或者元素组进行操作，能实现定位元素位置并对元素样式进行增删改。写法类似于 CSS 选择器。
（1）分类：
　　基本选择器、层次选择器、过滤选择器、表单选择器。

（2）基本选择器
　　根据标签名、id、class名等一种或多种来选择元素。
　　基本选择器可细分为：元素选择器、类选择器、id 选择器、选择器组。

1、元素选择器：根据标签名定位元素。
    格式： 
        $("标签名")

2、类选择器：根据class属性定位元素。
    格式：
        $(".class属性名")

3、id选择器：根据id属性定位元素。
    格式：
        $("#id")

4、选择器组：定位一组选择器所对应的所有元素。
    格式：
        $("#d1, .importent")

注：$("")返回的均为数组。

（3）层次选择器
　　根据元素的层级关系，加上特殊的符号（>、+、~）来选择元素。
　　层次选择器又可细分为：后代（子孙）元素选择器、子元素选择器、兄弟元素选择器。

1、后代元素选择器（选子孙）：在select1元素下，选中所有满足select2的子孙元素。
    格式：
        $("select1 select2")

2、子元素选择器（只选子）：在select1元素下，选中所有满足select2的子元素。
    格式：
        $("select1 > select2")

3、兄弟元素选择器（选一个）：在select1元素下，选中所有满足select2的下一个（弟弟）元素。
    格式：
        $("select1 + select2")

4、兄弟元素选择器（选所有）：在select1元素下，选中所有满足select2的所有（弟弟）元素。
    格式：
        $("select1 ~ select2")

（4）过滤选择器
　　根据元素特征去选择元素。
　　过滤选择器可细分为：基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、状态过滤选择器。

【基本过滤选择器：】
     根据元素的基本特征定位，常用于表格与列表。
        $("select1:first")：第一个元素。
        $("select1:last")：最后一个元素。
        $("select1:not(selector)")：去除selector的所有元素。
        $("select1:even")：挑选偶数行。
        $("select1:odd")：挑选奇数行。
        $("select1:eq(index)")：下标为index的元素，并返回jQuery对象。
        $("select1:gt(index)")：下标大于index的元素。
        $("select1:lt(index)")：下标小于index的元素。

【内容过滤选择器：】
    根据文本内容定位元素。常用于文本。
        $("select1:contains(text)")：匹配包含给定文本的元素。
        $("select1:empty")：匹配所有不包含子元素或文本的空元素。

【可见性过滤选择器：】
    根据可见性定位元素。
        $("select1:hidden")：匹配所有不可见的元素，或者type="hidden"的元素。
        $("select1:visible")：匹配所有可见的元素。

【属性过滤选择器：】
    根据属性（id, class, style等）定位元素。
        $("select1[attribute]")：匹配具有attribute属性的元素。
        $("select1[attribute = vlue]")： 匹配属性等于value的元素。
        $("select1[attribute != value]")： 匹配属性不等于value的元素。
        $("select1[attribute *= value]")： 匹配属性中包含value的元素。
        $("select1[attribute ^= value]")： 匹配属性中以value开头的元素。
        $("select1[attribute $= value]")： 匹配属性中以value结尾的元素。
        $("select1[attribute1][attribute2]")： 匹配属性中同时满足 attribute1、 attribute2 的元素。

【状态过滤选择器：】
    根据状态定位元素。常用于表单。
        $("input:enabled")：匹配可用的 input 元素。
        $("input:disabled")：匹配不可用的 input 元素。
        $("input:checked")：匹配被选中的checkbox。
        $("option:selected")：匹配被选中的option。

（5）表单选择器
　　用于选择表单元素。

$(":text")：匹配文本框。或者使用 $("input:text")。
$(":password")：匹配密码框。
$(":radio")：匹配单选框。
$(":checkbox")：匹配多选框。
$(":submit")：匹配提交按钮。
$(":reset")：匹配重置按钮。
$(":button")：匹配普通按钮。
$(":file")：匹配文件框。
$(":hidden")：匹配隐藏框。

2、操作 DOM 节点

通过选择器可以定位到 DOM 节点，操作 DOM 才是最终的需求。
　　DOM 指 Document Object Model，即文档对象模型。文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。
（1）捕获节点、修改节点

1、读写节点的HTML内容。相当于JS的innerHTML。
    格式:
        $("select").html();  // 获取节点的html内容
        $("select").html("<span>123</span>");  // 设置节点的内容

2、读写节点的文本内容。相当于JS的innerText。
    格式：
        $("select").text(); // 获取节点的文本内容
        $("select").text("123");  // 设置节点的文本内容

3、读写节点的value属性值。（表单的值用val取）
    格式：
        $("select").val(); // 获取节点的value值
        $("select").val("abc");  // 设置节点的value值

4、读写节点的属性值。
    格式：
        $("select").attr("属性名"); // 获取节点的某属性的值
        $("select").attr("属性名"，"属性值"); // 设置节点的某属性的值

（2）增加节点

【增加节点：】
    分两步：
        1、创建DOM节点。
        2、插入DOM节点。
        
【1、创建DOM节点】
    格式:
        $("节点内容")
    举例：
        let test = $("<span>hello</span>")

【2、插入DOM节点】
    格式：
        $("select").append(test); 做为最后一个子节点添加起来。
        $("select").prepend(test); 做为第一个子节点添加起来。
        $("select").after(test); 做为下一个兄弟节点添加进来。
        $("select").before(test); 做为上一个兄弟节点添加进来。

（3）删除节点

【格式：】
    $("select").remove(); // 删除节点。
    $("select").remove(selector); // 只删除满足selector的节点。（不常用）
    $("select").empty(); // 清空节点。

（4）添加 CSS 样式、删除 CSS 样式、修改 CSS 样式

$("select").addClass("");  //追加样式。
$("select").removeClass(""); // 移除指定样式。
$("select").removeClass();  //  移除所有样式。
$("select").toggleClass(""); //  切换样式（对某个样式进行添加或移除操作）。 
$("select").hasClass(""); //   判断是否有某个样式。
$("select").css("");//   读取css的值，返回第一次匹配的值。
$("select").css("",  "") ;// 设置样式。
$("select").css({"" : "",  "" : ""}) ;// 设置多个样式。

（5）获取尺寸、设置尺寸

$("select").width();  // 返回元素的宽度（不包括内边距、边框、外边距）
$("select").width("");  // 设置元素的宽度（不包括内边距、边框、外边距）
$("select").height();  // 返回元素的高度（不包括内边距、边框、外边距）
$("select").height("");  // 设置元素的高度（不包括内边距、边框、外边距）
$("select").innerWidth();  // 返回元素的宽度（不包括边框、外边距）
$("select").innerHeight();  // 返回元素的高度（不包括边框、外边距）
$("select").outerWidth();  // 返回元素的宽度（不包括外边距）
$("select").outerHeight();  // 返回元素的高度（不包括外边距）
$("select").outerWidth(true);  // 返回元素的宽度
$("select").outerHeight(true);  // 返回元素的高度

jQuery总结

（6）遍历节点
　　根据元素的层级关系进行移动，即遍历。
　　可以向上移动（遍历祖先节点）、向下移动（遍历子孙节点）、水平移动（遍历兄弟节点）。

1、向上移动，遍历祖先（直接父节点、祖父节点等）
    $("select").parent();   // 返回直接父节点。
    $("select").parents();   // 返回所有祖先节点。
    $("select1").parentsUntil(“select2”);  // 返回 select1 与 select2 间的所有节点，若 select2 不存在，则等价于 parents 方法


2、向下移动，遍历子孙（直接子节点、子孙节点）
    $("select").children();  // 返回直接子节点
    $("select").children(selector);  // 返回匹配 selector 的直接子节点
    $("select").find(selector);   // 查找满足选择器的所有后代。
    $("select").find("*");   // 查找所有后代。
    
3、水平移动，遍历兄弟
    $("select").siblings();  // 返回所有兄弟节点
    $("select").siblings(selector);  // 返回匹配 selector 的所有兄弟节点。
    $("select").next();   // 返回下一个兄弟节点
    $("select").next(selector);  //  返回匹配 selector 的下一个兄弟节点。
    $("select").nextAll();  // 返回当前元素的所有 弟弟节点
    $("select").nextUntil(selector);  // 返回两个选择器间的所有节点
    $("select").prev();  // 返回上一个兄弟节点
    $("select").prev(selector);  // 返回匹配 selector 的上一个兄弟节点。
    $("select").prevAll();  // 返回当前元素的所有 哥哥节点
    $("select").prevUntil(selector);  // 返回两个选择器间的所有节点

3、事件

jQuery 对事件同样做了处理，提供了一些 API。
（1）基本语法：

【事件绑定语法：】
    $obj.bind(事件类型, 事件处理函数);
    $obj.on(事件类型, [选择器], 事件处理函数);
比如：
    $obj.bind(‘click‘, fn)  
    其可以简写为 $obj.click(fn)。其中$obj.click()表示触发了click事件。
    
 【注： on 与 bind 的区别】
     bind（event,fn）;
     // 该方法只能给绑定元素添加事件。当 on()不使用第二个参数时与bind() 相同。
    // 当使用第二个参数时 就进行了冒泡，将 事件委托给父元素进行处理 并且this还是指向第二个参数选择器
    on(event,[selector],fn); 
        //该方法可以给指定的子元素绑定事件，注意：特别是给动态创建的dom元素绑定事件时必须使用该方法。
        //on可以将子元素的事件委托给父元素进行处理；on可以给动态添加的元素加上绑定事件。

【获取事件对象 event：】
在 function 参数中直接写即可。
格式：
    $(function(){
        $("select").click(function(event) {
            alert(event.pageX + "," + event.pageY+ "," + event.target.nodeName);
        })
    });

【事件对象常用属性：】
    获取事件源： 
        event.target, 其返回的是DOM对象。
    
    获取鼠标点击的坐标:  
        event.pageX, 
        event.pageY.
        
【取消事件冒泡机制：】
    event.stopPropagation() 可以取消事件冒泡。

（2）常用事件 API

【鼠标事件：】
    $("select").click(function() {});   // 鼠标左键点击事件
    $("select").dblclick(function() {});  // 鼠标左键双击事件
    $("select").mouseenter(function() {});  // 鼠标移入事件（当前选中的元素范围内触发一次）
    $("select").mouseleave(function() {});  // 鼠标移出事件（不会触发冒泡事件）
    $("select").mouseover(function() {});  // 鼠标移入事件（从子元素、当前元素相互切换时会触发）
    $("select").mouseout(function() {});  // 鼠标移出事件（会触发冒泡事件）
    $("select").mousemove(function() {});  // 鼠标移入事件（移动一个像素就会触发）
    $("select").mousedown(function() {});  // 鼠标移入并按下事件
    $("select").mouseup(function() {});  // 鼠标按下后的弹起事件
    $("select").hover(mouseenter, mouseleave);  // 鼠标悬浮事件（触发mouseenter、mouseleave事件）

【表单事件：】
    $("select").focus(function() {});  // 元素获得焦点（点击或Tab键触发）后触发
    $("select").blur(function() {});  // 元素失去焦点后触发
    $("input").change(function() {});  // 表单（input）值被修改后触发
    $("form").submit(function() {});  // form 提交时触发
    
【键盘事件：】
    $("select").keydown (function(event) {});  // 键盘键按下触发，通过 event.key 可以获取当前按下的键名
    $("select").keypress(function(event) {});  // 键盘键按下触发，通过 event.key 可以获取当前按下的键名，其有部分键获取不到，只能通过 keydown 获取。
    $("select").keyup (function(event) {});  // 键盘键弹起触发，通过 event.key 可以获取当前按下的键名

4、动画效果

（1）显示、隐藏

$("select").show();
$("select").hide();
$("select").toggle(speed, function(event) {});  // 参数均非必须，用于切换样式，speed 用于设置切换。相当于 show()、hide() 方法
作用：通过增加样式 display: block/none 来实现显示或者隐藏。

用法:
    $("select").show(执行时间， 回调函数)
    其中：
        执行时间：slow, normal, fast或毫秒数。
        回调函数：动画执行完毕后要执行的函数。

（2）上下滑动式

$("select").slideDown();
$("select").slideUp();
$("select").slideToggle(speed, function(event) {});
作用：通过增加样式 display: block/none 来实现显示或者隐藏。

用法同show()方法。

（3）淡入、淡出

$("select").fadeIn();
$("select").fadeOut();
$("select").fadeToggle(speed, function(event) {});
作用：参数可选，通过改变不透明度opacity、display来实现显示或者隐藏。

$("select").fadeTo(speed,opacity,callback);
作用：speed,opacity 参数必须，通过改变不透明度opacity来实现显示或者隐藏。

用法同show()方法。

（4）自定义动画

animate(偏移位置， 执行时间，回调函数)
其中：
    偏移位置：必须，{}描述动画执行后元素的样式。
    执行时间：可选，毫秒数。
    回调函数：可选，动画执行结束后要执行的函数。
形如：
    $("div").click(function(){
        $("div").animate({"height" : "300px"},1000).animate({"width" : "300px"},1000).animate({"height" : "100px"},1000).animate({"width" : "100px"},1000);
    })

5、操作AJAX

AJAX：Asynchronous JavaScript and XML，即异步的 JavaScript 和 xml。简单的理解为在不重载整个浏览器页面下，AJAX向后台发送请求并响应，将数据展示在页面上。
（1）$.ajax()
　　执行异步的 http 请求。

【格式：】
$.ajax({
    url:请求地址,
    type:请求类型POST|GET，
    data:提交的数据,
    async:同步或者异步(默认)处理,true（默认）|false。
    dataType:预期服务器返回结果类型,
    success:成功时回调函数，
    error:失败时回调函数，
    beforeSend:请求发送前回调函数
});


【举例：】
<script>
    $(function(){   //页面载入后，执行此方法
        $("#showBtn").click(function(){   //id=showBtn的点击事件
            var name = $("username").val();
            $.ajax({
                url:"https://www.baidu.com",
                type:"get",
                data:{"name":name},  //等价于"name=" + name
                success:function(result){ //result等价于xhr.responseText，即服务器返回的结果
                    $("msg").html(result);   //返回html转换后的数据
                    $("msg").text(result);  //返回文本数据
                }
            });
        });
    });
</script>

（2）$.get()
　　使用 Http 的 Get 发送请求并获取数据。

【格式：】
    $.get(URL,data,function(response,status,xhr),dataType);
其中：
    URL：必须，请求的地址。
    data：可选，提交到服务器的数据。
    dataType：可选，服务器返回的数据类型。
    function：可选，response为返回的结果，status为返回的状态，xhr为 XMLHttpRequest 对象。

（3）$.post()
　　使用 Http 的 Post 发送请求并获取数据。

【格式：】
    $.post(URL,data,function(response,status,xhr),dataType)
    
参数同 $.get()

（4）$("select").load()
　　从服务器加载数据，并放在指定元素上。

【格式：】
    $("select").load(url,data,function(response,status,xhr))

参数同 $.get()

jQuery总结

一、jQuery

1、什么是 jQuery?

2、如何引入 jQuery？

二、jQuery 基本语法

1、选择器（定位 DOM 元素位置）

2、操作 DOM 节点

3、事件

4、动画效果

5、操作AJAX

相关推荐