jQuery核心技术

其他 2021-01-25 12:03:29 阅读次数: 0

jQuery简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE、火狐、Safari 2.0+、Opera 、Google等等。

jQuery功能

-HTML 元素选取
-HTML 元素操作
-HTML 事件函数

-JavaScript 特效和动画
-HTML DOM 遍历和修改
-CSS 操作

-AJAX
-Utilities

jQuery的引入方法

方法1. CDN

https://www.bootcdn.cn/jquery/

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

方法2. 下载并放入项目文件，并用js引入（取决于自己的路径）

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

jquery有Production version（压缩后，代码无可读性，用于项目）和Development version（用于开发和学习）

代码基于jquery的话，jquery的引入要在自己的js代码之前

jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(选择器).动作()

jQuery入门例子：

//引入jquery
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<body>
    <input id="username" type="text" value="zhangsan" >
    <script type="text/javascript"> 
        var n=$("#username");               //获取id为username的jQuery对象
        alert(n.val());                     //val函数为获取value属性的值   
    </script>
</body>

在这里插入图片描述

文档就绪事件

我们的js代码都需要等文档加载完毕后才开始执行js代码。

在jQuery中，所有 jQuery 函数位于一个 document ready 函数中，这是文档就绪事件。

$(document).ready(function(){
    
    
   // 开始写 jQuery 代码...
});

将dom对象转换成jQuery对象

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
        <body>
            <input id="username" type="text" value="zhangsan" >
            <script type="text/javascript"> 
                //获取的是dom对象
                var n=document.getElementById("username");
                //将dom对象转换成jQuery对象  语法：$(dom对象)  建议：jQuery对象以$符开头命名
                var $n=$(n);
                alert($n.val());
            </script>
        </body>

将jQuery对象转换成dom对象

  //jQuery内部是一个数组，比如我们获取所有文本框，然后得到一个jQuery对象，其实这个对象内部是数组。
    <body>
        <input id="username" type="text" value="zhangsan" >
        <script type="text/javascript">
            var n=document.getElementById("username");
            //获取jQuery对象
            var $n=$(n); 
            //两种方式，将JQuery对象转换成dom对象
            var n1=$n[0];    //直接使用数组下标获得dom对象
            var n2=$n.get(0);//使用jQuery对象的get方法
            alert(n1.value);
            alert(n2.value);
        </script>
    </body>

jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

1. id选择器

