jQuery基础

最新推荐文章于 2022-02-27 10:59:19 发布
最新推荐文章于 2022-02-27 10:59:19 发布
阅读量906 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bulid_Evolto/article/details/100055600
版权
02.jquery框架下载与导入【应用】
目标

掌握jquery的使用

jquery介绍

是一个js框架，简化js的编写。jquery宗旨：write less do more。

jquery的插件丰富，所谓插件就是利用jquery技术写一个独立效果

使用实现步骤

  1. 下载jquery，官网www.jquery.com

    资源类库中也提供了

    [外链图片转存失败(img-Vo0L29S0-1566640739731)(assets/)]

    不同版本介绍

    jquery提供了大版本1.x，2.x,3.x

    其中1.x支持IE6,7,8浏览器，2.X和3.X不支持IE6,7,8

    每个版本都有2个文件，xx.js是开发版本（非压缩），xx.min.js是生产版本（压缩的版本，推荐使用）

  2. 将js文件导入到项目中js目录下

    [外链图片转存失败(img-dZXp4LPA-1566640739732)(assets/)]

  3. 新建网页，在html页面上导入js文件

  4. 使用jquery代码测试导入是否成功

实现代码

html页面上导入js文件

[外链图片转存失败(img-w8icxcFp-1566640739733)(assets/)]

运行效果

[外链图片转存失败(img-O53V6kX8-1566640739733)(assets/)]

使用jquery常见错误

[外链图片转存失败(img-jbR2jKkT-1566640739734)(assets/)]

解决方案：正确导入jquery文件

小结

  • jquery以后企业中开发使用开发版本还是生产版本？

    使用生产版本（xxxx.min.js），体积小，传输快。
03.jquery与js的区别1-加载事件不同【应用】
目标

掌握jquery与js的加载完成事件的区别

实现代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js和jq区别</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">

    /*
    * 目标：js与jq(jquery)的加载事件区别
    *   1.js的加载完成事件要求每个页面只能有一个，多个的话下面的会覆盖上面的
    *   2.jq的加载完成事件可以有多个，都会运行【推荐使用】
    * */

    //1.js的加载完成事件
    window.onload = function () {
        alert("js加载事件1");  //不能运行
    };

    window.onload = function () {
        alert("js加载事件2");  //会运行
    };

    //2.jq的加载完成事件
    $(function () {
       alert("jq加载事件1");  //会运行
    });

    $(function () {
        alert("jq加载事件2");  //会运行
    });
</script>
小结

  • jquery加载完成事件有什么优势？

    一个页面可以有多个
04.jquery与js的区别2-对象获取与注册事件不同【应用】
目标

掌握获取jquery对象的方式

掌握jquery对象注册事件方式

实现代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js和jq区别</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <input type="button" id="b1" value="我是JS对象">
    <input type="button" id="b2" value="我是JQ对象">
</body>
<script type="text/javascript">
    /*
    * 目标1:js与jq获取对象的区别
    *       js获取对象的语法：document.getElementXXXX(),  简称使用document系列方法获取
    *       jq获取对象的语法：$("选择器"),  简称使用$和选择器获取
    * 目标2：js与jq对象注册事件方式的区别
    *       js对象注册事件语法： js对象.οnclick=function(){...}
    *       jq对象注册事件语法： jq对象.click(function(){...})
    * */

    //使用js对象注册点击事件并弹出按钮的value属性值
    var jsObj = document.getElementById("b1");
    jsObj.onclick = function () {
        //获取value值并弹出
        alert(jsObj.value);  //value属性是js对象的成员
    };

    //使用jq对象注册点击事件并弹出按钮的value属性值
    var jqObj = $("#b2");
    jqObj.click(function () {
        //获取value值并弹出,this是当前事件源按钮的对象
        alert(this.value);  //this是js对象，js对象就有value属性
    });

</script>

运行效果

[外链图片转存失败(img-KKCDBLwA-1566640739734)(assets/)]

小结

  • 如何获取jq对象？

    $("选择器")

  • jq对象如何注册事件?

    jq对象.事件名(function(){...});
05.jquery与js的区别3-jq与js对象之间转换【应用】
疑问

  • 以后我们是使用js对象还是jq对象操作dom？

    以后使用jq对象操作dom, 以后经常会将js对象转换为jq对象，之后再操作DOM
目标

掌握js对象转换为jq对象

