jQuery学习:

作者: 苦难_69e0 | 来源:发表于2021-03-12 09:03 被阅读0次

jQuery就是JavaScript的封装版。
用来简化JavaScript对DOM对象定位以及对DOM对象属性操作开发步骤

jQuery学习重点：
1.熟练背诵jQuery选择器和过滤器的语法。
2.熟练掌握jQuery对象提供的功能函数

JavaScript存在的弊端：
JavaScript，定位DOM对象命令，过于冗长。
JavaScript，定位DOM对象方式，过于单一
JavaScript，定位DOM对象中属性操作，过于繁琐

jQuery的使用：
1.下载jQuery工具文件，并导入到工程中。
直接搜索jQuery官网，下载。
jQuery文件是一个脚本文件，导入就使用：
<script type="text/javascript" src="jQuery脚本文件路径"></script>
2.将jQuery文件加载到浏览器上。

开篇基础

jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化JavaScript 对 HTML DOM 操作

官网地址： https://jquery.com/

官网首页 jQuery 介绍：

image.png

原文翻译：
jQuery 是一个快速，小巧，功能丰富的 JavaScript 库。它通过易于使用的 API 在大量浏览器中运行，使得 HTML 文档遍历和操作，事件处理，动画和 Ajax 变得更加简单。通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。

为什么[why]使用 jQuery

非常重要的理由就是：它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX异步对象。

其他优点：
（1）写少代码,做多事情【write less do more】（2）免费，开源且轻量级的 js 库，容量很小
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX功能
（5）文档手册很全，很详细
（6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期）
（7）出错后，有一定的提示信息
（8）不用再在 html 里面通过<script>标签插入一大堆 js 来调用命令了

例如：使用 JavaScript 定位 DOM 对象常用的三种方式：
（1）通过 ID 属性：document.getElementById()
（2）通过 class 属性：getElementsByClassName()
（3）通过标签名：document.getElementsByTagName()
上面代码可以看出 JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出错。jQuery 分别使用

$(“#id”) , 
$(“.class 名”) , 
$(“标签名)

封装了上面的 js 方法。

DOM 对象

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。

通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。

JavaScript 对象和 jQuery 对象

用 JavaScript 语法创建的对象叫做 JavaScript 对象, JavaScript 对象只能调用 JavaScript 对象的 API。

用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。

JQuery 对象与 JavaScript 对象是可以互相转化的，一般地，由于 Jquery 用起来更加方便，我们都是将 JavaScript 对象转化成 Jquery 对象

获取 jQuery

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

image.png

jQuery 的不同版本中，2.xx 不再支持 IE6/7/8 浏览器。现阶段 IE6/7/8 已经是淘汰的，非主流。可以不用考虑兼容问题。

对于每一个同一版本号的 jQuery，其库又分为两个。一个是未压缩版，可查看源码，开发时使用；一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。

例子：浏览器完全装载 html 页面 DOM 后,显示一个提示信息框

编写 jQuery 的工具很多，能编写 HTML 的工具都支持 jQuery. 例如记事本，EditPlus, webStorm, Visual Studio Code , HBuilder , HBuilderX , IDEA.

单独学习 jQuery 库使用，可以轻量的开发工具，例如 EditPlus , HBuilder,HbuilderX

编写项目可以使用集成开发工具，例如在 IDEA， Eclipse , MyEclipse ,WebStorm 等

第一个例子完成：浏览器完全装载 html 页面 DOM 后,显示一个提示信息框

实现步骤：

使用 HBuilder 或 HbuilderX, idea 都可以，以 HbuilderX 为工具，创建一个项目（名称：jquery-course），给项目选择一个文件存放目录。

image.png

在项目中再创建一个目录
右键项目名称—新建—目录，常用名称为 js

image.png

3.拷贝下载的 jQuery.js 文件到目录

image.png

使用 jQuery，首先要将 jQuery 库引入。使用如下语句：

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>

5.$(document)，将 DOM 对象 document 转换为 jQuery 对象。$(document).ready()函数是当DOM 对象加载完毕后，马上执行的函数。

$(document).ready()与$()、jQuery()、window.jQuery()是等价的，所以$(document).ready()可以写成 $(function() { alert(“Hello jQuery”) } );

完整代码

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个例子</title>
        <!-- 指定jquery的库文件位置，使用过相对路径，当前项目的js目录下的指定文件 -->
        <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            /*
                1.$(document) , $是jQuery中的函数名称，document是函数的参数。
                作用是 document对象贬称 jQuery函数库可以使用的对象。
                2.ready：是jQuery中的函数，是准备的意思，当前页面的dom对象加载成功后会执行ready函数的内容。
                ready 相当于js中的onLoad事件（页面加载之后执行的）
                3. function()自定义的表示onLoad后要执行的功能。
            */
           
           //标准写法
            $(document).ready(function(){
                //自定义的功能代码
                alert("hello jquery")
            })
            
            /*
            简写方式 $( function(){
                //代码内容给
            } )
            */
            $(function(){
                //代码内容
                alert("你好jquery，简便写法")
                }
            )
            
        </script>
    </head>
    <body>
    </body>
</html>

DOM 对象和 jQuery 对象

DOM 对象是用 JavaScript 语法创建的对象，也看做是 js 对象。

DOM 对象转换 jQuery 对象：

使用$(DOM 对象)方式，可以 DOM 对象转换为 jQuery 对象，转换为 jQuery 对象才可以使用 jQuery 中的提供的方法，操作 DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。

例：
新建 html 页面文件 domTojQuery.html

1.页面加入按钮 button

image.png

2.转换 DOM 对象

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dom对象转为jQuery对象</title>
        <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            function btnClick(){
                //获取dom对象
                var obj = document.getElementById("btn");
                //使用dom的value属性，获取值
                alert("使用dom对象的属性 = " + obj.value)
                
                //把dom对象转为jQuery，使用jQuery库中的函数
                var $jobj = $(obj);
                //调用jquery中的函数，获取value的值
                alert( $jobj.val())
            }
        </script>
    </head>
    <body>
        <input type="button" id="btn" value="我是按钮" onclick="btnClick()" />
    </body>
</html>

jQuery 对象转为 DOM 对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]

