jQuery基础入门学习_H5之家 - 中国HTML5教程资源分享第一站

jQuery基础入门学习入口函数

JavaScript的入口函数

window.onload=function(){ console.log('这是Javascript的入口函数！'); };

jQuery的两种入口函数

$(document).ready(function(){ console.log('只是jq的第一种入口函数！'); }); $(function(){ console.log('只是jq的第二种入口函数！'); });

javaScript上的入口函数是等网站加载完（图片也要加载完才会执行），而JQuery上的入口函数只是让网站的代码加载完就执行，（不需要等图片加载），所以Jq的入口函数会比Js的入口函数要快。

DOM对象和jQuery对象

DOM对象和jQuery对象不能换着用

dom对象->jQuery对象加上$() jQuery对象->dom对象 $li[0] 或者 $li.get(0) jQuery中$的作用

$ === jQuery 成立

参数是一个function，表示入口函数 $(function(){}) 把dom对象转换成jq对象 $(document).ready(function(){}) 参数可以是一个字符串，用来找对象 $('#id') $('.class') $('li') 选择器 $("s1,s2") 并集选择器 $("s1 s2") 后代选择器 $("s1>s2") 子代选择器 $(".s1.s1") 交集选择器

更多选择器查找API

修改样式

修改单个样式

修改多个样式

获取样式

增加一个类

$("li").addClass("bigger");

移除一个类

$("li").eq(0).removeClass("bigger");

判断是否有这个类

$("li").hasClass("bigger");

判读有没有这个类，有就添加，没有就移除

$("li").toggleClass("bigger");

操作属性

$("img").attr("title","这是一张图片")

$("img").attr([title:"这是一张图片",alt:"错错错"])

$("img").removeAttr("title")

对于布尔类型(disabled,selected,checked)的属性，不要用attr方法，用prop方法，因为没有定义的属性用attr方法回返回一个undefine，

`$(".select").prop("select","true")` 三组基本动画

显示动画 show(speed) speed是动画持续时间

$("div").show();

$("div").show(1000); //可以传字符串，"slow","fast","normal"

$("div").show([speed],[callback]);

$("div").show(1000,function(){alert("测试")});

隐藏动画

$("div").hide();

滑入滑出

$("div").slideDown(1001); //划入
$("div").slideUp(1000); //划出
$("div").slideToggle(); //切换

淡入淡出

$("div").fadeIn(1001); //划入
$("div").fadeOut(1000); //划出
$("div").fadeToggle(); //切换

自定义动画

第一个参数：对象，里面传的是需要动画的样式

第二个参数：speed 动画的执行时间

第三个参数：动画的执行效果

第四个参数：回掉函数

$("#box").animate({left:800},8000,"swing");

$("#box").animate({left:800},8000,"linear");

动画队列问题，每个动画都放在一个队列里面，一个一个执行。当鼠标过快，队列速度跟不上，鼠标突然停了，但是动画还是在进行。在鼠标移入移出的动画的前面加上stop()

停止动画

第一个参数：clearQueue 是否清楚动画队列 true or false
第二个参数：jumpToEnd 是否跳转到当前动画的最终效果

$(“div”).stop(true,true);

创建节点

$("div").append('<a href="" targey="_blank">'); //添加节点
$("p").appendTo($('div'));

$("div").prepend($("p")); //在之前
$("p").prependTo($("div"));

$("div").after($("p")); //在之后.
$("div").before($("p"));

清空、删除、克隆元素

$("div").html(""); //尽量不要使用，因为不删除时间，导致内存泄漏

$("div").empty(); //把节点内容还有对应的事件都删除

$("div").remove(); //移除一个节点

$("div").clone(); //有参数，ture和false，ture把时间也复制上

原文地址：