三十五、jQuery（JavaScript 库）

最新推荐文章于 2024-05-31 10:46:10 发布

BORN（^-^）

最新推荐文章于 2024-05-31 10:46:10 发布

阅读量874

点赞数

分类专栏：前端文章标签： java jquery

本文链接：https://blog.csdn.net/weixin_53102634/article/details/115254370

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery

概述

Jquery 是一个 JavaScript 库，简化 js 的操作：DOM操作，事件的处理，AJAX（是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。）

Jquery 可以使用更少的代码，完成更多的事情。

Jquery 为何学习？因为 js 有以下缺点：

入口函数只有一个，如果出现多个，会覆盖前面
系统兼容性差，容易出错，出错或后续的代码不会执行
浏览器兼容性问题
DOM 操作复杂，实现动画步骤较为繁琐

jQuery 的使用

引包（引入jQuery文件）

<script src="jquery-1.12.4.js"></script>

入口函数

$(document).ready(function () { });

功能实现

$("#btnShowDiv").click(function () { $("div").show(1000); });

JavaScript 与 Jquery 的区别：

	JavaScript	jquery
入口函数	只能有一个，如果有多个，后面的会覆盖前面	可以有多个，并且不会发生覆盖的情况
代码容错性	代码容错性差，代码出现错误，会影响到后面代码的运行。	代码容错性好，屏蔽错误，并且不会影响后面代码的运行。
浏览器兼容性	兼容性差，比如火狐不支持innerText	对浏览器兼容性做了封装，因此不存在兼容性问题
操作复杂性	DOM操作复杂，对于一些简单的动画效果，实现起来比较麻烦	DOM操作简单，支持隐式迭代，实现动画非常简单。

入口函数

    <script src="Jquery/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            alert("aa");
        })
        $(document).ready(function(){
            alert("bb");
        })
    </script>

对比JavaScript的入口函数jQuery的入口函数,执行时机

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载

了解 jQuery 的 $ 符号

$ 是什么
其实 $ 就是一个函数：$();参数不一样，功能不一样
$常用的几种情况：

$(function() {});//参数是function，说明是入口函数
$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$ (document).ready(funciton(){})//将document转换成jQuery对象

补充：$ === jQuery,也就是说能用 $ 的地方，完全可以用jQuery，$仅仅是简写形式

jQuery对象与DOM对象之间的转换（难点）

什么是DOM对象（js对象）？
- 使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
- dom对象只可以使用dom对象的方法和属性。
- 通过getElementById()，getElementsByName()，getElementsByTagName()，createElement() 方法创建的对象，是Dom 对象
什么是jquery对象？
- jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
- jquery对象只能使用jquery对象的方法
- Query 对象：
  - 通过JQuery 提供的API 创建的对象
  - 通过JQuery 包装的Dom 对象
  - 通过JQuery 提供的API 查询到的对象
- jQuery 对象的本质是什么？ JQuery 对象是dom 对象的数组+ jQuery 提供的一系列功能函数。

var jdiv = $(div);  //将dom对象转换为jquery对象
var di = jdiv[0];  //将jquery对象转换为dom对象

    <script type="text/javascript">
       $(function(){
            var div = document.getElementById("d");
            console.log(div.innerText);
            var jdiv = $(div);  //将dom对象转换为jquery对象
            console.log(typeof jdiv);
            console.log(jdiv.text());
            var di = jdiv[0];  //将jquery对象转换为dom对象
            console.log(typeof di);
            console.log(di.innerText);
        })
    </script>

在这里插入图片描述

jQuery对象和DOM对象的相互转换

jquery对象转DOM对象
- 先有 jQuery 对象
- jQuery 对象[下标]取出相应的DOM 对象

var $li = $(“li”); 
//第一种方法（推荐使用） 
$li[0] 
//第二种方法 
$li.get(0)

DOM对象转jquery对象
- 先有DOM 对象
- $( DOM 对象) 就可以转换成为jQuery 对象

var $obj = $(domObj);

在这里插入图片描述

jQuery选择器（重点）

