【JavaWeb】----＞01 jQuery

于 2022-04-12 17:18:16 发布
阅读量791 收藏
点赞数 1
分类专栏： JavaWeb 文章标签： jQuery javaweb java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_56932454/article/details/124107169
版权
本文详细介绍了jQuery的基本概念、使用步骤，以及jQuery对象与JavaScript对象的区别和转换。重点讲解了jQuery的选择器，包括基本选择器、层级选择器、属性选择器和过滤选择器，并给出了相应的示例代码。此外，还阐述了事件绑定、DOM操作（如内容和属性操作）以及CRUD操作，展示了如何在实际应用中便捷地操作DOM元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

概念

  jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优 化HTML文档操作、事件处理、动画设计和Ajax交互。

  JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

使用步骤

先下载JQuery后导入JQuery的js文件按例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
<!--    导入js-->
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1....</div>
<div id="div2">div2....</div>
<script>
    //使用JQuery元素对象
    var div1 = $("#div1");
    alert(div1.html());

    var div2 = $("#div2");
    alert(div2.html());

</script>
</body>
</html>

JQuery对象和JS对象区别与转换

区别

  1. JQuery对象在操作时，更加方便。
  2. JQuery对象和js对象方法不通用的。

转换

jq – > js：
jq对象[索引] 或者 jq对象.get(索引)

 divs[i].innerHTML = "aaa";

js – > jq： $(js对象)

  $divs.html("bbb");

按例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> JQuery对象和JS对象区别与转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1....</div>
<div id="div2">div2....</div>

<script>
    //1、通过JS方式来获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs.length);//可以将其当作数组来使用
    //对divs中所有的div让其标签体内容变为"aaa"
    for (var i = 0; i < divs.length; i++) {
        divs[i].innerHTML = "aaa";
    }
    //2、通过JQuery方式来获取名称叫div的所有html元素对象
    var $divs = $("div");
    alert($divs.length);//也可以当作数组来使用
    //对divs中所有的div让其标签体内容变为"bbb" 使用jq方式
    $divs.html("bbb");
</script>
</body>
</html>

选择器

  选择器是筛选具有相似特征的元素(标签)

绑定事件

  在有一个触发事件的前提下，后面紧跟着一个事件处理函数，这个函数里面包含着所要执行动作的具体过程等。
按例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        //给b1按钮添加单击事件
        window.onload=function (){
        //1、获取b1按钮
        $("#b1").click(function () {
            alert("abc");
        });
        }
        
        //jQuery入口函数
        $(function () {
            //1、获取b1按钮
            $("#b1").click(function () {
                alert("abc");
            });
        });

        $(function () {
            //将div1背景色设置为红色
            $("#div1").css("backgroundColor", "pink");
        });

    </script>
</head>
<body>
<div id="div1">div1....</div>
<div id="div2">div2....</div>
<input type="button" value="点我" id="b1">

</body>
</html>

window.onload 和 $(function) 区别:

   window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉

   $(function) 可以定义多次。

选择器分类

基本选择器

