前端面试题《JQuery》

.jQuery库中的$()是什么？

$() 函数是 jQuery() 函数的别称，$()函数用于将任何对象包裹成 jQuery对象，接着被允许调用定义在jQuery对象上的多个不同方法。甚至可以将一个选择器字符串传入$()函数，它会返回一个包含所有匹配的DOM元素数组的jQuery对象。这个问题我已经见过好几次被提及，尽管它非常基础，它经常被用来区分一个开发人员是否了解jQuery。

2.网页上有5个div元素，如何使用 jQuery来选择它们？

jQuery支持不同类型的选择器，例如ID选择器、class选择器、标签选择器。鉴于这个问题没提到ID和class，可以用标签选择器来选择所有的div 元素。jQuery代码：$("div")，这样会返回一个包含所有5个div标签的jQuery 对象。

3.$(this) 和 this 关键字在 jQuery 中有何不同？

这对于很多java零基础学jQuery的初学者来说是一个棘手的问题，其实是个简单的问题。$(this) 返回一个jQuery对象，你可以对它调用多个 jQuery方法，比如用text()获取文本，用val()获取值等等。而this代表当前元素，它是JavaScript关键词中的一个，表示上下文中的当前DOM元素。你不能对它调用 jQuery方法，直到它被 $() 函数包裹，例如 $(this)。

4.使用CDN加载 jQuery库的主要优势是什么？

除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的jQuery版本, 那么它就不会再去下载它一次，因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。

5.jQuery中的方法链是什么？使用方法链有什么好处？

方法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对DOM进行了一轮查找，性能方面更加出色。

6.如何将一个HTML元素添加到DOM树中的？

可以用 jQuery方法appendTo()将一个HTML元素添加到DOM树中。这是jQuery提供的众多操控DOM的方法中的一个。可以通过appendTo()方法在指定的DOM元素末尾添加一个现存的元素或者一个新的HTML元素。

7.说出jQuery中常见的几种函数以及他们的含义是什么?

（1）get()取得所有匹配的DOM元素集合；

（2）get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素；

（3）append(content)向每个匹配的元素内部追加内容；

（4）after(content)在每个匹配的元素之后插入内容；

（5）html()/html(var)取得或设置匹配元素的html内容；

（6）find(expr)搜索所有与指定表达式匹配的元素；

（7）bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数；

（8）empty()删除匹配的元素集合中所有的子节点；

（9）hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法；

（10）attr(name)取得第一个匹配元素的属性值。

8.jQuery 能做什么？

获取页面的元素；修改页面的外观；改变页面大的内容；响应用户的页面操作；为页面添加动态效果；无需刷新页面，即可以从服务器获取信息；简化常见的javascript任务。

9.jquery中的选择器和CSS中的选择器有区别吗？

jQuery选择器支持CSS里的选择器，jQuery选择器可用来添加样式和添加相应的行为，CSS中的选择器是只能添加相应的样式。

10.jQuery的特点都有什么？

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

ntroduction to jQuery

jQuery 是一个快速、简洁的 JavaScript 框架，是目前最流行的 JavaScript 程序库，它是对 JavaScript 对象和函数的封装
jQuery 的设计思想是 Write less, do more
实现隔行变色效果，JavaScript 要循环加判断，而 jQuery 只需一句关键代码

$("tr:even").css("background-color", "#ccc");

jQuery Function

访问和操作 DOM 元素
控制页面样式
对页面事件进行处理
扩展新的 jQuery 插件
与 Ajax 技术完美结合

jQuery 能做的 JavaScript 也都能做，但使用 jQuery 能大幅提高开发效率

jQuery Advantages

体积小，压缩后只有 100 KB 左右
强大的选择器
出色的 DOM 封装
可靠的事件处理机制
出色的浏览器兼容性

jQuery Usage

jQuery 作为一个单独存在的 js 文件，并不会与其他的 js 文件发生冲突

<script src="js/jquery-3.4.1.min.js"></script>

基本的语法介绍

<script>
    $(selector).action();