jQuery基本选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

    <script type="text/javascript">
       $(function(){
            var d1 = $("#d1");  //获取指定id的元素
            console.log(d1);
            console.log(d1.length);  //1
            var c1 = $(".c1");  //获取同一类class的元素
            console.log(c1);
            console.log(c1.length);  //3
            var c2 = $("div.c1");  //获取class 为 c1 的 div元素
            console.log(c2);
            console.log(c2.length);  //2
            var span = $("span");  //获取同一类标签的所有元素
            console.log(span[0].innerText);
            console.log(span[1]);
        })
    </script>

在这里插入图片描述

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Jquery/jquery-1.12.4.js"></script>
    <script type="text/javascript">
       $(function(){
            //子代选择器
            var chil = $("#d1>.c1");
            console.log(chil);
            console.log(chil.length);  //2
            console.log(chil[0]);
            console.log(chil[1]);
            //后代选择器
            var chil = $("#d1 .c1");
            console.log(chil);
            console.log(chil.length);  //3
            console.log(chil[0]);
            console.log(chil[1]);
            console.log(chil[2]);
        })
    </script>
    <style>
        #id{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="d1">
        id选择器
        <div class="c1">
            class选择器
            <span class="c1">啊啊啊</span>
        </div>
        <div id="d2" class="c1">
            bbb
            <span>bbbk</span>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

过滤选择器

这类选择器都带冒号 :

名称	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”,”red”)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”)	获取到的li元素中，选择索引号为偶数的元素
	$(“li:even”).attr(“class”, ”red”)	获取到的元素，使用class名为red的样式

实现表格颜色的隔行显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Jquery/jquery-1.12.4.js"></script>
    <script type="text/javascript">
       $(function(){
           // 实现隔行变色
           $("li:odd").css("background-color","red"); //直接设置css样式
           $("li:even").attr("class","orange");  //设置 class 属性
       })
    </script>
    <style>
        .red{
            background-color: red;  /*我们这里没有用到*/
        }
        .orange{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        <li>山西</li>
        <li>太原</li>
        <li>上兰</li>
        <li>中北</li>
    </div>
</body>
</html>

在这里插入图片描述

筛选选择器（方法）

功能与过滤选择器类似，但是筛选选择器主要是方法。

名称	用法	描述
children(selector)	$ (“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$ (“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$ (“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一个兄弟

案例1：实现下拉菜单

jQuery 操作属性

attr(name | properties | key,values | fn)

获取匹配的元素集合中的每一个元素的属性的值或设置每一个匹配元素的一个或多个属性

prop(name | properties | key,values | fn)

获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。

css 操作

功能：设置或修改样式，操作的是 style 属性

格式：
设置多个样式：

css(name,values);

name:设置的样式名称
value:对应的样式值

实例：
$("#one").css("background","gray");

获取样式：

caa(name)

    <script src="jQuery/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            //设置样式
            $("p").css({
                "font-size":"20px",
                "color":"black"

            })
            var w = $(".q").css("width");
            console.log(w);
            var b = $(".q").css("background-color");
            console.log(b);
        })
    </script>
    <style>
        .q{
            width: 50px;
            height: 50px;
            background-color: rgb(137, 137, 143);
        }
    </style>

<body>
    <div class="q">
        <p>你好</p>
    </div>
</body>

在这里插入图片描述

class 操作

addClass() 方法

addClass() 方法向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。

提示：如需添加多个类，请使用空格分隔类名。

//向第一个 p 元素添加一个类：

$("button").click(function(){
  $("p:first").addClass("intro");
});

removeClass() 方法

removeClass() 方法从被选元素移除一个或多个类。

注释：如果没有规定参数，则该方法将从被选元素中删除所有类。

//移除所有 <p> 的 "intro" 类：

$("button").click(function(){
  $("p:first").removeClass("intro");
});

toggleClass() 方法

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

不过，通过使用 “switch” 参数，您能够规定只删除或只添加类。

//移除所有 <p> 的 "intro" 类：

$("button").click(function(){
  $("p:first").removeClass("intro");
});

atte() 与 prop()

attr(name|properties|key,value|fn)
获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。

prop(name|properties|key,value|fn)
获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。

区别：

对于HTML元素本身就带有的固有属性，在处理时使用prop()方法
对于HTML中自己定义的属性，在处理时使用attr()方法

案例1：实现下拉框的多选（multiple）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            var type = $("input").attr("type");
            console.log(type);
            var href = $("a").prop("href");
            console.log(href);
            $("select option[values='sz']").prop("selected",true);
            $("select").change(function () {
                console.log($("select option:selected").text());
            })
        })
    </script>
