2020-12-07 JQuery基础用法

最新推荐文章于 2024-04-23 15:19:32 发布

向着秃头出发

最新推荐文章于 2024-04-23 15:19:32 发布

阅读量218

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_46544808/article/details/110736497

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、JQuery基础

1、使用JQuery

		$(function(){
				//获得h1标签
				//绑定点击事件
				$("h1").click(function(){
					//获得ul标签
					var $ul =$("ul");
					//隐藏ul
					$ul.hide();
				});
			});
//"$" --> 指标识符，让浏览器知道这是jquery。
//"$(function(){})" -->指等同于$(document).ready(function(){ 具体方法体 })：作用是告诉浏览器当DOM结构完成后便执行这个方法，不同于onload，onload是内容加载完成后。
			//$也可以写成jQuery
			jQuery(function(){
				console.info("ss");
			});

2、链式操作隐式迭代

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(function(){
				//链式操作
				$("h2").css("background-color","red")
				.next().css("border","solid 2px blue ");
				//选中了所有的li
				//隐式迭代
				$("li").css("background","green");
			});
		</script>
	</head>
	<body>
		<h2>everyday is sun</h2>
		<li>xxx</li>
		<li>yyyy</li>
		<li>zzz</li>	
	</body>
</html>

在这里插入图片描述

3.Dom对象和jQuery对象转换

			$(function(){
				var h1=document.getElementsByTagName("h1")[0];//dom对象
				var $h1=$("h1");//jQuery类型对象
				console.info(h1==$h1);//false
				//dom和jquery互相转换
				//dom转换jquery对象  $(dom对象)
				var $h11=$(h1);
				//jquery转换dom:   jquery对象.get(0);
				var h11=$h11.get(0);
				console.info(h11==h1);//true
				console.info("ss");
			});
			
			$(function(){
				$("h1").click(function(){
					//事件源jquery对象
					var $j = $(this);
					console.info($j);//
				});
			});

二、jQuery基本选择器

1.基本选择器

		$(function(){
				//1、标签选择器 $(标签选择名)；
				$("ul").css("background-color","red");
				//2、类选择器
				$(".cli").css("background-color","green");
				//3、id选择器
				$("#li2").css("background-color","black");
				//4、并集选择器
				$(".cli,#li2").css("background-color","blue");
				//5、全局选择器
				$("*").css("background-color","yellow");
			});

-----
		<ul>
			<li class="cli">1</li>
			<li id="li2">2</li>
			<li>3</li>
		</ul>

2.层次选择器

	$(function(){
				//后代选择器  $("ancestor descendant")选择给定的祖先元素的所有后代元素
				$("ul li").css("color","red");//1 2  a b 3
				//子选择器 $("parent>child") 选择所有指定“parent”元素中指定的child直接子元素
				$("ul>li").css("color","green");//1 2 3
				//相邻元素(紧邻元素)  $("prev+next")选择所有紧接在prev元素后的next元素
				$("#li1+li").css("color","yellow");//
				//同辈元素选择器(后面同辈)也叫一般兄弟选择器  
				//$("prev~silblings")匹配prev元素之后的所有兄弟元素，具有相同的父元素，并匹配过滤 siblings选择器
				$("#li1~li").css("color","black");//3
			});
------
		<ul>
			<li>1</li>
			<li id="li1">2</li>
			<div>ddd</div>
			<li>
				<ol>
					<li>a</li>
					<li>b</li>
				</ol>
			<li>3</li>
			</li>
		</ul>

注意：1. 层级选择器都有一个参考节点
2. 后代选择器包括子选择器的选择的内容
3. 一般兄弟选择器包含相邻兄弟选择的内容
4. 相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素

3.属性选择器

			$(function(){
				//1、包含某个属性
				$("a[href]").css("color","red");
				//2、属性等于
				$("a[href='#']").css("color","green");
				//3、属性不等于
				$("a[href!='#']").css("color","blue");
				//4、属性以……开头
				$("a[href^=a]").css("color","red");
				//5、属性以……结尾
				$("a[href$=c]").css("color","yellow");
				//6、属性包含
				$("a[href*=b]").css("color","pink");
			});

