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>