例：新建 html 文件 jQueryToDom.html
1.页面添加 text ，button

image.png

jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM 对象

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jquery对象转换为dom对象</title>
        <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            function btnClick(){
                //使用jquery的语法，获取页面中的dom对象
                //var obj = $("#txt").[0];//从数组中获取下标是0的dom对象
                var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象
                
                var num = obj.value;
                obj.value = num * num;
                
                alert(obj.value)
            }
        </script>
    </head>
    <body>
        <div>
            <input type="button" value="计算平方" onclick="btnClick()" /> <br />
            <input type="text" id="txt" value="整数" />
        </div>
    </body>
</html>

选择器

选择器: 就是定位条件；通知 jquery 函数定位满足条件的 DOM 对象

基本选择器

根据 ID，class 属性，标签类型名定位 HTML 元素，转为 jQuery 对象

id 选择器:
语法：$(“#id”)

class 选择器:
语法：$(“.class 名称”)

标签选择器:
语法：$(“标签名”)

例：新建 selector.html
1.在页面 head 部分加入 css

image.png

2.加入 jQuery 引用

image.png

3.body 部分定义 div

image.png

4.创建 js 函数

image.png

所有选择器:
语法：$(“*”)
选取页面中所有 DOM 对象。

组合选择器:
组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等。
语法：$(“id,class,标签名”)

例：
1.上面的 selector.html 页面中加入按钮

image.png

2.增加 js 函数

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>基本选择器</title>
        <style type="text/css">
            div{
                background: gray;
                width: 200px;
                height: 100px;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            
            function fun1(){
                //id选择器
                var obj = $("#one");
                //使用jquery中改变样式的函数
                obj.css("background","red");
            }
            
            function fun2(){
                //使用样式选择器
                var obj = $(".two");
                obj.css("background","yellow");
            }
            
            function fun3(){
                //标签选择器
                var obj = $("div");//数组有3个对象
                //jquery的操作都是操作数组中的全部成员
                //所以是给所有的div都设置了背景色
                obj.css("background","blue");
            }
            
            function fun4(){
                //所有选择器
                var obj = $("*");
                obj.css("background","green")
            }
            
            function fun5(){
                //组合选择器
                var obj = $("#one,span");
                obj.css("background","orange")
            }
            
        </script>
    </head>
    <body>
        <div id="one"> 我是one的div </div> <br />
        <div class="two"> 我是样式two的div </div> <br>
        <div> 我是没有id，没有class的div </div> <br>
        <span> 我是span便签 </span> <br>
        <input type="button" value="获取id是one的dom对象" onclick="fun1()"  /> <br>
        <input type="button" value="使用class样式获取dom对象" onclick="fun2()"  /> <br>
        <input type="button" value="使用标签选择器" onclick="fun3()"  /> <br>
        <input type="button" value="所有选择器" onclick="fun4()"  /> <br>
        <input type="button" value="组合选择器" onclick="fun5()"  /> <br>
    </body>
</html>

表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">

$(":tr"): 不能用，tr 不是 input 标签

语法： $(":type 属性值")
例如：

$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮

例：
新建 form.html

页面定义元素：

image.png

定义 js 函数：

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            function fun1(){
                //使用表单选择器 $(":type的值")
                var $obj = $(":text");
                //获取value属性的值 val()是jquery中的函数，读取value属性的
                alert( $obj.val() );//val函数用来获取value的值
            }
            
            function fun2(){
                //定位radio
                var obj = $(":radio");//数组，目前是两个对象 man woman
                //循环数组，数组中的成员是dom对象，可以dom的属性或者函数
                for(var i=0;i<obj.length;i++){
                    //从数组值获取成员，使用过下标的方式
                    var dom = obj[i];
                    //使用dom对象的属性，获取value的值
                    alert(dom.value);
                }
            }
            
            function fun3(){
                //定位checkbox
                var obj = $(":checkbok");//数组，有三个对象
                for(var i=0;i<obj.length;i++){
                    var dom = obj[i];
                    //alert(dom.value);
                    
                    //使用jquery的val函数，获取value的值
                    //1.需要jquery对象
                    var jObj = $(dom);//jObj 是jquery对象
                    //2.调用jquery函数
                    alert(jObj.val());
                }
            }
        </script>
    </head>
    <body>
        文本框：<input type="text" value="我是type=text" /><br>
        性别：<br>
        <input type="radio" name="sex" value="man" />男 <br>
        <input type="radio" name="sex" value="man" />女 <br>
        爱好：<br>
        <input type="checkbox" value="bike" />骑行<br>
        <input type="checkbox" value="football" />足球<br>
        <input type="checkbox" value="music" />音乐<br>
        <p> 功能按钮 </p>
        <input type="button" value="读取text值" onclick="fun1()" /><br>
        <input type="button" value="读取radio值" onclick="fun2()" /><br>
        <input type="button" value="读取checkbox" onclick="fun3()" /><br>
    </body>
</html>

过滤器

jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系

<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3

$("div") == [dom1,dom2,dom3]

过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数，如果使用，只能出现在选择器后方。

基本过滤器

1.选择第一个 first, 保留数组中第一个 DOM 对象
语法：$(“选择器:first”)

2.选择最后个 last, 保留数组中最后 DOM 对象
语法：$("选择器:last")

3.选择数组中指定对象
语法：$(“选择器:eq(数组索引)”)

4.选择数组中小于指定索引的所有 DOM 对象
语法：$(“选择器:lt(数组索引)”)

5.选择数组中大于指定索引的所有 DOM 对象
语法：$(“选择器:gt(数组索引)”)

实例操作
1.定义样式

image.png

2.页面加入 div

image.png

3.定义 js 函数

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                background: gray;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
        
            // $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), 
            // 相当于是onLoad().
            $(function() {
                //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
                 $("#btn1").click(function(){
                    //过滤器
                    var obj = $("div:first");
                    obj.css("background","red");
                }) 
                
                //绑定事件
                $("#btn2").click(function(){
                    var obj = $("div:last");
                    obj.css("background","green");
                })
                
                //绑定btn3的事件
                $("#btn3").click(function(){
                    var obj = $("div:eq(3)");
                    obj.css("background","blue");
                })
                
                $("#btn4").click(function(){
                    var obj = $("div:lt(3)");
                    obj.css("background","orange");
                })
                
                $("#btn5").click(function(){
                    var obj = $("div:gt(3)");
                    obj.css("background","yellow");
                })
                
                $("#txt").keydown(function(){
                    alert("keydown")
                })
            })
            
        </script>
    </head>
    <body>
        <input type="text" id="txt" />
        <div id="one">我是div-0</div>
        <div id="two">我是div-1</div>
        <div>我是div-2
            <div>我是div-3</div>
            <div>我是div-4</div>
        </div>
        <div>我是div-5</div>
        <br />
        <span>我是span</span>
        
        <br/>
        <input type="button" value="获取第一个div" id="btn1"/>
        <br/>
        <input type="button" value="获取最后一个div" id="btn2"/>
        <br/>
        <input type="button" value="获取下标等于3的div" id="btn3"/>
        <br/>
        <input type="button" value="获取下标小于3的div" id="btn4"/>
        <br/>
        <input type="button" value="获取下标大于3的div" id="btn5"/>
    </body>
</html>

表单对象属性过滤器

选择可用的文本框
$(“:text:enabled”)

2.选择不可用的文本框
$(“:text:disabled”)

3.复选框选中的元素
$(“:checkbox:checked”)

4.选择指定下拉列表的被选中元素
选择器>option:selected

例：
创建 filterForm.html
页面：

image.png

js 函数

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                background: gray;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
        
            // $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), 
            // 相当于是onLoad().
            $(function() {
                //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
                 $("#btn1").click(function(){
                    //获取所有可以使用的text
                    var obj  = $(":text:enabled");
                    //设置 jquery数组值所有dom对象的value值
                    obj.val("hello");
                }) 
                
                $("#btn2").click(function(){
                    //获取选中的checkbox
                    var obj  = $(":checkbox:checked");
                    for(var i=0;i<obj.length;i++){
                        //alert( obj[i].value);
                        alert(    $(obj[i]).val()  ) 
                    }
                })
                
                $("#btn3").click(function(){
                    //获取select选中的值
                    //var obj= $("select>option:selected");
                    var obj = $("#yuyan>option:selected");
                    alert(obj.val());
                })
                
                
            })
            
            
            
        </script>
    </head>
    <body>
        <input type="text"  id="txt1" value="text1" /><br/>
        <input type="text"  id="txt2" value="text2" disabled="true"/><br/>
        <input type="text"  id="txt3" value="text3" /><br/>
        <input type="text"  id="txt4" value="text4" disabled/><br/>
        <br/>
        <input type="checkbox" value="游泳" />游泳 <br/>
        <input type="checkbox" value="健身" checked />健身 <br/>
        <input type="checkbox" value="电子游戏" checked />电子游戏 <br/>
        <br/>
        <select id="yuyan">
            <option value="java">java语言</option>
            <option value="go" selected>go语言</option>
            <option value="python">python语言</option>
        </select>
    
        <br/>
        <input type="button" value="设置可以的text的value是hello" id="btn1"/>
        <br/>
        <button id="btn2">显示选中的复选框的值</button>
        <br/>
        <button id="btn3">显示选中下拉列表框的值</button>
    </body>
</html>

函数

第一组

val
操作数组中 DOM 对象的 value 属性.
$(选择器).val()：
无参数调用形式，读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值)：
有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值

2.text
操作数组中所有 DOM 对象的【文字显示内容属性】
$(选择器).text():
无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回
$(选择器).text(值):
有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值

3.attr
对 val, text 之外的其他属性操作
$(选择器).attr(“属性名”):
获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”):
对数组中所有 DOM 对象的属性设为新值