</head>
<body>
    <div>
        姓名<input type="text" id="name">
        <a href="http:www.baodu.com">百度</a>
    </div>
    <!-- 设置下拉框可选 -->
    <!-- 设置multiple 可以实现多选 -->
    <select multiple="multiple">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="gz">广州</option>
        <option value="sz">深圳</option>
    </select>   
</body>
</html>

案例2：实现点击小图，出现大图，同时改变文字（获取当前点击对象的src属性，将其赋值给大图的src属性）
在这里插入图片描述

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    body {
      font-family: "Helvetica", "Arial", serif;
      color: #333;
      background-color: #ccc;
      margin: 1em 10%;
    }

    h1 {
      color: #333;
      background-color: transparent;
    }

    a {
      color: #c60;
      background-color: transparent;
      font-weight: bold;
      text-decoration: none;
    }

    ul {
      padding: 0;
    }

    li {
      float: left;
      padding: 1em;
      list-style: none;
    }

    #imagegallery {

      list-style: none;
    }

    #imagegallery li {
      margin: 0px 20px 20px 0px;
      padding: 0px;
      display: inline;
    }

    #imagegallery li a img {
      border: 0;
    }
  </style>
  <script src="jQuery/jquery-1.12.4.js"></script>
  <script type="text/javascript">
    $(function(){
        $("ul li a").click(function(){
            var srcp = $(this).attr("src");
            // 改变id为image的图片的属性
            $("#image").prop("src",srcp);
            var title = $(this).attr("title");
            // 改变id为des的文字属性
            $("#des").text(title);
        })
    })
  </script>
</head>

<body>
    <h2>
        风景图片
      </h2>
    
      <ul id="imagegallery">
        <li><a href="javascript:void(0)" src="imgs/backgroundpic1.jpg" title="图片A">
            <img src="imgs/backgroundpic1.jpg" width="100" alt="图片1" />
          </a></li>
        <li><a href="javascript:void(0)" src="imgs/backgroundpic2.jpg" title="图片B">
            <img src="imgs/backgroundpic2.jpg" width="100" alt="图片2" />
          </a></li>
        <li><a href="javascript:void(0)" src="imgs/backgroundpic3.jpg" title="图片C">
            <img src="imgs/backgroundpic3.jpg" width="100" alt="图片3" />
          </a></li>
        <li><a href="javascript:void(0)" src="imgs/backgroundpic4.jpg" title="图片D">
            <img src="imgs/backgroundpic4.jpg" width="100" alt="图片4" />
          </a></li>
      </ul>
    
      <div style="clear:both"></div>
    
      <img id="image" src="imgs/backgroundpic5.jpg" alt="" width="450px" />
    
      <p id="des">选择一个图片</p>
</body>

</html>

