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 成立

1. 参数是一个function，表示入口函数 $(function(){})
2. 把dom对象转换成jq对象 $(document).ready(function(){})
3. 参数可以是一个字符串，用来找对象 $('#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把时间也复制上