转换语法

  1. js对象转换jq对象语法【重要】

    $(js对象) = jq对象

  2. jq对象转换为js对象语法【了解】

    jq对象[0]  或者  jq对象.get(0)

    jq对象理解为类似于一个js数组，通过下标的方式获取里面的元素就是js对象

实现代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js和jq区别</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <input type="button" id="b1" value="我是JS对象">
    <input type="button" id="b2" value="我是JQ对象">
</body>
<script type="text/javascript">


    //使用js对象注册点击事件并弹出按钮的value属性值
    var jsObj = document.getElementById("b1");
    jsObj.onclick = function () {
        //获取value值并弹出

        //JS--》JQ对象【重要】  jq对象获取value的语法：jq对象.val();
        alert($(jsObj).val());

    };

    //使用jq对象注册点击事件并弹出按钮的value属性值
    var jqObj = $("#b2");
    jqObj.click(function () {
        //获取value值并弹出,this是当前事件源按钮的对象

        //JQ--》JS对象
        alert(jqObj[0].value);
    });

</script>

运行效果

[外链图片转存失败(img-x4HwEhKQ-1566640739735)(assets/)]

小结

  • 为什么学习js对象转换为jq对象？

    因为jquery框架对jq对象提供丰富api方法，简化js的操作
06.jQuery的选择器1-基本选择器【应用】
疑问

  1. jq具体简化了js什么操作？

    简化了js的dom操作，对html元素标签的增、删、改、查

  2. 增、删、改、查先学习那个？

    查。

目标

使用jq查询元素对象，根据jq语法知道需要学习选择器

基本选择器语法
基本选择器语法
ID选择器$("#ID")
类选择器$(".类名")
标签选择器$(“标签名”)
实现代码
	<script type="text/javascript">
        // 1) 改变 id 为one的元素的背景色为红色
		$("#b1").click(function () {
			//js操作背景色方式1：js对象.style.backgroundColor="red";
			//js操作背景色方式2：js对象.style="background-color:red";
			//jq操作背景色方式1：jq对象.css("backgroundColor","red");
			//jq操作背景色方式2：jq对象.css("background-color","red");

			$("#one").css("background-color","red");

		});
        // 2) 改变元素名为 <div> 的所有元素的背景色为 红色。
		$("#b2").click(function () {

			$("div").css("background-color","red");

		});

        // 3) 改变 class 为 mini 的所有元素的背景色为 红色
		$("#b3").click(function () {

			$(".mini").css("background-color","red");

		});
    </script>
07.jQuery的选择器2-层级选择器【应用】
层级选择器语法

[外链图片转存失败(img-zqkfXJa4-1566640739735)(assets/)]

实现代码
<script type="text/javascript">
    //1) 改变 <body> 内所有 <div> 的背景色为红色
    $("#b1").click(function () {
        $("body div").css("background-color","red");
    });

    //2) 改变 <body> 内子 <div> 的背景色为 红色
    $("#b2").click(function () {
        $("body>div").css("background-color","red");
    });

    //3) 改变 id为two的下一个div兄弟元素的背景色为红色
    $("#b3").click(function () {
        $("#two+div").css("background-color","red");
    });
</script>
08.jQuery的选择器3-属性选择器【应用】
属性选择器语法

[外链图片转存失败(img-jqLkfqA6-1566640739736)(assets/)]

实现代码
<script type="text/javascript">
        //1) 含有属性title 的div元素背景色为红色
		$("#b1").click(function () {
			$("div[title]").css("background-color","red");
		});

        //2) 属性title值等于test的div元素背景色为红色
		$("#b2").click(function () {
			$("div[title=test]").css("background-color","red");
		});

        //3) 属性title值不等于test的div元素(没有title属性的也将被选中)背景色为红色
		$("#b3").click(function () {
			$("div[title!=test]").css("background-color","red");
		});

        //4) 选取有属性id的div元素，然后在结果中选取属性title值等于“test”的 div 元素背景色为红色
		$("#b4").click(function () {
			$("div[id][title=test]").css("background-color","red");
		});
    </script>
09.jQuery的选择器4-基本过滤选择器【应用】
基本过滤选择器语法

[外链图片转存失败(img-7PLcqPrr-1566640739736)(assets/)]