案例3：实现一列选择框的全选与反选

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }

    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }

    td {
      font: 14px "微软雅黑";
    }

    tbody tr {
      background-color: #f0f0f0;
      text-align: center;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
  <script src="jQuery/jquery-1.12.4.js"></script>
  <script type="text/javascript">
    $(function(){
        // 实现点击全选时，所有的都为选中状态,反之也相同
        // 实现：将全选的状态赋予下面的元素
        $("#j_cbAll").click(function(){
            $("#j_tb input").prop("checked",$(this).prop("checked"));
        })
        // 单独选择,若选中的个数等于选择框的个数，则将全选勾中
        $("#j_tb input").click(function(){
            if($("#j_tb input").length == $("#j_tb input:checked").length){
                $("#j_cbAll").prop("checked",true);
            }else{
                $("#j_cbAll").prop("checked",false);
            }
        })
        //实现反选，将下面的元素状态取反，循环结束后再判断是否全选
        $("#no").click(function(){
            for(var i = 0 ; i < $("#j_tb input").length ; i++){
                var flag = $("#j_tb input:eq("+i+")").prop("checked");
                $("#j_tb input:eq("+i+")").prop("checked",!flag);
            }
            if($("#j_tb input").length == $("#j_tb input:checked").length){
                $("#j_cbAll").prop("checked",true);
            }else{
                $("#j_cbAll").prop("checked",false);
            }
        })
    })
  </script>
</head>

<body>
  <div class="wrap">
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="j_cbAll" />
          </th>
          <th>菜名</th>
          <th>饭店</th>
        </tr>
      </thead>
      <tbody id="j_tb">
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>红烧肉</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>西红柿鸡蛋</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>红烧狮子头</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>日式肥牛</td>
          <td>田老师</td>
        </tr>
      </tbody>
      <tbody id="no">
        <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td colspan="2">反选</td>
          </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

var flag = $("#j_tb input:eq("+i+")").prop(“checked”); 注意这里循环中，eq中i的使用，不处理会当成字符串进行拼接

val 方法

设置和获取表单元素的值，例如 input、textarea的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            // 设置值
            $("#b").val("李四");
            // 获取值
            $("#b").mouseleave(function(){
                console.log($("#b").val());
            })
        })
    </script>
</head>
<body>
    姓名<input type="text" id="b" value="">
</body>
</html>

在这里插入图片描述

html() 方法与 text() 方法

html 相当于 innerHTML
text 相当于 innerText

注：二者为方法，所以使用要加括号

html() 方法会识别 html 标签，所以会输出标签+文本

text() 方法不会识别 html 标签，故只能输出其中的文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            console.log($("div").html());
            console.log($("div").text());
        })
    </script>
</head>
<body>
    <div>
        姓名<input type="text" id="b" value="">
        <span>
            天气很好
        </span>
        <a href="#">百度</a>
    </div>
</body>
</html>

在这里插入图片描述

width() 方法与 height() 方法

设置或者获取高度

//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();

获取网页的可视区宽高

//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();

scrollTop() 与 scrollLeft()

设置或者获取垂直滚动条的位置

//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();

案例：实现点击返回顶部，到达顶部后隐藏标志

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            width: 100%;
            height: 3000px;
            background-image:url(imgs/backgroundpic1.jpg);
        }
        .totop{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: white;
            background-image: url(imgs/totop.png);
            float: right;
            position: fixed;
            bottom: 70px;
            right: 30px;
        }
    </style>
    <script src="jQuery/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            // 设置热榜随屏幕的滚动而改变其状态
            // scoll 函数：适用可滚动的元素可window
            $(window).scroll(function() {  
                var yheight1=$(window).scrollTop(); //滚动条距顶端的距离  
                if(yheight1 >100){
                    $(".totop").stop().fadeIn(100);
                }else{
                    $(".totop").stop().fadeOut(100);
                }
                $(".totop").click(function () {
                    $("html,body").stop().animate({ scrollTop: 0 }, 500);
                    $(window).scrollTop(0);
                })
            }) 
        })
    </script>
</head>
<body>
    <div class="totop">
        <a href="javascript:;" title="Top"></a>
    </div>
</body>
</html>

在这里插入图片描述

jQuery 事件机制

事件注册

实现原理
jquery 事件脱胎于浏览器的 addEventListener (W3) 和 attachEvent (IE) 方法 , 提供了跨浏览器的一致性API。
jQuery事件发展历程(了解)
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
简单事件注册

click(handler) 单击事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
缺点：不能同时注册多个事件

bind方式注册事件

   // 使用bind可以绑定多个事件 缺点：只能给元素静态的绑定 而不能为元素动态绑定
      $("div").bind("mouseleave mouseenter", function () {
        alert("bbbb");
      })

delegate注册委托事件
将原本需要绑定到某元素上的事件，改为绑定在父元素乃至根节点上，然后委派给当前元素生效；

 //将事件有 父类委托给子元素
      $("div").delegate("button", "click", function () {
        alert("ccc");
      })

on注册事件(重点)

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。

最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

① 使用on进行单事件绑定

  $("#btn").on("click", function () {
        alert("ddddd");
      })

