1.初时jQuery
2.jQuery库文件
jQuery分为开发版和发布版
1.jquery-1.版本号.js(开发版) 约286KB 完整无压缩版本,主要用于测试、学习和开发
2.jquery-1.版本号.min.js(发布版) 约94.8KB 经过压缩,主要应用于产品发布和项目发布
3.如何引入jQuery
先将jquery-1.12.4.js引入js文件中 然后在HTML代码中写入
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
4.ready()方法
使用jQuery弹出提示框
<script scr="js/jquery-1.12.4.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
alert("我的第一个jQuery示例!");
})
</script>
5.window.onload与$(document).ready()的区别
window.onload必须等所有内容加载完毕才能开始执行 一个页面不能同时编写多个 也无法简化写法
$(document).ready()网页所有DOM文档结构绘制完毕后即刻就可执行,与DOM元素关联的内容可以不加载完成 同一个页面可以同时编写多个 可以进行简化
6.jQuery语法规则
工厂函数$():将DOM对象转化为jQuery对象
选择器selector:获取需要操作的DOM元素
方法action():jQuery中提供的方法,其中包括绑定事件处理的方法
语法:$(selector).action();
7.jQuery操作页面元素
使用addClass()方法为元素添加样式
jQuery 对象.addClass([样式名]);
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
使用css()方法设置元素样式
css("属性","属性值");
css({"属性1":"属性值1","属性2":"属性值2"...})
$(this).css({"background":"#c81623"});
使用show()、hide()方法设置元素的显示和隐藏
$(selector).show();
$(selector).hide();
$(this).children("div").show();
$(this).children("div").hide();
8.jQuery代码风格
"$"等同于"jQuery"
$(document).ready()等同于 jQuery(document).ready()
链式操作
对一个对象进行多重操作,并将操作结果返回给该对象
$("h2").css("background-color","#ccffff").next().css("display","block");
隐式迭代
$(document).ready(function() {
$("li").css({"font-weight":"bold","color":"red"});
});