语法：$(“#id”) 通过id获取指定元素 。

2. 元素选择器

语法：$(“input”):通过标签名获得元素。

3. 类选择器

语法：$(“.class”):通过class属性来获取元素。

基础选择器例子
例子：传统的js中点击事件需要按钮的onClick()方法指定js函数。jquery能将两者给分离开

<script type="text/javascript">
    $(document).ready(function(){
     
     
        //使用id选择器
        $("#btn1").click(function(){
     
     
            alert("hello world");

        }); 
    });
</script>
<body>
    <input type="button" id="btn1" value="按钮">
</body>

其他的几个选择器都差不多，可以自己下去练习。

4. 层级选择器

A  B：获取A元素内部所有的B元素，也包括B元素的子元素
A >B: 获取A元素内部所有的B子元素 
A +B: 获取A元素后面的第一个兄弟B （平级）
A ~B: 获取A元素后面的所有兄弟B 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
		    $(document).ready(function(){
     
     
		        $("#btn1").click(function(){
     
     
		            //选择ul1元素所有的li元素
		            $("#ul1 li").css("background-color","red");
		        });
		    });
		</script>
	    <ul id="ul1">
	        <li>1</li>
	        <li>2</li>
	        <li>3</li>
	    </ul>
	    <ul id="ul2">
	        <li>一</li>
	        <li>二</li>
	        <li>三</li>
	    </ul>
	    <br>
	    <input type="button" id="btn1" value="按钮1">
	</body>
</html>

5. 基本过滤选择器

:first  第一个元素
:last   最后一个元素
:eq(index)  获得指定索引的元素
:gt(index)  大于指定索引的元素
:lt(index)  小于指定索引的元素
:even       查找索引为偶数的元素，从0开始
:odd        查找索引为奇数的元素
:not(selector)   去除所有与给定选择器匹配的元素 


例如：
    $("li:first")    //第一个li
    $("li:last")     //最后一个li
    $("li:even")     //挑选下标为偶数的li
    $("li:odd")      //挑选下标为奇数的li
    $("li:eq(4)")    //下标等于4的li
    $("li:gt(2)")    //下标大于2的li
    $("li:lt(2)")    //下标小于2的li
    $("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
		    $(document).ready(function(){
     
     
		        $("#btn1").click(function(){
     
     
		            //选择ul1元素所有的li元素
		            $("li:last").css("background-color","red");
		        });
		    });
		</script>
	    <ul id="ul1">
	        <li>1</li>
	        <li>2</li>
	        <li>3</li>
	    </ul>
	    <ul id="ul2">
	        <li>一</li>
	        <li>二</li>
	        <li>三</li>
	    </ul>
	    <br>
	    <input type="button" id="btn1" value="按钮1">
	</body>
</html>

点击按钮后结果如下：
在这里插入图片描述

6. 内容过滤选择器

:empty   选择为空的元素(是否有标签体，包括子元素，文本等)
:has(selector)  选择含有指定的子元素的元素
:parent        当前元素是否是父元素
:contains(text)  选择含有指定的文本的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
        <script type="text/javascript">
            $(document).ready(function(){
     
     
                $("#btn1").click(function(){
     
     
                    //选择含有文本123的div将其背景色变为红色
                    $("div:contains('123')").css("background-color","red");
                });
            });
        </script>
		
            <div>
                123456abc
            </div>
            <input type="button" id="btn1" value="按钮">
	</body>
</html>

点击按钮后结果：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
        <script type="text/javascript">
            $(document).ready(function(){
     
     
                $("#btn1").click(function(){
     
     
                    //选择含有input子元素的div 将其背景色改为红色
                    $("div:has('input')").css("background-color","red");
                });
            });
        </script>
		
            <div>
                123456abc
				<input type="" name="" id="" value="" />
            </div>
            <input type="button" id="btn1" value="按钮">
	</body>
</html>

点击按钮后结果如下：
在这里插入图片描述

7. 可见性过滤选择器

:hidden 选取隐藏的元素
:visible 选取可见的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
        <script type="text/javascript">
            $(document).ready(function(){
     
     
                //点击按钮1使可见的div背景色变为黑色
                $("#btn1").click(function(){
     
     
                    $("div:visible").css("background-color","black");
                });
                //点击按钮2使隐藏的div背景色变为红色，并且显示 jQuery的show()方法为显示隐藏的元素
                $("#btn2").click(function(){
     
     
                    $("div:hidden").css("background-color","red").show();
                });

            });
        </script>
		
            <div style="width:100px;height:100px;background:red;"></div>
            <div style="display:none;width:120px;height:120px;"></div>
            <input type="button" id="btn1" value="按钮1">
            <input type="button" id="btn2" value="按钮2">
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
        <script type="text/javascript">
            $(document).ready(function(){
     
     
                //遍历所有隐藏的input元素的值  each是进行遍历的方法
                $("#btn1").click(function(){
     
     
                    $("input:hidden").each(function(){
     
     
                        alert($(this).val());
                    });
                });

            });
        </script>
		
            <input type="hidden" value="1">
            <input type="hidden" value="2">
            <input type="hidden" value="3">
            <input type="button" id="btn1" value="按钮1">
	</body>
</html>

8. 属性选择器

[属性名]   获取指定属性名的元素
[属性名=值]  获取属性名等于指定值的元素
[属性名!=值]  获取属性名不等于指定值的元素
[属性名^=值]  获得以指定属性值开头的元素
[属性名$=值]  获得以指定属性值结尾的元素
[属性名*=值]  获得含有属性值的元素
[a1][a2][a3]  复合选择器，多个条件同时成立   

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
        <script type="text/javascript">
            $(document).ready(function(){
     
     
                $("#btn1").click(function(){
     
     
                    //打印含有class属性的input元素的值
                    alert($("input[class]").val());
                });
            });
        </script>
		
            <input type="text" "id="i1" class="1" value="1"> 
            <br>
            <input type="text" id="i2" value="2"> 
            <br>
            <input type="button" id="btn1" value="按钮">
	</body>
</html>

9. 子元素过滤选择器

:nth-child(index) 选择指定索引的子元素
:first-child 选择第一个子元素
:last-child 选择最后一个子元素
:only-child 选择只有一个子元素的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
        <script type="text/javascript">
            $(document).ready(function(){
     
     
        
                $("#btn1").click(function(){
     
     
                    //选择class为one的第三个子元素
                    //如果元素没有任何条件，可以直接写 例如 “div:nth-child(2)”
                    //如果元素有条件，则必须在中间加空格 例如 "div[class='one'] :last-child" 
                    $("div[class='one'] :nth-child(5)").css("background-color","white");
                });
        
            });
        </script>
		
             <div class="one" style="width:100px;height:100px;background:gray;">
                        <div style="width:10px;height:10px;background:red;" id="1"></div>
                        <br>
                        <div style="width:10px;height:10px;background:yellow;" id="2"/></div>
                        <br>
                        <div style="width:10px;height:10px;background:blue;" id="3"/></div>
            </div>
                <br>
                <div>
                    <input type="button" id="btn1" value="按钮1">
                </div>
	</body>
</html>

10. 表单元素选择器

:input       所有的表单元素(包括<input>,<select>,<textarea>,<button>)
:text        文本框元素<input type="text">   
:password    密码框元素<input type="password">   
:radio       单选元素<input type="radio">   
:checkbox    复选框元素<input type="checkbox">   
:submit      提交按钮 <input type="submit">
:image       图片按钮 <input type="image" src="xxx">    
:reset       重置按钮 <input type="reset">  
:file        文件上传 <input type="file">
:hidden      隐藏域 <input type="hidden">  
:button      所有普通按钮。<button> 或者 <input type="button">    

例如 $("#form:text") :获取form表单的所有文本框元素

表单元素属性过滤

:enabled   可用
:disabled  不可用 
:checked   选中(单选框radio，复选框checkbox)
:selected  选择(下拉列表select option)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
        <script type="text/javascript">
            $(document).ready(function(){
     
     
                //点击按钮1使可用的input的value设置为aaaaa
                $("#btn1").click(function(){
     
     
                    $("input:enabled").val("aaaaa");
                });
                //点击按钮2使不可用的input的value设置为bbb
                $("#btn2").click(function(){
     
     
                    $("input:disabled").val("bbb");
                });
            });
        </script>
		
                <input type="text"><br>
                <input type="text" disabled="disabled"><br>
                <input type="button" id="btn1" value="按钮1">
                <input type="button" id="btn2" value="按钮2">
	</body>
</html>

11. 属性

attr(name) 获取指定属性名的值
attr(key,value) 给一个指定属性设置值
removeAttr(name) 移除指定属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				//使name为text1的文本框不可用
				$("input[name='text1']").attr("disabled", "disabled");
				//使其可用
				//$("input[name='text1']").removeAttr("disabled");
			});
		</script>
		<input type="text" name="text1">
	</body>
