JQuery详解

卿...

已于 2024-04-02 23:44:51 修改

阅读量997

点赞数

文章标签： jquery javascript 前端

于 2022-12-22 23:23:59 首次发布

本文链接：https://blog.csdn.net/weixin_45845391/article/details/126531493

版权

JQuery 介绍

JQuery由美国人John Resig（约翰莱西格）于2006年创建
JQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less ， do more
实现隔行变色，JavaScript要循环加判断，而JQuery只需要一句关键代码

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

JQuery能做什么

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

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

其实，JQuery和JavaScript之间的关系，可以理解为“成语” 和“白话文”之间的关系。成语是对白话文的高度压缩，而JQuery也是对JavaScript的高度压缩库

JQuery的优势

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

JQuery下载

进入JQuery官网：http://jQuery.com

JQuery的使用

jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突
在页面中使用传统引入js文件的方式引入即可

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

基本语法介绍

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

说明：

工厂函数 $():将DOM对象转化为jQuery对象
选择器selector：获取需要操作的DOM元素（用法基本与CSS一致）
方法action():jQuery中提供的方法，其中包括绑定事件处理的方法"$"等同于“JQuery”
例如：

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

jQuery对象与DOM对象

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

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

想混用，要转换

DOM对象转JQuery对象

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

JQuery对转DOM对象

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

选择器

基本选择器

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

在这里插入图片描述

层次选择器

在这里插入图片描述

<!Doctype html>
<html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=divice-width,initial-scale=1.0">
    <title>Document</title>
</html>

<body>

    <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");  //子代选择器，只负责子级
		
		$("#x+h3").css("color","red");  //相邻选择器，下一个紧邻兄弟h3
		
		$("#x~h3").css("color","red");  //同辈选择器，下面的所有兄弟h3
		
    </script>
</body>

属性选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width , initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<a href="http://www.baidu.com">百度网</a>
		<a href="http://www.sina.com.cn">新浪网</a>
		<a href="http://www.163.com">网易</a>
		<p href="x">hhh</p>
		<p href="x" title="x">hhh2</p>
		<script src="./jquery-3.4.1.min.js"></script>
		
		<script>
		   // $("[href]").css("color","red");   //选取拥有href属性的元素
		   
		   //$("[href='x']").css("color","red");   //选取拥有href = x属性的元素
		   
		   // $("[href!='x']").css("color","red");   //选取拥有href 不等于 x属性的元素
		   
		   // $(a"[href!='x']").css("color","red");   //选取a标签中href 不等于 x属性的元素
		   
		   // $("[href ^= 'www']").css("color","red");   //选取拥有href属性以www开头的元素
		   
		   // $("[href $= 'com']").css("color","red");   //选取拥有href属性以com结尾的元素
		   
		   // $("[href *= 'a']").css("color","red");   //选取拥有href 属性包含a的元素
		   
		   $("p[href][title='x']").css("color","red");   //选取拥有href属性 和 title属性，并且title=x的p元素
		</script>
		
	</body>
</html>

过滤选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		
		<h2>修仙小说</h2>
		<ul>
			<li>凡人修仙传</li>
			<li>遮天</li>
			<li>神墓</li>
			<li>残袍</li>
			<li>大主宰</li>
		</ul>
		
		<script src="jquery-3.4.1.min.js"></script>
		<script>
		
		   // $("li:first").css("color","red");   //第一个li
		   
		   // $("li:last").css("color","red");   //最后一个li
		   
		   // $("li:even").css("color","red");   //偶数行li
		   
		   // $("li:odd").css("color","red");   //奇数行li
		   
		   // $("li:eq(2)").css("color","red");   //下标为2的li
		   
		   // $("li:gt(1)").css("color","red");   //下标大于1的li
		   
		   $("li:lt(2)").css("color","red");   //下标小于2的li
		   
		</script>
	</body>
</html>

事件

鼠标事件

鼠标事件是当用于在文档上移动或单击鼠标时而产生的事件，常用的鼠标事件有：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		
		<img src="img/pic_four.png" width="300" />
		<img src="img/pic_four.png" width="300" />
		<img src="img/pic_four.png" width="300" />
		<script src="jquery-3.4.1.min.js"></script>
		
		<script>
		
		  $("img").click(function(){
			  //点击一下换照片
			  $(this).attr("src","img/pic_five.png");   //this就是事件触发的源头
		  });
		  
		  
		  $("img").mouseover(function(){
			  $(this).css("border","2px solid red");  //移动到元素上
		  });
		  
		  
		  $("img").mouseout(function(){
		  	 $(this).css("border","2px solid white");  //离开元素
		  });
		</script>
	</body>
</html>

键盘事件

用户每次按下或释放键盘上的键时都会发生事件，常用的键盘事件有：
在这里插入图片描述

