jQuery基础01体验

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>