</script>

工厂函数 $()：将 DOM 对象转化为 jQuery 对象

选择器 selector：获取需要操作的 DOM 元素

方法 action()：jQuery 中提供的方法，其中包括绑定事件处理的方法 “$” 等同于 “jQuery”

例如：

<body>
    <p>hello</p>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    alert($("p").text());
</script>

jQuery 对象与 DOM 对象

DOM 对象和 jQuery 对象分别拥有一套独立的方法，不能混用

$("#title").html();
// 等同于
document.getElementById("title").innerHTML;

如果要混用它们，就要进行转换

DOM 对象转 jQuery 对象

// a 是 DOM 对象
var a=document.getElementById("name");
// b 是 jQuery 对象
var b=$(a);

jQuery 对象转 DOM 对象

// a 是 jQuery 对象
var a=$("#name");
// b 是 DOM 对象
var b=jqObject.get(0);

选择器

基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。

<p>中国</p>
<p>China</p>
<p class="jy">加油</p>
<p id="wan">万</p>
<h3 class="jy">加油</h3>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 标签选择器，获得所有的 p
    $("p").css("color","red");
    // 类选择器
    $(".jy").css("color","red");
    // ID 选择器，更具备唯一性
    $("#wan").css("color","red");
    // 并集选择器 ".jy" 和 "#wan"
    $(".jy,#wan").css("color","red");
    // 交集选择器，既是 h3 标签，又拥有 ".jy" 的元素
    $("h3.jy").css("color","red");
</script>

层次选择器

<h3>000</h3>
<div id="x">
    111
    <p>p1</p>
    <div>
        <p>p2</p>
    </div>
</div>
<h3>222</h3>
<h3>333</h3>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 后代选择器，忽略层级，选取所有后代元素
    $("#x p").css("color","red");
    // 子代选择器，只选取子层的元素
    $("#x>p").css("color","red");
    // 相邻元素选择器，下一个紧邻的兄弟元素 h3
    $("#x+h3").css("color","red");
    // 同辈元素选择器，#x 元素之后的的所有兄弟元素 h3
    $("#x~h3").css("color","red");
</script>

属性选择器

<a href="www.baidu.com">百度</a>
<a href="www.sina.com.cn">新浪网</a>
<a href="http://www.163.com">网易</a>
<p href="x">测试1</p>
<p href="x" title="x">测试2</p>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 选取拥有 href 属性的元素
    $("[href]").css("color","red");
    // 选取拥有 href=x 的元素
    $("[href='x']").css("color","red");
    // 选取 a 标签中 href 不等于 x 的元素
    $("a[href!='x']").css("color","red");
    // 选取 href 属性以 www 开头的元素
    $("[href^='www']").css("color","red");
    // 选取 href 属性以 com 结尾的元素
    $("[href$='com']").css("color","red");
    // 选取 href 属性包含 a 的元素
    $("[href*='a']").css("color","red");
    // 选取拥有 href 属性和 title 属性，并且 title=x 的 p 元素
    $("p[href][title='x']").css("color","red");
</script>

过滤选择器

<h2 id="h2#x">选择</h2>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 第一个 li
    $("li:first").css("color","red");
    // 最后一个 li
    $("li:last").css("color","red");
    // 偶数行的 li
    $("li:even").css("color","red");
    // 奇数行的 li
    $("li:odd").css("color","red");
    // 下标为 2 的 li
    $("li:eq(2)").css("color","red");
    // 下标大于 1 的 li
    $("li:gt(1)").css("color","red");
    // 下标小于 2 的 li
    $("li:lt(2)").css("color","red");
    // 使用转义符
    $("#h2\\#x").css("color","red");
</script>

事件

鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件。

<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 点击一下，切换照片
    $("img").click( function(){
        // this 是事件触发的源头
        $(this).attr( "src","img/2.jpg" );
    } );
    // 移动到元素上
    $("img").mouseover( function(){
        $(this).css( "border","2px solid red" );
    } );
    // 离开元素
    $("img").mouseout( function(){
        $(this).css( "border","2px solid white" );
    } );