例：
创建 fun1.html
样式：

image.png

页面：

image.png

js 函数

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                background: yellow;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            //在dom对象创建好后,绑定事件
            $(function(){
                $("#btn1").click(function(){
                    //val() 获取dom数组中第一个对象的value属性值
                    var text = $(":text").val();
                    alert(text)
                })
                
                $("#btn2").click(function(){
                    //设置所有的text的value为新值
                    $(":text").val("三国演义");
                })
                
                $("#btn3").click(function(){
                    //获取div ,text()无参数,获取dom对象的文本值,连接成一个字符串
                    alert($("div").text());
                })
                
                $("#btn4").click(function(){
                    //设置div的文本值
                    $("div").text("新的div文本内容");
                })
                
                $("#btn5").click(function(){
                    //读取指定属性的值
                    alert($("img").attr("src"));
                })
                
                $("#btn6").click(function(){
                    //设置指定属性的,指定值
                    $("img").attr("src","img/ex2.jpg");
                    //val(), text();
                })
            })
            
            
            
        </script>
    </head>
    <body>
        <input type="text" value="刘备" /><br/>
        <input type="text" value="关羽" /><br/>
        <input type="text" value="张飞" /><br/>
        <br/>
        <div>1.我第一个div</div>
        <div>2.我第二个div</div>
        <div>3.我第三个div</div>
        <br/>
        <img src="img/ex1.jpg" id="image1" />
        <br/>
        
        <input type="button" value="获取第一文本框的值" id="btn1"/>
        <br/>
        <br/>
        <input type="button" value="设置所有文本框的value值" id="btn2"/>
        <br/>
        <br/>
        <input type="button" value="获取所有div的文本值" id="btn3"/>
        <br/>
        <br/>
        <input type="button" value="设置div的文本值" id="btn4"/>
        <br/>
        <br/>
        <input type="button" value="读取src属性的值" id="btn5"/>
        <br/>
        <br/>
        <input type="button" value="设置指定的属性值" id="btn6"/>
    </body>
