jQuery

初识jQuery

jquery的优势

1.强大的选择器
2.出色的兼容性
3.使用隐式的迭代简化代码
4.丰富的插件支持
5.体积小

jQuery文件库
jQuery-1.版本号.js       开发版       268K          完整无压缩的版本，主要用于测试学习
jQuery-1.版本号.min.js   发布版        91K          经过工具压缩或经过服务器开启GZip压缩的 主要用于产品的部署

jQuery-2.版本号.js   不支持IE6,7,8

             window.onload                                         $(document).ready()
执行时机    必须等待页面中的所有内容         页面中DOM文档结构绘制完后立即执行函数体
            全部加载后执行函数体                      可能与DOM元素关联的内容（图片，视频，音频，flash）并没有加载完

编写的个数   同一个页面只能编写一个          同一个页面编写多个

简化            无                             $(function(){  //函数体 });

jQuery使用步骤
1.引入库文件 <script src="jquery-1.8.3.min.js"> </script>
2.创建入口函数 编写函数体

javascript和jQuery的区别：
javascript是一门编程语言，我们用它来编写客户端浏览器的脚本
jQuery是javascript的一个库,包含了可以重用的函数，用于辅助我们简化javaScript的开发

jQuery能做的js肯定能做， js能做的jQuery不一定能做

js与jQuery的使用区别

属性的区别

js	jquery	作用
style.属性="值"	css("属性","值")	设置css样式
className="类样式名"	addClass("类样式名")	为节点添加类样式
innerHTML="文本"	html("文本")	为节点添加文本

事件的区别

js写法
document.getElementById("id").οnclick=function(){
    //函数体
}
jquery写法
$("id").click(function(){
    //函数体
});
jQuery的事件不带on

获取节点

js
document.getElementsByTagName("class")
jquery写法
$(".id")

特殊字符的转意

<div id="id#a"></div>      <div id="id[2]"></div>

$("#id\\#a")                         $("#id\\[2\\]")

jQuery选择器

类css选择器

    基本选择器

名称	语法	描述	示例
标签选择器	element	根据给定的标签名匹配节点	$("p")选取所有的p节点
类选择器	.class	根据给定的class匹配节点	$(".title")选取所有class值为title的节点
id选择器	#id	根据给定的id匹配节点	$("#title")选取所有id值为title的节点
并集选择器	selector1,se2...	将每一个选择器匹配的节点合并后返回	$("p,.title")选取所有p标签和class值为title的所有节点
交集选择器	element.class|#id	匹配指定的class或id的某个节点或集合	$("p.title")选取所有拥有class的值为title的p节点
全局选择器	*	匹配所有的节点	$("*") 选取所有节点

    层次选择器

名称	语法	描述	实例
后代选择器	ancient descenant	选取ancient节点里的所有descenant(后代)节点	$("#id span")选取#id下的所有span节点
子选择器	parent>child	选取parent节点下的child(子)节点	$("#id>span")选取#id下的子节点span
相邻节点选择器	prev+next	选取紧靠perv节点之后的next节点	$("h2+dl") 选取紧靠h2下的dl节点
同辈节点选择器	prev~sibings	选取prev节点之后的所有sibings节点	$("h2~dl") 选取h2节点之后所有的同辈节点dl

    属性选择器

      

名称	语法	描述	示例
	[attributer]	选取包含给的属性的节点	$("[type]") 选取含有type属性的所有节点
属	[attributer=value]	选取包含给定的属性等于某个值得节点	$("[name='sd']") 选取具有name属性的并且值等于sd的节点
性	[sttributer!=value]	选取包含给定的属性不等于某个值得节点	$("[name!='sd']") 选取具有name属性的并且值不等于sd的节点
选	[attributer^=value]	选取给定的属性的值是以value开头的节点	$("[name^='s']")选取具有name属性的并且值以s开头的节点
择	[attributer$=value]	选取给定的属性的值是以value结尾的节点	$("[name$='s']")选取具有name属性的并且值以s结尾的节点
器	[attributer*=value]	选取给定的属性的值包含value的节点	$("[name*='s']")选取具有name属性的并且值包含s的节点
	[selector][selector2][selectorN]	选择满足多个条件的复合属性节点	$("li[id][title='嘻嘻']")选取包含id属性的并且title属性值为嘻嘻的li节点

过滤选择器

    基本过滤选择器

名称	语法	描述	实例
	:first	选取第一个元素	$("li:first") 选取li的第一个元素
基	:last	选取最后一个元素	$("li:last") 选取li的最后一个元素
本	:even	选取索引为偶数的元素	$("li:even") 选取li的偶数列
过	:odd	选取索引为奇数数的元素	$("li:odd") 选取li的奇数列
滤	:eq(index)	选取索引等于index的元素	$("li:eq(1)")选取第2个li
选	:gt(index)	选取索引大于index的元素	$("li:gt(2)")选取第3个li往后的所有li
择	:lt(index )	选取索引小于index的元素	$("li:gt(2)")选取第3个li往前的所有li
器	:not(selector)	选取除selector以外的元素	$("li:not(.three)") 选取class不是three的元素
	:header	选取索引的标题标签（h1-h6）	$(":hrader") 选取页面的所有标题标签
	:focus	选取当前获取焦点的元素	$(":focus") 选取当前获取焦点的元素

    可见性过滤选择

语法	描述	实例
:visible	选取可见的元素	$(":visible")选取可见的元素
:hidden	选取隐藏的元素	$(":hidden")选取隐藏的元素

表单选择器

语法	描述
:input	选取所有的表单元素{input/select/textarea}
:text	选取所有的单行文本输入框
:password	选取所有的密码输入框
:radio	选取所有的单选框
:checkbox	选取所有的复选框
:submit	选取所有的提交按钮
:image	选取所有的图片
:button	选取所有的按钮
:checked	选取所有被选中的元素【复选框/单选框  不包括select】
:selected	选取所有选中的option元素

内容选择器

语法	描述
:contains(text)	选取所有包含text文本的元素
:empty	选取所有不包含子元素或文本的空元素
:has(selector)	选取包含选择器所匹配的元素的元素
:parent	选取含有子元素或文本的元素

mouseover与mouseenter

mouseover

悬浮时 悬浮其节点或其子节点都会触发事件
mouseenter
悬浮时 无论悬浮其子类或自己本身事件只会触发一次                                

 <script src="jquery-1.8.3.js"></script>
    <script>
//        $(function(){
//            var a=0;
//            $("#one").mouseover(function(){
//                a++;
//                console.log(a);
//            });
//        });

        $(function(){
            var a=0;
            $("#one").mouseenter(function(){
                a++;
                console.log(a);
            });
        });
    </script>

    js与jQuery的转换

    js          DOM原型 

     jQuery   jQuery对象数组

     jQuery对象转DOM对象
     jQuery对象是一个类似数组的对象，可以通过【index】的方法来得到相应的DOM对象
     var $im=$("#im");                                       jquery
     var im=$im[0];  或   var im=$im.get(0)           js

     DOM对象转jQuery对象
     var im=document.getElementById("im");         js

     var $im=$(im);                                               jquery

     注意点：jQuery对象命名一般以$开头
             常用$(this)来获取触发该事件的当前jQuery对象

     jQuery节点属性操作                        

 添加样式的语法

        css(name,value)
        css({name:value,name:value,name:value.........});

 <script>
        $(function(){
            $("div").css({"width":"100px","height":"100px","background-color":"skyblue","border":"1px solid red"});
        });
    </script>

jQuery的添加类样式

语法
追加：addClass("class")  或  addClass("class1 class2 class3......")
移除：removeClass("class")  或 removeClass("class1 class2  class3........")
追加或移出：toggleClass("class")

html代码操作

html()可以正对于html标签进行操作  类似于js的innerHTML
语法
取：html()
添加文本/标签：html("添加的文本/标签");

text()针对html的文本进行操作  类似于js的innerText
语法
取：text()
添加文本：text("添加的文本");

value值

语法
获取节点的value值：val();
设置节点的value值：val("值");        

节点操作

jQuery节点分为

查找节点   $()

创建节点

工厂函数$()用于创建或获取节点

$(selector)	通过选择器来获取节点	var $newnode=$($("#one"));
$(element)	通过Dom节点转换为jQuery节点	var $newnode=$(document.getElementById("one"));
$(html)	使用html字符串创建jQuery节点	var $newnode=$("<div><div>");

插入节点

插入子节点

语法	描述	示例
append(content)	$(a).append(b)将B追加到A中	$("ul").append($newLiNode)
appendTo(content)	$(a).appendTo(b)将A追加到B中	$newLiNode.appendTo($("ul"))
prepend(content)	$(a).prepend(b)将B前置到A中	$("ul").prepend($newLiNode)
prependTo(content)	$(a).prepend(b)将A前置到B中	$newLiNode.prependTo($("ul"))

插入同辈节点

语法	描述	示例
after(content)	$(a).after(b)将B插入到A之后	$("div").after($newDivNode)
insertAfter(content)	$(a).insertAfter(b)将A插入到B之后	$newDivNode.insertAfter($("div"))
before(content)	$(a).before(b)将B前置到A之前	$("div").before($newDivNode)
insertBefore(content)	$(a).insertBefore(b)将A前置到B之前	$newDivNode.insertBefore($("div"))

删除节点

jQuery提供了三种删除方式
remover();  删除整个节点
detach()   删除整个节点啊，保留元素的绑定事件
empty()    清空节点内容

复制节点

clone(true)

 节点的属性

attr获取/设置属性值
获取属性的值
attr("属性名")

设置属性的值
attr("属性名","值")  设置一个属性值
attr({"属性名":"值","属性名":"值","属性名":"值"......})  设置多个属性值

删除属性
removeAttr("属性名");          

获取元素                                     

同辈

语法	功能	示例
next([expr])	用于获取紧邻匹配元素之后的那个元素	$("li:first").next().css("",""); $("ul:first").next("div").css("","");
prev([expr])	用于获取紧邻匹配元素之前的那个元素	$("li:last").prev().css("","");
siblings([expr])	用于获取紧邻匹配元素之前和之后的那个元素	$("li:last").siblings().css("","");

获取前辈元素

parent()  获取父元素
parents()  获取祖先元素

获取子元素

children                                                                          

事件                      

click（fn）    单击

dbclick（fn）    双击

 mouseover（fn）悬浮 经过子节点也会触发

mouseout（fn）离开

mouseenter （fn）悬浮 经过子节点不会触发                                                                    

 mouseleave（fn）离开

键盘事件                      

keydown（fn）按下键盘            

keyup（fn）释放键盘

keypress（fn）产生打印字符

$(document).keypress(function(e){    
    if(e.keycode == '13'){  
        alert('enter');      
    }  
});  

表单事件

focus（fn）获得焦点

blur（fn）失去焦点

submit（fn）提交表单

事件绑定

bind（）方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind(event有效的事件,data可选。规定传递到函数的额外数据,function运行的函数)

$("button").bind("click",function(){
  $("p").slideToggle();
});

多个事件绑定

$(selector).bind({event:function, event:function, ...})

解绑

unbind（）

$(selector ).unbind(event);

鼠标悬停事件

hover () 相当于mouseover与mouserout

hover（fn1，fn2）

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

轮流的 click 事件

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

show（）与hide（）

show（）显示隐藏的匹配元素。

hide（）隐藏显示的匹配元素。

$("p").show(4000,function(){
   $(this).text("Animation Done...");
 });//将隐藏的段落用将近4秒的时间显示出来。。。并在之后执行一个反馈。。。

$("p").hide("slow");//用600毫秒的时间将段落缓慢的隐藏

$("p").hide("fast",function(){
   alert("Animation Done.");
 });//

用200毫秒将段落迅速隐藏，之后弹出一个对话框。

淡入淡出

用600毫秒缓慢的将段落淡入

$("p").fadeIn("slow");

用200毫秒快速将段落淡入，之后弹出一个对话框

("p").fadeIn("fast",function(){
   alert("Animation Done.");
 });

改变元素高度

slideDown([speed],[easing],[fn])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn在动画完成时执行的函数，每个元素执行一次。

$("p").slideDown("fast",function(){
   alert("Animation Done.");
 });//用200毫秒快速将段落滑下，之后弹出一个对话框

slideUp([speed,[easing],[fn]])

$("p").slideUp("fast",function(){
   alert("Animation Done.");
 });//用200毫秒快速将段落滑上，之后弹出一个对话框

动画

animate(params,[speed],[easing],[fn])

用于创建自定义动画的函数。

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数，每个元素执行一次。

// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

$("p").animate({
   left: 50, opacity: 'show'
 }, 500);//用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）