</script>

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件。

<input>
<h3></h3>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("input").keyup( function(){
        // 获取框中的值
        var str=$(this).val();
        // 将 h3 元素中的文本内容更改为 str
        $("h3").text( str );
    } );
</script>

表单事件

当元素获得焦点时，会触发 focus 事件，失去焦点时，会触发 blur 事件。

<form action="">
    <p>帐号：<input id="a" value="请输入帐号..."></p>
    <p>电话：<input id="b"></p>
</form>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 获得焦点（激活/点击一下）
    $("#a").focus(function(){
        $(this).val("");
    });
?
    // 失去焦点（未激活/未点击）
    $("#a").blur(function(){
        $(this).val("请输入帐号...");
    });
</script>

鼠标悬停复合事件

hover() 方法相当于 mouseover 与 mouseout 事件的组合。

<img src="img/3.jpg" width="400">
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("img").hover(
        function(){
            $(this).css("border","5px solid red");
        },
        function(){
            $(this).css("border","5px solid white");
        }
    );
</script>

连续点击复合事件

<h2>选择</h2>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("h2").click(function(){
        // 连续点击，ul 的可见和隐藏进行切换
        $("ul").toggle();
    });
</script>

事件的动态绑定

对 dom 元素绑定事件的另一种写法

绑定一个事件

$(".del").on('click', function() {
    alert('hello');
})

绑定多个事件

$(".del").on('click mouseover', function() {
    alert('hello');
})

元素的隐藏和显示

改变元素的宽和高（带动画效果）

show(speed)：显示
hide(speed)：隐藏
toggle(speed) 等价于 show + hide：显示的隐藏，隐藏的显示

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>
<body>
    <button id="btn1">显示</button>
    <button id="btn2">隐藏</button>
    <button id="btn3">切换</button>
    <div></div>
?
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
            $("div").show('slow');
        });
        $("#btn2").click(function(){
            // fast:快速的
            // slow:缓慢的
            // 毫秒：自定义
            $("div").hide(2000); 
        });
        $("#btn3").click(function(){
            $("div").toggle(1000);
        });
    </script>
</body>

改变元素的高（拉伸效果）

slideDown(speed)：显示
slideUp(speed)：隐藏
slideToggle(speed) 等价于 slideDown + slideUp

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

<script>
    $("#btn1").click(function(){
        // 向下伸展
        $("div").slideDown(1000);
    });
    $("#btn2").click(function(){
        // 向上收缩
        $("div").slideUp(1000);
    });
    $("#btn3").click(function(){
        // 切换
        $("div").slideToggle(1000);
    });
</script>

不改变元素的大小（淡入淡出效果）

fadeIn(speed) 显示
fadeOut(speed) 隐藏
fadeToggle(speed) 等价于 fadeIn + fadeOut 动画
fadeTo(speed, 透明度) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

<script>
    $("#btn1").click(function(){
        // 显示：映入眼帘
        $("div").fadeIn(1000);
    });
?
    $("#btn2").click(function(){
        // 隐藏：淡出我的视线
        $("div").fadeOut(1000);
    });
?
    $("#btn3").click(function(){
        // 切换
        $("div").fadeToggle(1000);
    });
?
    $("#btn4").click(function(){
        // 1 秒内变成 50% 的透明度
        $("div").fadeTo(1000,0.5);
    });
</script>

链

链是允许在同一个元素上在一条语句中运行多个 jQuery 方法，可以把动作/方法链接在一起。

例如：点击一次按钮，让 div 完成 4 个指定动作：

背景变粉
字体变绿
向上收缩
向下拉伸

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
        color:white;
        font-size: 3em;
    }    
</style>
<body>
    <button>试试</button>
    <div>hello</div>
?
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            $("div").css("background-color","pink").css("color","green").slideUp(1000).slideDown(1000);
        });
    </script>
</body>

DOM 和 CSS 的操作

属性函数

attr("属性") 获得元素的属性值。

attr("属性", "新值") 修改元素的属性值。

