jQuery基本介绍

1.jQuery简单入门

jQuery是一个丰富的JavaScript库,库中封装了js中的一些常用方法
作用:wirte less,do more

开发步骤

  • 导入js库
  • js对象转换成jQuery对象
    var jsDiv = document.getElementById("id01"); $(jsDiv)
  • 可以通过jQuery对象调用一些方法
<html>
	<head>
		<meta charset="UTF-8">
		<title>01_jQuery</title>
		<script src="js/jquery-1.8.3.js"></script>
		<script>
			function init(){
				alert("页面载入触发事件");
			}
			//方式1
			jQuery(document).ready(function(){
				alert("jq的页面载入事件111");
			});
			//方式2
			$(document).ready(function(){
				alert("jq的页面载入事件222");
			});
			//方式3
			$(function(){
				alert("jq的页面载入事件333");
			});
		</script>
	</head>
	<body onload="init()">
	</body>
</html>

2.jq对象和js对象的相互转化

<html>
	<head>
		<meta charset="UTF-8">
		<title>jq对象和js对象相互转化</title>
		<script src="js/jquery-1.8.3.js"></script>
		<script>
			/*js方式修改div的内容
			 * 1.点击事件
			 * 	- 获取要操作的那个元素对象
			 * 	- 设置该元素对象的innerHTML属性
			 */
			function jsChange(){
				var div = document.getElementById("div1");
				//div.innerHTML = "使用js方式修改了div内容";
				//将div对象(js对象)--->jquery对象
				$(div).html("js对象转换成jq对象改变div内容方式");
			}
			/*jquery方式修改div的内容
			 1.导入js库
			 2.页面载入事件$(function(){...});
			 3.点击事件$("选择器").click(function(){...});
			 	- 确定元素对象$(#div1).html("内容")*/
			$(function(){
 				$("#btn1").click(function(){
 					//$("#div1").html("使用jq方式修改了div内容");
 					//jquery对象转换成js对象:使用jquery变量来接收:$ 变量名
 					var $div = $("#div1");
 					//jquery的对象访问方式:get(索引):获取该索引指定的元素对象
 					
 					//方式1:直接使用内置方法
 					//var jsDiv = $div.get(0);
 					
 					//方式2:
 					var jsDiv = $div[0];
 					jsDiv.innerHTML = "jquery对象转换成js对象改变div内容方式";
				 });
			});
	
		</script>
	</head>
	<body>
		<input  type="button" value="Js对象修改div内容" onclick="jsChange()" /><br />
		<input  type="button" value="Jq对象修改div内容" id="btn1" /><br />
		<div id="div1">这里的内容将会被js/jq进行修改</div>
	</body>
</html>

3.jQuery动画效果

