1.jQuery简单入门
jQuery是一个丰富的JavaScript库,库中封装了js中的一些常用方法
作用:wirte less,do more
开发步骤:
- 导入js库
- js对象转换成jQuery对象
var jsDiv = document.getElementById("id01"); $(jsDiv)
- 可以通过jQuery对象调用一些方法
<html>
<head>
<meta charset="UTF-8">
<title>01_jQuery</title>
<script src="js/jquery-1.8.3.js"></script>
<script>
function init(){
alert("页面载入触发事件");
}
//方式1
jQuery(document).ready(function(){
alert("jq的页面载入事件111");
});
//方式2
$(document).ready(function(){
alert("jq的页面载入事件222");
});
//方式3
$(function(){
alert("jq的页面载入事件333");
});
</script>
</head>
<body onload="init()">
</body>
</html>
2.jq对象和js对象的相互转化
<html>
<head>
<meta charset="UTF-8">
<title>jq对象和js对象相互转化</title>
<script src="js/jquery-1.8.3.js"></script>
<script>
/*js方式修改div的内容
* 1.点击事件
* - 获取要操作的那个元素对象
* - 设置该元素对象的innerHTML属性
*/
function jsChange(){
var div = document.getElementById("div1");
//div.innerHTML = "使用js方式修改了div内容";
//将div对象(js对象)--->jquery对象
$(div).html("js对象转换成jq对象改变div内容方式");
}
/*jquery方式修改div的内容
1.导入js库
2.页面载入事件$(function(){...});
3.点击事件$("选择器").click(function(){...});
- 确定元素对象$(#div1).html("内容")*/
$(function(){
$("#btn1").