jQuery的简单实用

最新推荐文章于 2022-10-19 15:31:15 发布

hzf_123

最新推荐文章于 2022-10-19 15:31:15 发布

阅读量217

点赞数

分类专栏： javaee

本文链接：https://blog.csdn.net/hzf_123/article/details/77887710

版权

javaee 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.jquery和html的整合
jquery是单独的js文件,通过script标签的src属性导入即可。
2.获取一个jquery对象：
$("选择器") 或者 jQuery("选择器")
3.dom对象和jquery对象之间的转换
dom对象===>jquery对象
$(dom对象)
jquery对象===>dom对象
方式1:
jquery对象[index]
方式2:

jquery对象.get(index)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="../js/jquery-1.11.0.min.js"></script>
    <body>
    	<input type="button" id="bb" value="点我吧" name="按钮"/>
    	<span id="span" >这是一个span标签</span>
    </body>
    <script type="text/javascript">
    	var but=document.getElementById("bb");
//   	alert(but.value);
//  	dom对象和jQuery对象之间的转换
		var $user=$(but);
//		alert($user.val());
//		jQuery对象和dom对象之间的转换
		var $dos=$("#bb");
//		alert($dos.name);
		var doms=$dos.get(0);
//		alert(doms.value)
//		alert(doms.name);
		var uu=document.getElementById('span');
		alert(uu.innerHTML)
		$dos=$("#span");
		alert($dos.innerHTML); //undefined
		doms=$dos.get(0);
		alert(doms.innerHTML)
		
    </script>
</html>

4.页面加载:
js:
window.οnlοad=function(){}//在一个页面中只能使用一次
jquery 在一个页面中可以使用多次
方式1:
$(function(){...})
方式2:
$(document).ready(function(){});
5.派发事件:
$("选择器").click(function(){...});
等价于原生js中
dom对象.οnclick=function(){....}
掌握事件:
focus
blur
submit
change
click
6.jquery中效果:
隐藏或展示
show(毫秒数) hide(毫秒数)
滑入或滑出
slideDown(毫秒数):向下滑入
slideUp(毫秒数):向上滑出
淡入或淡出
fadeIn(int):淡入

fadeOut(int):淡出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="../js/jquery-1.11.0.min.js"></script>
	<script>
//	$(function(){})表示页面加载成功
		$(function(){
			$("#but1").click(function(){
				//alert("123");
				//$("#img1").hide(2000);//隐藏图片
				//$("#img1").fadeToggle(2000);//淡入淡出  表示切换
				//$("#img1").show(2000);//展示图片
				//$("#img1").toggle(2000);//
				$("#img1").slideToggle(2000);//滑入滑出切换
			});
		})
	</script>
	<body>
		<div id="div1">
			<input type="button" name="按钮" id="but1" value="展示" />
			<img src="../img/ad.jpg" width="100%" id="img1" />
		</div>
	</body>
	
</html>

7.选择器总结:
基本选择器★
$("#id值") $(".class值") $("标签名")

获取所有:$("*")
获取多个选择器用逗号隔开
$("#id值,.class值")
层次选择器 ★
a b:a的所有b后代
a>b:a的所有b孩子
a+b:a的下一个兄弟(大弟弟)
a~b:a的所有弟弟
基本过滤选择器:★
:frist 第一个
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >
:lt(index) <
内容过滤:
:has("选择器"):包含指定选择器的元素
可见过滤:
:hidden 在页面不展示元素一般指 input type="hidden" 和样式中display:none
:visible
属性过滤器:★
[属性名]
[属性名="值"]
表单过滤:

:input 所有的表单子标签 input select textarea button

<script>
	$(function(){
		$("#btn1").click(function(){
			$("#one").css("background-color","greenyellow");
		})
		$("#btn2").click(function(){
			$(".mini").css("background-color","aqua");
		})
		$("#btn3").click(function(){
			$("div").css("background-color","blueviolet");
		})
		$("#btn4").click(function(){
			$("*").css("background-color","deepskyblue");
		})
		$("#btn5").click(function(){
			$("span,#two").css("background-color","palevioletred");
		})
	})
</script>

