JQuery详解(讲解+举例)--(后端开发适用)

JQuery

JQuery

  • JQuery
    • 1.JQuery内容
    • 2. JQuery对象
      • 2.1.Jquery的下载与安装
        • 2.1.1.下载
        • 2.1.3.优点
        • 2.1.4.安装
      • 2.2.Jquery核心
      • 2.3.Dom对象与Jquery包装集对象
        • 2.3.1 javascript中获取Dom对象,Dom对象只有有限的属性和方法:
        • 2.3.2.Jqueryt包装集对象
        • 2.3.3.Dom对象转Jquery对象
        • 2.3.4.Jqueryi对象转Dom对象
    • 3.Jqueryi选择器
      • 3.1基础选择器
      • 3.2层次选择器
      • 3.3表单选择器
    • 4.Jquery Dom操作
      • 4.1.操作元素的属性
        • 4.1.1.获取属性
      • 4.2操作元素的样式
      • 4.3操作元素的内容
      • 4.4创建元素
      • 4.5 添加元素
      • 4.6删除元素
      • 4.7遍历元素
    • 5.Jquery事件
      • 5.1 ready()加载事件
      • 5.2 绑定事件
        • 5.2.1简单的bind()事件
        • 5.2.2绑定多个事件
    • 6.Jquery Ajax
      • 6.1 $.Ajax
      • 6.2 . g e t 和 .get和 .get.post
      • 6.3 $.getJSON

1.JQuery内容

JQuery详解(讲解+举例)--(后端开发适用)_第1张图片

2. JQuery对象

​ jQuery是一套兼容多浏览器的javascript脚本库。核心理念是写得更少,做得更多,使用jQuery将极大的提高编写javascript代码的效率,帮助开发者节省了大量的工作,让写出来的代码更加优雅,更加健壮,“如虎添翼”。同时网络上丰富的jQuery插件也让我们的工作变成了"有了jQuery,一切so easy。"因为我们已经站在巨人的肩膀上了。

​ jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQueryi已经成为最流行的javascript框架,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。。

2.1.Jquery的下载与安装

2.1.1.下载

http://jquery.com下载

2.1.3.优点

(1)提供了强大的功能函数
(2)解决浏览器兼容性问题
(3)实现丰富的UI和插件
(4)纠正错误的脚本知识

年球非带事求

2.1.4.安装

在页面引入即可

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

2.2.Jquery核心

$符号在jQuery中代表对jQuery对象的引用。"jQuery"是核心对象。通过该对象可以获取jQuery对像,调用jQuery提供的方法等。只有jQuery对像才能调用jQuery提供的方法。

$ <==> jQuery

2.3.Dom对象与Jquery包装集对象

明确Dom对象和jQuery包装集的概念,将极大的加快我们的学习速度。原始的Dom对象只有DOM接口提供的方法和属性,通过js代码获取的对象都是do对象;而通过jQuery获取的对象是jQuery包装集对象,简称jQuery对像,只有jQuery对象才能使用jQuery提供的方法。

2.3.1 javascript中获取Dom对象,Dom对象只有有限的属性和方法:

	/*Dom对象*/
  var divDom = document.getElementById("mydiv");
  console.log(divDom);
  var divsDom = document.getElementsByTagName("div")
  console.log(divsDom)
  //js获取不存在的元素
  var spansDom = document.getElementsByTagName("span");
  console.log(spansDom);
  var spanDom = document.getElementById("myspan");
  console.log(spanDom);

JQuery详解(讲解+举例)--(后端开发适用)_第2张图片

2.3.2.Jqueryt包装集对象

可以说是Dom对象的扩充在jQuery的世界中将所有的对象,无论是一个还是一组,都封装成一个jQuery包装集,比如获取包含一个元素的jQuery包装集:

/*Jquery 对象 */
//通过id选择器获取元素  $("#id属性值")
var divJquery = $("#mydiv");
console.log(divJquery);
/*Jquery获取不存在元素*/
var jquerySpan = $("#myspan");
console.log(jquerySpan);

在这里插入图片描述

2.3.3.Dom对象转Jquery对象

Dom对象转为jQueryi对象,只需要利用$0方法进行包装即可

/*Dom对象 转Jquery对象*/
/*Dom对象转为jQueryi对象,只需要利用$()方法进行包装即可*/
var divDomToJquery = $(divDom);
console.log(divDomToJquery);