表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：

方法	描述
focus()	触发或将函数绑定到指定元素的focus事件
blur()	触发或将函数绑定到指定元素的blur事件

<!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>
</head>
<body>
    <form action="">
        <p>账号：<input id = "a" value="请输入账号..."></p>
        <p>电话：<input id = "b"></p>
    </form>

    <script src="./jquery.min.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script> -->

    <script>
        // 获得焦点（激活/点击一下)
        $("#a").focus(function(){
            $(this).val("");
        });

        // 失去焦点（未激活/未点击）
        $("#a").blur(function(){
            $(this).val("请输入账号...");
        });
    </script>

    
</body>
</html>

鼠标悬停复合事件

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

<!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>
</head>
<body>
    <img src="./images/1.jpg" width="400px" height="300px">

    <script src="./jquery.min.js"></script>
    <script>
        $("img").hover(
            function(){
                $(this).css("border","5px solid red");
            },
            function(){
                $(this).css("border","5px solid white");
            }
        );
    </script>
</body>
</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>
 </head>
 <body>
    <h2>修仙小说</h2>
    <ul>
        <li>凡人修仙传</li>
        <li>遮天</li>
        <li>神墓</li>
        <li>残袍</li>
        <li>大主宰</li>
    </ul>

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

    <script>
        $("h2").click(function(){
            $("ul").toggle();
        });
    </script>
 </body>
 </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>
</head>
<body>
    <h2>点我试试</h2>

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

    <script>
        $("h2").on("click mouseover",function(){
            alert("点我或移动上来");
        })
    </script>
</body>
</html>

元素的隐藏和显示

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

show(speed)
hide(speed)
toggle(speed)等价于show + hide :显示的隐藏，隐藏的显示
可选的speed参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast”或毫秒

<!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>
</head>
<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="jquery.min.js"></script>
    <script>
        // fast：快速的
        // slow：缓慢的
        // 毫秒：自定义
        $("#btn2").click(function(){
            $("div").hide('fast');
        });

        $("#btn1").click(function(){
            $("div").show('slow');
        });

        $("#btn3").click(function(){
            $("div").toggle('slow');
        });
    </script>
</body>
</html>

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

slideDown(speed)
slideUp(speed)
slideToggle(speed)等价于slideDown + slideUp
可选的speed参数规定隐藏/显示的速度，可以取以下值:“slow” 、 “fast”或毫秒

<!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>
</head>
<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="jquery.min.js"></script>
    <script>
        $("#btn2").click(function(){
            $("div").slideUp('fast');
        });

        $("#btn1").click(function(){
            $("div").slideDown('slow');
        });

        $("#btn3").click(function(){
            $("div").slidetoggle('slow');
        });
    </script>
</body>
</html>

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

fadeIn（speed）显示
fadeOut（speed）隐藏
fadeToggle(speed)等价于fadeIn+fadeOut动画
fadeTo(speed，透明度)方法允许渐变为给定的不透明度（值介于0与1之间）
可选的speed参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<!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>
</head>
<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>
<body>
    <button id="btn1"> 显示</button>
    <button id="btn2">隐藏</button>
    <button id="btn3">切换</button>
    <button id="btn4">透明</button>


    <div></div>

    <script src="jquery.min.js"></script>
    <script>
        $("#btn2").click(function(){
            $("div").fadeOut('fast');
        });

        $("#btn1").click(function(){
            $("div").fadeIn('slow');
        });

        $("#btn3").click(function(){
            $("div").fadeToggle('slow');
        });

        $("#btn4").click(function(){
            $("div").fadeTo(1000,0.5);
        });
    </script>
</body>
</html>

链

链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起。
例如：点击一次按钮，让div完成4个指定动作。

1.背景变红
2.字体变绿
3.收缩
4.拉伸

<!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>
</head>

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
        color: white;
        font-size: 3em;
    }
</style>
<body>
    <button>试试</button>
    <div>hello</div>
    <script src="jquery.min.js"></script>

    <script>
        $("button").click(function(){
            $("div").css("background-color","red").css("color","green").slideUp(1000).slideDown(1000);
        });
    </script>
</body>
</html>

DOM 和 CSS的操作

属性函数

attr(“属性”); 获得元素的属性值
attr(“属性”,“新值”); 修改元素的属性值
attr(样式参数) ：样式参数可以写成json格式
val(); 获得表单元素中的value值
val(“x”)修改表单元素中的value值
html();获得元素中的内容（标签+文本）
html(“x”)修改元素中的内容(标签+文本)
text();获得元素中的文本
text(“x”)修改元素中的文本