实现代码
<script type="text/javascript">
    //1) 改变第一行的背景色为浅灰色 light+color  == 浅颜色； dark+颜色=深颜色
    $("#b1").click(function () {
        $("tr:first").css("background-color","lightgray");
    });

    //2) 改变最后一行的背景色为lightgreen浅绿色
    $("#b2").click(function () {
        $("tr:last").css("background-color","lightgreen");
    });

    //3) 改变除第1行和最后1行的其它行背景色为lightyellow浅黄色
    $("#b3").click(function () {
        $("tr:not(:first):not(:last)").css("background-color","lightyellow");
    });

    //4) 改变索引值为偶数的行背景色为lightpink浅粉色，下标从0开始
    $("#b4").click(function () {
        $("tr:not(:first):not(:last):even").css("background-color","lightpink");
    });

    //5) 改变索引值为奇数的行背景色为aquamarine深蓝色
    $("#b5").click(function () {
        $("tr:not(:first):not(:last):odd").css("background-color","aquamarine");
    });

    //6) 改变索引值大于 3 的tr元素的背景色为oldlace浅米色
    $("#b6").click(function () {
        $("tr:gt(3)").css("background-color","oldlace");
    });

    //7) 改变索引值等于 3 的tr元素的背景色为antiquewhite古董白
    $("#b7").click(function () {
        $("tr:eq(3)").css("background-color","antiquewhite");
    });

    //8) 改变索引值为小于 3 的tr元素背景色为yellowgreen黄绿色
    $("#b8").click(function () {
        $("tr:lt(3)").css("background-color","yellowgreen");
    });
</script>
按钮1到按钮3的效果

[外链图片转存失败(img-7mQbt2hD-1566640739737)(assets/)]

按钮1到按钮5的效果

[外链图片转存失败(img-jP8HUBt8-1566640739737)(assets/)]

按钮6到按钮8效果

[外链图片转存失败(img-pIRtpT95-1566640739737)(assets/)]

10.jQuery的选择器5-表单属性过滤选择器【应用】
表单属性过滤选择器语法

[外链图片转存失败(img-zRYYK1FC-1566640739738)(assets/)]

实现代码
<script type="text/javascript">
    //1) val() 方法改变表单内可用文本框 <input> 元素的值
    $("#b1").click(function () {
        //jq对象.val()   含义：获取标签value属性值
        //jq对象.val(值) 含义：设置标签value属性值

        $("input[type=text]:enabled").val("itheima117");
    });

    //2) val() 方法改变表单内不可用 <input> 元素的值
    $("#b2").click(function () {

        //$("input[type=text]:disabled").val("itheima117");
        //优化获取单行文本框，选择器“input[type=text]” 优化为“:text”,所有表单元素type的值都可以写为“:type的值”获取对应表单元素

        $(":text:disabled").val("itheima117");
    });

    //3) length 属性获取复选框选中的个数
    $("#b3").click(function () {
        //获取jq对象(类似js数组)获取里面元素的个数语法：jq对象.length
        //普通写法
        //alert($("input[type=checkbox]:checked").length);
        //简化写法
        alert($(":checkbox:checked").length);

    });

    //4) text 属性获取下拉列表选中的内容
    $("#b4").click(function () {

        //js获取标签体文本内容语法：jq对象.innerText
        //jq获取标签体文本内容语法：jq对象.text()
        alert($("select option:selected").text());

    });

</script>
小结
11.案例1-表格隔行换色【应用】
需求

[外链图片转存失败(img-UpP4vYD9-1566640739738)(assets/)]

页面加载后偶数行为粉红色，奇数行为黄色

实现效果

[外链图片转存失败(img-njj56pkw-1566640739738)(assets/)]

实现代码
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

    $(function () {

        //目标：页面加载后偶数行为粉红色，奇数行为黄色
        $("tr:gt(1):even").css("background-color","pink");
        $("tr:gt(1):odd").css("background-color","yellow");
    });


</script>
12.jQuery的DOM操作1-html代码-文本-值【应用】
语法

[外链图片转存失败(img-0Y80Kzjr-1566640739739)(assets/)]

实现代码
<script type="text/javascript">

    // 设置myinput的value属性值
    $("#b1").click(function () {
        $("#myinput").val("itheima117")
    });

    // 获取myinput的value属性值并弹框显示
    $("#b2").click(function () {
        alert($("#myinput").val());
    });

    //设置mydiv标签体html代码'<h2>itheima</h2>'
    $("#b3").click(function () {
        $("#mydiv").html("<h2>itheima</h2>");
    });

    //获取mydiv标签体html代码并弹框显示
    $("#b4").click(function () {
        alert($("#mydiv").html());
    });

    //设置mydiv标签体text文本内容为'<h2>itheima</h2>'
    $("#b5").click(function () {
        $("#mydiv").text("<h2>itheima</h2>");
    });

    //获取mydiv标签体text文本内容并弹框显示
    $("#b6").click(function () {
        alert($("#mydiv").text());
    });
