Jquery基础教程：概念、操作及事件处理-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40055163/article/details/120527977

1 什么是jquery

是js的一款框架产品。
Jquery解决的问题：
1.原生js编程复杂，获取标签对象document.getElementById(“id值”)。
2.屏蔽浏览器差异。
3.含有插件、表单验证、图片放大器。

2 第一个jquery程序

2.1 搭建开发环境

1.点击File–>New–>Module,如图所示：
在这里插入图片描述
2.选择Java，点击Next。如图所示：

3.修改相应即可，点击Finish。如图所示：

4.选择jquery如图所示：右键并点击。

5.选择Web，点击OK即可。如图所示：

6.在项目中引入jquery相关的js文件。

在web目录下创建js目录，把jquery-1.8.3js放入到js目录下。如图所示：在这里插入图片描述
7.在需要使用jquery的HTML页面中引入相关js文件的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        // 代码 书写Jquery语法
    </script>
</head>
<body>
</body>
</html>

如图所示：在这里插入图片描述

2.2 Jquery编程

1.编写first.html的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        // 代码 书写Jquery语法
        function test1() {
            // js
            var div = document.getElementById("d");
            alert($(div).text());  // 转化为Jquery对象
            // Jquery 获取标签对象，使用的时选择器 id选择器 $(#+标签的id值)
            // text(); 获取标签内部文本信息
            // var div = $("#d");
            //  console.info(div);   //原生js对象 DOM对象 (Object HTMLdivElment )
            // alert(div.get(0).innerText);  转化为js对象
        }
    </script>
</head>
<body>
    <div id="d">Adair</div>
    <input type="button" value="点击" onclick="test1()"/>
</body>
</html>

如图所示：在这里插入图片描述
注意：

原生js对象和jquery对象不是同一个对象。
Js对象中的属性和方法不能与jquery混用。
Js对象和jquery对象可以转换的：
Js对象—>jquery对象：$(js对象)。
Jquery对象—>js对象：jquery对象.get(0)。

3 标签对象的获取（选择器）