<!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>
</head>
<body>
    <button>试试</button>
    <hr>
    <input id="username">

    <div>
        <h1><i>11111</i></h1>
    </div>

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

    <script>
        $("button").click(function(){
        //    alert($("input").val());   //input框中的值
        // $("input").val("哈哈哈哈");  //修改input框中的值

        // alert($("div").html());  //获得div中的内容（包含标签信息）
        // alert($("div").text());//获得div中的内容（不包含标签信息，只包含文本）

        // $("div").text("祖国万岁"); //修改div中的内容（全部内容都覆盖）
        });
    </script>
</body>
</html>

样式函数

css(“属性”);获得该属性值
css(“属性”,“值”);设置属性的值
css({json});设置多个属性的值

<!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>
</head>

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>试试</button>
    <hr>

    <div></div>

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

    <script>
        $("button").click(function(){
            // var w = $("div").css("width");  //获得css属性，width的值
            // alert(w);
            // 1.一个键值对
            // $("div").css("background-color","pink");
            
            // 2.链式编程
            // $("div").css("background-color","pink").css("border-radius","50%");

            // 3.json为参数
            $("div").css({
                opacity:"0.4",
                background:"orange",
                borderRadius:"50%"
            });
        });
    </script>
</body>
</html>

width();获得元素的宽度
height();获得元素的高度
height(number);修改元素的高度

<!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>
</head>

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>

<body>
    <button>试试</button>
    <hr>

    <div></div>

    <script src="jquery.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>
</html>

类样式函数

addClass();为元素添加类样式
removeClass();将元素的类样式移除
toggleClass();样式的切换（有->无，无->有）

<!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>
</head>

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: #000;
    }

    .a{
        background-color: palevioletred;
        border-radius: 50%;
    }

    .b{
        border: 5px dashed darkcyan;
        opacity: 0.6;
    }

    .cn{
        background-color: #000;
        color: #fff;
        font-family: 楷书;
    }
</style>
<body>
    <button id="bnt1">试试</button>
    <button id="bnt2">取消透明度</button>
    <button id="bnt3">样式切换</button>
    <hr>
    <div></div>
    <h1>哈哈哈</h1>
    <script src="jquery.min.js"></script>

    <script>
        $("#bnt1").click(function(){
            // $("div").addClass("a");

            $("div").addClass("a b"); 
        });

        $("#bnt2").click(function(){
            $("div").removeClass("b");
        });

        $("#bnt3").click(function(){
            $("h1").toggleClass("cn");
        });
    </script>
</body>
</html>

节点操作

创建节点
工厂函数$()用于获取或创建节点
插入节点
插入子节点
插入同辈节点

在这里插入图片描述

替换节点
replaceWith()
replaceAll()
复制节点
clone()
删除节点
remove()删除整个节点
empty()清空节点内容

<!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>
        li:hover {
            cursor: pointer;
        }
    </style>
</head>
<body>

    <input id="text"><button id = "add">添加</button>
    <ul>
        <li onlick='aaa()'>三国演义</li>
        <li>红楼梦</li>
        <li>西游记</li>
    </ul>
    
    <script src="jquery.min.js"></script>

    <script>
        $("#add").click(function(){
            console.log("aaa");
            var bookname = $("#text").val();
            var newli = $("<li>" + bookname +"</li>");//通过工厂函数，创建新的li节点

            // 添加子节点
            // $("ul").append(newli);  //newli添加到ul后面
            // newli.appendTo("ul");  //newli添加到ul后面

            // $("ul").prepend(newli);  //newli添加到ul前面
            // newli.prependTo("ul");//newli添加到ul前面

            // 添加同辈节点
            // $("li:last").after(newli);//newli添加到最后的li后面
            // newli.insertAfter("li:last");

            // $("li:last").before(newli); //newli添加到最后的li的前面
            // newli.insertBefore("li:last");

            // 替换节点
            // $("li:eq(0)").replaceWith(newli);  //将第一个li替换为newli
            // newli.replaceAll("li:eq(0)");

            // 复制节点
            // $("li:first").clone().insertAfter("li:last");//复制第一个li，并插入到最后一个li后面

            // 删除节点
            // $("li:eq(0)").empty();//清空节点上的文本(节点并没有消失)

            $("li:eq(1)").remove();  //删除节点

        });
    </script>
</body>
</html>

遍历节点

祖先元素

用于向上遍历DOM树的方法

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

<!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>
</head>
<body>
    
    <p><button>测试</button></p>

    <ul>
        <li>a</li>
        <li><b>b</b></li>
        <li>c</li>
    </ul>

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

    <script>
        $("button").click(function(){
             // var x = $("b").parent().html();
            // var x = $("b").parents("ul").html();
            var x = $("b").parents("body").html();
            alert(x);
        });
    </script>
</body>
</html>

同辈元素

next()获取紧邻匹配元素之后的元素
prev()获取紧邻匹配元素之前的元素
siblings()获取位于匹配元素前面和后面的所有同辈元素