2.3.4.Jqueryi对象转Dom对象

jQuery对象转Dom对象,只需要取数组中的元素即可

/*Jquery对象 转Dom对象*/
var jqueryDiv = jQuery('#mydiv');
var JqueryToDom = jqueryDiv[0];
console.log(JqueryToDom);

3.Jqueryi选择器

​ 和使用js操作Dom一样,获取文档中的节点对象是很频繁的一个操作,在jQuery中提供了简便的方式供我们查找定位元素,称为jQueryi选择器,选择器可以说是最考验一个人jQuery功力的地方,通 俗的讲,Selector选择器就是”一个表示特殊语意的字符串"。只要把选择器字符串传入上面的方法中就能够选择不同的D0对象并且以jQuery包装集的形式返回。
​ jQuery选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的,具体分类如下。基础选择器掌握即可,其他用到再查阅。

3.1基础选择器

JQuery详解(讲解+举例)--(后端开发适用)_第3张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-基础选择器.htmltitle>
head>
<body>
    <div id="mydiv1" class="blue">元素选择器div>
    <div id="mydiv2">id选择器1<span>span选中的内容span>div>
    <span class="blue">样式选择器span>
body>

<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
<script type="text/javascript">
    //id选择器         #id属性值
    var mydiv = $("#mydiv1");
    console.log(mydiv);
    //类选择器   
    var clas = $(".blue");
    console.log(clas);
    //元素选择器
    var element = $("span");
    console.log(element);
    //通用选择器
    var all = $("*");
    console.log(all);
    //组合选择器
    var group = $("#mydiv1",".blue","span");
    console.log(group);

script>
html>

在这里插入图片描述

3.2层次选择器

JQuery详解(讲解+举例)--(后端开发适用)_第4张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
<div id="parent">层次择器
    <div id="child" c1ass="testColor">父选择器
        <div class="gray">子选择器div>
        <img src="http://www.baidu.com/img/bd_logo1.png"
             width="270" height="129"/>
        <img src="http://www.baidu.com/img/bd_logo1.png"
             width="270" height="129"/>
    div>
    <div>
        选择器2<div>选择器2中的divdiv>
    div>
div>
body>
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
<script>
    //后代选择器
    var hd = $("#parent div");
    console.log(hd);
    //子代选择器
    var zd = $("#parent>div");
    console.log(zd);
    //相邻选择器
    var xl = $("#child+div");
    console.log(xl);
    //同辈选择器
    var imgs = $(".gray ~ img");
    console.log(imgs);
script>
html>

3.3表单选择器

JQuery详解(讲解+举例)--(后端开发适用)_第5张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单选择器title>
head>
<body>
<form id='myform' name="myform" method="post">
    <input type="hidden" name="uno" value="9999" disabled="disabled"/>
    姓名:<br/>
    <input type="password" id="upwd" name="upwd" value="123456"/><br/>
    年龄:<input type="radio" name="uage" value="o" checked-="checked"/>小屁孩
    <input type="radio" name="uage" value="1"/>你懂得<br/>
    爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
    <input type="checkbox'" name="ufav" value="爬床"/>爬床
    <input type="checkbox'" name="ufav" value="代码"/>代码<br/>
    来自:<select id="ufrom" name="ufrom'">
    <option values="-l" selected="selected">请选择option>
    <option value-="0">北京option>
    <option value="1">上海option>
select><br/>
    <textarea rows="10" cols="30" name="uintro">textarea><br/>
    头像:<input type="file"/><br/>
    <input type="image" src="http://www.baidu.com/img/bd_logo1.png"
           width="20" height="20"/>
    <button type="submit" onclick="return checkForm();">button>
    <button type="reset">重置button>
form>
body>

<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
<script type="text/javascript">
    //表单选择器
    var inputs = $(":input");
    console.log(inputs);
    //元素选择器
    var inputs2 = $("input");
    console.log(inputs2);

script>
html>

4.Jquery Dom操作

​ jQueryt也提供了对HTML节点的操作,而且在原生js的基础之上进行了优化,使用起来更加方便。常用的从几个方面来操作,查找元素(选择器已经实现);创建节点对象;访问和设置节点对象的值,以及属性;添加节点:删除节点:删除、添加、修改、设定节点的CSS样式等。注意:以下的操作方式只适用于jQuery对象。