</html>

第二组

1.hide
$(选择器).hide():将数组中所有 DOM 对象隐藏起来

2.show
$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来

3.remove
$(选择器).remove(): 将数组中所有 DOM 对象及其子对象一并删除

4.empty
$(选择器).empty()：将数组中所有 DOM 对象的子对象删除

5.append
为数组中所有 DOM 对象添加子对象
$(选择器).append("<div>我动态添加的 div</div>")

6.html
设置或返回被选元素的内容（innerHTML）。
$(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。
$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。

7.each
each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。
语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
index: 数组的下标
element: 数组的对象

例：
新建 fun2.html
样式：

image.png

页面：

image.png

js 函数

image.png

each 用法

页面上加入 text

image.png

加入三个按钮，创建点击事件

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                background: yellow;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            //在dom对象创建好后,绑定事件
            $(function(){
                $("#btn1").click(function(){
                    //使用remove:删除父和子所有的dom对象
                    $("select").remove();
                    
                })
                
                $("#btn2").click(function(){
                    //使用empty 删除子dom对象
                    $("select").empty();
                })
                
                $("#btn3").click(function(){
                    //使用append,增加dom对象
                    //$("#fatcher").append("<input type='button' value='我是增加的按钮' />")
                    
                    //增加一个table
                    $("#fatcher").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>");
                })
                
                $("#btn4").click(function(){
                    //使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)
                    //alert($("span").text()); // 我是mysql数据库
                    alert( $("span").html() ); //我是mysql <b>数据库</b>
                    
                })
                
                $("#btn5").click(function(){
                    //使用 html(有参数):设置dom对象的文本值
                    $("span").html("我是新的<b>数据</b>");
                    
                })
                
                $("#btn6").click(function(){
                    //循环普通数组,非dom数组
                    var  arr = [ 11, 12, 13];
                    $.each(arr, function(i,n){
                        alert("循环变量："+i + "=====数组成员:"+ n);
                    })
                })
                
                $("#btn7").click(function(){
                    //循环json
                    var json={"name":"张三","age":20};
                    
                    //var  obj = eval("{'name':'张三','age':20}");
                    
                    
                    $.each(json,function(i,n){
                        alert("i是key="+i+",n是值="+n);
                    })
                    
                })
                
                $("#btn8").click(function(){
                    //循环dom数组
                    var domArray = $(":text");//dom数组
                        
                    $.each( domArray, function(i,n){
                        // n 是数组中的dom对象
                        alert("i="+i+"  , n="+n.value);
                    })
                })
                
                $("#btn9").click(function(){
                    //循环jquery对象, jquery对象就是dom数组
                    $(":text").each(function(i,n){
                        alert("i="+i+"，n="+ n.value);
                    })
                    
                })
            })
            
            
            
        </script>
    </head>
    <body>
        <input type="text" value="刘备" />
        <input type="text" value="关羽" />
        <input type="text" value="张飞" />
        
        <br/>
        <select>
            <option value="老虎">老虎</option>
            <option value="狮子">狮子</option>
            <option value="豹子">豹子</option>
        </select>
        <br/>
        <br/>
        <select>
            <option value="亚洲">亚洲</option>
            <option value="欧洲">欧洲</option>
            <option value="美洲">美洲</option>
        </select>
        <br/>
        <br/>
        <div id="fatcher">我是第一个div</div>
        <br/
        <br/>
        <span>我是mysql <b>数据库</b></span>
        <br/>
        <span>我是jdbc</span>
        <br/>
        <br/>
        
        <input type="button" value="使用remove删除父和子对象" id="btn1"/>
        <br/>
        <br/>
        <input type="button" value="使用empty删子对象" id="btn2"/>
        <br/>
        <br/>
        <input type="button" value="使用append,增加dom对象" id="btn3"/>
        <br/>
        <br/>
        <input type="button" value="获取第一个dom的文本值" id="btn4"/>
        <br/>
        <br/>
        <input type="button" value="设置span的所以dom的文本值" id="btn5"/>
        <br/>
        <br/>
        <input type="button" value="循环普通数组" id="btn6"/>
        <br/>
        <br/>
        <input type="button" value="循环json" id="btn7"/>
        <br/>
        <br/>
        <input type="button" value="循环dom数组" id="btn8"/>
        <br/>
        <br/>
        <input type="button" value="循环jquery对象" id="btn9"/>
    </body>
</html>

事件

为页面元素绑定事件，即对于指定页面元素，当某个事件发生后，执行指定动作

定义元素监听事件

语法：$(选择器).监听事件名称(处理函数);

说明：监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click

例如：

为页面中所有的 button 绑定 onclick,并关联处理函数 fun1
$("button").click(fun1)

为页面中所有的 tr 标签绑定 onmouseover，并关联处理函数 fun2
$("tr").mouseover(fun2)

on() 绑定事件

on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法

语法：$(选择器).on(event,,data,function)
event：事件一个或者多个，多个之间空格分开
data：可选。规定传递到函数的额外数据，json 格式
function: 可选。规定当事件发生时运行的函数。

例：
新建 event.html

样式：

image.png

页面：

image.png

js 函数

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                background: yellow;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            //在dom对象创建好后,绑定事件
            $(function(){
                $("#btn1").click(function(){
                    //使用append增加dom对象
                    $("#mydiv").append("<input id='newBtn' type='button' value='我是新加入的按钮'/>");
                    //使用on给按钮绑定事件
                    $("#newBtn").on("click",function(){
                        alert("新建的按钮被单击了");
                    })
                })
                
                
            })
            
            
            
        </script>
    </head>
    <body>
        
        <div id="mydiv">
            我是一个div ，需要增加一个button
        </div>
        
        <input type="button" value="创建一个button,绑定一个click" id="btn1"/>
        <br/>
        
    </body>
</html>

AJAX

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新到 DOM 对象。

$.ajax()

$.ajax()是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。

语法：
$.ajax( { name:value, name:value, ... } )

说明：参数是 json 的数据，包含请求方式，数据，回调方法等

async ：布尔值，表示请求是否异步处理。默认是 true

contentType ：发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。

data：规定要发送到服务器的数据，可以是：string，数组，多数是 json

dataType：期望从服务器响应的数据类型。jQuery 从 xml, json, text,, html 这些中测试最可能的类型
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"json" - 以 JSON 运行响应，并以对象返回

error(xhr,status,error)：如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名

success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参名

type：规定请求的类型（GET 或 POST 等），默认是 GET， get，post 不用区分大小写

url：规定发送请求的 URL。

以上是常用的参数。 error() , success()中的 xhr 是 XMLHttpRequest 对象。

$.get()

$.get() 方法使用 HTTP GET 请求从服务器加载数据。
语法：$.get(url,data,function(data,status,xhr),dataType)

url 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。

参数说明：
data - 包含来自请求的结果数据

status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）

xhr - 包含 XMLHttpRequest 对象

dataType 可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的类型：
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"json" - 以 JSON 运行响应，并以对象返回

$.post()

$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法：$.post(URL,data,function(data,status,xhr),dataType)
参数同$get()

使用 AJAX 级联查询

效果图：

image.png

数据库：springdb
province ：省份表

image.png

city : 城市表

image.png

1.IDEA 创建 web 项目（ajax-jquery）

image.png

2.配置 web 运行环境 tomcat

image.png

发布项目：

image.png

3.module 添加 servlet 的 jar 包

image.png

之后选中 tomcat

image.png

5.添加 mysql 驱动和 jackson 的 jar
在 WEB-INF 目录下创建 lib 目录，拷贝 jar 文件

image.png

其他处理步骤同添加 mysql 驱动。

6.创建目录 js，拷贝 jQuery.js 文件

image.png

7.创建实体类

image.png

8.创建 QueryDao 查询数据

1）定义成员变量

image.png

2）关闭资源的方法

image.png

3）查询所有省份名称

image.png

4）查询省份的城市列表

image.png

9.创建查询省份的 Servlet – QueryProvice

image.png

10.创建查询城市的 Servlet --- QueryCity

image.png

11.web.xml 注册 Servlet

image.png

12.修改 index.jsp

页面：

image.png

js 函数：

image.png

总结

jQuery是js库，

库：相当于java的工具类，库是存放东西的， jQuery是存放js代码的地方，放的用js代码写的function

dom对象和jquery对象

dom对象，使用javascript的语法创建的对象叫做dom对象，也就是js对象。

    var obj=  document.getElementById("txt1");  obj是dom对象，也叫做js对象
    obj.value;

jquery对象：使用jquery语法表示对象叫做jquery对象，
注意：jquery表示的对象都是数组。

例如 var jobj = $("#txt1") , jobj就是使用jquery语法表示的对象。也就是jquery对象。它是一个数组。
现在数组中就一个值。

dom对象可以和jquery对象相互的转换。

dom对象可以转为jquery ，
语法： $(dom对象)
jquery对象也可以转为dom对象，语法：
从数组中获取第一个对象，第一个对象就是dom对象，使用[0]或者get{0).

为什么要进行dom和jquery的转换：
目的是要使用对象的方法，或者方法。

当你的dom对象时，可以使用dom对象的属性或者方法，如果你要想使用jquery提供的函数，必须是jquery对象才可以。

3.选择器：就是一个字符串，用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom

常用的选择器：
1） id选择器，语法： $("#dom对象的id值")
通过dom对象的id定位dom对象的。通过id找对象， id在当前页面中是唯一值。

2） class选择器，语法： $(".class样式名)
class表示css中的样式，使用样式的名称定位dom对象的。

3）标签选择器，语法： $("标签名称")
使用标签名称定位dom对象的

表单选择器，
使用<input>标签的type属性值，定位dom对象的方式。
语法：$(":type属性值")
例如：$(":text") ,选择的是所有的单行文本框，
$(":button") ,选择的是所有的按钮。

5.过滤器：在定位了dom对象后，根据一些条件筛选dom对象。
过滤器有是一个字符串，用来筛选dom对象的。
过滤器不能单独使用，必须和选择器一起使用。

1）$("选择器:first") : 第一个dom对象
2）$("选择器:last"): 数组中的最后一个dom对象
3）$("选择器:eq(数组的下标)") ：获取指定下标的dom对象
4）$("选择器:lt(下标)") ：获取小于下标的所有dom对象
5）$("选择器:gt(下标)")：获取大于下标的所有dom对象

6.表单属性过滤器：根据表单中dom对象的状态情况，定位dom对象的。
启用状态， enabled ,
不可用状态 disabled
选择状态， checked ，例如radio， checkbox

7.each语法
1). 可以对数组， json ，dom数组循环处理。数组， json中的每个成员都会调用一次处理函数。

 var arr = { 1, 2, 3} //数组
  var json = {"name":"lisi","age":20 } 
 var obj = $(":text");

语法： $.each( 循环的内容，处理函数 )

表示使用jquery的each，循环数组，每个数组成员，都会执行后面的“处理函数”一次。

$: 相当于是java的一个类名
each:就是类中的静态方法。
静态方法调用，可以使用类名.方法名称

处理函数:function(index, element) :
index, element都是自定义的形参，名称自定义。
index：循环的索引
element：数组中的成员

js循环数组：

      for(var i=0;i<arr.length;i++){
         var item = arr[i]; //数组成员
            //操作数组成员
            shuchu( i , item);
      }

     function shuchu(index, emlemnt){
        输出index ，element
      }

2).循环jquery对象， jquery对象就是dom数组

