版权声明:一个苦逼初学者的原创小博客。 https://blog.csdn.net/SenZendao/article/details/82693898
这篇续着上篇的写吧。
4:jquery样式操作
5:jquery属性操作
6:绑定click事件
7:jquery特殊效果
8:jquery链式调用
9:jquery动画
10:尺寸相关、滚动事件
11:jquery事件
12:主动触发与自定义事件
13:事件委托
14:事件冒泡
15:jquery元素节点操作
16:滚轮事件与函数节流
17:json
18:ajax与jsonp
19:本地储存
20:jqueryUI
目录四
jquery样式操作
jquery用法思想二
同一个函数完成取值和赋值
操作行间样式
// 获取div的样式
$("div").css("width");
$("div").css("color");
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特别注意
选择器获取的多个元素,获取信息获取的是第一个,比如:$(“div”).css(“width”),获取的是第一个div的width。
操作样式类名
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
目录五
jquery属性操作
html() 取出或设置html内容
// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字</span>');
text() 取出或设置text内容
// 取出文本内容
var $htm = $('#div1').text();
// 设置文本内容
$('#div1').text('<span>添加文字</span>');
attr() 取出或设置某个属性的值
// 取出图片的地址
var $src = $('#img1').attr('src');
// 设置图片的地址和alt属性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });
目录六
绑定click事件
给元素绑定click事件,可以用如下方法:
$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})
目录七
特殊效果
js代码
$(function(){
$("#btn1").click(function(){
//$("#div1").fadeIn()
$("#div1").fadeToggle()
});
$("#btn2").click(function(){
$("#div1").fadeOut()
});
$("#btn3").click(function(){
//$("#div1").show()
$("#div1").toggle()
});
$("#btn4").click(function(){
$("#div1").hide()
});
$("#btn5").click(function(){
//$("#div1").slideDown()
$("#div1").slideToggle()
});
$("#btn6").click(function(){
$("#div1").slideUp()
});
$("#btn7").click(function(){
//$("#div1").show("fast")
$("#div1").show(3000,function(){
alert('广告加载完毕')
});
});
})
html代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>04_jquery特殊效果.html</title>
<script type="text/javascript" src="./js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/04_01.js"></script>
<link type="text/css" rel="stylesheet" href="./css/css_04_01.css" />
</head>
<body>
<div>
<h1>特殊效果</h1>
</div>
<div>
<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="向下展开"/>
<input type="button" id="btn6" value="向上卷起"/>
<input type="button" id="btn7" value="控制时间"/>
</div>
<div id="div1"></div>
</body>
</html>