②使用on同时为多个事件，绑定同一函数

  $("#btn").on("click mouseenter", function () {
        alert("ddddd");
      })

③ 调用函数时，传入自定义参数

 $("#btn").on("click", { name: "中北大学" }, function (event) {
        alert(event.data.name);
      })

④ 使用on进行多事件多函数绑定

$("#btn").on({
    //单击
    click: function (event) {
      alert("22222");
    },
    //双击事件
    dblclick: function () {
      alert("11111")
    }
  })

⑤on注册委托事件

//使用on注册委托事件
      $("div").on("click", "button", function () {
        alert("aaaaa");
      })

• 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
• /第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
• 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
• 第四个参数：handler，事件处理函数

$("div").click(function () {
    $("div").append(" <button>按钮</button>");

  })
  //使用on注册委托事件
  $("div").on("click", "button", function (event) {
    alert("aaaaa");
    //阻止事件冒泡
    event.stopPropagation();
  })

on.(‘click’) 和 .click() 的区别

on 属于绑定事件处理器(event-handler-attachment) ,
而 .click() 属于 jquery包装好的鼠标事件。

事件解绑

unbind方式（不用）

$(selector).unbind(); //解绑所有的事件 $(selector).unbind("click"); //解绑指定的事件

undelegate方式（不用）

$( selector ).undelegate(); //解绑所有的delegate事件 $( selector).undelegate( “click” ); //解绑所有的click事件

off方式（推荐）

// 解绑匹配元素的所有事件 $(selector).off(); 
// 解绑匹配元素的所有click事件 $(selector).off("click");

触发事件

$(selector).click(); 
//触发 click事件 $(selector).trigger("click");

jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

screenX和screenY 对应屏幕最左上角的值
clientX和clientY 距离页面左上角的位置（忽视滚动条）
pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
event.keyCode 按下的键盘代码
event.data 存储绑定事件时传递的附加数据
event.preventDefault() 阻止浏览器默认行为
return false:阻止浏览器默认行
prevAll:定位最后一个 div 之前的所有 div，并为它们添加类

$("div:last").prevAll().addClass("before");

nextAll:查找第一个 div 之后的所有类名，并为他们添加类名：

$("div:first").nextAll().addClass("after");

current :每个数组中都有一个内部的指针指向它“当前的”单元，初始化时会指向该数组中的第一个值。

current ( array|object $array ) : mixed

siblings:返回带有类名 “start” 的每个 < li> 元素的所有同级元素：

$(document).ready(function(){
    $("li.start").siblings().css({"color":"red","border":"2px solid red"});
});

案例1：实现滑动星星变色，点击使其停止，同时可获取当前的选的星星数目

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>五角星评分案例</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .comment {
      font-size: 80px;
      color: #ff25d0;
    }

    .comment li {
      float: left;
    }

    ul {
      list-style: none;
    }
  </style>
  <script src="jQuery/jquery-1.12.4.js"></script>
  <script>
    $(function(){
        var wjx_k = "☆";
        var wjx_s = "★";
        // li注册鼠标经过事件，自己与前面的兄弟都变为实心，后面的都变为空心
        $(".comment li").on("mouseenter",function(){
            $(this).text(wjx_s).prevAll().text(wjx_s);
            $(this).nextAll().text(wjx_k);
        })
        // 给 ul 注册鼠标离开事件，使得所有的 li 都变为空心
        $(".comment").on("mouseleave",function(){
            $(this).children().text(wjx_k);
            // 找到指针指向的位置，将其以及前面的状态都设置为实心
            $("li.current").text(wjx_s).prevAll().text(wjx_s);
        })
        // 给 li 注册点击事件,给点击的li添加current，给其同级的li元素移除current
        $(".comment>li").on("click",function(){
            $(this).addClass("current").siblings().removeClass("current");
            // 获取当前点击的星星个数
            var count = $(this).index() + 1;;
            console.log(count);
        })
    })
  </script>
</head>
<body>
  <ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
  </ul>
</body>
</html>

opacity:设置透明度