attr(样式参数) 样式参数可以写成 json 格式。

<body>
    <button id="btn1">点我试试</button>
    <hr>
    <img src="img/1.jpg" title="风景图" width="300">
?
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
            $("img").attr("src","img/2.jpg");
            $("img").attr("title","高清风景图");
            $("img").attr({width:"200",height:"200"});
        });
    </script>
</body>

val() 获得表单元素中的 value 值

val("x") 修改表单元素中的 value 值

html() 获得元素中的内容（标签 + 文本）

html("x") 修改元素中的内容（标签 + 文本）

text() 获得元素中的文本

text("x") 修改元素中的文本

<button>试试</button>
<hr>
<input id="username">
?
<div>
    <h1><i>中国加油</i></h1>
</div>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // input 框中的值
        alert($("input").val());
        // 修改 input 框中的值
        $("input").val("66666");
        // 获得 div 中的内容（包含标签信息）
        alert($("div").html());
        // 获得 div 中的内容（不包含标签信息，只包含文本内容）
        alert($("div").text());
        // 修改 div 中的内容（全部内容都覆盖）
        $("div").text("祖国万岁！");
    });
</script>

样式函数

css("属性") 获得该属性值

css("属性", "值") 设置属性的值

css({json}) 设置多个属性的值

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>试试</button>
    <hr>
    <div></div>
?
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            // 获取 css 属性，width 的值
            var w=$("div").css("width");
?
            // 一个键值对
            $("div").css("background-color","pink");
?
            // 链式编程
            $("div").css("background-color","pink").css("border-radius","50%");
?
            // json 为参数
            $("div").css({
                opacity:"0.4",
                background:"orange",
                borderRadius:"50%"
            });
        });
    </script>
</body>

width() 获得元素的宽度

width(number) 修改元素的宽度

height() 获得元素的高度

height(number) 修改元素的高度

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>试试</button>
    <hr>
    <div></div>
?
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            //（无参）获取宽度
            var w=$("div").width();
            //（无参）获取高度
            var h=$("div").height();
            alert("宽:"+w+"px，高:"+h+"px");
            //（传参）修改宽度
            $("div").width("300");
            //（传参）修改高度
            $("div").height("300");
        });
    </script>
</body>

类样式函数

addClass() 为元素添加类样式

removeClass() 将元素的类样式移除

toggleClass() 样式的切换；有->无，无->有

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: #000;
    }
    .a{
        background: palevioletred;
        border-radius: 50%;
    } 
    .b{
        border:5px dashed darkcyan;
        opacity: 0.6;
    }
    .cn{
        background: #000;
        color: #FFF;
        font-family: 字魂49号-逍遥行书;
    }
</style>
<body>
    <button id="btn1">试试</button>
    <button id="btn2">取消透明度</button>
    <button id="btn3">样式切换</button>
    <hr>
    <div></div>
    <h1>中华人民共和国</h1>
?
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
            // $("div").addClass("a");
            $("div").addClass("a b");
        });
?
        $("#btn2").click(function(){
            $("div").removeClass("b");
        });
?
        $("#btn3").click(function(){
            $("h1").toggleClass("cn");
        });
    </script>
</body>

节点操作

<input>
<button id="test">测试</button>
?
<ul>
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
</ul>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("#test").click(function(){
        var bookname=$("input").val();
        // 通过工厂函数，创建新的 li 节点
        var newli=$("<li>"+bookname+"</li>");
?
        /* 添加子节点 */
        // newli 添加到 ul 后面
        $("ul").append(newli);
        // newli 添加到 ul 后面
        newli.appendTo("ul");
        // newli 添加到 ul 前面
        $("ul").prepend(newli);
        newli.prependTo("ul");
?
        /* 添加同辈节点 */
        // newli 添加到最后的 li 的后面
        $("li:last").after( newli );
        newli.insertAfter("li:last");
        //newli 添加到最后的 li 的前面
        $("li:last").before(newli);
        newli.insertBefore("li:last");
?
        /* 替换节点 */
        // 将第二个 li 替换成 newli
        $("li:eq(1)").replaceWith(newli);
        newli.replaceAll( "li:eq(1)" );
?
        /* 复制节点 */
        // 复制第一个 li，并插入到最后一个 li 的后面
        $("li:first").clone().insertAfter("li:last");
?
        /* 删除节点 */
        // 清空了节点上的文本（节点并没有消失）
        $("li:eq(1)").empty();
        // 删除节点
        $("li:eq(1)").remove();
    });
