四、JQuery
|
20
|
0
|
javaWeb

1296 字
|
16 分钟

四、JQuery

1、介绍

image-20230402170108861

1.1、例子及常见问题

1、例子

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

   // window.onload =function () {
   //
   //     var btnObj = document.getElementById("btnId");
   //     btnObj.onclick=function () {
   //        alert("obj 原生做法")
   //     }
   // }
   $(function (){
      var $btnObj= $("#btnId");//按id标记查询对象
      $btnObj.click(function (){
         alert("JQuery 单击事件")
      });
   });
</script>

2、常见问题

1、必须引入Jquery类库

2、$：是一个函数

3、为按钮添加相应函数

（1）使用JQuery查询到标签对象

（2）使用标签对象.click(function(){});

2、内容

2.1、JQuery核心函数

$是JQuery的核心函数，能完成JQuery的很多功能。$()就是调用$这个函数

1、传入参数为[函数时]：

1、表示页面加载完成之后，执行该函数

2、 传入参数为[HTML字符串]：

1、表示会创建该html标签对象

3、传入参数为[选择器字符串]：

1、$("#id属性值"); ：id选择器，根据id查询标签对象

2、$("标签名"); ：标签选择器，根据指定标签名查询标签对象

3、$(".class属性值"); ：类型选择器，可以根据class属性查询标签对象

4、传入参数为[DOM对象]：

1、会把这个dom对象转换为JQuery对象

2.2、JQuery和Dom对象的区分

1、JQuery对象

image-20230402204919850

2、Dom对象

image-20230402205116905

3、JQuery对象本质

1、JQuery对象是dom对象的数组+JQuery提供的一系列功能函数

4、JQuery和Dom对象使用的区别

1、JQuery对象不能使用Dom对象的属性和方法

2、Dom对象也不能使用JQuery的属性和方法

5、Dom对象和JQuery对象相互转换

1、内容

image-20230402212256810

2、图示

image-20230402212309298

2.3、选择器

1、基本选择器

1、内容

image-20230402213550114

2、层级选择器

image-20230402221835255

3、过滤选择器

1、基本过滤器

image-20230402222001524

4、内容过滤器

image-20230403151853605

5、属性过滤器

image-20230403152639914

6、表单过滤器

1、val()：函数可以操作表单项的value属性值，可读可写

2、each()：函数是JQuery对象提供的一个用来遍历元素的方法

（1）遍历function函数中，this对象，就是当前遍历到dom的对象

3、内容

image-20230403161619568

7、表单对象属性过滤器

1、内容

image-20230403161648809

2.4、JQuery元素筛选

1、内容

image-20230403170743412

1、JQuery的属性操作

1、内容

image-20230403172556228

image-20230403175122065

2、例子

image-20230403172717182

2、DOM的增删改

1、内部插入、外部插入、替换、删除

image-20230404155815521

3、JQuery练习—从左到右