<!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>
</head>
<body>
    <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="jquery.min.js"></script>

    <script>
        $("button").click(function(){
            // var x = $("ul").next().text();  //紧邻的下一个元素
            // var x = $("ul").prev().text();   //紧邻的上一个元素
            // var x = $("ul").siblings("#x").text();//所有的兄弟中，ID= x的
            var arr = $("ul").siblings();
            for(var i = 0 ; i < arr.length;i++){
                alert(arr[i]);
            }
            alert(x);
        }); 
    </script>
</body>
</html>

后代元素

后代是子、孙、曾孙等等

children()方法返回被选元素的所有直接子元素，“孩子”

<!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>
</head>
<body>
    <button>测试</button>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

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

    <script>
        $("button").click(function(){
        //    var x = $("ul").children().text();
        var x = $("ul").children("li:first").text();

      
           alert(x);
        });
    </script>
</body>
</html>

find（选择器）方法返回被选元素的后代元素，一路向下知道最后一个后代

<!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>
</head>
<body>
    <button>测试</button>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c
            <p>d</p>
        </li>
        <h3>e</h3>
    </ul>

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

    <script>
        $("button").click(function(){
        //    var x = $("ul").find("p").text();
        // var x = $("ul").find("h3").text();
        var x = $("ul").find().text();
           alert(x);
        });
    </script>
</body>
</html>

元素的过滤

first():过滤第一个元素
last():过滤最后一个元素
eq(index):过滤到下标为index的元素
not():除了什么之外的元素
is():返回布尔，判断是不是这种元素

<!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>
</head>
<body>
    <button>测试</button>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

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

    <script>
        $("button").click(function(){
        // var x = $("li").first().text();//第一个li
        // var x = $("li").last().text();//最后一个li
        // var x = $("li").eq(1).text();//下标为1的li
        // var x = $("li").not("li:eq(1)").text();//除了下标为1的其余所有li
        var x = $("li").parent().is("ul"); //返回布尔型，li的父节点是不是ul
           alert(x);
        });
    </script>
</body>
</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>
</head>

<style>
    dd{
        display: none;
    }
</style>
<body>
    <nav>
        <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.24小时在线辅导</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>3W创业</dt>
                    <dd>1.帮助小企业</dd>
                    <dd>2.头脑风暴</dd>
                    <dd>3.赚钱啦</dd>
                </dl>
            </li>
        </ul>
    </nav>


    <script src="jquery.min.js"></script>
    <script>
        $("nav dt").click(function(){
            $("dd").not($(this).siblings()).slideUp(500);
            $(this).siblings().slideToggle(500);
        });
    </script>
</body>
</html>

购物车结算

$(".jia").click(function(){
    var i = $(this).prev().text();
    i++ ;
    $(this).prev().text(i);

    var price = $(this).parent().prev().text();
    var zong = i * price;
    $(this).parent().next().text(zong);
    getTotal();
});

$(".jian").click(function(){
    var i = $(this).next().text();
    i-- ;

    if(i == 0){
        if(confirm("是否删除该商品？")){
            $(this).parents("tr").remove();
        }
    }else{
        $(this).next.text(i);
        var price = $(this).parent().prev().text();
        var zong = i * price;
        $(this).parent().next().text(zong);
    }
    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);
}

<!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>
</head>
<style>
    .jian{
        border: 1px solid #999;
        display: inline-block;  /* 超链接a是行内元素，只能转换成行内块元素，才能改变宽和高 */
        width: 20px ;
        height: 20px;
        text-align: center;
        text-decoration: none;
    }

    .jia{
        border: 1px solid #999;
        display: inline-block;  /* 超链接a是行内元素，只能转换成行内块元素，才能改变宽和高 */
        width: 20px ;
        height: 20px;
        text-align: center;
        text-decoration: none;
    }
</style>
<body>
    <table border="1" cellspacing="0" width="400px">
        <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="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>3</td>
        </tr>

        <tr>
            <td>2</td>
            <td>王八</td>
            <td>10</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>10</td>
        </tr>

        <tr>
            <td>3</td>
            <td>恐龙</td>
            <td>1000</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</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="jquery.min.js"></script>
    <script src="car.js"></script>
</body>
</html>

卿...

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JQuery详解

JQuery能做什么访问和操作DOM元素控制页面样式对页面时间进行处理扩展新的JQuery插件与Ajax技术完美结合JQuery能做到的JavaScript也都能做到，但使用JQuery能大幅度提高开发效率其实，JQuery和JavaScript之间的关系，可以理解为“成语” 和“白话文”之间的关系。成语是对白话文的高度压缩，而JQuery也是对JavaScript的高度压缩库进入JQuery官网：http://jQuery.comjQuery作为一个单独存在的js文件，并不会与其他的js文
复制链接

扫一扫