4.1.操作元素的属性

4.1.1.获取属性

JQuery详解(讲解+举例)--(后端开发适用)_第6张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作元素的属性title>
head>
    <body>

        <input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc"/>aa
        <input type="checkbox" name="ch" id="bb"/>bb
    body>
    <script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
    <script type="text/javascript">
        /*获取属性*/
        //固有属性
        var name = $("#aa").attr("name");
        console.log(name);
        var name2 = $("#aa").prop("name");
        console.log(name2);
        //返回值是boolean的属性(元素设置了属性的)
        var ck1 = $("#aa").attr("checked"); //checked  //返回设置的值
        console.log(ck1);
        var ck2 = $("#aa").prop("checked"); //true     //返回boolean值
        console.log(ck2);
        //返回值是boolean的属性(元素没有设置了属性的)
        var ck3 = $("#bb").attr("checked"); //undefined
        console.log(ck3);
        var ck4 = $("#bb").prop("checked"); //false
        console.log(ck4);
        //自定义属性
        var abc1 = $("#aa").attr("abc");   //aabbcc
        var abc2 = $("#aa").prop("abc");   //undefined
        console.log(abc1);
        console.log(abc2);
        /*设置属性*/
        //固有属性
        $("#aa").attr("value","1");
        $("#bb").attr("value","2");

        //返回值是boolean属性
        $("#bb").attr("checked","checked");
        $("#bb").prop("checked",false);

        //自定义属性
        $("#aa").attr("username","admin");
        $("#aa").prop("age","18");
        /*移除属性*/
        $("#aa").removeAttr("checked");
    script>
html>

4.2操作元素的样式

JQuery详解(讲解+举例)--(后端开发适用)_第7张图片

JQuery详解(讲解+举例)--(后端开发适用)_第8张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作元素的样式title>
    <style type="text/css">
        div {
            padding: 8px;
            width: 180px;
        }

        .blue {
            background: blue;
        }

        .larger {
            font-size: 30px;
        }
        .pink{
            background-color: pink;
        }
        .green {
            background: green;
        }

    style>
head>
<body>

<h3>css()方法设置元素样式h3>
<div id="conBlue" class="blue larger">天蓝色div>
<div id="conRed">大红色div>
<div id="remove" class="blue larger">天蓝色div>
body>
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
<script type="text/javascript">
    //attr("class")     获取元素样式名
    var cls = $("#conBlue").attr("class");
    console.log(cls);

    //attr("class","样式名")   设置元素的样式
    $("#conBlue").attr("class","green")

    //addClass("样式名")     添加样式
    $("#conBlue").addClass("larger");
    $("#conBlue").addClass("pink");

    //css()     添加具体的样式(添加行内样式,优先级高)
    $("#conRed").css("font-size","40px");
    $("#conRed").css({"font-family":"楷体","color":"blue"});
    // removeClass("样式名")      移除样式
    $("#remove").removeClass("larger");
script>
html>

4.3操作元素的内容

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作元素的内容title>
head>
<body>
<h3><span>html()和text()方法设置元素内容span>h3>
<div id="html">div>
<div id="html2">div>
<div id="text">bjdiv>
<div id="text2"><h2>bjbjh2>div>
<input id="op" type="text" name="uname" value="oop"/>
body>

<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
<script type="text/javascript">
    //html("内容")      设置元素的内容,包含html标签(非表单元素)
    $("#html").html("

上海

"
); $("#html2").html("上海"); //html() 获取元素的内容,包含html标签 (非表单元素) var html = $("#html").html(); var html2 = $("#html2").html(); console.log(html); console.log(html2); //text() 获取元素的纯文本内容,不识别HTML标签(非表单元素) $("#text").text("北京"); $("#text2").text("

北京

"
); //text("内容") 设置元素的纯文本内容,不识别HTML标签(非表单元素) var text = $("#text").text(); var text2 = $("#text2").text(); console.log(text); console.log(text2); // val() 获取元素的值(表单元素) var op = $("#op").val(); console.log(op); //val("值") 设置元素的值(表单元素) $("#op").val("今天天气不错")
script> html>

4.4创建元素

JQuery详解(讲解+举例)--(后端开发适用)_第9张图片