语法： jquery对象.each( function(index,element) {} )

jquery中给dom对象绑定事件
1）$(选择器).事件名称( 事件的处理函数)
$(选择器)：定位dom对象， dom对象可以有多个，这些dom对象都绑定事件了

事件名称：就是js中事件去掉on的部分，例如 js中的单击事件 onclick(),jquery中的事件名称，就是click，都是小写的。

事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。

例如给id是btn的按钮绑定单击事件

        $("#btn").click(funtion(){
          alert("btn按钮单击了")
        })

on 事件绑定
$(选择器).on( 事件名称 , 事件的处理函数)

事件名称：就是js事件中去掉on的部分，例如js中onclick ,这里就是click

事件的处理函数： function 定义。

例如，

 <input type="button" id="btn">
       $("#btn").on("click", function() { 处理按钮单击 } )

使用jquery的函数，实现ajax请求的处理。
没有jquery之前，使用XMLHttpRequest做ajax ，有4个步骤。 jquery简化了ajax请求的处理。

使用三个函数可以实现ajax请求的处理。

1）$.ajax() : jquery中实现ajax的核心函数。
2）$.post() : 使用post方式做ajax请求。
3）$.get(): 使用get方式发送ajax请求。

$.post()和$.get()他们在内部都是调用的$.ajax()