</script>

遍历节点

祖先元素

用于向上遍历 DOM 树的方法

parent() 返回被选元素的直接父元素，仅仅是上一级
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

<p><button>测试</button></p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 找爸爸
        var x=$("b").parent().html();
        // 找祖宗 ul
        var x=$("b").parents("ul").html();
        // 找祖宗 body
        var x=$("b").parents("body").html();
        alert( x );
    });
</script>

同辈元素

next() 获取紧邻匹配元素之后的元素

prev() 获取紧邻匹配元素之前的元素

siblings([selector]) 获取位于匹配元素前面和后面的所有同辈元素

<button>测试</button>
<p>p1</p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>
<p>p2</p>
<p id="x">p3</p>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 紧邻的下一个元素
        var x=$("ul").next().text();
        // 紧邻的上一个元素
        var x=$("ul").prev().text();
        // 所有的兄弟中 id=x 的
        var x=$("ul").siblings("#x").text();
        // ul 的所有兄弟：1 个 button，3 个 p，2 个 script
        var arr=$("ul").siblings();
        for(var i=0 ;i< arr.length ;i++){
            alert(arr[i]);
        }
    });
</script>

后代元素

后代是子、孙、曾孙等等

children([selector]) 方法返回被选元素的所有直接子元素

<button>测试</button>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 所有子节点：a b c
        var x=$("ul").children().text();
        // ul 中的第一个子节点
        var x=$("ul").children("li:first").text();
        alert(x);
    });
</script>

find(选择器) 方法返回被选元素的后代元素，一路向下直到最后一个后代

<button>测试</button>
<ul>
    <li>盘古</li>
    <li>蚩尤</li>
    <li>刑天
        <p>龚工</p>
    </li>
    <h3>祝融</h3>
</ul>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 在 ul 中查找 p 元素，忽略层级
        var x=$("ul").find("p").text();
        // 在 ul 中查找 h3 元素，忽略层级
        var x=$("ul").find("h3").text();
        // 不知道找什么
        var x=$("ul").find().text();
        alert(x);
    });
</script>

元素的过滤

first() 过滤第一个元素

last() 过滤最后一个元素

eq(index) 过滤到下标为 index 的元素

not() 除了什么之外的元素

is() 返回布尔，判断是不是这种元素

<button>测试</button>
<ul>
    <li>盘古</li>
    <li>蚩尤</li>
    <li>刑天</li>
</ul>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 第一个 li
        var x=$("li").first().text();
        // 最后一个 li
        var x=$("li").last().text();
        // 下标为 1 的 li
        var x=$("li").eq(1).text();
        // 除了下标为 1 的其余所有 li
        var x=$("li").not("li:eq(1)").text();
        // 返回布尔型，li 的父节点是不是 ul
        var x=$("li").parent().is("ul");
        alert(x);
    });
</script>

案例

手风琴特效

<style>
    dd {
        /* 隐藏元素 */
        display: none;
    }
</style>
<body>
    <nav>
        <header>网站</header>
        <ul>
            <li>
                <dl>
                    <dt>求职</dt>
                    <dd>1.简历</dd>
                    <dd>2.面试</dd>
                    <dd>3.入职</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>教育</dt>
                    <dd>1.看视频</dd>
                    <dd>2.做作业</dd>
                    <dd>3.在线辅导</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>创业</dt>
                    <dd>1.帮助小企业</dd>
                    <dd>2.头脑风暴</dd>
                    <dd>3.赚钱啦</dd>
                </dl>
            </li>
        </ul>
    </nav>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("nav dt").click(function(){
            // 所有的 dd 全部都闭合上，除了自己的兄弟
            $("dd").not($(this).siblings()).slideUp(500);
            // 自己的兄弟进行切换，显示闭合上，闭合的显示出来
            $(this).siblings().slideToggle(500);
        });
    </script>
