jQuery基础、效果和事件

1、jQuery引入

    a、在本地直接引入——<script src="jquery-1.10.2.min.js"></script> 
b、在CDN上引入——<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>

2、jQuery优点

  写得少,做的多、兼容性好

3、jQuery是什么:

    一个JavaScript的函数库、轻量级的写得少做的多的JavaScript库。
    jQuery库包含以下内容:HTML元素选取、HTML元素操作、CSS操作、HTML事件函数、JavaScript特效和HTML遍历和修改。

4、入口:

a、jQuery(document).ready(function(){在这里开始写内容})
b、$(document).ready(function(){在这里开始写内容})
c、$(function(){在这里开始写内容})
可以有多个入口,而js只能有一个。

5、jQuery和JavaScript的区别:

   执行时机:  window.onload 必须等待网页全部加载完毕(包括图片)然后再执行包裹代码。
              $(function(){}) 只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码。

  执行次数:   js 执行一次,如果有第二次那么第一次就会被覆盖。
              jQuery执行多次,不会覆盖。

   写法:      window.onload=function(){}
              jquery 的可以简写

6、选择器

分为: 基本选择器、层级选择器、过滤选择器、筛选选择器

          基本选择器:标签、类名、id、并集选择器、交集选择器
      层级选择器:子代、后代。
      过滤选择器:
	      :eq(index) 	选择索引号是index的元素
	      :odd   	        选择索引号是奇数的元素
	      :even 		选择索引号是偶数的元素
      筛选选择器:
	子类选择器:$(".box").children()   选取类名为box的子代 		children(selector)
	后代选择器:$(".box").find("li")	选取类名为box的后代叫li标签的后代	 find(selector)
	兄弟选择器:$(".outer>li:eq(2)).siblings() 	选取索引为2的li的兄弟们		siblings(selector)
	父亲选择器:$("#first").parent();	查找父亲 
	下一个兄弟:$(".outer").next()	
	上一个兄弟:$(".outer2").prev()
	获取当前位置:$(".outer2").index();
	not   $("li:not(.no)")

7、css方法()

    1、返回css属性	css("propertyname");		用法:$("p").css("background-color");
    2、设置css属性	css("propertyname","value"); 	用法:$("p").css("background-color","yellow");
    3、设置多个属性	css({"propertyname":"value","propertyname":"value",...});	用法:$("p").css({"background-color":"yellow","font-size":"200%"});

8、css类的一些操作

1、addClass() 添加一个或者多个类名
2、removeClass() 删除一个或者多个类名
3、toggleClass()添加/删除类的切换操作

9、jQuery动画

    1、hide() 隐藏
    2、show() 显示
    3、toggle() 隐藏、显示切换
---------------------------
    1、fadeIn(speed,callback)淡入
    2、fadeOut(speed,callback)淡出
    3、fadeToggle(speed,easing,callback) 淡入、淡出切换
------------------------------
    1、slideDown(speed,callback) 向下滑动
    2、slideUp(speed,callback) 向上滑动
    3、slideToggle(speed,back)  上下滑动切换
---------------------------------
    jQuery自定义动画
animate({
	left:‘250px‘,opacity:‘0.5‘,height:‘150px‘      //等等
})
---------------------------------
stop()方法  停止动画和效果,在他们完成之前
回调函数:事件执行完后再写一个函数。

10、事件委托delegate()

$(selector).delegate(childrenSelector,event,data,function)
注意: childrenSelector只要是后代就可以,但是必须是后代!
      如果childrenSelector不是标签选择而是类名或者其它要写成“.class”而不是$(".class")
被委托的是事件源,this指向事件源。

11、each()方法

  each()方法:为每个匹配元素规定要运行的函数
$("button").click(function(index,element){
	$("li").each(function(){
		alert($(this).text())
	});
});
数组.forEach(function(value,index){})      
  数组上的forEach()的参数顺序正好相反

jQuery基础、效果和事件

上一篇:css 实现 loading 省略号效果


下一篇:https://repo.maven.apache.org/maven2 was cached in the local repository