介绍 $.ajax函数的使用，
函数的参数表示请求的url，请求的方式，参数值等信息。

$.ajax()参数是一个json的结构。

例如： $.ajax( {名称:值，名称1:值1..... } )

例如：

 $.ajax(  {  async:true ,
                  contentType:"application/json" , 
                  data: {name:"lisi",age:20 },
                  dataType:"json",

                  error:function(){
                              请求出现错误时，执行的函数
                                           },

                  success:function( data ) {
                                // data 就是responseText, 是jquery处理后的数据。
                                     },

          url:"bmiAjax",
          type:"get"
        }  )

json结构的参数说明：

1)async:是一个boolean类型的值，默认是true ，表示异步请求的。可以不写async这个配置项，xmlHttp.open(get,url,true),第三个参数一样的意思。

2)contentType: 一个字符串，表示从浏览器发送服务器的参数的类型。可以不写。
例如你想表示请求的参数是json格式的，可以写application/json

3)data: 可以是字符串，数组，json，表示请求的参数和参数值。常用的是json格式的数据

4)dataType: 表示期望从服务器端返回的数据格式，可选的有： xml ， html ，text ，json

当我们使用$.ajax()发送请求时，会把dataType的值发送给服务器，那我们的servlet能够读取到dataType的值，就知道你的浏览器需要的是 json或者xml的数据，那么服务器就可以返回你需要的数据格式。

5)error: 一个function ，表示当请求发生错误时，执行的函数。

error:function() { 发生错误时执行 }

6)sucess:一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数之前使用XMLHttpRequest对象，当readyState==4 && status==200的时候。

7)url:请求的地址

8)type:请求方式，get或者post，不用区分大小写。默认是get方式。

主要使用的是 url , data ,dataType, success .

思维导图.png

jQuery学习:

开篇基础

为什么[why]使用 jQuery

DOM 对象

JavaScript 对象和 jQuery 对象

获取 jQuery

例子：浏览器完全装载 html 页面 DOM 后,显示一个提示信息框

DOM 对象和 jQuery 对象

DOM 对象转换 jQuery 对象：

jQuery 对象转为 DOM 对象

选择器

基本选择器

表单选择器

过滤器

基本过滤器

表单对象属性过滤器

函数

第一组

第二组

事件

定义元素监听事件

on() 绑定事件

AJAX

$.ajax()

$.get()

$.post()

使用 AJAX 级联查询

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读