4.5 添加元素

JQuery详解(讲解+举例)--(后端开发适用)_第10张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style type="text/css">
        div {
            margin: 10px 0px;
        }

        span {
            color: white;
            padding: 8px;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }

        .green {
            background-color: green;
        }
        .pink {
            background-color: pink;
        }
    style>
head>
<body>
<h3>prepend()方法前追加内容h3>
<h3>prependTo()方法前追加内容h3>
<h3>append()方法后追加内容h3>
<h3>appendTo()方法后追加内容h3>
<span class="red">男神span>
<span class="blue">偶像span>
<div class="green">
    <span>小鲜肉span>
div>
body>

<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
<script type="text/javascript">
    //创建元素
    var p = "

这是一个p标签

"
; console.log(p); console.log($("p")); /*添加元素*/ //前追加 //1.创建元素 var span = "小奶狗" //2.得到制定元素,并在元素内部的最前面添加内容 $(".green").prepend(span); var span2 = "小狼狗"; $(span2).prependTo(".green"); //后追加 var span3 = "小奶狗后"; $(".green").append(span3); var span4 = "小狼狗后"; $(span4).appendTo(".green"); //将以存在内容追加到指定元素中 $(".green").append($(".red")); /*同级追加*/ var sp1 = "女神"; var sp2 = "歌手"; $(".blue").before(sp1); $(".blue").after(sp2);
script> html>

4.6删除元素

JQuery详解(讲解+举例)--(后端开发适用)_第11张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style type="text/css">
        span {
            color: white;
            padding: 8px;
            margin: 5px;
            float: left;
        }

        .green {
            background-color: green;
        }

        .blue {
            background-color: blue;
        }
    style>
head>
<body>
<h3>删除元素h3>
<span class="green">jquery<a>a>span>
<span class="blue">javasespan>
<span class="green">http协议span>
<span class="blue">servletspan>
body>

<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
<script type="text/javascript">
    //删除元素
    $(".green").remove();
    //清空元素
    $(".blue").empty();
script>
html>

4.7遍历元素

each()
$(selector).each(function(index,element))::遍历元素
参数function为遍历时的回调函数,
index为遍历元素的序列号,从0开始。
element是当前的元素,此时是dom元素。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style type="text/css">
        span {
            color: white;
            padding: 8px;
            margin: 5px;
            float: left;
        }

        .green {
            background-color: green;
        }

        .blue {
            background-color: blue;
        }
    style>
head>
<body>
<h3>遍历元素h3>
<span class="green">jqueryspan>
<span class="green">javasespan>
<span class="green">http协议span>
<span class="green">servletspan>

body>

<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
<script type="text/javascript">
    //获取指定元素并遍历
    $(".green").each(function (index,element){
        console.log(index);
        console.log(element);
        console.log(this);
        console.log($(element));
    })
script>
html>

5.Jquery事件

5.1 ready()加载事件

