网页加载的不同的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
// 点击按钮,显示一句话
// $("#btn").click(function(){
// console.log('小苏好帅哦');
// });
// 没有页面加载的事件
// 注册事件----赋值的
// DOM中页面加载事件----页面全部加载完毕才触发(标签,文字,图片,引入的文件)
// window.onload = function(){
// console.log('小苏好帅');
// };
// window.onload = function(){
// console.log('哈哈,我又变帅了');
// };
// jQuery的代码
// 页面加载事件
// jQuery中第一种页面加载事件
// $(window).load(function(){
// console.log('小苏好猥琐哦');
// });
// $(window).load(function(){
// console.log('哈哈,小杨好帅哦');
// });
// jQuery中第二种页面加载的事件----比上面的快----页面中的基本的元素加载后
// 就触发了
// $(document).ready(function(){
// console.log(1);
// });
// $(document).ready(function(){
// console.log(2);
// });
// jQuery中第三种页面加载的事件----页面中基本的元素加载后就触发了
// jQuery(function(){
// console.log('页面加载了1');
// });
// jQuery(function(){
// console.log('页面加载了2');
// });
// $(document).ready(function(){
// console.log(1);
// });
// $(document).ready(function(){
// console.log(2);
// });
$(function(){
console.log('页面加载了1');
});
$(function(){
console.log('页面加载了2');
});
// function f1(){
// }
// f1();
// f1();
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<script>
// document.getElementById('btn').onclick = function(){
// console.log(1);
// };
// document.getElementById('btn').onclick = function(){
// console.log(2);
// };
// var num = 10;
// var num = 100;
// console.log(num);
</script>
</body>
</html>
点击按钮显示一句话
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
// 页面加载的事件
$(function(){
// 根据id获取按钮,添加点击事件
$("#btn").click(function(){
console.log('哈哈,真的好帅');
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
</body>
</html>
jQuery中获取元素的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
// DOM作用:操作页面的元素
/**
* DOM中获取元素的方式:
*
* 根据id获取元素
* document.getElementById('id属性的值');
* 根据标签名字获取元素
* document.getElementsByTagName('标签名字');
* 根据name属性获取元素
* document.getElementsByName('name属性的值');
* 根据类样式名字获取元素
* document.getElementsByClassName('类样式的名字');
* 根据选择器获取元素
* document.querySelector('选择器');---->id选择器,类选择器,标签选择器...
* 一个的
* document.querySelectorAll('选择器');多个的
*
*/
/**
* jQuery中获取元素的方式:
*
* $("选择器")----jQuery对象
*/
</script>
</head>
<body>
</body>
</html>