1、例子

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        select {
            width: 100px;
            height: 140px;
        }

        div {
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        //  页面完成之后
        $(function () {
        //  第一个按钮，选中添加到右边
            $("button:eq(0)").click(function () {
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
            });
            //  第二个按钮，全部添加到右边
            $("button:eq(1)").click(function () {
                $("select:eq(0) option").appendTo($("select:eq(1)"));
            });

            //  第三个按钮，选中添加到左边
            $("button:eq(2)").click(function () {
                $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
            });

            //  第四个按钮，选中添加到左边
            $("button:eq(3)").click(function () {
                $("select:eq(1) option").appendTo($("select:eq(0)"));
            });
        });

    </script>
</head>
<body>

    <div id="left">
        <select multiple="multiple" name="sel01">
            <option value="opt01">选项1</option>
            <option value="opt02">选项2</option>
            <option value="opt03">选项3</option>
            <option value="opt04">选项4</option>
            <option value="opt05">选项5</option>
            <option value="opt06">选项6</option>
            <option value="opt07">选项7</option>
            <option value="opt08">选项8</option>
        </select>

        <button>选中添加到右边</button>
        <button>全部添加到右边</button>
    </div>
    <div id="rigth">
        <select multiple="multiple" name="sel02">
        </select>
        <button>选中删除到左边</button>
        <button>全部删除到左边</button>
    </div>

</body>
</html>

4、Jquery练习—动态添加

1、confirm()：是js提供的一个确认提示框函数，给啥传啥，当用户点击确认返回true，取消，则返回false

2、例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

<!-- 初始化-->
    $(function () {

    //  封装删除函数
        var deleteFun =function () {
            //      在事件响应的function函数中，有个this对象,this是当前响应对象的dom对象
            var $trObj = $(this).parent().parent();//取到行标签

            var name1 = $trObj.find("td:first").text();
            //  return可以阻止元素的默认行为
            /*
            confirm是js提供的一个确认提示框函数，给啥传啥，当用户点击确认返回true，取消，则返回false
             */
            if(confirm("你确定要删除"+name1+"吗？")){
                $trObj.remove();
            }
            return false;
        }

    //给【submit】绑定单击事件
    $("#addEmpButton").click(function () {

    //  获取输入框内容，姓名，邮箱，工资等
        var name = $("#empName").val();
        var email = $("#email").val();
        var salary = $("#salary").val();

    //  创建一个行标签对象
        var $trObj=$("<tr>" +
                "<td>"+name+"</td>" +
                "<td>"+email+"</td>" +
                "<td>"+salary+"</td>" +
                "<td><a href=\"deleteEmp?id=003\">Delete</a></td>" +
                "</tr>");
        //把行标签添加进入
        $trObj.appendTo($("#employeeTable"));
        //给添加行的a标签绑上事件
        $trObj.find("a").click(deleteFun);

        });

        //给删除的a标签绑定单击事件
        $("a").click(deleteFun);
    })

</script>
</head>
<body>

    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th> </th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>

    <div id="formDiv">

        <h4>添加新员工</h4>

        <table>
            <tr>
                <td class="word">name: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email: </td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>

    </div>

</body>
</html>

2.5、CSS样式操作

1、内容

image-20230404172721016

2.6、JQuery动画

1、基本动画

image-20230404174159618

2、淡入淡出动画

image-20230404174207897

2.7、JQuery事件操作

1、JQuery加载和原生加载的区别

1、触发的顺序

（1）JQuery页面加载完成后先执行

（2）原生js的页面加载完成之后执行

2、分别在什么时候执行

（1）JQuery在页面加载完成之后是浏览器的内核解析完成页面的标签创建好DOM对象之后马上执行。

（2）原生js的页面加载完成之后，除了要等浏览器内核解析完成创建好DOM对象，还要等标签显示时需要的内容加载完成。

3、执行的次数

（1）原生js的页面加载完成之后，会执行最后一次的赋值函数。

（2）JQuery的页面加载完成之后是全部把注册的function函数，依次顺序全部执行。

2、JQuery其他事件处理方法

1、内容

image-20230404233748504

3、事件的冒泡

1、什么是事件的冒泡？

image-20230404234446247

2、如何阻止事件冒泡？

image-20230404234507494

4、JavaScript事件对象

1、内容

image-20230404235936807

2、如何获取JavaScript事件对象？

3、原生js获取事件对象

image-20230405000036551

4、JQuery代码获取

image-20230405000045351

5、使用bind同时对多个事件绑定同一个函数。

image-20230405000114255

5、图片跟随练习

1、例子

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function(){
        $("#small").bind("mouseover mouseout mousemove", function (event) {
            if(event.type =="mouseover"){
                $("#showBig").show();
            }else if(event.type =="mouseout"){
                $("#showBig").hide();
            }else if(event.type =="mousemove"){
                $("#showBig").offset({
                    left:event.pageX+5 ,
                    top: event.pageY+5
                });
            }

        })
    });
</script>
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																				
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