页面载入事件
让js先加载整个页面,然后处理相关的标签就可以识别的到
方式一:
$(document).ready(匿函);
方式二,简写,推荐:
$(匿函);
$(函数名);
我们的主代码,是写在匿函的函数体中的
》对比试验
没有页面载入事件的情况
<!DOCTYPE html>
<!--作者:pyhui-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var $a = $("a");
document.title = $a.length;
</script>
</head>
<body>
<a href="">aaa</a>
</body>
</html>
数据为0
》有页面载入事件
<!DOCTYPE html>
<!--作者:pyhui-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(main);
function main() {
var $a = $("a");
document.title = $a.length;
}
</script>
</head>
<body>
<a href="">aaa</a>
</body>
</html>
数据为1
显示与隐藏
对象.方法(豪秒数)
》基本显示与隐藏
- show
- hide
- toggle
》滑动
- slideDown
- slideUp
- slideToggle
》淡入淡出
- fadeIn
- fadeOut
- fadeTo
- fadeToggle
fadeTo补充说明
fadeTo(豪秒数,透明度)
遍历循环
以前遍历一个数组
使用each方法来遍历
jq对象.each(匿函)
匿函中不传参数
匿函中可使用变量this
this就是dom对象(因为jquery对象就是dom对象的容器啊)
this是遍历出来的每一个元素
它是一个dom元素
小结
each可以作为对象的方法来进行遍历
演示代码
<!DOCTYPE html>
<!--作者:pyhui-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(main);
function main() {
// 拿到所有的div标签
// 遍历他们
$divs = $("div"); // [dom1,dom2,domn]
$divs.each(show_content);
function show_content() {
// console.log(this.innerText);
// console.log(this.innerText);
// 1,转换为jquery对象
// 2,jqeury对象获取标签内包裹的纯文本内容
var text = $(this).text()
console.log(text,'from jquery obj');
}
}
</script>
</head>
<body>
<div>第1个div</div>
<div>第2个div</div>
<div>第3个div</div>
<div>第4个div</div>
<div>第5个div</div>
<div>第6个div</div>
</body>
</html>
》 each的另外的用法
$.each(对象, 匿函)
如果匿函有一个参数,那它就是索引值。如果匿函有两个参数。参一是索引,参二是数据值。
如果匿函有两个参数,参一是键或索引,参二是值
- 试一试,对字典态的对象进行遍历,传一参,传两个参,看看效果。
遍历字典的时候,匿函中,参数一是键,参数二是值