</script>
13.jQuery的DOM操作2-属性操作【应用】
语法

[外链图片转存失败(img-Eo5FXg9G-1566640739739)(assets/)]

实现代码
<script type="text/javascript">
	
		//获取北京节点的name属性值
		$("#b1").click(function () {
			alert($("#bj").attr("name"));
		});

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

		//新增北京节点的description属性 属性值是didu
		$("#b3").click(function () {
			$("#bj").attr("description","didu");
		});

		//删除北京节点的name属性
		$("#b4").click(function () {
			$("#bj").removeAttr("name");
		});
		
		//获得hobby的选中状态
		$("#b5").click(function () {
			//alert($("#hobby").attr("checked")); //结果弹出：undefined

			/*
			* attr与prop的区别
			* 		1.attr的操作
			* 			获取属性数据方面：attr只能获取网页上明确有的属性数据，没有显示出来的属性获取返回undefined
			* 			设置属性数据方面：没有任何问题
			*      2.prop的操作
			* 			特点：jquery1.6版本才有这个api
			* 			获取数据与设置数据方面：适合操作标签具有boolean类型值的属性，例如：checked,disabled,readonly,selected
			*     总结：  attr适合操作大多数属性，prop适合操作boolean类型属性
			* */

			//所以这个案例使用prop比较好
			alert($("#hobby").prop("checked"));  //由于默认没有选中，所以获取为“false”

			//设置hobby选中的方法有4个中方式【了解】
			/*$("#hobby").prop("checked",true)
			$("#hobby").prop("checked","checked");
			$("#hobby").attr("checked",true);
			$("#hobby").attr("checked","checked");*/
		});
		
	</script>
14.jQuery的DOM操作3-样式操作【应用】
dom样式操作方式

html标签设置样式是通过class属性与style属性完成的

<标签 class="类样式1 类样式2 ..." style=""></标签>
jquery操作dom样式的语法

class的操作

[外链图片转存失败(img-9S4F62Yv-1566640739741)(assets/)]

style的样式操作

[外链图片转存失败(img-w5tsQKLA-1566640739741)(assets/)]

实现代码
<script type="text/javascript">

    // 采用attr属性增加样式(改变id=one的样式)，类样式名为second
    $("#b1").click(function () {
        $("#one").attr("class","second");
    });

    // addClass
    $("#b2").click(function () {
        $("#one").addClass("second");
    });

    // removeClass
    $("#b3").click(function () {
        $("#one").removeClass("second");
    });

    // 切换样式
    $("#b4").click(function () {
        $("#one").toggleClass("second");
    });

    // 通过css()获得id为one背景颜色
    $("#b5").click(function () {
        alert($("#one").css("background-color"));
    });

    // 通过css()设置id为one背景颜色为绿色
    $("#b6").click(function () {
        $("#one").css("background-color","green");
    });

</script>
15.jQuery的DOM操作4-元素节点创建-插入-移动【应用】
语法

[外链图片转存失败(img-rmjrDi6L-1566640739742)(assets/)]

实现代码
<script type="text/javascript">
    //将反恐放置到city的最后子元素位置
    $("#b1").click(function () {
        $("#city").append($("#fk"));
    });

    //将反恐放置到city的最前面,第一个子元素位置
    $("#b2").click(function () {
        $("#city").prepend($("#fk"));
    });

    //将反恐放在天津前面
    $("#b3").click(function () {
        $("#tj").before($("#fk"));
    });

    //将反恐放在天津后面
    $("#b4").click(function () {
        $("#tj").after($("#fk"));
    });

    //创建一个广州的节点，加到城市中：<li id="gz" name="guangzhou">广州</li>,放到最后一个子元素位置
    $("#b5").click(function () {

        var gz = $('<li id="gz" name="guangzhou">广州</li>');
        //$("#city").append(gz);
        gz.appendTo($("#city"));
    });

</script>
16.jQuery的DOM操作5-元素的删除【应用】
语法

[外链图片转存失败(img-XLcKjp3R-1566640739743)(assets/)]