</html>

val()         获取value值
val("xxx")    给value设置值
text()        获取文本值
text("xxx")   设置文本值
html()        获取html代码 
html("xxx")   设置html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				//获取到的内容是<a>aaa</a>，如果是text，则只获取aaa 
				alert($("div").html());
			});
		</script>
		<div name="div1"><a>aaa</a></div>
	</body>
</html>

12. CSS

css(name) 获取指定名称的css值
css(name,value) 给指定名称的css属性设置值
css({“propertyname”:“value”,“propertyname”:“value”,…}) 给多个css属性设置值

例如：$(“p”).css(“background-color”,“yellow”);

13.尺寸

在这里插入图片描述
width()：设置或返回元素的宽度（不包括内边距、边框或外边距）
height()：设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth()：返回元素的宽度（包括内边距）
innerHeight()：返回元素的高度（包括内边距）
outerWidth()：返回元素的宽度（包括内边距和边框）
outerHeight()：返回元素的高度（包括内边距和边框）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				$("button").click(function() {
     
     
					//获取div的长和宽，还可以设置
					var txt = "";
					txt += "div 的宽度是: " + $("#div1").width() + "</br>";
					txt += "div 的高度是: " + $("#div1").height();
					$("#div1").html(txt);
				});
			});
		</script>
		<div id="div1"><a>aaa</a></div>
		<button>按钮</button>
	</body>
</html>

jQuery文档处理

内部添加元素

A.append(B)  将B插入到A的内部后面 
                <A>
                    ...
                    ...
                    <B></B>
                </A>

A.prepend(B)  将B插入到A的内部前面
                <A>
                    <B></B>
                    ...
                    ...
                </A>

