jQuery基础入门学习
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把时间也复制上