</body>

购物车结算

<style>
    .minus,.plus{
        border:1px solid #999;
        /* 超链接 a 是行内元素 */
        /* 转换成行内块显示，才能改变宽和高 */
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        text-decoration: none;
    }
</style>
<body>
    <table border="1" cellspacing="0" width="400">
        <tr>
            <td>商品编号</td>
            <td>名称</td>
            <td>单价</td>
            <td>数量</td>
            <td>总价</td>
        </tr>
        <tr>
            <td>1</td>
            <td>炸香肠</td>
            <td>3</td>
            <td>
                <a href="#" class="minus">-</a>
                <span>1</span>
                <a href="#" class="plus">+</a>
            </td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>王八</td>
            <td>10</td>
            <td>
                <a href="#" class="minus">-</a>
                <span>1</span>
                <a href="#" class="plus">+</a>
            </td>
            <td>10</td>
        </tr>
        <tr>
            <td>3</td>
            <td>恐龙</td>
            <td>1000</td>
            <td>
                <a href="#" class="minus">-</a>
                <span>1</span>
                <a href="#" class="plus">+</a>
            </td>
            <td>1000</td>
        </tr>
    </table>
    <p style="width: 400px; text-align: right;">
        总价：<b style="color:red;">111</b> <button>提交订单</button>
    </p>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/car.js"></script>
</body>

car.js

$(".plus").click(function(){
    // 获得原来的商品数量
    var i=$(this).prev().text();
    i++;
    // 现在的商品数量
    $(this).prev().text(i);
    // 商品单价
    var price=$(this).parent().prev().text();
    // 商品总价
    var total=i*price;
    // 现在商品的总价
    $(this).parent().next().text(total);
    getTotal();
});
?
?
$(".minus").click(function(){
    var i=$(this).next().text();
    i--;
    // 数量已经是 0 了，询问用户是否删除该商品
    if(i==0){
        if( confirm("是否删除该商品？") ){
            $(this).parents("tr").remove();
        }
    }else{
        $(this).next().text(i);
        // 商品单价
        var price=$(this).parent().prev().text();
        // 商品总价
        var total=i*price;
        // 现在商品的总价
        $(this).parent().next().text(total);
    }
    getTotal();
});
?
// 计算所有商品的总价
// function getTotal(){
//     // 总价钱
//     var sum=0;
//     var arr=$("tr:not(tr:first)").find("td:last");
//     for(var i=0;i<arr.length ; i++){
//        sum +=Number(arr[i].innerHTML) ;
//     }
//     $("b").text(sum);
// }
?
function getTotal(){
    // 总价钱
    var sum=0;
    $("tr:not(tr:first)").find("td:last").each(function(){
        sum +=Number($(this).text());
    });
    $("b").text(sum);
}

想了解更多，欢迎关注我的微信公众号：Renda_Zhang

query 操作DOM元素(1)

.clone()

　　创建一个匹配的元素集合的深度拷贝。

　　.clone([withDataAndEvents])

　　　　withDataAndEvents (默认为false)

　　　　　　一个Boolean 表示是否会复制元素上的时间处理函数。

　　.clone([withDataAndEvents][,deepwithDataAndEvents])

　　　　withDataAndEvents (默认为false)

　　　　　　一个Boolean 表示是否会复制元素上的时间处理函数。

　　　　deepwithDataAndEvents

　　　　　　一个布尔值，指示是否对时间处理程序和克隆的元素的所有子元素的数据应该被复制。默认情况下它的值相匹配的第一个参数的值。

　　　　　　$(".hello").clone().appendTo(".goodbye")

　　　　　　效果： <div class="hello">Hello</div>

　　　　　　　　Goodbye

