前端---jQuery基础

jquery是一个框架,实际上就是js库,封装了大量javascriptAPI
jquery开发步骤:

导入js核心库
确定页面载入事件
执行对象

方式一:jQuery(document).ready(function(){});
方式二:$(document).ready(function(){});
方式三:$(function(){});

jQuery的基本语法

1.在JavaScript标签体中导入jQuery的JavaScript库<script type="text/javascript" src="../js/jquery-1.11.0.js"> </script>
2.页面载入<input type="button" name="" id="btn2" value="jq更改" />
3.编写jQuery函数绑定事件源

jQuery中的对象以$符号开头
绑定标签对象：$(“标签对象”)

4.触发事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js与jq的相互转换</title>
			<!--引入jq的js库-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js">
		</script>
		<script type="text/javascript">
		
		//！！！
		$(function(){
				//单击点击事件---#btn2就是jq对象
				$("#btn2").click(function(){
					$("#div1").html("使用jq方式更改内容");
				});
			});
			}
			
			</script>
	</head>
	<body>
			<input type="button" name="" id="btn2" value="jq更改" />
		<br />
			<div id="div1">
			这里的内容将会被更改
		</div>
	</body>
</html>

JavaScript和jQuery对象之间的相互转换

1.js–>jq
给JavaScript对象前加$符号就是将JavaScript对象转换为jQuery对象：var $Div=$(div);

<script type="text/javascript" src="../js/jquery-1.11.0.js">
		</script>
<script type="text/javascript">
function transformStoQ(){
				//js对象--》jq对象：在js对象前面添加$(js对象）
				var div=document.getElementById("div1");
				var $Div=$(div);
				$Div.html("将js对象转换为jq对象修改div");
		}
</script>
<body>
<input type="button" name="" id="bt3" value="js对象转换为jq对象转换更改" onclick="transformStoQ()" />
		<div id="div1">
			这里的内容将会被更改
		</div>
	</body>

2.jq–>js
jquery对象.get()会获取当前jQuery对象的所有同名标签对象转换为JavaScript对象集合

<script type="text/javascript" src="../js/jquery-1.11.0.js">
		</script>
<script type="text/javascript">
$(function(){
			
			$("#bt4").click(function(){

			//get()会获取所有指定标签对象
			var div=$("#div1");
			var jsDiv=div.get(0);
			jsDiv.innerHTML="将jq对象转换成JS对象更改div内容";
			
		});
		});
</script>
<body>
		<br /><input type="button" name="" id="bt4" value="jq对象转换为js对象转换更改"  />
		<div id="div1">
			这里的内容将会被更改
		</div>
	</body>

jquery提供的动画效果

1.基本动画效果：show()/hide()
2.滑动动画效果：slideUp()/slideDown()
3.淡入淡出效果：fadeIn()/fadeOut()
4自定义动画效果

由透明度opacity属性决定隐藏效果或是显示效果；
opacity

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery的动画效果</title>
			<!--引入jq的js库-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js">
		</script>
		<script type="text/javascript">
			//隐藏动画
			$(function(){
				$("#bt2").click(function(){
					$("#img1").hide(1000);//可以指定slow fast mormal 毫秒数
				});
			});
			
			//显示动画
			$(function(){
				$("#bt1").click(function(){
					$("#img1").show();
				});
			});
			
			//show() hide()都是基本效果
			
			//滑动效果
			$(function(){
				$("#bt3").click(function(){
					//由下向上滑动
					
					$("#img1").slideUp(1000);
				});
			});
			
			$(function(){
				$("#bt4").click(function(){
//由上向下的滑动
					$("#img1").slideDown(1000);
				});
			});
			
			//通过透明度实现淡入淡出效果
			$(function(){
				$("#bt5").click(function(){
					$("#img1").fadeIn(3000);
				});
			});
			$(function(){
				$("#bt6").click(function(){
					$("#img1").fadeOut(2000);
				});
			});
			
			//自定义显示动画
			//animate()
			//opacity:透明度属性：0--1之间，0表示完全隐藏，1表示完全显示
			$(function(){
				$("#bt7").click(function(){
					$("#img1").animate({width:"500px",opacity:"1"},5000);
				});
			});
			$(function(){
				$("#bt8").click(function(){
					$("#img1").animate({width:"500px",opacity:"0"},5000);
				});
			});
		</script>
	</head>
	<body>
		<input type="button" name="bt1" id="bt1" value="基本效果：显示" /><br />
		<input type="button" name="bt2" id="bt2" value="基本效果：隐藏" /><br />
		<input type="button" name="bt2" id="bt3" value="滑动效果：显示" /><br />
		<input type="button" name="bt2" id="bt4" value="滑动效果：隐藏" /><br />
		<input type="button" name="bt2" id="bt5" value="淡入效果：显示" /><br />
		<input type="button" name="bt2" id="bt6" value="淡出效果：隐藏" /><br />
		<input type="button" name="bt2" id="bt7" value="自定义效果：显示" /><br />
		<input type="button" name="bt2" id="bt8" value="自定义效果：隐藏" /><br />
		<br />
		<img src="../img/4.ico"/ id="img1">
	</body>
	
