JQuery库

JQuery是继phototype之后又一个优秀的javascript库，它是轻量级的js库。

要想使用JQuery，首先要引入类库。<script text="text/javascript" src="../../js/jquery-1.8.3.js"></script>

JQuery与js页面加载的区别：

window.οnlοad=function(){

 alert(“张三”);

}

window.οnlοad=function(){

alert("老王");

}

js 页面加载会存在覆盖问题，后面的覆盖前面的。加载比JQ慢。JS(整个页面加载完毕，<包括里面的其他内容，比如图片>),JQ(整个dom树结构绘制完毕，就加载)，JQ不存在覆盖问题，加载的时候顺序执行。

JQuery(document).ready(function(){

alert(“李四”)

 })

$(document).ready(function(){

alert("fdf");

 })

简写方式

$(function(){

alert("fenjiu");

 })

JQ加载比 js加载更快！(整个dom树绘制完毕就会加载)。JQ不存在覆盖问题，加载的时候顺序执行。

给按钮添加事件

js方式

document.getElementById("btn").οnclick=function(){

location.href="惊喜.html";

 }

JQ方式

$("#btn").click(function(){

Location.href="惊喜.html";

 })

DOM对象与JS对象之间的转换

function write(){

document.getElementById("span1").innerHTML="萌萌哒";

//DOM对象无法操作JQ对象里面的属性和方式

//document.getElementById("span1").html("萌萌哒");

//将DOM对象转换成 JQ对象。

//var spanEle=document.getElementById("span1");

//$(spanEle).html("斯密达")；

 };

$(function(){

$("#btn").click(function(){

//JQ对象，无法操作JS对象里面属性和方法。

//$("#span1").innerHTML="呵呵哒";

$("#span1").html="呵呵哒";

//JQ对象向DOM对象转换方式1

$("#span1").get(0).innerHTML="美美哒";

//JQ对象向DOM对象转换方式2

$("#span1")[0].innerHTML="美美哒";

 })

 });

基本选择器的使用：

id选择器$("#one")，类选择器$(".mini")，标签选择器$("div")，选择所有$("*")，

层级选择器

ancestor descendant 在给定的祖先元素下，匹配所有的后代元素。（儿子、孙子、重孙子）

parent > child 在给定的父元素下，匹配所有的子元素。(儿子)

prev + next   匹配所有紧接在prev后的next元素。(紧挨着，同桌)

prev ~ siblings 匹配prev元素之后的所有siblings元素。(兄弟)

过滤选择器