　　　　　　　　<div class="hello">Hello</div>

　　　　　　</div>

.wrap()

　　在集合中匹配的每个元素周围包裹一个HTML 结构。

　　.wrap([wrappingElement])

　　　　wrappingElement 一个选择器，元素，html字符 jq 对象指定的html结构环绕包裹的匹配元素。

.wrap(function)

　　　　function 一个回调函数，返回用于包裹匹配元素的HTML内容或对象。

　　　　　　<div class="inner">Hello</div>

　　　　　　<div class="inner">Goodbye</div>

</div>

$('.inner').wrap('<div class="new" />');

结果：

　　　　　　　　<div class="inner">Hello</div>

　　　　　　</div>

　　　　　　　　<div class="inner">Goodbye</div>

　　　　　　</div>

$('inner').wrap(function(){

return '<div class="'+$(this).text()+'"/>'

})

　　　　　　　　<div class="inner">Hello</div>

　　　　　　</div>

　　　　　　　　<div class="inner">Goodbye</div>

　　　　　　</div>

.wrapAll()

在集合中所有的匹配元素的外褒一个HTML结构。

.wrapAll(wrappingElement)

wrappingElement

一个选择器，元素，html字符。

　　　　　　<div class="inner">Hello</div>

　　　　　　<div class="inner">Goodbye</div>

</div>

$('.inner').wrapAll('<div class="new" />');

　　　　　　　　　　<div class="inner">Hello</div>

　　　　　　　　　　<div class="inner">Goodbye</div>

　　　　　　　　</div>

.wrapAll(function)

function

一个回调函数。index 表示匹配元素在集合中的索引的位置。this 指向集合中的当前位置。

$("p").wrapAll($(".doublediv"));

在所有的"p"元素

.wraplnner()

在匹配元素里的内容外包一层结构。

.wraplnner(wrappingElement)

wrappingElement 用来包在匹配元素的内容外面的HTML片段选择表达式，jquery对象 DOM 元素。

　　　　　　<div class="inner">Hello</div>

　　　　　　<div class="inner">Goodbye</div>

</div>

$('.inner').wrapInner('<div class="new" />');

　　　　　　　　　　<div class="new">Hello</div>

　　　　　　　　</div>

　　　　　　　　　　<div class="new">Goodbye</div>

　　　　　　　　</div>

.wraplnner(function(index))

function(index)

function 一个返回HTML结构的函数，用来包裹在匹配元素的外面 this 指匹配中的元素。

$("P").wrapInner(document.createElement("b"));

.append()

在每个匹配元素里面的末尾处插入参数内容。

.append(content[,content])

content DOM 元素 DOM 数组，HTML字符串 jquery 对象。

content 一个或多个DOM 元素，元素数组，HTML字符串。

<h2>Greetings</h2>

　　　　　　<div class="inner">Hello</div>

　　　　　　<div class="inner">Goodbye</div>

</div>

$('.inner').append('<p>Test</p>');

效果：

<h2>Greetings</h2>

　　　　　　　　　　Hello

　　　　　　　　</div>

　　　　　　　　　　Goodbye

　　　　　　　　</div>

.append(function(index,html))

function(index,html)

返回一个html 字符串，DOM 元素，对象函数。this 指向元素集合中的当前元素。

<p>I would like to say: </p>

$('p').append(document.createTextNode("Hello"))

效果：

<p>I would like to say: Hello</p>

.appendTo()

将匹配的元素插入到目标元素的最后面

.appendTo(target)

target 一个选择符，元素，HTML 字符串，DOM 元素数组。

　　　　　　<div class="inner">Hello</div>

　　　　　　<div class="inner">Goodbye</div>

</div>

$('<p>Test</p>').appendTo('.inner');

　　　　　　　　Hello

　　　　　　</div>

　　　　　　　　Goodbye

　　　　　　</div>

.html()

获取集合中第一个匹配元素的HTML 内容或设置每一个HTML内容。

.html()

这个方法不接收任何元素。

　　　　　　<div class="demo-box">Demonstration Box</div>