A.appendTo(B)  将A插入到B的内部后面
A.preendTo(B)  将A插入到B的内部前面   

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     

				$("#btn1").click(function() {
     
     
					//将上海添加到ul2中
					var $sh = $("#sh");
					var $ul2 = $("#ul2");
					$ul2.append($sh);
				});
			});
		</script>
		<ul id="ul1">
			<li id="bj">北京</li>
			<li id="sh">上海</li>
			<li id="tj">天津</li>
		</ul>
		<br>
		<ul id="ul2">
			<li id="hn">河南</li>
			<li id="sd">山东</li>
			<li id="gz">广州</li>
		</ul>
		<br>
		<input type="button" id="btn1" value="按钮">
	</body>
</html>

外部添加元素

A.after(B)    将B插入到A后面(同级)
                <A></A>
                <B></B>

A.before(B)    将B插入到A前面 
                <B></B>
                <A></A>

A.insertAfter(B)  将A插入到B后面(同级)
A.insertBefore(B) 将A插入到B前面 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     

				$("#btn1").click(function() {
     
     
					//将ul2插入到p2的后面
					var $p2 = $("#p2");
					var $ul2 = $("#ul2");
					$p2.after($ul2);
				});
			});
		</script>
		<ul id="ul1">
			<li id="bj">北京</li>
			<li id="sh">上海</li>
			<li id="tj">天津</li>
		</ul>
		<br>
		<ul id="ul2">
			<li id="hn">河南</li>
			<li id="sd">山东</li>
			<li id="gz">广州</li>
		</ul>

		<p id="p1">第一句话</p>
		<p id="p2">第二句话</p>
		<p id="p3">第三句话</p>
		<br>
		<input type="button" id="btn1" value="按钮">
	</body>
</html>

删除元素

empty()   清空标签体
remove()  删除当前对象，移除绑定事件和绑定数据
detach()  删除当前对象，保留绑定事件和绑定数据

例子1：

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				//点击按钮，清空p2内容
				$("#btn1").click(function() {
     
     
					var $p2 = $("#p2");
					$p2.empty();
				});
			});
		</script>
		<p id="p1">第一句话</p>
		<p id="p2">第二句话</p>
		<p id="p3">第三句话</p>
		<br>
		<input type="button" id="btn1" value="按钮">
	</body>
</html>

例子2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				$("#p1").click(function() {
     
     
					alert("哈哈");
				});
				//先删除p1元素，再将p1添加到p3后面
				//用detach删除，保留绑定事件，点击有效果
				var $p1 = $("#p1").detach();
				//用remove删除，不保留绑定事件，点击无效
				//var $p1=$("#p1").remove();
				$("#p3").after($p1);

			});
		</script>
		<p id="p1">第一句话</p>
		<p id="p2">第二句话</p>
		<p id="p3">第三句话</p>
	</body>
</html>

复制元素

clone(Events):复制元素，Events是一个boolean值，为true时表示同时复制对象的事件。默认为false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				//点击按钮，复制当前元素，并添加在body内部后面
				$("#btn1").click(function() {
     
     
					var $new = $(this).clone();
					$("body").append($new);
				});
			});
		</script>
		<input type="button" id="btn1" value="按钮">
		<p id="p1">第一句话</p>
		<p id="p2">第二句话</p>
		<p id="p3">第三句话</p>
	</body>
</html>

替换元素

A.replaceWith(B) B替换A
A.replaceAll(B) A替换B

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				$("#btn1").click(function() {
     
     
					//将所有p标签用<a>xxx</a>替换
					$("p").replaceWith("<a>xxx</a>");
				});

			});
		</script>
		<input type="button" id="btn1" value="按钮">
		<p id="p1">第一句话</p>
		<p id="p2">第二句话</p>
		<p id="p3">第三句话</p>
	</body>
</html>

包裹元素

包裹元素有浏览器兼容问题，我在微软的Edge上运行就没问题，但在搜狗上就无法显示正常效果。

A.wrap(B)  使用B将每一个A进行包裹 
            <B><A></A></B>
            <B><A></A></B>

A.wrapAll(B) 使用B将所有A进行包裹
            <B>
                <A></A>
                <A></A>
            </B>

A.wrapInner(B),使用B将每一个A的标签体包裹
            <A><B>xxx</B></A>
            <A><B>xxx</B></A> 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				$("#btn1").click(function() {
     
     
					//将strong标签体包裹
					$("strong").wrapInner("<div></div>");
				});
			});
		</script>
		<input type="button" id="btn1" value="按钮">
		<strong>第一句话</strong>
		<strong>第二句话</strong>
		<strong>第三句话</strong>
	</body>
