- $(this)
$(this) ==>表示当前操作的对象
注意点 jquery的事件 都没有前缀on
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
</head>
<body>
<ul>
<li>AA</li>
<li>BB</li>
<li>CC</li>
</ul>
<script>
//jQuery的事件都没有前缀 on
$("ul li").click(function(){
//两种方式都可以获取标签中间的内容.html()/.text()
//alert($(this).html());// 当前操作的标签
alert($(this).text());
});
</script>
</body>
</html>
- jquery 动效
1. show() 显示
2. hide() 隐藏
3. toggle() 显示 隐藏
参数 时间(毫秒值) 第二个参数就是执行这个函数 所触发的事件
4. fadeIn() 显示
5. fadeOut() 隐藏
6. fadeToggle() 淡入淡出的效果
7. slideUp() 显示
8. slideDown() 隐藏
9. slideToggle() 显示 隐藏
==>从上到下的显示隐藏的效果
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<style>
div{
width: 150px;
height: 150px;
border: 1px red solid;
}
</style>
</head>
<body>
<div id="dd">
1111
</div>
<input type="button" id="op1" value="显示" />
<input type="button" id="op2" value="隐藏"/>
<input type="button" id="op3" value="切换"/>
</body>
<script>
//显示.show()
$("#op1").click(function(){
//$("#dd").show(2000,alert("111"));
//$("#dd").fadeIn(2000,alert("111"));
$("#dd").slideUp(2000,alert("111"));
});
//隐藏.hide()
$("#op2").click(function(){
//$("#dd").hide(2000,alert("222"));
//$("#dd").fadeOut(2000,alert("222"));
$("#dd").slideDown(2000,alert("222"));
});
//切换 .toggle
$("#op3").click(function(){
//$("#dd").toggle(2000,alert("333"));
//$("#dd").fadeToggle(2000,alert("333"));
$("#dd").slideToggle(2000,alert("333"));
});
</script>
</html>
-案例
1. 需求： 1.隔两秒种显示 图片 2. 双击这个图片让其隐藏
2. 分析: (1) .首先把图片隐藏
(2). 使用定是函数 隔两秒种调用jquery的显示方法
(3) . 双击的事件dblclick() 需要图片隐藏 其实就是jquery 的隐藏方法
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
<style>
img{
display: none;
}
</style>
</head>
<body>
<img src="img/img0.png" id="imgs"/>
</body>
<script>
//准备函数
$(document).ready(function(){
setTimeout("showImg()",2000)
//setTimeout();
})
//隐藏的方法
function hideImg(){
$("#imgs").hide()
}
//显示的方法
function showImg(){
$("#imgs").show()
}
//双击事件隐藏图片
$("#imgs").dblclick(function(){
//调用隐藏方法
hideImg();
})
</script>
</html>
-jquery操作css样式
1. 标签.css("属性","属性值") 只能追加一个,注意属性 与属性值 是逗号来进行分割
2. ==> 标签.css({"属性":"属性值","属性":"属性值"})
3. addClass(类样式的名字) removeClass(类样式的名称)；
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
<style>
td{
text-align: center;
}
.getClass1{
background-color: greenyellow;
}
.getClass2{
background-color: lightblue;
}
</style>
</head>
<body>
<table border="1px" width="80%" align="center" cellpadding="0px" cellspacing="0px">
<tr >
<td>姓名</td>
<td>年龄</td>
<td>爱好</td>
</tr>
<tr>
<td>班长</td>
<td>12</td>
<td>唱歌</td>
</tr>
<tr>
<td>刘涛</td>
<td>15</td>
<td>爬山</td>
</tr>
<tr>
<td>小胖</td>
<td>18</td>
<td>旅游</td>
</tr>
</table>
<script>
$(document).ready(function(){
//1.添加一个属性样式
//$("tr:first").css("background-color","red")
//2.添加多个属性样式
//$("tr:first").css({"background-color":"red","color":"white"})
//3.偶数行添加样式
//$("tr:even").css("background-color","goldenrod")
//4.隔行变色第二种方式
//$("tr:even").addClass("getClass1")
//4.鼠标移入添加样式
//$("tr").mousemove(function(){
// $(this).addClass("getClass2")
//})
//5.鼠标移出添加样式
//$("tr").mouseout(function(){
// $(this).removeClass("getClass2")
//})
//4与5操作的是同一个tr所以可以简写
$("tr").mousemove(function(){
$(this).addClass("getClass2")
}).mouseout(function(){
$(this).removeClass("getClass2")
});
})
</script>
</body>
</html>
-jquery操作标签属性
1. 对象.attr("属性") ==> 表示获取其属性
对象.attr("属性","属性值") ==>设置其属性
2. 对象.prop("属性")==>表示获取其属性
对象.prop("属性","属性值") ==>设置其属性
区别: prop 一般是获取的html自带的属性 attr 一般获取是自定义 也就是不是html标签自带 attr 在版本1.5之后官方不再维护 所以建议使用prop
4. 实现全选 全不选 反选的功能
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
<style>
td{
text-align: center;
}
.getClass1{
background-color: greenyellow;
}
.getClass2{
background-color: lightblue;
}
</style>
</head>
<body>
<input type="button" value="全选" id="opt1"/>
<input type="button" value="全不选" id="opt2"/>
<input type="button" value="反选" id="opt3"/>
<table border="1px" width="80%" align="center" cellpadding="0px" cellspacing="0px">
<tr >
<td><input type="checkbox" checked="" name="box1"/></td>
<td>姓名</td>
<td>年龄</td>
<td>爱好</td>
</tr>
<tr>
<td><input type="checkbox" checked="" name="box1"/></td>
<td>班长</td>
<td>12</td>
<td>唱歌</td>
</tr>
<tr>
<td><input type="checkbox" checked="" name="box1"/></td>
<td>刘涛</td>
<td>15</td>
<td>爬山</td>
</tr>
<tr>
<td><input type="checkbox" checked="" name="box1"/></td>
<td>小胖</td>
<td>18</td>
<td>旅游</td>
</tr>
</table>
<script>
//全选
$("#opt1").click(function(){
$("input[name='box1']").prop("checked",true);
})
//全不选
$("#opt2").click(function(){
$("input[name='box1']"). prop("checked",false)
})
//反选,先遍历拿到每一个input框的状态然后取反
$("#opt3").click(function(){
$("input[name='box1']").each(function(){
$(this).prop("checked",!$(this).prop("checked"))
})
//this 表示的是当前的input框
//$(this).prop("checked")获取当前每一个input框的状态
})
</script>
</body>
</html>
-jquery遍历
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
</head>
<body>
<input type="button" id="btn1" value="获取"/>
<ul>
<li>AA</li>
<li>BB</li>
<li>CC</li>
</ul>
<script>
$("#btn1").click(function(){
$("ul li").each(function(index){
alert($(this).html()+"***"+index)
})
})
</script>
</body>
</html>
-使用attr()来获取去与设置属性值
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
</head>
<body>
<input type="button" id="tv_btn2" value="提交"/>
<input type="text" id="tv1" />
<script>
$("#tv_btn2").click(function(){
//给输入框填充内容
//$("#tv_input1").attr("value",123456)
//获取输入框的值
alert($("#tv1").attr("value"));
})
</script>
</body>
</html>
-jquery来操作dom
1. append() 向元素末尾来追加标签==>(父子关系) appendTo() ==>追加的内容与标签进行互换位置
2. prepend($str); 向元素的前面追加标签==>(父子关系) prependTo()与上面用法是一样的
3. after() 在什么之后来追加节点==>(兄弟关系)
4. before() 在节点的前面来追加数据==>(兄弟关系);
5. remove() 删除本身包含其子标签
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
</head>
<body>
<input type="button" id="btn1" value="在末尾追加"/>
<input type="button" id="btn2" value="在元素的前面追加"/>
<input type="button" id="btn3" value="追加兄弟元素节点后"/>
<input type="button" id="btn4" value="追加兄弟元素节点前"/>
<input type="button" id="btn5" value="删除节点"/>
<ul id="tv_ul">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
<script>
$("#btn1").click(function(){
//父子关系
//var str="<li>"+555+"</li>" //js对象
//js--->jquery
var $str = $("<li>555</li>");
//1.append()追加元素
//$("ul").append($str)
//2.将什么追加到...中
$str.appendTo("ul")
})
$("#btn2").click(function(){
//var $str = $("<li>555</li>");
//父子关系
//3.在元素的前面追加
//$("ul").prepend($str)
//4.将什么追加到...中
//$str.prependTo("ul")
})
$("#btn3").click(function(){
//兄弟关系
//var $str = $("<li>555</li>");
//在什么节点之后追加
// $("ul").after($str)
})
$("#btn4").click(function(){
//兄弟关系
//var $str = $("<li>555</li>");
//在什么节点之后追加
// $("ul").before($str)
})
$("#btn5").click(function(){
//删除节点，包括删除里面的子元素
//删除索引为1的元素值
//$("#tv_ul li:eq(1)").remove()
})
</script>
</body>
</html>
-jquery来实现省级联动的效果
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
</head>
<body>
<select onchange="showCitys(this.value)">
<option value="0">北京市</option>
<option value="1">上海市</option>
<option value="2">广东省</option>
</select>
<select id="city">
</select>
<script>
function showCitys(num){
//需要数组 定义数组
var citys = new Array()
citys[0]=["朝阳区","房山区","海淀区"]
citys[1]=["浦东区","宝山区","闵行区"]
citys[2]=["天河区","海珠区","荔湾区"]
//得到具体的某一个城市区的数据
var city = citys[num];
//清空
$("#city").html("");
//遍历,index索引，data数据源表示 xx区
$(city).each(function(index,data){
var temp="<option>"+data+"</option>"
//alert(index+data);
//获取需要追加的节点
$("#city").append(temp)
})
}
</script>
</body>
</html>
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