</div>

$('div.demo-container').html();

获得到的结果

<div class="demo-box">Demonstration Box</div>

.html(htmlString)

htmlString 用来设置每一个匹配元素的HTML代码

.html(function(index oldHTML))

用来返回设置HTML内容的一个函数

　　　　　　<div class="demo-box">Demonstration Box</div>

</div>

$('div.demo-container').html('<p>All new content. <em>You bet!</em></p>');

效果如下：

　　　　　　　　<p>All new content. <em>You bet!</em></p>

</div>

.prepend()

将参数内容插入到每个匹配元素的前面。（元素内容）

.prepend(content[,content])

DOM 元素，元素数组，HTML 字符串对象。

　　　　　　　　<div class="inner">Hello</div>

　　　　　　　　<div class="inner">Goodbye</div>

</div>

$('.inner').prepend('<p>Test</p>');

效果：

　　　　　　　　　　Hello

　　　　　　　　</div>

　　　　　　　　　　Goodbye

　　　　　　　　　　</div>

.prepend(function(index.html))

一个返回HTML字符串，DOM元素，jQuery对象的函数，该字符串用来插入到匹配元素的开始处

$("p").prepend(document.createTextNode("Hello "));

.prependTo()

将所有的元素插入到目标元素前面（元素内）。

.prependTo(target)

target 一个选择器, DOM元素，元素数组，HTML字符串，或者jQuery对象，将被插入到匹配元素前的内容。

　　　　　　<div class="inner">Hello</div>

　　　　　　<div class="inner">Goodbye</div>

</div>

$('<p>Test</p>').prependTo('.inner');

效果：

　　　　　　　　Hello

　　　　　　</div>

　　　　　　　　Goodbye

　　　　　　</div>

.text()

得到匹配元素集合中每个元素的合并文本。包括他们的后代。

.text() 这个方法不接受任何参数。

　　　　<div class="demo-box">Demonstration Box</div>

　　　　<ul>

　　　　</ul>

　　</div>

　　$('div.demo-container').text()

　　效果如下：

　　　　Demonstration Box list item 1 list item 2

　　.text(textString)

　　　　设置匹配元素集合中每个元素的文本内容

　　.text(text)

　　　　用于设置匹配元素内容的文本。

　　.text( function(index, text) )

　　　　用来返回设置文本内容的一个函数。

　　$('div.demo-container').text('<p>This is a test.</p>');

　　.text() 方法不能使用在 input 元素上。输入的文本需要使用 .val() 方法。

在线咨询

上一篇：用Vue制作穿梭框
下一篇：华三防火墙IPS、AV、ACG特征库授权Licens

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端面试题《JQuery》

.jQuery库中的$()是什么？

2.网页上有5个div元素，如何使用 jQuery来选择它们？

3.$(this) 和 this 关键字在 jQuery 中有何不同？

4.使用CDN加载 jQuery库的主要优势是什么？

5.jQuery中的方法链是什么？使用方法链有什么好处？

6.如何将一个HTML元素添加到DOM树中的？

7.说出jQuery中常见的几种函数以及他们的含义是什么?

8.jQuery 能做什么？

9.jquery中的选择器和CSS中的选择器有区别吗？

10.jQuery的特点都有什么？

ntroduction to jQuery

jQuery Function

jQuery Advantages

jQuery Usage

基本的语法介绍

jQuery 对象与 DOM 对象

选择器

基本选择器

层次选择器

属性选择器

过滤选择器

事件

鼠标事件

键盘事件

表单事件

鼠标悬停复合事件

连续点击复合事件

事件的动态绑定

元素的隐藏和显示

改变元素的宽和高（带动画效果）

改变元素的高（拉伸效果）

不改变元素的大小（淡入淡出效果）

链

DOM 和 CSS 的操作

属性函数

样式函数

类样式函数

节点操作

遍历节点

祖先元素

同辈元素

后代元素

元素的过滤

案例

手风琴特效

购物车结算

query 操作DOM元素(1)

您的项目需求