</html>

jQuery筛选

元素过滤

eq(index|-index):
         index：整数，从开头获得指定索引的元素。索引从0开始，0表示第一个
        -index：负数，从尾部获得指定索引的元素。索引从-1开始，-1表示最后一个


first()     选择第一个元素 

last()      选择最后一个元素 

is()        用于判断 

hasClass()  判断是否含有指定class。<xxx  class="xx">  

filter()    筛选出指定表达式匹配的元素集合，返回符合一定条件的元素 

not()       不符合条件的元素将从选择中返回，符合条件的元素将被移除 

has()       返回拥有指定子元素的元素。 

slice(start,end)  截取元素，包含头不包含尾 slice(2,4),则筛选2和3元素 

map()        将jQuery对象拆分为jQuery对象数组。我们以前说过，jQuery内部是一个数组，
用来存放获取的元素。 这个方法将jQuery内部的元素分为一个个jQuery对象，
将jQuery对象拆分为jQuery对象数组。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				$("#btn").click(function() {
     
     
					//选择索引为2的div，索引从0开始
					$("div").eq(2).css("background-color", "red");
					//选择第一个div
					$("div").first().css("background-color", "yellow");
					//选择最后一个div
					$("div").eq(-1).css("background-color", "blue");
				});

			});
		</script>
		<div style="background:gray;width:100px;height:100px;"></div><br>
		<div style="background:gray;width:100px;height:100px;"></div><br>
		<div style="background:gray;width:100px;height:100px;"></div><br>
		<div style="background:gray;width:100px;height:100px;"></div><br>
		<input type="button" id="btn" value="按钮">
	</body>
</html>

案例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				$("#btn").click(function() {
     
     
					//判断第一个div class属性是不是div1
					alert($("div").first().is(".div1"));
					//判断最后一个div class是否是div4
					alert($("div").last().hasClass("div4"));
					//选择含有p元素的div
					$("div").has("p").css("background-color", "red");
				});
			});
		</script>
		<div style="background:gray;width:100px;height:100px;" class="div1"></div><br>
		<div style="background:gray;width:100px;height:100px;">
			<p>China</p>
		</div><br>
		<div style="background:gray;width:100px;height:100px;"></div><br>
		<div style="background:gray;width:100px;height:100px;" class="div4"></div><br>
		<input type="button" id="btn" value="按钮">
	</body>
</html>

案例3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				$("#btn").click(function() {
     
     
					//筛选有class属性的div
					$("div").filter("[class]").css("background-color", "red");
					//筛选没有class属性的div
					$("div").not("[class]").css("background-color", "yellow");
				});
			});
		</script>
		<div style="background:gray;width:100px;height:100px;" class="div1"></div><br>
		<div style="background:gray;width:100px;height:100px;">
			<p>China</p>
		</div><br>
		<div style="background:gray;width:100px;height:100px;"></div><br>
		<div style="background:gray;width:100px;height:100px;" class="div4"></div><br>
		<input type="button" id="btn" value="按钮">
	</body>
</html>

案例4：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				$("#btn").click(function() {
     
     
					//截取第2.3个div
					$("div").slice(1, 3).css("background-color", "red");
				});
			});
		</script>
		<div style="background:gray;width:100px;height:100px;" class="div1"></div><br>
		<div style="background:gray;width:100px;height:100px;">
			<p>China</p>
		</div><br>
		<div style="background:gray;width:100px;height:100px;"></div><br>
		<div style="background:gray;width:100px;height:100px;" class="div4"></div><br>
		<input type="button" id="btn" value="按钮">
	</body>
</html>

元素查找

如有以下DOM树：

   <A>
        <B>
            <C></C>
            <D></D>
            <E></E>
            <F></F>
        </B>
    </A>

B.children([条件，可省略])     获得所有子元素  CDEF  

A.find(D)                    查询指定后代元素    D 

D.next()                     D同级的下一个   E 

D.nextAll()                  D后面的所有同级 EF 

E.prev()                     E同级的前一个     D 

E.prevAll()                  E前面的所有同级 CD  

E.siblings()                 E的所有同级  CDF 

E.parent()                   获得父元素      B 

E.cloest(A)                  向上获得指定的父元素 