$(element).css("opacity",(index+1)/10);
//取值为0~1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 150px;
      height: 150px;
      background-color: hotpink;
      float: left;
      margin-left: 50px;
    }
  </style>
  <script src="jQuery/jquery-1.12.4.js"></script>
  <script type="text/javascript">
    $(function(){
        $("div").each(function(index,element){
            console.log(index);
            console.log(element);
            $(element).css("opacity",(index+1)/10);
        })
    })
  </script>
</head>

<body>
  <div>

  </div>
  <div>

  </div>
  <div>

  </div>
  <div>

  </div>
  <div>

  </div>
  <div>

  </div>
  <div>

  </div>
</body>
</html>

在这里插入图片描述

案例2：实现表格的删除与创建，表格清空与单条记录删除

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 410px;
      margin: 100px auto 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
    }

    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 16px "Î¢ÈíÑÅºÚ";
      color: #fff;
    }

    td {
      font: 14px "Î¢ÈíÑÅºÚ";
    }

    td a.get {
      text-decoration: none;
    }

    a.del:hover {
      text-decoration: underline;
    }

    tbody tr {
      background-color: #f0f0f0;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }

    .btnAdd {
      width: 110px;
      height: 30px;
      font-size: 20px;
      font-weight: bold;
    }

    .form-item {
      height: 100%;
      position: relative;
      padding-left: 100px;
      padding-right: 20px;
      margin-bottom: 34px;
      line-height: 36px;
    }

    .form-item>.lb {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 100px;
      text-align: right;
    }

    .form-item>.txt {
      width: 300px;
      height: 32px;
    }

    .mask {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.15;
      display: none;
    }

    .form-add {
      position: fixed;
      top: 30%;
      left: 50%;
      margin-left: -197px;
      padding-bottom: 20px;
      background: #fff;
      display: none;
    }

    .form-add-title {
      background-color: #f7f7f7;
      border-width: 1px 1px 0 1px;
      border-bottom: 0;
      margin-bottom: 15px;
      position: relative;
    }

    .form-add-title span {
      width: auto;
      height: 18px;
      font-size: 16px;
      font-family: ËÎÌå;
      font-weight: bold;
      color: rgb(102, 102, 102);
      text-indent: 12px;
      padding: 8px 0px 10px;
      margin-right: 10px;
      display: block;
      overflow: hidden;
      text-align: left;
    }

    .form-add-title div {
      width: 16px;
      height: 20px;
      position: absolute;
      right: 10px;
      top: 6px;
      font-size: 30px;
      line-height: 16px;
      cursor: pointer;
    }

    .form-submit {
      text-align: center;
    }

    .form-submit input {
      width: 170px;
      height: 32px;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <input type="button" value="清空内容" id="btn">
    <input type="button" value="添加" id="btnAdd">
    <table>
      <thead>
        <tr>
          <th>课程名称</th>
          <th>所属科目</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="j_tb">
        <tr>
          <!-- <td><input type="checkbox"/></td> -->
          <td>JavaScript</td>
          <td>WEB前端</td>
          <td><a href="#" class="get">DELETE</a></td>
        </tr>
        <tr>
          <!-- <td><input type="checkbox"/></td> -->
          <td>css</td>
          <td>WEB前端</td>
          <td><a href="#" class="get">DELETE</a></td>
        </tr>
        <tr>
          <!-- <td><input type="checkbox"/></td> -->
          <td>html</td>
          <td>WEB前端</td>
          <td><a href="#" class="get">DELETE</a></td>
        </tr>
        <tr>
          <td>jQuery</td>
          <td>WEB前端</td>
          <td><a href="#" class="get">DELETE</a></td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="jQuery/jquery-1.12.4.js"></script>
  <script>
    // $(function () {
    //   $("#btn").on("click", function () {
    //     //删除匹配的元素集合中所有的子节点。
    //     $("#j_tb").empty();
    //   })
    //   $("#btnAdd").click(function () {
    //     $("#j_tb").append("<tr><td>jQuery</td><td>WEB前端</td><td><a href='#' class='get'>DELETE</a></td></tr>");
    //     $("<tr><td>jQuery</td><td>WEB前端</td><td><a href='#' class='get'>DELETE</a></td></tr>").appendTo($("#j_tb"));
    //   })
    //   $("#j_tb").on("click", "a", function () {
    //     $(this).parent().parent().remove();
    //   });
    // });
    $(function(){
        //清空内容按钮绑定点击事件,删除所有子节点
        $("#btn").on("click",function(){
            $("#j_tb").empty();
        })
        //添加按钮绑定点击事件,添加一个tr，注：若外层有双引号，则里面使用单引号
        $ ("#btnAdd").click(function(){
            $("#j_tb").append("<tr><td>jQuery</td><td>WEB前端</td><td><a href='#' class='get'>DELETE</a></td></tr>");
            $("<tr><td>jQuery</td><td>WEB前端</td><td><a href='#' class='get'>DELETE</a></td></tr>").appendTo($("#j_tb"));
        })
        // 超链接 delete 绑定事件。删除该列
        $("#j_tb").on("click","a",function(){
            $(this).parent().parent().remove();
        })
    })
  </script>
</body>
</html>

Bootstrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

基本模板

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.css" rel="stylesheet">
  <script src="js/jquery-1.12.4.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="js/bootstrap.js"></script>
</head>
<body>
  <div class="container">

  </div>
  <div class="container-fluid">
    ...
  </div>
</body>
</html>

在这里插入图片描述

其他模板

layUI 拼图

XML

是可扩展的标记性语言

主要作用：

用来保存数据，这些数据具有自我描述性
可以作为项目或者模块的配置文件
可作为网络传输数据的格式

语法

文档声明
元素（标签）
xml属性
xml注释
文本区域

<?xml version="1.0" encoding="UTF-8"?>
<!-- 而且这个<?xml 要连在一起写，否则会有报错 -->
<books>
    <book>
        <name>java编程思想</name>
        <author>张三</author>
        <price>150.63</price>
    </book>
    <book>
        <name>数据结构</name>
        <author>李四</author>
        <price>50.56</price>
    </book>
</books>

属性

version 是版本号
encoding 是xml 的文件编码
standalone=“yes/no” 表示这个xml 文件是否是独立的xml 文件

xml 的注释与 html 相同，都是

xml 元素（标签）

html 标签：

格式： <标签名>封装的数据</标签名>
单标签: <标签名 /> <br /> 换行 <hr />水平线
双标签 <标签名>封装的数据</标签名>
标签名大小写不敏感
标签有属性，有基本属性和事件属性
标签要闭合（不闭合， html 中不报错。但我们要养成良好的书写习惯。闭合）

XML 命名规则:

名称可以含字母、数字以及其他的字符
名称不能以数字或者标点符号开始
名称不能以字符 “xml”（或者 XML、 Xml）开始（它是可以的）
名称不能包含空格
xml 中的元素（标签）也分成单标签和双标签：
- 单标签格式： <标签名属性=”值” 属性=”值” … />
- 双标签格式： < 标签名属性=”值” 属性=”值” …>文本数据或子标签</标签名>

xml 属性

与 html 的标签属性类似，属性可以提供额外的信息，在标签上可以书写属性：

一个标签上可以写多个属性，每个属性的值需用引号引起来
书写规则与标签的书写规则一致

语法规则

所有 XML 元素都必须有关闭（闭合）标签
XML 标签对大小写敏感
XML 必须正确嵌套
XML 文档必须有根元素
1. 根元素是顶级元素，没有父标签的元素，叫顶级元素
2. 根元素唯一
XML 的属性值需加引号
XML 的特殊字符（转义字符）大于（&gt ;），小于（ &lt ;），空格（&nbsp ;）

文本区域（CDATA区）

CDATA 中的文本内容，xml 不会解析，原样输出。

格式：

<![CDATA[文本内容]]>

<book id="SN202103281213">
    <name>oracle数据库</name>
    <author>
        <![CDATA[
        这是一本关于《Oracle》的书。概述的作者为：”王五“。》》》》>>>
        

    ]]>
    </author>
    <price>50.56</price>
</book>

xml 解析技术

document 对象表示的是整个文档（可以是 html 文档，也可以是 xml 文档）

早期 JDK 为我们提供了两种 xml 解析技术 DOM 和 Sax 简介（已经过时，但我们需要知道这两种技术）

编程语言都对这个解析技术使用了自己语言的特点进行实现。Java 对 dom 技术解析标记也做了实现。
sun 公司在 JDK5 版本对 dom 解析技术进行升级： SAX（ Simple API for XML ）
SAX 解析，它跟 W3C 制定的解析不太一样。它是以类似事件机制通过回调告诉用户当前正在解析的内容。它是一行一行的读取 xml 文件进行解析的。不会创建大量的 dom 对象。所以它在解析 xml 的时候，在内存的使用上。和性能上。都优于 dom 解析。

dom4j 解析技术

由于 dom4j 它不是 sun 公司的技术，而属于第三方公司的技术，我们需要使用 dom4j 就需要到 dom4j 官网下载 dom4j的 jar 包。

dom4j 编程步骤：

先加载 xml 文件创建 Document 对象
通过 Document 对象拿到根元素对象
通过根元素.elelemts(标签名); 可以返回一个集合，这个集合里放着。所有你指定的标签名的元素对象
找到你想要修改、删除的子元素，进行相应在的操作
保存到硬盘上

<?xml version="1.0" encoding="UTF-8" ?>
<books>
    <book>
        <name>高等代数</name>
        <author>李桂华</author>
    </book>
    <book>
        <name>数据分析</name>
        <author>未知</author>
    </book>
    <book>
        <name>解析几何</name>
        <author>徐三丰</author>
    </book>
</books>

import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.util.List;

public class Dome1 {
    public static void main(String[] args) throws FileNotFoundException, DocumentException {
        //创建文档解析器
        SAXReader sax = new SAXReader();
        //获取document对象
        Document document = sax.read(new FileInputStream(new File("src/books.xml")));
        System.out.println("document = " + document);
        // document = org.dom4j.tree.DefaultDocument@1e6d1014 [Document: name null]
        // 获取根元素
        Element books = document.getRootElement();
        System.out.println("books = " + books);
        // books = org.dom4j.tree.DefaultElement@76707e36 [Element: <books attributes: []/>]
        // 获取所有的 book 节点
        List<Element> list = books.elements("book");
        for (Element book : list){
            String name = book.element("name").getTextTrim();
            String author = book.element("author").getTextTrim();
            System.out.println("name=" + name + "  author = " + author);
        }
    }
}

name=高等代数  author = 李桂华
name=数据分析  author = 未知
name=解析几何  author = 徐三丰

结合 xpath 来解析 xml：

导包：
在这里插入图片描述

xpath 指一种解析路径

<?xml version="1.0" encoding="UTF-8" ?>
<books>
    <book>
        <name>高等代数</name>
        <author>李桂华</author>
        <price>10</price>
    </book>
    <book>
        <name>数据分析</name>
        <author>未知</author>
        <price>20</price>
    </book>
    <book>
        <name>解析几何</name>
        <author>徐三丰</author>
        <price>25</price>
    </book>
</books>

package org.dom;

import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Node;
import org.dom4j.io.SAXReader;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.util.List;

public class XPathDemo {
    public static void main(String[] args) throws FileNotFoundException, DocumentException {
        // 创建文档解析器
        SAXReader reader = new SAXReader();
        // 获取 document 对象
        Document document = reader.read(new FileInputStream(new File("src/books.xml")));
        // 选择价格大于15的book的书名
        List<Node> list = document.selectNodes("/books/book[price>15]/price");
        for (Node node : list){
            String price = node.getText();
            System.out.println("price = " + price);
        }
    }
}

price = 20
price = 25

BORN（^-^）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
三十五、jQuery（JavaScript 库）

文章目录概述Jquery 的使用入口函数了解 jQuery 的 $ 符号jQuery对象与DOM对象之间的转换（难点）jQuery选择器（重点）jQuery基本选择器层级选择器过滤选择器筛选选择器（方法）概述Jquery 是一个 JavaScript 库，简化 js 的操作：DOM操作，事件的处理，AJAX（是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。）Jquery 可以使用更少的代码，完成更多的事情。Jquery 为何学习？因为 js
复制链接

扫一扫