------------------
	<body>
		<a>1</a>
		<a href="#">2</a>
		<a href="aabbc">3</a>
	</body>

4.过滤选择器

			$(function(){
				//第一个节点
				$("li:first").css("color","red");//1
				//最后一个
				$("ul li:last").css("color","green");//3
				//除选中之外的 返回ul li 除去id为li2的元素
				$("ul li:not(#li2)").css("color","blue");//1 3
				//选中索引为偶数的元素（下标从0开始）（jQuery对象是一个集合）
				$("ul li:even").css("color","gray");//1 3
				//选中元素为奇数的元素
				$("ul li:odd").css("color","red");//2
				//下标等于
				$("ul li:eq(0)").css("color","yellow");//1
				//下标大于
				$("ul li:gt(0)").css("color","green");//2 3
				//下标小于
				$("ul li:lt(2)").css("color","blue");//1 2
				//选中标题元素
				$(":header").css("color","red");
				$(":header").mouseover(function(){
					//获得焦点
					$(":focus").css("border","solid 1px red");
				});
			});

----------------------
	<body>
		<ul>
			<li>1</li>
			<li id="li2">2</li>
			<li>3</li>
		</ul>
		<h1>aaa</h1>
		<input type="text"/>
	</body>

5.可见性过滤选择器

		//根据元素的可见与不可见状态来选取元素
			$(function(){
				//选中隐藏元素
				$("p:hidden").show();
				//选中可见的元素
				$("h1:visible").hide();
			});
-------------------------
	<body>
		<p style="display: none">111</p>
		<h1>222</h1>
	</body>

三、jQuery事件

1.鼠标事件

			$(function(){
				//悬浮//鼠标指针位于元素上方时触发
				$("div").mouseover(function(){
					console.info("----over----");
				});
				//鼠标移出元素时触发
				$("div").mouseout(function(){
					console.info("----out----");
				});
				//当鼠标指针在指定的元素中移动时触发，鼠标移动一个像素，就h会发生一次mousemove事件
				$("div").mousemove(function(){
					console.info("----move----");
				});
				//鼠标移出元素时触发
				$("div").mouseleave(function(){
					console.info("----leave----");
				});
			});

2、键盘事件

1、keydown()：在键盘按下时触发。
2、keyup()：是按下键盘起来后的事件。
3、keypress()：在敲击按键时触发，我们可以理解为按下并抬起同一个按键。

			$(function(){
				$(document).keydown(function(event){
					if(event.keyCode==83){
						var tops = $("div").css("top");
						var ntop = parseInt(tops.substring(0,tops.indexOf("px")))+20;
						$("div").css("top",ntop+"px");
					}
				});
			});

3、浏览器事件

1.scroll([[data],fn]) 当用户滚动指定的元素时，会发生 scroll 事件。
2.resize([[data],fn]) 当调整浏览器窗口的大小时，发生 resize 事件。
参数说明：
fn ：Function类型在每一个匹配元素的scroll事件中绑定的处理函数。
data ：Object类型一个对象,它包含的数据键值对映射将被传递给事件处理程序

			$(function(){
				//改变窗口大小触发
				$(window).resize(function(){
					console.info("----resize----");
				});
			});

4、事件的绑定与移除

			$(function(){
				//绑定事件
				$("input").bind("click",function(){
					console.info("----绑定事件----");
				});
				
				$("input").bind({mouseover:function(){
					console.info("---over---");
				},mouseout:function(){
					console.info("---out---");
				}});
				//移除事件
				$("input").unbind("click");
			});

5、复合事件

		$(function(){
				//mouseover和mouseout组合
				$("input").hover(function(){
					console.info("---over---");
				},function(){
					console.info("----out----");
				});
				
				$("input").click(function(){
					//反复增加，删除样式
					//toggleClass在添加和移除间反复切换
					$("input").toggleClass("a");
				});
			});