C.nextUntil(E)               获得后面的所有同级元素，直到指定位置。DE 

F.prevUntil(D)               获得前面的所有同级元素，直到指定元素  DE 

E.parents()                  获得所有的父元素  AB    

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				$("#btn").click(function() {
     
     
					//获取所有子元素
					//$("#div2").children().css("background-color","red");
					//获取div1下的span2
					//$("#div1").find("#span2").css("background-color","red");
					//获取后面的所有兄弟元素，包括<br>等
					//$("#span1").nextAll().css("background-color","red");
					//获取父元素
					$("#span1").parent().css("background-color", "red");
				});
			});
		</script>
		<div style="background:gray;width:100px;height:100px;" class="div1">
			<div style="background:gray;width:100px;height:100px;" id="div2">
				<span id="span1">第一句话</span><br>
				<span id="span2">第二句话</span><br>
				<span id="span3">第三句话</span>
			</div>

		</div><br>
		<input type="button" id="btn" value="按钮">
	</body>
</html>

元素串联

    A.add(B)     将A和B组合一个对象 

    addBack()   把之前的元素添加到当前操作集合中。
                例如 A.children().andBack()  A自己本身也被添加到了子元素集合中

    end         结束最近的一次筛选操作，并返回到前一次的状态。
                A.children().children().end(); 结束孙元素的集合，回到子元素的集合。

    contends()  获取所有的子节点(子元素和文本)    

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				$("#btn").click(function() {
     
     
					//将span1元素和span2元素结合
					//$("#span1").add("#span2").css("background-color","red");
					//将父元素div2也添加到当前操作集合
					//$("#div2").children().addBack().css("background-color","red");
					$("#div2").children().end().css("background-color", "red");
				});
			});
		</script>
		<div style="background:gray;width:100px;height:100px;" class="div1">
			<div style="background:gray;width:100px;height:100px;" id="div2">
				<span id="span1" style="background:yellow;"">第一句话</span><br>
		                <span id=" span2">第二句话</span><br>
				<span id="span3">第三句话</span>
			</div>

		</div><br>
		<input type="button" id="btn" value="按钮">
	</body>
</html>

jQuery事件

blur()          失去焦点 

change()        选择改变时候触发事件，例如select列表 

click()         单击 

dbclick()       双击 

focus()         获得焦点 

keydown()       键盘按下的过程 

keypress()      键盘按到底时 

keyup()         键盘弹起 

mousedown()     鼠标按下 

mousemove()     鼠标移动 

mouseout()      鼠标移出指定元素 

mouseover()     鼠标移入指定元素    

mouseup()       鼠标弹起 

resize()        改变大小，例如窗体改变大小 

scroll()        滚动条滚动 

select()        选择 

submit()        提交 

unload()        页面卸载，页面关闭时 

focusin()       获得焦点,跟focus区别在于，他可以在父元素上检测子元素获取焦点的情况 
                例如父元素内部有一个子元素，当我们在子元素时，会触发focusin。但是不会触发focus。 

focusout()      失去焦点，跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
                例如父元素内部有一个子元素，当我们子元素失去焦点时，会触发fucusout。但是不会触发blur。 

mouseenter()    鼠标移入,跟mouseover事件不同，只有在鼠标指针移入被选元素时，才会触发mouseenter事件。如果鼠标穿过被选元素的子元素，不会触发，但是会触发mouseover事件。 

mouseleave()    鼠标移出,跟mouseout事件不同，只有鼠标指针离开被选元素时，才会出发mouseleave事件。如果鼠标指针离开被选元素的子元素，不会触发，但是会触发mouseout事件

