jQuery基础

最新推荐文章于 2022-02-27 10:59:19 发布

罪恶的拓海

最新推荐文章于 2022-02-27 10:59:19 发布

阅读量913

点赞数

本文链接：https://blog.csdn.net/Bulid_Evolto/article/details/100055600

版权

02.jquery框架下载与导入【应用】

目标

掌握jquery的使用

jquery介绍

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

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

使用实现步骤

下载jquery，官网www.jquery.com

资源类库中也提供了

不同版本介绍

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是生产版本（压缩的版本，推荐使用）
将js文件导入到项目中js目录下
新建网页，在html页面上导入js文件
使用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对象

转换语法

js对象转换jq对象语法【重要】
```
$(js对象) = jq对象
```
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-基本选择器【应用】

疑问

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

简化了js的dom操作，对html元素标签的增、删、改、查
增、删、改、查先学习那个？

查。

目标

使用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>

小结

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

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

jq对象.on(“事件名”,fn)；
给页面已有和新增内容都注册事件方式有哪些？

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

23.案例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
评论
jQuery基础

02.jquery框架下载与导入【应用】目标掌握jquery的使用jquery介绍是一个js框架，简化js的编写。jquery宗旨：write less do more。jquery的插件丰富，所谓插件就是利用jquery技术写一个独立效果使用实现步骤下载jquery，官网www.jquery.com资源类库中也提供了不同版本介绍jquery提供了大版本1.x，2.x,3...
复制链接

扫一扫