6、动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background: red;
				width:100px;
				height: 100px;
			}
			input{
				position: absolute;
				top:110px;
				left: 20px;
			}
		</style>
		<script src="../js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("input").hover(function(){
					$("div").hide(2000);
					//淡出
					$("div").fadeOut(1000);
					//改变高度（卷帘）
					$().slideUp(1000);
				},function(){
					$("div").show(2000);
					//淡入
					$("div").fadeIn(1000);
					//改变高度（卷帘）
					$("div").slideDown(1000);
				});
			});
		</script>
	</head>
	<body>
		<div></div>
		<input type="button" value="按钮" />
	</body>
</html>

7、自定义动画(animate)

		$(function(){
				$("input").click(function(){
					//定义动画
					$("div").animate({width:"500px"},500,function(){
						console.info("-----动画结束-----");
					});
				});
			});

animate更多用法

四、jQueyDOM操作

1、格式操作

			$(function(){
				//操作单个样式
				$("p").css("font-size","30px");
				//操作多个样式
				$("p").css({"color:red","background":"green"});
				//追加样式
				//$("p").addClass("a");
				$("p").addClass("a b");
				//移除样式
				//$("p").removeClass("a");
				$("p").removeClass();
			});

		$(function(){
				$("p").click(function(){
					//addClass("a")和removeClass("a")相互切换
					//$("p").toggleClass("a");
					//是否包含某个样式
					if($("p").hasClass("a")){
						$("p").removeClass("a");
					}else{
						$("p").addClass("a");
					}
				});
			});

2、内容操作

			$(function(){
				//插入文本
				$("div").text("<h1>bbb</h1>");
				//获取值
				var d=$("div").text();
				console.info(d);
			});

3、属性值操作

			$(function(){
				//获取value属性的值
				console.info($("input").val());//123
				//设置value的值
				$("input").val("342");
				//设置属性的值
				$("input").attr("type","button");//text-->button
				//获取属性的值
				console.info($("input").attr("type"));//button
				//删除属性
				//$("input").removeAttr("value");
				//console.info($(input).val());//error:input is not defined
				//属性设置多个值
				$("input").attr({"readonly":"true","disabled":"true"});
			});

	<body>
		<input type="text" value="123" />
	</body>

4、创建节点

			$(function(){
				//创建节点
				var $li=$("<li>1</li>");
				$("ul").append($li);
			});

	<body>
		<ul></ul>
	</body>

5、插入节点

			$(function(){
				var $li1=$("<li>1</li>");
				var $li2=$("<li>3</li>");
				//$("ul").append($li2);//末尾追加
				//$("ul").prepend($li1);//放在前面
				$li2.appendTo($("ul"));//末尾追加
				$li1.prependTo($("ul"));//放在前面
			});


			$(function(){
				var $li3=$("<li>a</li>");
				var $li4=$("<li>b</li>");
				//$("#li").before($li3);//同辈元素前面li3放到2前面
				//$("#li").after($li4);//同辈元素后面
				$li3.insertBefore($("#li"));
				$li4.insertAfter($("#li"));
			});

6、删除节点

			$(function(){
				//$("ul").remove();//删除元素
				$("ul").empty();//清空元素
				console.info($("ul"));
			});

7、替换节点

			$(function(){
				var $li=$("<li>a</li>");
				$("ul li:first").replaceWith($li);
			});

向着秃头出发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-12-07 JQuery基础用法

一、JQuery基础1、使用JQuery $(function(){ //获得h1标签 //绑定点击事件 $("h1").click(function(){ //获得ul标签 var $ul =$("ul"); //隐藏ul $ul.hide(); }); });//"$" --> 指标识符，让浏览器知道这是jquery。//"$(function(){})" -->指等同于$(document).ready
复制链接

扫一扫