<script type="text/javascript">
 	$(function(){
 		$("#btn1").click(function(){
 			$("body div").css("background-color","greenyellow");//a b :表示a的所有b后代
 		})
 	})
 	$(document).ready(function(){
 		$("#btn2").click(function(){
 			$("body>div").css("background-color","aqua")//a>b 表示a的所有b孩子
 		})
 	})
 	$(function(){
 		$("#btn3").click(function(){
 			$("#one+div").css("background-color","greenyellow");//a+b :表示a的下一个兄弟
 		})
 	})
 	$(function(){
 		$("#btn4").click(function(){
 			$("#two~div").css("background-color","lightblue");//a~b :表示a的所有弟弟
 		})
 	})
 </script>
<script type="text/javascript">
 	$(function(){
 		$("#btn1").click(function(){
 			$("div:first").css("background-color","greenyellow");// :frist 第一个元素
 		})
 	});
 		$(function(){
 		$("#btn2").click(function(){
 			$("div:last").css("background-color","blue");// :last第一个元素
 		})
 	});
 	$(function(){
 		$("#btn3").click(function(){
 			$("div:even").css("background-color","yellow");// :even 索引值为偶数的元素
 		})
 	});
 		$(function(){
 		$("#btn4").click(function(){
 			$("div:odd").css("background-color","yellow");// :odd 索引值为奇数的元素
 		})
 	});
 	$(function(){
 		$("#btn5").click(function(){
 			$("div:eq(3)").css("background-color","yellow");// :eq(index) 指定索引处的元素
 		})
 	});
 		$(function(){
 		$("#btn6").click(function(){
 			$("div:gt(3)").css("background-color","yellow");// :gt(index) 大与 给定索引的元素
 		})
 	});
 		$(function(){
 		$("#btn7").click(function(){
 			$("div:has('.mini')").css("background-color","yellow");// :has("选择器"):包含指定选择器的元素
 		})
 	});
 </script>
 <script type="text/javascript">
 	$(function(){
 		$("#btn1").click(function(){
 			//选取含有 属性title 的div元素
 			$("div[title]").css("background-color","greenyellow");
 		})
 		$("#btn2").click(function(){
 			//选取 属性title值等于“test”的div元素
 			$("div[title='test']").css("background-color","aqua");
 		})
 	});
 
</script>

8.遍历数组
数组.each(function(){});
$.each(遍历数组,function(){});

注意:
each的function中可以加两个参数 index和dom
index是当前遍历的索引值
dom指代的是当前遍历的dom对象(开发中一般使用this即可)
//
设置或者获取value属性
jquery对象.val():获取
jquery对象.val("...."):设置
/
设置获取获取标签体的内容
html()
text()
设置的区别:
html:会把字符串解析
text:只做为普通的字符串
获取的区别:
html:获取的html源码
text:获取只是页面展示的内容
//
创建一个元素: $("<标签></标签>")
///
9.文档操作:
内部插入
a.append(c):将c插入到a的内部(标签体)后面
a.prepend(c):将c插入到a的内部的前面

appendTo
prependTo
外部插入
a.after(c):将c放到a的后面
a.before(c):将c放到a的前面

a.insertAfter(c)
a.insertBefore(c)
删除
empty() 清空元素

remove() 删除元素

<!DOCTYPE html>
<html>
  <head>
  <title>01_内部插入节点.html</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		//1.在city的后面内部追加 反恐
		//$("#city").append($('#fk'))
		//2.在city的前面内部插入 反恐
		//$("#city").prepend($('#fk'))
		//3.在city外部插入
		//$("#city").after($('#fk'))
		//4.删除id为city的ul元素
		//$("#city").remove('ul')
	});
	$(function(){
		//$("#city").text("<a>新来的</a>");//会把“<a>新来的</a>”整体写入ul标签中
		$("#city").html("<a>后来的</a>");//会解析字符串中的内容，指只会把“后来的”写入标签中
		//alert($("#city").html())//获取到id为city的标签体中的内容是 <a>新来的</a> 
		alert($("#city").text())  //获取到id为city的标签体中的内容是 后来的
	})
	</script>
	</head>
	<body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
			 <a>你好吗</a>
	</body>
</html>

hzf_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的简单实用

1.jquery和html的整合jquery是单独的js文件,通过script标签的src属性导入即可。2.获取一个jquery对象：$("选择器") 或者 jQuery("选择器")3.dom对象和jquery对象之间的转换dom对象===>jquery对象 $(dom对象)jquery对象===>dom对象方式1:jquery对象[index]方式2:
复制链接

扫一扫