实现代码
	<script type="text/javascript">
	   //从city中删除<li id="bj" name="beijing">北京</li>节点
	   $("#b1").click(function () {
		   $("#bj").remove();
	   });
	   //删除city中所有的子节点，观察city本身有没有删除
	   $("#b2").click(function () {
		   $("#city").empty();
	   });
	</script>
17.案例2-QQ表情案例
需求效果

[外链图片转存失败(img-amkkxKwH-1566640739744)(assets/)]

代码实现
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            //1.给每个表情（li内部的img）注册点击事件
            $("li img").click(function () {

                //2.将当前点击的表情对象添加到请发言.word标签内部最后子元素位置
                //this，就是事件源触发的一个对象，这是js对象
                //$(".word").append($(this));  //这样写会发生点一个丢一个,将原对象移走了

                //疑问：怎么解决原位置不动，目标位置出现表情？答：可以对原对象进行克隆出一个一模一样的对象，移动到目标位置
                //克隆：复制出一个一模一样的对象，数据一样，对象的内存地址不一样， 语法： jq对象.clone();

                $(".word").append($(this).clone());

            });

        });

    </script>
18.jquery循环遍历
目标

掌握jquery的循环遍历方式，以后不用js的循环

修改idea的js校验规范

[外链图片转存失败(img-9zxLNXpQ-1566640739745)(assets/)]

实现代码

注意：素材中提供的引用jquery的js文件路径是错误的，需要添加“…/”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的遍历方式</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<select name="city" id="city">
    <option>广州</option>
    <option>深圳</option>
    <option>东莞</option>
</select>
<input type="button" id="b1" value="js传统for循环"/>
<input type="button" id="b2" value="js新版本es6的for-of循环"/>
<input type="button" id="b3" value="jq对象的方法遍历"/>
<input type="button" id="b4" value="jq对象的全局方法"/>
<script type="text/javascript">

    /*
    * 循环遍历方式：
    *   1.js传统循环方式
    *          格式：for(var i=0;i<length;i++){...}
    *   2.js新标准es6的for-of循环【推荐，以后再vue框架中使用】
    *          格式：for(var item of jq对象/数组){...}
    *          说明：item是数组的每个元素对象
    *                js遵守ECMASCRIPT规范，es6目前是最新规范，2015年出来
    *   3.jquery对象的each方法方式【推荐，web阶段使用】
    *           格式：jq对象.each(function(index,element){...});
    *           参数: function 是遍历的函数，每一次循环运行一次
    *           参数：index, 循环的索引，从0开始
    *           参数：element, 循环的每个元素对象，是一个js对象
    *   4.jquery全局each方法方式
    *           格式：$.each(jq对象,function(index,element){...})
    * */

    $("#b1").click(function () {

        //获取城市列表
        var options = $("option");
        //循环遍历——js传统循环
        for(var i=0;i<options.length;i++){
            var option = options[i]; //option是js对象
            alert(i+","+$(option).text());
        }
    });

    $("#b2").click(function () {

        //获取城市列表
        var options = $("option");
        //循环遍历——js新标准es6的for-of循环
        for(var option of options){   //这里有红线，因为idea默认使用es5的标准校验语法,修改为es6标准就不会有红线
            alert($(option).text());
        }
    });

    $("#b3").click(function () {

        //获取城市列表
        var options = $("option");
        //循环遍历——jquery对象的each方法方式
        options.each(function (i,option) {
            alert(i+","+$(option).text());
        });
    });

    $("#b4").click(function () {

        //获取城市列表
        var options = $("option");
        //循环遍历——jquery全局的each方法方式
        $.each(options,function (i,option) {
            alert(i+","+$(option).text());
        });
    });

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

效果

[外链图片转存失败(img-eeEX3txR-1566640739746)(assets/)]

20.jquery事件1—事件介绍与常用事件【应用】

[外链图片转存失败(img-bWWWhMSH-1566640739747)(assets/)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //得到焦点改变背景色pink
            $("#t1").focus(function () {
               $(this).css("background-color","pink");
            });
		   
            //失去焦点改变背景色
            $("#t1").blur(function () {
                $(this).css("background-color","yellow");
            });
     
            //松开键，把英文改成大写
            //keyup键盘弹起事件
            $("#t1").keyup(function () {
                //字符串转换为大写的语法：string.toUpperCase();

                //1.获取输入的值
                var value = $(this).val();
                //2.转换为大写
                value = value.toUpperCase();
                //3.设置回文本框的value属性值
                $(this).val(value);
            });

            //jquery注册事件的链式写法
            //得到焦点改变背景色pink
            $("#t1").focus(function () {
                $(this).css("background-color","pink");
            }).blur(function () {
                $(this).css("background-color","yellow");
            }).keyup(function () {
                //字符串转换为大写的语法：string.toUpperCase();

                //1.获取输入的值
                var value = $(this).val();
                //2.转换为大写
                value = value.toUpperCase();
                //3.设置回文本框的value属性值
                $(this).val(value);
            });

        })
    </script>