​ ready(0类似于onLoad()事件
​ ready(0可以写多个,按顺序执行
( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 等价于 (document).ready(function(){})等价于 (document).ready(function())等价于(function(){})

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加载事件title>
    <script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
    <script>
        $(function (){
            console.log("ready加载事件");
        })
        $(document).ready(function (){
            //获取元素
            console.log($("#p1"));
        });

    script>
head>

<body>
    <p id="p1">文本p>
body>
html>

5.2 绑定事件

JQuery详解(讲解+举例)--(后端开发适用)_第12张图片

5.2.1简单的bind()事件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<!--
    绑定事件
        bind绑定事件
        为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
        语法:
          $(selector).bind(eventType [eventData],handler(eventobject));
              eventType:是一个字符串类型的事件类型,就是你所需要绑定的事件。
              [,eventData]:传递的参数,格式:{名:值,名2:值2}
              handler(eventObject):该事件触发执行的函数
          绑定单个事件
              bind绑定
                $("元素").bind("事件类型",fucntion(){
                  });
              直接绑定
                $("元素").事件名(function(){
                })
>
<h3>bind()简单的绑定事件h3>

<div id="test" style="cursor:pointer">点击查看名言div>
<input id="btntest" type="button" value="点击就不可用了"/>
    body>
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
<script>
    /*
      1.确定为那些元素绑足事件
        获取元素
      2.绑定什么事件(事件类型)
        第一个参数:事件的类型
      3.相应事件触发的,执行的操作
        第二个参数:函数
        */
    /*绑定单个事件*/
    $("#test").bind("click", function () {
        console.log("世上无难事,只怕有心人");
    });
    //原生的js绑定事件
    /*document.getElementById("test").onclick = function (){
      console.log("test");
    }*/
    //直接绑定
    $("#btntest").click(function () {
        //禁用按钮
        console.log(this);
        $(this).prop("disabled", true);
    });

5.2.2绑定多个事件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
    
<body>
<button type="button" id="btn1">按钮1button>
<button type="button" id="btn2">按钮2button>
<button type="button" id="btn3">按钮3button>
<button type="button" id="btn4">按钮4button>
body>
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
<script>
    /*绑定多个事件*/
    //1.同时为多个事件绑定同意函数
    $("#btn1").bind("click mouseout", function () {
        console.log("按钮1.。。");
    });
    //2.为元素绑定多个事件,并设置对应的函数
    $("#btn2").bind("click",function () {
        console.log("按钮2被点击");
    }).bind("mouseout",function () {
        console.log("按钮2被离开");
    });
    //3.为元素绑定多个事件,并设置对应的函数
    $("#btn3").bind({
        "click":function () {
            console.log("按钮3被点击");
        },
        "mouseout":function () {
            console.log("按钮3被离开")
        }
    });
    //4.直接绑定
    $("#btn4").click(function () {
        console.log("按钮4被点击");
    }).mouseout(function () {
        console.log("按钮4被离开")
    });
script>
html>

6.Jquery Ajax

6.1 $.Ajax

JQuery详解(讲解+举例)--(后端开发适用)_第13张图片

get请求

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
<button type="button" id="btn">查询数据button>
body>
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
<script>
  $.ajax({
    type:"get", //请求方式
    url:"data.txt", //请求数据,json对象
    data:{ //请求数据,json对象
      username:"zhangSan" //如果没有参数,则不需要设置
    },
      // 请求成功调用的函数
    success:function (data) { //data是形参名,代表的是返回的数据
      console.log(data);//字符串
      //将字符串转换成json对象
        var obj = JSON.parse(data);
        console.log(obj);
    }
  });

  //点击按钮 发送ajax请求  将数据显示到页面
  $("#btn").click(function (){
      $.ajax({
          type:"get", //请求方式
          url:"data.txt", //请求数据,json对象
          data:{  //请求数据,json对象
              //username:"zhangSan" //如果没有参数,则不需要设置
          },
          dataType:"json", //预期返回的数据类型,如果是json格式,在接收到返回值时会自动封装成json对象
          // 请求成功调用的函数
          success:function (data) { //data是形参名,代表的是返回的数据
              console.log(data);    //字符串
              //将字符串转换成json对象
              //var obj = JSON.parse(data);如果本来就是jso对象,再进行转换会失败,因为是将字符串转为json。
              //console.log(obj);
              //Dom操作
              //创建ul
              var ul = $("
    "
    ); //遍历返回的数据数组 for (let i = 0; i < data.length; i++) { //得到数组中的每一个元素 var user = data[i]; //创建li元素 var li = "
  • "+user.username+"
  • "
    ; //将li元素设置到ul元素中 ul.append(li); } //将ul设置到标签中 $("body").append(ul); } }); })
    script> html>

    6.2 . g e t 和 .get和 .get.post

    JQuery详解(讲解+举例)--(后端开发适用)_第14张图片

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    head>
    <body>
    
    body>
    <script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
    <script>
        $.get("data.json",{},function (data) {
            console.log(data);
        })
        $.post("data.json",{},function (data) {
            console.log(data);
        })
    script>
    html>
    

    6.3 $.getJSON

    JQuery详解(讲解+举例)--(后端开发适用)_第15张图片

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    head>
    <body>
    
    body>
    <script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8">script>
    <script>
      $.getJSON("data.json",{},function (d) {
        console.log(d);
      });
      $.get("test.txt",{},function (d) {
          console.log(d);
      })
      //如果返回的数据不是json格式的,则无法获取
      $.getJSON("test.txt",{},function (d) {
          console.log(d);
      });
    
    script>
    html>
    

    你可能感兴趣的:(1024程序员节,jquery,前端,java,后端)