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
修改样式
-
修改单个样式
<script> $(function(){ $("li").css("backgroundColor","pink") .css("color","red") .css("fontSize","14px") }) </script>
-
修改多个样式
<script> $(function(){ $("li").css({ backgroundColor:"pink", color:"red", fontSize:"14px", }) }) </script>
-
获取样式
<script> $(function(){ $("li").css("fontSize"); }) </script>
修改class和属性
-
增加一个类
$("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把时间也复制上