</head>
<body>
用户名：
<input type="text" id="t1" value="" />
</body>
</html>

效果

[外链图片转存失败(img-I4yFdFBk-1566640739747)(assets/)]

21.jquery事件2-使用on绑定事件与off解绑事件【应用】
目标

使用on绑定事件

使用off解绑事件

实现代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件动态绑定</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="按钮1" id="b1">
<input type="button" value="按钮2" id="b2">
<hr>
<input type="button" value="解绑事件" id="unbind">
</body>
<script type="text/javascript">
    //给按钮1使用事件名方式注册点击事件，弹出“按钮1”
    $("#b1").click(function () {
        alert($(this).val());
    });

    //使用on注册事件方式给b2注册点击事件，弹出“按钮2”
    $("#b2").on("click",function () {
        alert($(this).val());
    });

    //给unbind注册点击事件实现给b2解绑事件
    $("#unbind").click(function () {
        $("#b2").off();//解绑所有事件

        /*
        * 注意：off只能解绑动态注册的事件，就是使用js或jq代码注册事件
        *       off无法解绑html标签通过属性绑定的事件
        *            例子：<input type="button" value="按钮2" id="b2" οnclick="demo();">  off是不能解绑
        *            解决方案： $("#b2").removeAttr("onclick");
        * */
    });
</script>
</html>
效果

在这里插入图片描述

22.jquery事件3-使用on给动态创建元素绑定事件【应用】
on可以给已有和动态创建元素绑定事件，语法如下
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加城市列表</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<ol id="city">
    <li>广州</li>
    <li>上海</li>
    <li>北京</li>
</ol>
城市名：<input type="text" id="t1" placeholder="请输入城市名">
<input type="button" id="b1" value="添加城市列表">

<script type="text/javascript">
    //给每个li添加点击事件，弹出自己的文本内容
    /*$("li").click(function () {
        alert($(this).text());
    });*/
    //注意：这个点击事件只适合页面上已有的元素绑定事件，而动态新增的元素是没有事件

    //使用on给已有和动态新增的元素绑定事件
    $("#city").on("click","li",function () {
        alert($(this).text());
    });

    //点击按钮事件，动态添加li
    $("#b1").click(function () {
        //1.获取输入的城市名字
        var city = $("#t1").val();
        //2.将新收入的城市名字加入到城市列表
        $("#city").append("<li>"+city+"</li>");
    });
</script>
</body>
</html>
小结

  1. 给页面已有元素注册事件方式有哪些？

    jq对象.事件名(函数);

    jq对象.on(“事件名”,fn)；

  2. 给页面已有和新增内容都注册事件方式有哪些？

    jq对象.on(“事件名”,“子选择器”,fn)；

23.案例3-实现购物车【应用】
需求

  1. 实现添加商品，如果商品名为空，提示：商品名不能为空。如果不为空，则添加成功一行，清空文本框的内容，图片使用固定一张。

  2. 实现删除一行商品的功能，删除前弹出确认对话框。

  3. 实现全选/全不选的效果

效果

[外链图片转存失败(img-lzq7gmur-1566640739750)(assets/)]

实现代码
<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript">
    //添加购物车点击事件
    function addRow() {
        //1.获取输入的数据
        var pname = $("#pname").val();

        //2.判断数据是否有效
        if(pname){

            //3.有效后，手动拼接tr一行数据
            var tr='<tr>\n' +
                '            <td>\n' +
                '                <input type="checkbox" name="item" />\n' +
                '            </td>\n' +
                '            <td><img src="img/sx.jpg" /></td>\n' +
                '            <td>\n' +
                '                '+pname+'\n' +
                '            </td>\n' +
                '            <td>\n' +
                '                <a href="javascript:void(0)" οnclick="deleteRow(this)">删除</a>\n' +
                '            </td>\n' +
                '        </tr>';

            //4.将新增的tr数据添加到tbody最后子元素位置
            $("#cart").append(tr);

            //5.添加成功后，清空输入框数据
            $("#pname").val('');
        }
    }

    //全选框点击事件
    function selectAll(obj) {
        //obj是全选框js对象,

        //获取全选框选中状态
        var isChecked = $(obj).prop("checked");

        //获取所有子选框对象，设置选中状态与全选框选中状态一致
        $(":checkbox[name=item]").prop("checked",isChecked);
    }

    //删除点击事件
    function deleteRow(obj) {
        //obj是a标签js对象
        //jq对象获取父元素对象语法：jq对象.parent();

        if(confirm("您确定要删除当前商品吗？")){
            //获取obj的父元素的父元素对象
            $(obj).parent().parent().remove();
        }

    }