<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery动画效果</title>
		<script src="js/jquery-1.8.3.js"></script>
		<script>
			/*1.页面载入事件
			 2.给按钮绑定事件
			 3.获取操作的图像对象
			 4.对象调用jquery的基本效果的一些方法*/
			$(function(){
				//隐藏
				$("#btn2").click(function(){
					//获取要操作的元素对象
					//$("#img1").hide(3000);
					//滑动效果
					//$("#img1").slideUp(3000);
					//淡出(透明度:0-1)
					//$("#img1").fadeOut(3000);
					//用户自定义动画效果
					//opacity:透明度:0表示完全隐藏,1完全显示
					$("#img1").animate({width:"1000px",opacity:"0.1"},5000);
				});
				//显示
				$("#btn1").click(function(){
					/*$("#img1").show();*/
					//$("#img1").slideDown(3000);
					//淡入
					$("#img1").fadeIn(3000);
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="显示" id="btn1" />
		<input type="button" value = "隐藏" id="btn2" /><br />
		<img src="img/xixi.png" width = "500px" id="img1"/>
	</body>
</html>

4.定时弹出广告

1.页面加载事件
2.开启定时器:经过3s后显示这个广告
3.定义显示广告的函数

获取操作的那个元素对象
调用jquery的动画效果
经过5s后隐藏广告

4.定义隐藏广告的函数

获取元素对象
调用动画效果方法

<html>
	<head>
		<meta charset="UTF-8">
		<title>定时弹出广告</title>
		<script src="js/jquery-1.8.3.js"></script>
		<script>
		function showAdv(){
			$("#img1").slideDown(3000);
			//开启定时器
			window.setTimeout("hideAdv()",5000);
		}
		function hideAdv(){
			$("#img1").hide();
		}
		$(function(){
			window.setInterval("showAdv()",3000);
		});
		</script>
	</head> 
	<body>
		<img src="img/xixi.png" width="500px" style="display: none;" id="img1"/>
	</body>
</html>

5.基本选择器

序号 选择器 用法
1 id选择器 $("#id").css(“样式属性”,“属性值”);
2 类选择器 $(".类名").css(“样式属性”,“属性值”);
3 标签选择器 $(“标签名”).css(“样式属性”,“属性值”);
4 通配符选择器 $(" * ").css(“样式属性”,“属性值”);
5 并集选择器 selector1,selector2…{操作}

6.层级选择器

序号 选择器 用法
1 子元素选择器 seletor1 > selector2
2 后代选择器 seletor1 selector2
3 相邻兄弟选择器 seletor1 + selector2
4 兄弟选择器sibling seletor1 ~ selector2

7.基本过滤器

过滤器 概述
:first 获取匹配的第一个元素
:last 获取最后一个元素
:even 匹配所有索引值为偶数的元素,从 0 开始计数
:odd 匹配所有索引值为奇数的元素,从 0 开始计数
:gt 匹配所有大于给定索引值的元素
:lt 匹配所有小于给定索引值的元素

8.属性选择器

属性选择器 描述 举例
[attribute] 匹配包含给定属性的元素 $(“a[href]”).css(“background-color”,"#000");
[attribute=value] 匹配给定的属性是某个特定值的元素 $(“input[name=‘newsletter’]”).css(“background-color”,"#000");

9.表单选择器

  • :input
  • :text
  • :password
  • :reset…

表单对象属性

  • enabled:匹配所有可用元素
  • disabled:匹配所有不可用元素
  • checked:匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
  • selected:匹配所有选中的option元素

10.jquery的dom操作

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.3.js"></script>
		<script>
			
			$(function(){
				$("#btn1").click(function(){
					/*$("#div1").append("我准备点了");*/
					/*$("#div1").prepend("我准备点了");*/
					$("#div1").after("我准备点了");
				});
			});
			/*
			 append("内容"):在当前某个节点后面追加内容*/
			/*appendTo("内容"):把所有匹配的元素追加到另一个指定的元素元素集合中
			 prepend(contend):在节点前追加内容
			 after(contend):在节点后插入内容
			 empty():删除匹配的元素集合中所有的子节点*/
		</script>
	</head>
	<body>
<input type="button" value="点我试试" id="btn1"/>
<div id="div1">在这里添加相关内容</div>
	</body>
</html>

11.jquery的遍历

//方式1(将js对象转换为jq对象)
$(arr).each(function(i,n){
	console.log(i+----+n)});

//方式2
$.each(function(i,n){
	console.log(i+"----"+n);
});

实现省市联动:

<html>
	<head>
		<meta charset="UTF-8">
		<title>省市联动</title>
		<script src="js/jquery-1.8.3.js"></script>
		<script>
			/*jquery的选项卡发生变化事件:change(fn);
			 1.准备数据*/
			var province =[ ["惠州市","广州市","深圳市","东莞市"],
			["西安市","咸阳市","宝鸡市","神木市"],
			["太原市","大同市","运城市","吕梁市"]];
			//页面载入事件
			$(function(){
				//选择省份
				$("#province").change(function(){
					//得到城市对象
					var city = province[this.value];
					$("#city").empty();
					//遍历城市
					$(city).each(function(i,n){
						$("#city").append("+n+"")
					});
				});
			});
		</script>
	</head>
	<body>
籍贯:
<select id="province">
	<option value="-1">请选择</option>
	<option value="0">广东省</option>
	<option value="1">陕西省</option>
	<option value="2">山西省</option>
</select>
<select id="city">	
</select>
	</body>
</html>

你可能感兴趣的:(jQuery)