jQuery第一章入门

jQuery第一章jQuery入门

1、定义

Jquery是一个javascript框架或者叫做javascript库；

JS框架相当于一些现成的函数和对象的集合,直接拿来使用就可以了；

 

jquery对象就是对dom对象的一系列包装，它包装完成后，就可以使用jquery对象提供的方法来进行操作；

在使用jquery开发中，有两种对象，1，jquery对象，2，dom对象，如果是jquery对象则只能使用jquery库提供的方法，如果是dom对象，则只能使用js本身提供的方法；

jquery兼容各大浏览器

 

下载jQuery

官方网站 http://jquery.com/

最新版v3.1.0

jquery-2.1.4.js未压缩版: 开发、学习、调试时用

jquery-2.1.4.min.js压缩版: 项目正式运行的时候使用,可以减少带宽,提高项目的性能

 

2、引入jquery-2.1.4.js

 

<script type="text/javascript" src="jquery-2.1.4.js"></script>

 

从下面的语句开始

 //ready方法的作用是当页面中的DOM加载完后执行参数中的函数

 $(document).ready(function(){

     alert("Hello World!");

 });

Var $aaa = $（document）取得对象；

 

开始语句

$(function() {});

 

3、DOM对象和jQuery对象的转化

 

dom对象--->jQuery对象

$(DOM对象):是把DOM对象转化成JQuery对象

var div1 = document.getElementById("div1");

var $div1 = $(div1);

alert($div1.html());// $div1.width()

 

jQuery对象实质就是map、关联数组

Dom对象是存到jQuery对象的第一个元素中

 

 

.把jQquery对象--->dom对象：var $div = $("#div1");

第一种方式   var div = $div[0];//div是DOM对象

第二种方式

var div = $div.get(0);

alert(div.innerHTML);

 

 

变量定义的规范:jQuery对象 前面要加$,dom对象不用加$

 

*$(document).ready()和window.onload区别*

window.onload只能绑定一个事件处理函数，如果绑定多个只执行最后一个

$(document).ready()可以绑定多个函数

 

window.onload必须等待网页中所有的内容加载完毕后(包括图片)才能执行

   

$(document).ready() 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完

 

$(document).ready(function(){});

可以简写成 

$().ready(function(){});

也可以简写成

$(function(){});

 

绑定事件处理函数

jquery对象.click(事件处理函数);

修改样式

$("#hello").css("color","#ff0000");//同一个方法名字既表示读操作，又表示写操作

 

$("#hello").css("color","#ff0000");//写操作

$("#hello").css("color");//读操作