</script>
24.添加联系人案例
实现需求

添加联系人

实现效果

[外链图片转存失败(img-AS9e8n33-1566640739750)(assets/)]

实现步骤

[外链图片转存失败(img-6SvMs4zG-1566640739751)(assets/)]

IContactDao代码
//添加联系人方法
@Insert("INSERT INTO contact VALUES(NULL,#{name},#{sex},#{age},#{address},#{qq},#{email})")
void insert(Contact contact);
ContactService代码
//添加联系人方法
public void addContact(Contact contact){
    //1.获取SqlSession连接对象
    SqlSession sqlSession = MybatisUtils.getSession();
    //2.dao代理对象
    IContactDao contactDao = sqlSession.getMapper(IContactDao.class);

    //3.调用业务添加联系人
    contactDao.insert(contact);

    //4.释放连接
    MybatisUtils.closeSession(sqlSession);
}
AddContactServlet代码
package com.itheima.web;

import com.itheima.entity.Contact;
import com.itheima.service.ContactService;
import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "AddContactServlet", urlPatterns = "/AddContactServlet")
public class AddContactServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    //实例业务类
    private ContactService contactService = new ContactService();

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        try {
            //1.获取表单数据封装到Contact对象中
            Contact  contact = new Contact();
            BeanUtils.populate(contact,request.getParameterMap());

            //2.调用业务添加联系人方法
            contactService.addContact(contact);

            //3.添加成功，跳转请求联系人列表
            response.sendRedirect(request.getContextPath()+"/ListContactServlet");

        } catch (Exception e) {
            e.printStackTrace();
            //4.添加失败，提示添加失败，返回添加页面
            response.getWriter().write("<script>alert('添加失败');history.back();</script>");
        }
    }
}
list.jsp页面

[外链图片转存失败(img-6WXUjSVB-1566640739751)(assets/)]

add.jsp页面

[外链图片转存失败(img-P3cCpPgu-1566640739751)(assets/)]