常用事件例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				$("#e01").blur(function() {
     
     
					$("#textMsg").html("文本框失去焦点：blur");
				}).focus(function() {
     
     
					$("#textMsg").html("文本框获得焦点：focus");
				}).keydown(function() {
     
     
					$("#textMsg").append("键盘按下：keydown");
				}).keypress(function(event) {
     
     
					$("#textMsg").append("键盘按下：keypress");
				}).keyup(function() {
     
     
					$("#textMsg").append("键盘按下：keyup");
				});

				//记录移动的次数
				var i = 0;
				$("#e02").mouseover(function() {
     
     
					$("#divMsg").html("鼠标移上：mouseover");
				}).mousemove(function() {
     
     
					$("#divMsg").html("鼠标移动：mousemove , " + i++);
				}).mouseout(function() {
     
     
					$("#divMsg").html("鼠标移出：mouseout");
				}).mousedown(function() {
     
     
					$("#divMsg").html("鼠标按下：mousedown");
				}).mouseup(function() {
     
     
					$("#divMsg").html("鼠标弹起：mouseup");
				});

				$("#e03").click(function() {
     
     
					$("#buttonMsg").html("单击：click");
				}).dblclick(function() {
     
     
					$("#buttonMsg").html("双击：dblclick");
				});

			});
		</script>

		<input id="e01" type="text" /><span id="textMsg"></span> <br />
		<hr />
		<div id="e02">别点我</div><span id="divMsg"></span> <br />
		<hr />
		<input id="e03" type="button" value="可以点击" /><span id="buttonMsg"></span> <br />
	</body>
</html>

focus和focusin例子

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				$("div").focusin(function() {
     
     
					$(this).css("background-color", "#FFFFCC");
				});
				$("div").focusout(function() {
     
     
					$(this).css("background-color", "#FFFFFF");
				});
			});
		</script>
		</head>
		<body>

			<div style="border: 1px solid black;padding:10px;">
				First name: <input type="text"><br>
				Last name: <input type="text">
			</div>

			<p>点击输入框获取焦点，点击输入框外的部分失去焦点。</p>

		</body>
</html>

事件处理

bind(type,function) 给当前对象绑定一个事件。例如A.bind("click",function) 

unbind(type)        解绑bind绑定事件 

one(type,function)  给当前对象绑定一次事件。仅执行一次。 

on(events,function) on() 方法在被选元素及子元素上添加一个或多个事件处理程序，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。 

off(type)           off() 方法通常用于移除通过 on() 方法添加的事件处理程序,off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品   

trigger(type)       在每一个匹配的元素上触发某类事件，会执行浏览器默认动作，会产生事件冒泡。A.trigger("submit"); 

hover(over,out)     简化版鼠标移入和移出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				//给按钮1绑定一个事件
				$("#btn1").bind("click", function() {
     
     
					alert("123");
				});
				//给按钮2绑定一个事件，一点击就解绑按钮1的点击事件
				$("#btn2").bind("click", function() {
     
     
					$("#btn1").unbind("click");
				});
				//给按钮3绑定一次点击事件
				$("#btn3").one("click", function() {
     
     
					alert("只执行一次");
				});
			});
		</script>
		</head>
		<body>

			<input type="button" id="btn1" value="按钮"><br>
			<input type="button" id="btn2" value="按钮"><br>
			<input type="button" id="btn3" value="按钮">

		</body>
</html>

jQuery效果

show([speed],[function])        显示
hide([speed],[function])        隐藏。
toggle([speed],[function])      hide()和show()方法之间切换

滑动
slideDown([speed],[function])   通过调整高度来滑动显示被选元素
slideUp([speed],[function]) 通过调整高度来滑动隐藏被选元素
slideToggle([speed],[function]) slideDown()和slideUp()方法之间切换 

淡入淡出
fadeIn(speed,callback)  淡出显示
fadeOut(speed,callback) 淡入隐藏
fadeToggle(speed,callback) fadeIn()和fadeOut()方法之间切换 
fadeTo(speed,opacity,callback) 允许渐变为指定的透明度。opacity指定透明度，在0与1之间

speed ，显示的时间，单位：毫秒。固定字符串"slow","normal","fast",function,callback都是回调函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<style type="text/css">
			div {
     
     
				border: 1px solid #000;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				//点击按钮1是隐藏和显示   
				$("#b1").click(function() {
     
     
					$("#b1Div").toggle("1000");
				});
				//点击按钮2，是滑动
				$("#b2").click(function() {
     
     
					$("#b2Div").slideToggle("slow");
				});
				//点击按钮3，是淡入淡出
				$("#b3").click(function() {
     
     
					$("#b3Div").fadeToggle("slow");
				});
				//点击按钮4，设定指定透明度
				$("#b4").click(function() {
     
     
					$("#b4Div").fadeTo("slow", 0.25);
				});
			});
		</script>
		</head>
		<body>
			<input type="button" id="b1" value="显示/隐藏 b1Div" />
			<div id="b1Div"></div> <br />
			<input type="button" id="b2" value="滑出/滑入b2Div" />
			<div id="b2Div"></div> <br />
			<input type="button" id="b3" value="淡出/淡入b3Div" />
			<div id="b3Div"></div>
			<input type="button" id="b4" value="设定指定的透明度b4Div" />
			<div id="b4Div"></div>
		</body>
