Jq 内容：掌握jQuery编程思想，使用jQuery进行常见网页效果开发。 目标：能够使用jQuery开发常见网页效果。 锋利的jQuery，js忍着禁术，精通js，jQuery 官网，jQuery 在线API，jQuery ui。 一， 重点内容： 1框架库和jq介绍 2jQuery文件使用：如果低版本浏览器下载jq1.12. 3jQuery中顶级对象：$，dom中的顶级对象是document 4jQuery事件加载： 5jQuery选择器：重 6jQuery案例
二，常见js框架库:Prototype，YUI(网络反应一般)，Dojo，ExtJS，jQuery等。 框架库：就是一个普通的js文件，封装了很多函数，封装了很多兼容的代码， 这些代码可以在不同的浏览器中的兼容性问题。 二， jQuery中顶级对象 DOM中的顶级对象：document—页面中的顶级对象。 document点出来的是DOM中的属性和方法 Bom中的顶级对象：window—-浏览器中的顶级对象。 window-点出来的是浏览器中的属性和方法， window. document JQ中的顶级对象：jQuery——- 点出来的是jq中的方法。 三，页面加载事件 DOM中：window.onload=function(){};页面记载事件只能执行最后一个window。 JQ中（先引入jQ文件）：(window).load(function()和window.onload=function();相同。第一种写法：(window).load(function(){ console.log(“啊哈哈哈，我真的好帅”); }) 页面中所有的内容加载完毕后才触发。 第二种写法： $( document).ready(function(){ console.log(“啊哈哈哈，我为什么这么帅”); }) 页面中基本标签加载完毕后就可以触发了。比window优先加载。 第三种写法： jQuery(function(){ console.log(“纯洁的我就是真么帅”); }); 页面中基本标签加载完毕后就可以触发了, 第四种写法：
$(function(){ console.log(“纯洁的我就是真么帅”); });页面中基本标签加载完毕后就可以触发了, 三， 关于jQ中引入文件注意问题： 相同的版本的两个文件： 普通版本和压缩版本（压缩文件是以正则形式压缩替换） 开发用原版，上线用压缩 四， jquery对象和DOM对象互转
window.onload=function () { /* btnObj就是DOM对象*/ /*var btnObj=dcument.getElementById('btn'); btnObj.onclick=function () { this.style.backgroundColor="red"; };*/ /* DOM对象转jQuery对象，只需要把DOM对象放在$(dom对象)中--->jQuery对象 */ $(btnObj).click(function(){ $(this).css("backgroundColor","red"); }); }; <script> window.onload=function () { /* btnObj就是DOM对象*/ /*var btnObj=dcument.getElementById('btn'); btnObj.onclick=function () { this.style.backgroundColor="red"; };*/ /* DOM对象转jQuery对象，只需要把DOM对象放在$(dom对象)中--->jQuery对象 $(btnObj).click(function(){ $(this).css("backgroundColor","red"); }); */ /* jQuery对象转DOM对象，两种方式--->DOM对象 1， $(btnObj).get(0);--->DOM对象 1， $(btnObj).[0];--->DOM对象 */ var btnObj=dcument.getElementById('btn');--->DOM对象 var obj=$(btnObj).get(0);--->DOM对象 obj.onclick=function () { this.style.backgroundColor="green"; }; var obj=$(btnObj).[0];--->DOM对象 obj.onclick=function () { this.style.backgroundColor="green"; }; }; $function () { /* $("#btn").click(function(){ $(this).css("backgroundColor","red);*/ $("#btn").get(0).onclick(function(){ this.style.backgroundColor="green"; }; }); </script>五，2-5 网页开关灯抛弃DOM写法体验：
<script> /*dom方法操作：*/ /*window.onload=function (){ //获取按钮，注册点击事件 document.getElementById('btn').onclick=function(){ //判断，如果按钮的value值是关灯则为黑， if (this.value=="关灯") { document.body.style.backgroundColor="black"; this.value="开灯"; }else{ document.body.style.backgroundColor="white"; this.value="关灯"; } }; }*/ /*jQuery方法操作：*/ //页面加载事件 $(function(){ //获取按钮，注册点击事件(调用点击事件方法) $("#btn").click(function() { //.val()方法是获取按钮的value属性值。 //.val("内容");是设置按钮的value属性值 if ($(this).val()=="关灯") { $("body").css("backgroundColor","black"); $(this).val("开灯"); }else{ $("body").css("backgroundColor","white"); $(this).val("关灯"); } }) }); </script>