罪恶的拓海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
《JS控制表格奇偶数行背景色变换》
qq_35119220的博客
02-24 5681
引言： 当我们利用html标记表签语言制作出一张普通的信息表格时，为了摆脱单调，提高用户体验，我们可以为其添加各种动态效果，以满足用户在操作表格时所带来的效果乐趣。 内容概括：当鼠标移动到表格上的相关单元行时，其相关行的背景色改变【颜色自定义】，并且单元行背景色的改变会根据表格行的奇偶性来改变，从而产生背景色变换的效果。 内容截图：
JS table布局显示奇数偶数行的颜色
qhx556的专栏
04-17 4748
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">             //        $(function () {         //            $('tr:even:not(#tr1)').css('background-c
JS 实现奇数偶数行颜色不同
夏沐的博客
01-13 7059
HTML代码部分： input type="button" value="隔行变色" id="btn"/&gt; &lt;ul id="uu"&gt; &lt;li&gt;红旗&lt;/li&gt; &lt;li&gt;五菱宏光&lt;/li&gt; &lt;li&gt;奔驰&lt;/li&gt
利用css给奇数行或偶数行添加指定样式
热门推荐
u012891324的专栏
02-02 4万+
odd表示奇数行，even表示偶数行; tr:nth-child(odd); .table-striped > tbody > tr:nth-child(odd) { background-color: #f9f9f9; }
jquery选择器tr:even获取偶数行、tr:odd 获取奇数行
wzx735481897的博客
06-19 1万+
在jquery中： $('table tr:even')  -> 表示获取一个table 所有的索引为偶数的行， 其中索引index 从0开始算起， 0算偶数！ $('table tr:odd')  ->   表示获取一个table 所有的索引为奇数的行， 其中索引index 从0开始算起， 0算奇数！ Eg： 创建一个有6行数据的表格， 让奇数行的背景色为green，
jQuery 基础语法
既然选择远方，便只顾风雨兼程！
02-27 2518
文章目录jQuery 基础语法一、 jQuery 概述1、 JS 库2、 jQuery 概念3、 jQuery 优点二、 jQuery 基本使用1、 jQuery 使用步骤2、 jQuery 入口函数3、 jQuery 顶级对象4、 jQuery 对象和 DOM 对象三、 jQuery 常用 API1、 jQuery 选择器2、 隐式迭代3、 jQuery 筛选选择器4、 jQuery 筛选方法5、 jQuery 里面的排他思想6、 链式编程四、 jQuery 样式操作1、 操作 CSS 方法2、 设置类样
jQuery基础知识
qq_51781439的博客
09-11 1302
一、jQuery简介 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 函数库。 jQuery 库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 提示： 除此之外，jQuery 还提供了大量的插件。 二、jQuery的语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法：...
JQuery基础语法
weixin_54597170的博客
10-27 1703
目录JQuery基础概述JQuery对象和JS对象区别与转换基础操作选择器基本选择器层级选择器属性选择器过滤选择器表单过滤选择器DOM操作内容操作属性操作CRUD操作 JQuery基础 概述 一个JavaScript框架， 简化JS开发， 本质上就是一些js文件，封装了js的原生代码而已。 JQuery对象和JS对象区别与转换 1.操作 JQuery对象在操作时，更加方便。 2.通用性 JQuery对象和js对象方法不通用的. 3.转化 1. jq – > js : jq对
jQuery基础文件
03-30
此“jQuery基础文件”压缩包包含了jQuery的三个主要版本：1.11.3，2.1.4和3.3.1。每个版本都有其特定的发布日期和功能特性，适合不同项目的需求。 1. jQuery 1.11.3： 这是jQuery 1.x系列的一个稳定版本，主要支持...
Jquery基础
12-13
Jquery基础及个人心得，选择器，常用方法、监听事件，event事件：阻止默认事件
jQuery源码研究分析学习笔记-jQuery.buildFragment()（六）
前端岚枫
08-02 2477
DocumentFragment是一种特殊的Node,它作为其他节点的一个临时容器，像document节点咿呀，DocumentFragment是独立的，而不是任何其他文档的一部分，它的parentNode总是null。但类似element,它可以有任意的子节点，可以用appendChild()、insertBefore()等方法来操作。通常我们会利用它来创建文档元素，我们可以利用文档片段的特性先把
分包合同计量单.docx
07-13
分包合同计量单.docx
树莓派简介PPT课件.ppt
07-13
树莓派简介PPT课件.ppt
项目债务盘点明细表.docx
07-13
项目债务盘点明细表.docx
全网最热Python3入门+进阶 更快上手实际开发
最新发布
07-13
网最热Python3入门+进阶 更快上手实际开发 第1章 Python入门导学.mp4 239.6MB 第9章 高级部分：面向对象 第8章 Python函数 第7章 包、模块、函数与变量作用域 第6章 分支、循环、条件与枚举 第5章 变量与运算符 第4章 Python中表示“组”的概念与定义 第3章 理解什么是写代码与Python的基本类型 第2章 Python环境安装 第1章 Python入门导学 第14章 Pythonic与Python杂记 第13章 实战：原生爬虫 第12章 函数式编程： 匿名函数、高阶函数、装饰器
管理干部培训计划PPT模板
07-13
【作品名称】：管理干部培训计划PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
黑色风格年终总结汇报PPT模板
07-13
【作品名称】：黑色风格年终总结汇报PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
Java实训教程 Java软件开发实战 Java类库 第4章 集合操作 共31页.pptx
07-13
【课程大纲】 完整教程：https://download.csdn.net/download/qq_27595745/89538425 Java软件开发实战 Java类库 第1章 Object类 共29页.pptx Java软件开发实战 Java类库 第2章 字符串处理 共49页.pptx Java软件开发实战 Java类库 第3章 包装器类等 共40页.pptx Java软件开发实战 Java类库 第4章 集合操作 共31页.pptx Java软件开发实战 Java类库 第5章 io操作 共35页.pptx Java软件开发实战 Java类库 第6章 其它综合 共38页.pptx Java软件开发实战 Java类库 第7章 JDBC 共113页.pptx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值