jQuery基础知识

最新推荐文章于 2023-05-31 08:33:36 发布

段小鱼爱吃鱼

最新推荐文章于 2023-05-31 08:33:36 发布

阅读量202

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/duannl26/article/details/74784489

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一引入

1.1 jQuery就是js的一个类库，是单独的js文件，对常用的方法和对象进行封装，方便我们使用。

通过script标签的src属性导入；

1.2 获取jQuery对象 $（"选择器"）

页面加载：js：windows.οnlοad=function(){};

jQuery ：$(function(){...}); 或者 $(document).ready(function(){});

1.3 派发事件：$("选择器").click(function(){...});

基本事件有：focus ; blur ; change ; click;

1.4 jQuery中的效果：

隐藏或展示：show();hide()

滑入或滑出：slideDown();slideUp();

淡入或淡出：fadeIn();fadeOut();

二选择器

2.1 基本选择器：$("#id值") $(".class值") $("标签名") $("*") //获取多个选择器用逗号隔开

 $(function(){
 	
 	//<input type="button" value="选择 id为 one 的元素." id="btn1"/> 
 	$("#btn1").click(function(){
 		$("#one").css("background-color","red");
 })
 	
 	//<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
 	$("#btn2").click(function(){
 		$(".mini").css("background-color","green");
 	})
 	
 	//<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
 	$("#btn3").click(function(){
 		$("div").css("background-color","yellow");
 	})
 	
 	//<input type="button" value="选择 所有的元素." id="btn4"/>
 	$("#btn4").click(function(){
 		$("*").css("background-color","red");
 	})
 	
 	//<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
 	$("#btn5").click(function(){
 		$("span,#two").css("background-color","green");
 	})
 })

2.2 层次选择器：a b:a的所有b后代
a>b:a的所有b孩子(不包括孙子)
a+b:a的下一个兄弟(大兄弟)
a~b:a的所有弟弟们

$(function(){
 		//<input type="button" value="选择 body内的所有div元素." id="btn1"/>
 		$("#btn1").click(function(){
 			$("body div").css("background-color","red");
 		})
 		
 		//<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
 		$("#btn2").click(function(){
 			$("body>div").css("background-color","red");
 		})
 		
 		//<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
 		$("#btn3").click(function(){
 			$("#one+div").css("background-color","red");
 		})
 		
 		//<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
 		$("#btn4").click(function(){
 			$("#two~div").css("background-color","red");
 		})
 	})

2.3 基本过滤选择器：:frist 第一个
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >索引大于哪一个值
:lt(index) <索引小于哪一个值

$(function(){
 		
 		$("#btn6").click(function(){
 			$("div:gt(3)").css("background-color","green");
 		})
 	});

2.4 内容过滤器：:has("选择器"):包含指定选择器的元素

2.5 可见过滤：:hidden 在页面不展示元素一般指 input type="hidden" 和样式中display:none
:visible
2.6 属性过滤器:[属性名]
[属性名="值"]
2.7 表单过滤：:input 所有的表单子标签 input select textarea button
input 仅仅获取input标签