1.基本选择器【重点常用】。
a.id选择器【常用】通过标签id属性值获取标签对象获取的时单个标签对象。
语法：$(“# id值”)。
b.标签选择器通过标签名获取标签对象获取的是标签数组。
语法: $(“ 标签名 ”) 。 c . 类选择器通过标签 c l a s s 属性值获取标签对象。语法 :$ (“.class属性值”)。
d.多路选择器通过多个选择器选择标签对象。
语法： $(“ 选择器, 选择器 . . . ”) 。 2 . 层级关系选择器。后代选择器语法：$ (“选择器选择器”) 获取所有内部标签。
直接子代选择器语法：$(“选择器>选择器”) 只获取子代标签孙子不算。
3.过滤选择器基于一组标签对象进行再次筛选。
:first 一组标签中第一个标签对象。
:last 一组标签中最后一标签对象。
:eq(index) 获取指定位置的标签对象，index:下标。
:gt(index) 获取大于指定位置的标签对象。
:lt(index) 获取小于指定位置的标签对象。
4.属性选择器通过标签中的一些属性获取标签对象。
$(“选择器[属性名]”) 获取含有指定属性的标签对象。
$(“选择器[属性名=值]”) 获取含有指定属性名等于对应值的标签对象。
5.针对于单选按钮和复选按钮。
:checked 获取已经选择的单选或者复选框。
6.针对于下拉列表。
:selected 获取已经选择的option选项。
7.和表单相关的选择器。
:checkbox 获取页面中所有的复选框。
:radio 获取页面中所有的单选框。
:text 获取页面中所有的文本框。
:button 获取页面中所有的按钮。
…
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        function test1() {
            // 标签选择器 css.("display","none");  // 隐藏选中的元素
            // $("li").css("display","none");
            // 类选择器
           //  $(".c1").css("display","none");
            // 多路选择器
           // $(".c1,#l1,input").css("display","none");
            // 层级关系选择器
            // 后代选择器
            // $("#o1 li").css("display","none");
            // 直接子代选择器
            // $("#o1 > li").css("display","none");
            // 过滤选择器
            // $("o1 > li:first").css("display","none");
            // $("o1 > li:last").css("display","none");
            // $("#o1 > li:eq(1)").css("display","none");
            // $("#o1 > li:gt(1)").css("display","none");
            $("#o1 > li:lt(1)").css("display","none");
        }
    </script>
</head>
<body>
    <ol id="o1">
        <li>Adair1</li>
        <li class="c1">Adair2</li>
        <li class="c1">Adair3</li>
        <li class="c1">Adair4</li>
        <li class="c1">Adair5</li>
        <div>
            AdairW
            <li class="c1">AdairXX</li>
        </div>
    </ol>
    <ol>
        <li id="l2">Adair11</li>
        <li class="c1">Adair22</li>
        <li class="c1">Adair33</li>
        <li class="c1">Adair44</li>
        <li class="c1">Adair55</li>
    </ol>
    <li >Adair6</li>
    <li >Adair7</li>
    <input type="button" value="点击" onclick="test1()"/>
</body>
</html>

如图所示：
在这里插入图片描述
演示2的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        function test1() {
            // 属性选择器
            // $("input[id]").css("display","none")
            // 针对于单选按钮和复选按钮
            //  $("input[type = checkbox] :checked").css("display","none")
            // 针对于下拉列表
            // $("#city > option :selected").css("display","none")
            // 和表单相关的选择器
            $(":checkbox")
        }
    </script>
</head>
<body>
    <input type="checkbox" name="likes" value="1">
    <input  type="checkbox" name="likes" value="2">
    <input id="box3" type="checkbox" name="likes" value="3">
    <input type="checkbox" name="likes" value="4">
    <input type="checkbox" name="likes" value="5">
    <input type="checkbox" name="likes" value="6">
    <or/>
    <select id="city">
        <option>贵州</option>
        <option>云南</option>
        <option>四川</option>
        <option>北京</option>
    </select>
    <input type="button" value="点击" onclick="test1()"/>
</body>
</html>

如图所示：在这里插入图片描述

4 标签对象的遍历

演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        function test1() {
            var boxs = $(":checkbox");
            // 1.下标遍历  数组长度属性：length，Jquery：size()
            for (var  i = 0; i < boxs.size(); i ++){
                // 遍历过程中，当前元素js对象，如果需要调用JQuery方法，需要转换
                alert($(boxs[i]));
            }
            // 2.foreach
            boxs.each(function () {
                // 遍历过程中 用当前对象 this。当前元素js对象，如果需要调用JQuery方法，需要转换。
                alert($(this));
            });
        }
    </script>
</head>
<body>
    <input type="checkbox" name="likes" value="1">
    <input type="checkbox" name="likes" value="2">
    <input id="box3" type="checkbox" name="likes" value="3">
    <input type="checkbox" name="likes" value="4">
    <input type="checkbox" name="likes" value="5">
    <input type="checkbox" name="likes" value="6">
    <input type="button" value="点击" onclick="test1()"/>
</body>
</html>

如图所示：在这里插入图片描述

5 通过jquery操作页面结构

1.增加
创建对象：var div = $(“

文本

”)。
追加节点：父节点.append(子节点)。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        function test1() {
            // 创建标签对象和文本
            var name = "Adair";
            var div = $("<div>" + name +"</div>");
            $("#bd").append(div);
        }
    </script>
</head>
<body id="bd">
    <input type="button" value="点击" onclick="test1()"/>
</body>
</html>

如图所示：在这里插入图片描述

2.删除要删除的标签本身调用方法。
empty(); 移除标签内部内容本身不动。
remove(); 连带本身一起删除。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        function test1() {
            // $("#d").empty();
            $("#d").remove();
        }
    </script>
</head>
<body id="bd">
    <div id="d">Adair</div>
    <input type="button" value="点击" onclick="test1()"/>
</body>
</html>

如图所示：在这里插入图片描述
3.修改 $() 代表 j q u e r y 标签对象。 a . 标签内部文本。获取：$ ().text() 等价于 js中的innerText。
$() . h t m l () 等价于 j s 中的 i n n e r H T M L 。修改：$ ().text(“文本”)。
$().html(“文本”)。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        function test1() {
          // var result = $("#d").text();
          // alert(result);
            $("#d").text("XingWang");
        }
    </script>
</head>
<body id="bd">
    <div id="d">Adair</div>
    <input type="button" value="点击" onclick="test1()"/>
</body>
</html>

如图所示：在这里插入图片描述
b.css样式
获取： $() . c s s (“ c s s 样式属性名 ”) 。修改：$ ().css(“css样式属性名”,”新值”)。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        div{
            border: solid 1px red;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        function test1() {
            // 获取对应样式的值
            // $("#d").css("width");
            // 修改样式
            $("#d").css("width","200px").css("height","200px").css("background-color","yellow");
        }
    </script>
</head>
<body id="bd">
    <div id="d">Adair</div>
    <input type="button" value="点击" onclick="test1()"/>
</body>
</html>

如图所示：在这里插入图片描述
c.class属性。
添加class属性值： $().addClass(“c1”);
移除class属性值： $().removeClass(“c1”);
$().removeClass() //移除class全部值。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .c1{
            background-color: blue;
            font-size: 20px;
        }
    </style>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        function test1(tr) {
            $(tr).addClass("c1");
        }

        function test2(tr) {
            $(tr).removeClass("c1");
        }
    </script>
</head>
<body id="bd">
    <table border="1px" width="75%" align="center" >
        <tr>
            <td>ID</td><td>NAME</td><td>AGE</td><td>BIRTHDAY</td>
        </tr>
        <tr onmouseover="test1(this)" onmouseout="test2(this)">
            <td>1</td><td>Adair</td><td>26</td><td>1995-02-26</td>
        </tr>
        <tr onmouseover="test1(this)" onmouseout="test2(this)">
            <td>2</td><td>TableL</td><td>28</td><td>1993-11=10</td>
        </tr>
        <tr onmouseover="test1(this)" onmouseout="test2(this)">
            <td>3</td><td>LiTiao</td><td>24</td><td>1997-06-20</td>
        </tr>
        <tr onmouseover="test1(this)" onmouseout="test2(this)">
            <td>4</td><td>luTingTing</td><td>22</td><td>1999-10-12</td>
        </tr>
    </table>
</body>
</html>

如图所示：在这里插入图片描述
d.input标签的value属性值。
获取： $() . v a l (); 修改：$ ().val(“值”);
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        function test1() {
           // var name = $("#name").val();
           // alert(name);
            $("#name").val("Adair");
        }
    </script>
</head>
<body id="bd">
    姓名:<input id="name" type="text" name="name">
    <input type="button" value="点击" onclick="test1()"/>
</body>
</html>

如图所示：在这里插入图片描述
e.标签的其他属性
获取： $() . p r o p (“ 属性名 ”) a t t r (“ 属性名 ”) 修改：$ ().prop(“属性名”，”属性值”) attr(“属性名”,”属性值”)
prop：1.6之后 attr:1.6之前。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        function test1() {
           // var result = $("#img1").prop("src");
           // alert(result);
            $("#img1").prop("id","2.jpg");
        }
    </script>
</head>
<body id="bd">
    <img id="img1" src="1.jpg">
    <input type="button" value="点击" onclick="test1()"/>
</body>
</html>

如图所示：在这里插入图片描述

6 全选/取消全选

演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        function test1() {
            // 全选操作
            // 获取除第一个之外所有的复选框，设置checked属性 = 第一个复选框的checked属性。
            $(":checkbox:gt(0)").prop("checked",$("#s1").prop("checked"));
        }
    </script>
</head>
<body id="bd">
    全选：<input id="s1" type="checkbox" onclick="test1()">
    <br/>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</body>
</html>

如图所示：在这里插入图片描述

7 标签绑定事件的方式

1.标签式事件绑定事件属性直接写在标签中（不利于后续修改）。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        // 代码 书写Jquery语法
        function test1() {
           alert( $("#d").text());
        }
    </script>
</head>
<body>
    <div id="d">Adair</div>
    <input type="button" value="点击" onclick="test1()"/>
</body>
</html>

如图所示：
在这里插入图片描述
2.编程式事件绑定【常用】
Js：
标签对象.onclick = function(){ //执行的功能 }
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
            // 编程式事件绑定的方式 事件属性特征：js中的事件属性去掉on 后边加()
            // 监听函数的功能就是当前事件的参数
            function test1(){
                $("#btn").click(function () {
                    // 单击之后执行的功能
                    alert($("#d").text());
            });
        }
    </script>
</head>
<body onload="test1()">
    <div id="d">Adair</div>
    <input id="btn" type="button" value="点击" />
</body>
</html>

如图所示：在这里插入图片描述
Jquery :
标签对象.click( function (){ //执行的功能 });
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        // 页面加载完毕之后执行的内容， $(function () {  先加载页面在执行功能 })
        $(function () {
            // 编程式事件绑定的方式 事件属性特征：js中的事件属性去掉on 后边加()
            // 监听函数的功能就是当前事件的参数
            $("#btn").click(function () {
                // 单击之后执行的功能
                alert($("#d").text());
            });
        })
    </script>
</head>
<body>
    <div id="d">Adair</div>
    <input id="btn" type="button" value="点击" />
</body>
</html>

如图所示：在这里插入图片描述
分析如图所示：

8 加载页面之后执行的功能

方式一：

$(document).ready(function(){
// 先加载页面  再执行的内容
})

方式二：【记忆】

$(function(){ 
    // 先加载页面  再执行的内容   
})

演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        // 页面加载完毕之后执行的内容， $(function () {  先加载页面在执行功能 })
        $(function () {
            // 编程式事件绑定的方式 事件属性特征：js中的事件属性去掉on 后边加()
            // 监听函数的功能就是当前事件的参数
            $("#btn").click(function () {
                // 单击之后执行的功能
                alert($("#d").text());
            });
            $("#d").mousemove(function () {
                //  鼠标移入之后的操作
                alert("你猜");
            });
            $("#d").mouseout(function () {
                //  鼠标移出之后的操作
                alert("你再猜");
            });
        })
    </script>
</head>
<body>
    <div id="d">Adair</div>
    <input id="btn" type="button" value="点击" />
</body>
</html>

如图所示：在这里插入图片描述

9 Jquery中常见的事件属性

特征：js中的事件属性去掉on后边加上()。
单击 click()。
双击 dblclick()。
鼠标移入 mouseover()。
鼠标移出 mouseout()。
丢失焦点 blur()。
获得焦点 focus()。
下拉列表值改变 change()。

10 复合事件属性

1.hover(func1,func2) 鼠标的移入移出事件。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .c1{
            background-color: blue;
            font-size: 20px;
        }
    </style>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            // 给表格的tr绑定hover事件
            $("tr:gt(0)").hover(function () {
                // 鼠标移入时的操作
                $(this).addClass("c1");
            },function () {
                // 鼠标移出时的操作
                $(this).removeClass("c1");
            });
        });
    </script>
</head>
<body id="bd">
    <table border="1px" width="75%" align="center" >
        <tr>
            <td>ID</td><td>NAME</td><td>AGE</td><td>BIRTHDAY</td>
        </tr>
        <tr>
            <td>1</td><td>Adair</td><td>26</td><td>1995-02-26</td>
        </tr>
        <tr>
            <td>2</td><td>TableL</td><td>28</td><td>1993-11=10</td>
        </tr>
        <tr>
            <td>3</td><td>LiTiao</td><td>24</td><td>1997-06-20</td>
        </tr>
        <tr>
            <td>4</td><td>luTingTing</td><td>22</td><td>1999-10-12</td>
        </tr>
    </table>
</body>
</html>

如图所示：在这里插入图片描述
2.toggle(func1,func2,func3…); 多个单击事件。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Jquery的js文件-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").toggle(function () {
                // 第一次单击
                alert("亲爱的，我走啦");
            },function () {
                // 第二次单击
                alert("这一走。。。");
            },function () {
                // 第三次单击
                alert("我就换个女朋友！！！");
            });
        });
    </script>
</head>
<body id="bd">
    <input id="btn" type="button" value="点击" />
</body>
</html>