</html>

jQuery AJAX

jQuery load()方法

    语法：$(selector).load(URL,data,callback); 
            URL       请求的地址
            data      请求参数
            callback  回调参数

    如果没有请求参数，发送GET请求。
    如果有请求参数，发送POST请求。
    回掉函数有三个参数，都可以省略。
            -responseTxt - 服务器回应的数据，如果是中文，则必须在服务器端处理乱码
            -statusTXT - 请求的状态。success或 error
            -xhr - 包含 XMLHttpRequest 对象 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
     
     
				//点击按钮向服务器发送数据
				$("#btn").click(function() {
     
     
					//url
					var url = "/JsDemo/SendServlet";
					//数据，json格式
					var data = {
     
     
						"username": "张三",
						"password": "123456"
					};
					$(this).load(url, data, function(responseTxt) {
     
     
						//获取服务器回应的数据，并转换为json对象
						var jsonData = eval("(" + responseTxt + ")");
						alert(jsonData.message);
					});
				});
			});
		</script>
		</head>
		<body>
			<input type="button" value="发送" id="btn">
		</body>
</html>

SendServlet:

 public class SendServlet extends HttpServlet {
    
    

        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
     
            //获取请求方式和请求参数
            String method=request.getMethod();
            String username=request.getParameter("username");
            String password=request.getParameter("password");
            System.out.println("请求方法:"+method);
            System.out.println("username:"+username);
            System.out.println("password:"+password);

            //创建json数据并返回
            String jsonData="{\"message\":\"成功\"}"; 
            //处理乱码
            response.setContentType("application/json;charset=UTF-8");
            response.getWriter().print(jsonData);
        }


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

    }

jQuery $.get()方法

$.get() 发送get请求
语法：jQuery.get(url, [data], [callback], [type])
URL 请求的地址
data 请求参数
callback 回调参数
type 返回内容格式，xml, html, script, json, text,
响应数据，如果设置 application/json;charset=UTF-8 自动将数据转换json对象。
响应数据，如果设置 text/html;charset=UTF-8 ，回调函数获得字符串数据，需要手动转换json对象。我们可以使用type设置"json"，jQuery自动将字符串 转换成 json对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
		    $(document).ready(function(){
     
     
		            $("#btn").click(function(){
     
     
		                var url="/JsDemo/SendServlet";
		                var data={
     
     "username":"张三","password":"123456"};
		                //发送get请求
		                $.get(url,data,function(responseTxt){
     
     
		                    alert(responseTxt.message);
		                });
		            });
		
		    });
		</script>
		</head>
		<body>
			<input type="button" value="发送" id="btn">
		</body>
</html>

SendServlet:

 public class SendServlet extends HttpServlet {
    
    

        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
            String method=request.getMethod();
            String username=request.getParameter("username");
            String password=request.getParameter("password");
            System.out.println("请求方法:"+method);
            System.out.println("username:"+username);
            System.out.println("password:"+password);

            String jsonData="{\"message\":\"成功\"}"; 
            response.setContentType("application/json;charset=UTF-8");
            response.getWriter().print(jsonData);
        }


        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
            // TODO Auto-generated method stub
            doGet(request, response);
        }

    }

jQuery $.post()方法

$.post()   发送post请求
语法：jQuery.post(url, [data], [callback], [type])
和上面的一样，这里就不再给出例子。

jQuery $.ajax()方法

$.ajax()
底层的请求方法。上面的所有jQuery AJAX方法底层都是使用ajax()方法。
该方法通常用于其他方法不能完成的请求，功能强大。

        语法：$.ajax({name:value, name:value, ... })  
        有很多的参数，我们可以参考文档。 

$("#btn").click(function(){
    
    
                var url="/JsDemo/SendServlet";
                var data={
    
    "username":"张三","password":"123456"};
                $.ajax({
    
    
                    "url":url,
                    "data":data,
                    "type":"POST",
                    "success":function(data){
    
    
                        alert(data);
                    },
                    "error":function(){
    
    
                        alert("服务器繁忙，请稍后重试");
                    }
                });
            });

猜你喜欢

转载自blog.csdn.net/m0_46864744/article/details/113037860
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022