</html>

如果用户想自己画一些图形效果：canves:画布（h5）

基本选择器

1.id选择器：$("#divID").css("css样式"，“属性值”)
2.class选择器：$(".div的claa属性值").css("css样式"，“属性值”)
3.元素选择器：$("标签").css("css样式"，“属性值”)
4.通配符选择器(选中所有标签)：$("*").css("css样式"，“属性值”)
5.并集选择器：$(".div的claa属性值，标签").css("css样式"，“属性值”)

层级选择器

子元素选择器：选中selector1 下的所有selector2元素：$("selector1 selector2").css("css样式"，“属性值”)
后代选择器：选中selector1 下的所有selector2子元素：$("selector1>selector2").css("css样式"，“属性值”)
相邻兄弟选择器：选中selector1 下的相邻兄弟selector2元素$("selector1+selector2").css("css样式"，“属性值”)
紧挨着的兄弟选择器：选中selector1 后面的弟弟selector2元素$("（slibing）selector1 ~selector2").css("css样式"，“属性值”)

基本过滤器

过滤掉指定元素中第一个元素：

$("#divID:first").css("css样式"，“属性值”)
$("#divID").first().css("css样式"，“属性值”)

过滤掉偶数个元素：$("#divID:even").css("css样式"，“属性值”)
过滤掉奇数个元素：$("#divID:odd").css("css样式"，“属性值”)

属性选择器

选中指定标签中的指定属性：

选中单个属性：$("指定标签[指定属性]").css("css样式"，“属性值”)
选中多个属性：$("指定标签[指定属性1][指定属性2]").css("css样式"，“属性值”)
选中符合条件（属性值）的属性：$("指定标签[指定属性=‘XXX’]").css("css样式"，“属性值”)

jquery中的遍历

遍历的函数：each(数组对象，function（）{…})
1.jquery对象调用

$(数组对象).each(function(i,n){
//i:表示角标值（0开始）
//n:表示具体的元素内容
//控制台输出：console.log("");
console.log("i+"------"+n");
})

2.直接使用jquery函数调用

$.each(数组对象，function（）{...})

jquery的省市联动操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
			<!--引入jq的js库-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js">
		</script>
		
		<script type="text/javascript">
			//使用jquery语言实现省市联动
			//1.准备数据
			var provinces=[
			["惠州市","深圳市","广州市","东莞市"],
			["西安市","宝鸡市","咸阳市","安康市"],
			["大同市","太原市","运城市","吕梁市"]
			];
			
			//2.加载页面载入事件
			$(function(){
				//选择省份
				$("#province").change(function(){
					
					
				//得到城市对象
				var cities=provinces[this.value];
				
				//在遍历之前：清空city中的内容
				$("#city").empty();
				
				//遍历城市
				$(cities).each(function(i,n){
				//选中城市所在的select
				$("#city").append("<option>"+n+"</option>")
				
			})	
				})
			})
		</script>
	</head>
	<body>
		<!--
        	作者：offline
        	时间：2019-04-12
        	描述：省份列表
        -->
		<select name="province" id="province">
			<option value="-1">请选择</option>
			<option value="0">广东省</option>
			<option value="1">陕西省</option>
			<option value="2">山西省</option>
			<option value="3">江苏省</option>
		</select>
		<select id="city">
			<option value=""></option>
		</select>
	</body>
</html>