名称语法描述
标签选择器（元素选择器）$(“html标签名”)获得所有匹配标签名称的元素
id选择器$(“#id的属性值”)获得与指定id属性值匹配的元素
类选择器$(“.class的属性值”)获得与指定的class属性值匹配的元素
并集选择器$(“选择器1,选择器2…”)获取多个选择器选中的所有元素

按例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>基本选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
     ......
    </style>
    <script type="text/javascript">
        $(function () {
            //改变 id 为 one 的元素的背景色为 粉红色
            //元素选择器
            $("#b1").click(function () {
                $("#one").css("backgroundColor", "pink");
            });
            //改变元素名为 <div> 的所有元素的背景色为 红色
            //ID选择器
            $("#b2").click(function () {
                $("div").css("backgroundColor", "pink");
            });
            //改变 class 为 mini 的所有元素的背景色为 红色
            //类选择器
            $("#b3").click(function () {
                $(".mini").css("backgroundColor", "pink");
            });
            //改变所有的<span>元素和 id 为 two 的元素的背景色为红色
            //并集选择器
            $("#b4").click(function () {
                $("span, #two").css("backgroundColor", "pink");
            });
        });
    </script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/>
<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>
<div id="one">
    id为one
</div>
<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>
<span class="spanone">class为spanone的span元素</span>
<span class="mini">class为mini的span元素</span>


<input type="text" value="zhang" id="username" name="username">

</body>
</html>

层级选择器

名称语法描述
后代选择器$("A B ")选择A元素内部的所有B元素
子选择器$(“A > B”)选择A元素内部的所有B子元素

按例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>层次选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
     ......
    </style>
    <script type="text/javascript">
        $(function () {
            $("#b1").click(function () {
                $("body div").css("backgroundColor", "pink");
            });

            $("#b2").click(function () {
                $("body>div").css("backgroundColor", "pink");
            });
        });
    </script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>
<div id="one">
    id为one
</div>
<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>
<span class="spanone">    span
		</span>
</body>
</html>

属性选择器

名称语法描述
属性名称选择器$(“A[属性名]”)包含指定属性的选择器
属性选择器$(“A[属性名=‘值’]”)包含指定属性等于指定值的选择器
复合属性选择器$(“A[属性名=‘值’][]…”)包含多个属性条件的选择器

按例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
    ......
    </style>
    <script type="text/javascript">
        $(function () {
            // <input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
            $("#b1").click(function () {
                $("div[title]").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
            $("#b2").click(function () {
                $("div[title='test']").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
            $("#b3").click(function () {
                $("div[title!='test']").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
            $("#b4").click(function () {
                $("div[title^='te']").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
            $("#b5").click(function () {
                $("div[title$='est']").css("backgroundColor", "pink");
            });
            // <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
            $("#b6").click(function () {
                $("div[title*='es']").css("backgroundColor", "pink");
            });
            // <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
            $("#b7").click(function () {
                $("div[id][title*='es']").css("backgroundColor", "pink");
            });
        });

    </script>
</head>

<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
<input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
<input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
<input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
<input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>


<div id="one">
    id为one div
</div>

<div id="two" class="mini" title="test">
    id为two class是 mini div title="test"
    <div class="mini">class是 mini</div>
</div>

<div class="visible">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one" title="test02">
    class是 one title="test02"
    <div class="mini01">class是 mini01</div>
    <div class="mini" style="margin-top:0px;">class是 mini</div>
</div>


<div class="visible">
    这是隐藏的
</div>

<div class="one">

</div>

<div id="mover">
    动画
</div>

<input type="text" value="zhang" id="username" name="username">
</body>


</html>

过滤选择器

名称语法描述
首元素选择器:first获得选择的元素中的第一个元素
尾元素选择器:last获得选择的元素中的最后一个元素
非元素选择器):not(selector)不包括指定内容的元素
偶数选择器:even偶数，从 0 开始计数
奇数选择器:odd奇数，从 0 开始计数
等于索引选择器:eq(index)指定索引元素
大于索引选择器:gt(index)大于指定索引元素
小于索引选择器:lt(index)小于指定索引元素
标题选择器:header获得标题（h1~h6）元素，固定写法

示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>基本过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
      ......
    </style>
    <script type="text/javascript">
        $(function () {
            // <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
            $("#b1").click(function () {
                $("div:first").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
            $("#b2").click(function () {
                $("div:last").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
            $("#b3").click(function () {
                $("div:not(.one)").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
            $("#b4").click(function () {
                $("div:even").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
            $("#b5").click(function () {
                $("div:odd").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
            $("#b6").click(function () {
                $("div:gt(3)").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
            $("#b7").click(function () {
                $("div:eq(3)").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
            $("#b8").click(function () {
                $("div:lt(3)").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
            $("#b9").click(function () {
                $(":header").css("backgroundColor", "pink");
            });
        });
    </script>
</head>

<body>

<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
<input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>

<div id="one">
    id为one

</div>
<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>
</body>
</html>

表单过滤选择器

名称语法描述
可用元素选择器:enabled获得可用元素
不可用元素选择器:disabled获得不可用元素
选中选择器:checked获得单选/复选框选中的元素
选中选择器:selected获得下拉框选中的元素

示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>表单属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
    ......

    </style>
    <script type="text/javascript">
        // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
        $(function () {
            $("#b1").click(function () {
                $("input[type='text']:enabled").val("aaa");
            });
            // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
                $("#b2").click(function () {
                    $("input[type='text']:disabled").val("bbb");
                });
            // <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
            $("#b3").click(function () {
                alert($("input[type='checkbox']:checked").length);
            });
            // <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
            $("#b4").click(function () {
                alert($("#job>option:selected").length);
            });
        });
    </script>
</head>

<body>

<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>

<br><br>

<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1">
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2">

<br><br>
<input type="checkbox" name="items" value="美容">美容
<input type="checkbox" name="items" value="IT">IT
<input type="checkbox" name="items" value="金融">金融
<input type="checkbox" name="items" value="管理">管理

<br><br>

<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女

<br><br>

<select name="job" id="job" multiple="multiple" size=4>
    <option>程序员</option>
    <option>中级程序员</option>
    <option>高级程序员</option>
    <option>系统分析师</option>
</select>

<select name="edu" id="edu">
    <option>本科</option>
    <option>博士</option>
    <option>硕士</option>
    <option>大专</option>
</select>
<br/>
<div id="two" class="mini">
    id为two class是 mini div
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>
</body>
</html>

DOM操作

内容操作

方法：

html():
		获取/设置元素的标签体内容   <a><font>内容</font></a>  --> <font>内容</font>
text():
		获取/设置元素的标签体纯文本内容   <a><font>内容</font></a> --> 内容
val():
		获取/设置元素的value属性值

案例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>

        $(function () {
            // 获取myinput 的value值
            var value = $("#myinput").val();
            alert(value);
            $("#myinput").val("李四");

            // 获取mydiv的标签体内容
            var html = $("#mydiv").html();
            alert(html);
            $("#mydiv").html("AAA");

            // 获取mydiv文本内容
           var text = $("#mydiv").text;
            alert(text);

           $("#mydiv").text("BBB");

        });
    </script>
</head>
<body>
<input id="myinput" type="text" name="username" value="张三"/><br/>
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
</html>

属性操作

通用属性操作

方法描述
attr()获取/设置元素的属性
removeAttr()删除属性
prop()获取/设置元素的属性
removeProp()删除属性

示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>获取属性</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
  ......
    </style>

    <script type="text/javascript">
        $(function () {
            //获取北京节点的name属性值
            // var name = $("#bj").attr("name");
            // alert(name);

            //设置北京节点的name属性的值为dabeijing
            // $("#bj").attr("name","dabeijing");

            //新增北京节点的discription属性 属性值是didu
            $("#bj").attr("discription", "didu");
            //删除北京节点的name属性并检验name属性是否存在
            $("#bj").removeAttr("name");
            //获得hobby的的选中状态
            var prop = $("#hobby").prop("checked");
            alert(prop);
        });
    </script>
</head>
<body>
<ul>
    <li id="bj" name="beijing" xxx="yyy">北京</li>
    <li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby"/>
</body>
</html>

attr和prop区别：

1. 如果操作的是元素的固有属性，则建议使用prop
2. 如果操作的是元素自定义的属性，则建议使用attr

对class属性操作

方法描述
addClass()添加Class属性值
removeClass()删除Class属性值
toggleClass()切换Class属性

案例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>样式操作</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
      ......
    </style>
    <script type="text/javascript">
        $(function () {
            //<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
            $("#b1").click(function () {
                $("#one").prop("class", "second");
            });
            //<input type="button" value=" addClass"  id="b2"/>
            $("#b2").click(function () {
                $("#one").addClass("second");
            });
            //<input type="button" value="removeClass"  id="b3"/>
            $("#b3").click(function () {
                $("#one").removeClass("second");
            });
            //<input type="button" value=" 切换样式"  id="b4"/>
            $("#b4").click(function () {
                $("#one").toggleClass("second");
            });
            //<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
            $("#b5").click(function () {
                $("#one").css("backgroundColor","pink");
            });
            //<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
            $("#b6").click(function () {
                $("#one").css("backgroundColor","green");
            });
        });
    </script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
<input type="button" value=" addClass" id="b2"/>
<input type="button" value="removeClass" id="b3"/>
<input type="button" value=" 切换样式" id="b4"/>
<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
<input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>

<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>

<div id="one">
    id为one
</div>

<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>
<span class="spanone">    span
		</span>
</body>
</html>

CRUD操作

在这里插入图片描述
案例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
     ......
    </style>
    <script type="text/javascript">
        $(function () {
            // <input type="button" value="将反恐放置到city的后面"  id="b1"/>
            $("#b1").click(function () {
                //1. append() 方法
                //    $("#city").append($("#fk"));
                //2. appendTo()方法
                $("#fk").appendTo($("#city"));
            });
            // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
            $("#b2").click(function () {
                //1. prepend()方法
                // $("#city").prepend($("#fk"));
                //2. prependTo()方法
                $("#fk").prependTo($("#city"));
            });
            // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
            $("#b3").click(function (node, child) {
                // $("#tj").after($("#fk"), child);
                $("#fk").insertAfter($("#tj"), child);
            });
            // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
            $("#b4").click(function (node, child) {
                $("#tj").before($("#fk"), child);
            });
        });
    </script>
</head>
<body>
<input type="button" value="将反恐放置到city的后面" id="b1"/>
<input type="button" value="将反恐放置到city的最前面" id="b2"/>
<input type="button" value="将反恐插入到天津后面" id="b3"/>
<input type="button" value="将反恐插入到天津前面" id="b4"/>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="tj" name="tianjin">天津</li>
    <li id="cq" name="chongqing">重庆</li>
</ul>
<ul id="love">
    <li id="fk" name="fankong">反恐</li>
    <li id="xj" name="xingji">星际</li>
</ul>
<div id="foo1">Hello1</div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值