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把时间也复制上

秒客网

jQuery基础入门学习

jQuery基础入门学习

入口函数

DOM对象和jQuery对象

jQuery中$的作用

选择器

修改样式

修改class和属性

三组基本动画

相关文章