泰坦教你玩转前端开发之JQuery常用语法库

1.入口函数

        $(document).ready(function(){});

        $(function(){});

这里重点说明下JQUERY的$(function(){})和window.onload=function(){}的区别

在Jquery里面，我们知道入口函数有两种写法:$(function(){}) 和$(document).ready(function(){})

作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法有所区别。

a.执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 

b.编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行

c.简化写法

window.onload没有简化写法 

$(document).ready(function(){})可以简写成$(function(){});

由于在 $(document).ready() 方法内注册的事件，只要DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的html下载完毕，并且已经解析为DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用Jquery 中另一个关于页面加载的方法—load() 方法。Load() 方法会在元素的onload 事件中绑定一个处理函数。如果处理函数绑定给window 对象，则会在所有内容( 包括窗口、框架、对象和图像等) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

Jquery 代码如下： 

$(window).load(function (){

       // 编写代码

});

等价于 JavaScript 中的以下代码

Window.onload = function (){

     // 编写代码

}

jQuery入口函数与js入口函数的区别：

jQuery的入口函数是在html所有标签都加载之后，就会去执行。

Js的window.onload事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行
2.jQuery选择器基本选择器

基本选择器
符号	说明	用法
$(“#demo”)	id选择器	$(“#demo”).css(“background”,”red”)
$(“.liItem”)	类选择器	$(“.liItem”). css(“background”,”red”);
$(“div”)	标签选择器	$(“div”). css(“background”,”red”);
$(“*”)	通配符选择器	$(“*”). css(“background”,”red”)
$(“.liItem,div”)	并集选择器	$(“.liItem,div”). css(“background”,”red”)

 

层级选择器
符号	说明	用法
空格	后代选择器 选择所有的后代元素	$(“div span”). css(“background”,”red”);
>	子代选择器 选择所有的子代元素	$(“div > span”). css(“background”,”red”)
+	紧邻选择器 选择紧挨着的下一个元素	$(“div + p”). css(“background”,”red”)
~	兄弟选择器 选择后面的所有的兄弟元素	$(“div ~ p”). css(“background”,”red”)

 

基本过滤选择器
符号	说明	用法
:eq(index)	index是从0开始的一个数字，选择序号为index的元素。选择第一个匹配的元素。	$(“li:eq(1)”). css(“background”,”red”)
:gt(index)	选择序号大于index的元素	$(“li:gt(2)”). css(“background”,”red”)
:lt(index)	选择小于index 的元素	$(“li:lt(2)”). css(“background”,”red”)
:odd	选择所有序号为奇数行的元素	$(“li:odd”). css(“background”,”red”)
:even	选择所有序号为偶数的元素	$(“li:even”). css(“background”,”red”)
:first	选择匹配第一个元素	$(“li:first”). css(“background”,”red”)
:last	选择匹配的最后一个元素	$(“li:last”). css(“background”,”red”)

 

属性选择器
符号	说明	用法
$(“a[href]”)	选择所有包含href属性的元素	$(“a[href]”). css(“background”,”red”)
$(“a[href=’itcast’]”)	选择href属性值为itcast的所有a标签	$(“a[href=’itcast’]”). css(“background”,”red”)
$(“a[href!=’baidu’]”)	选择所有href属性不等baidu的所有元素，包括没有href的元素	$(“a[href!=’baidu’]”). css(“background”,”red”)
$(“a[href^=’web’]”)	选择所有以web开头的元素	$(“a[href^=’web’]”). css(“background”,”red”)
$(“a[href$=’cn’]”)	选择所有以cn结尾的元素	$(“a[href$=’cn’]”). css(“background”,”red”)
$(“a[href*=’i’]”)	选择所有包含i这个字符的元素，可以是中英文	$(“a[href*=’i’]”). css(“background”,”red”)
$(“a[href][title=’我’]”)	选择所有符合指定属性规则的元素，都符合才会被选中。	$(“a[href][title=’我’]”). css(“background”,”red”)

筛选选择器

基本过滤选择器
符号	说明	用法
.eq(index)	index是从0开始的一个数字，选择序号为index的元素。	$(“li”).eq(1). css(“background”,”red”)
.first( )	选择匹配第一个元素	$(“li”).first(). css(“background”,”red”)
.last( )	选择匹配的最后一个元素	$(“li”).last(). css(“background”,”red”)
.parent( )	选择父亲元素	$(“li”).parent(). css(“background”,”red”)
.siblings( )	选择所有的亲兄弟元素，不包括自己	$(“li”).sibling(). css(“background”,”red”)
.find( )	查找所有的后代元素	$(“li”).find(). css(“background”,”red”)
.prevAll()	选择这个元素之前的所有亲兄弟元素	…
.nextAll()	选择这个元素之后的所有亲兄弟元素	…

3.jQuery动画显示/隐藏

        $(selector).show(speed,callback);

        $(selector).hide(speed,callback);

        $(selector).toggle(speed,callback);

 

speed：隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

callback：隐藏或显示完成后所执行的函数

滑动

          $(selector).slideDown(speed,callback);

          $(selector).slideUp(speed,callback);

          $(selector).slideToggle(speed,callback);

淡入淡出

          $(selector).fadeIn(speed,callback);

          $(selector).fadeOut(speed,callback);

          $(selector).fadeToggle(speed,callback);

          $(selector).fadeTo(speed,opacity,callback);

 

opacity：必选参数，将淡入淡出效果设置为给定的不透明度

自定义动画

          $(selector).animate({params},speed,callback);

 

必需的params 参数定义形成动画的CSS 属性。

可选的speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的callback 参数是动画完成后所执行的函数名称。

操作多个属性

停止动画

         $(selector).stop(stopAll,goToEnd);

 

可选的stopAll 参数规定是否应该清除动画队列。默认是false。

可选的goToEnd 参数规定是否立即完成当前动画。默认是false。

stop(true)              所有动画不执行

stop(false,true)       动画立即执行完毕，这种用法使用较多

4.jQuery HTML操作dom

text() - 设置或获取所选元素的文本内容

html() - 设置或获取所选元素的内容（包括HTML 标记）

val() - 设置或获取表单字段的值

attr()- 设置或获取属性的值

       有一个参数就是设置，没有参数就是获取！

removeAttr ()- 移除属性

操作样式

addClass()             给指定的元素添加样式类名

removeClass()        给指定的元素移除样式类名

toggleClass ()         给指定的元素切换样式类名

hasClass ()             判断是否有样式类名

操作元素

1.在内部添加

$(“div”).append(node)          // 在div内部元素的结尾追加元素node

node.appendTo(“div”)           // 把node追加到div内部元素的结尾

$(“div”).prepend(node)         // 在div内部元素的开头追加元素node

node.prependTo(“div”)         // 把node追加到div内部元素的开头

2.在外部添加

$(“div”).before(node)           // 在div后面添加兄弟节点node

$(“div”). after(node)              // 在div前面添加兄弟节点node

3.删除不曾想重新     

remove() - 删除被选元素及其子元素（自杀）

empty() - 删除被选元素的子元素，不包括被选元素！

删除被选元素的子元素用html(“”)更加高效！

4.复制

clone()- 如果加参数true就是深层复制，会把之前绑定的事件也给复制

replaceWith()-替换节点

jQuery尺寸

1.宽度和高度

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

 

.height()方法和.css(“height”)的区别：

返回值不同：.height()方法返回的是数字类型(20)；.css(“height”)返回的是字符串类型(20px)

2.坐标值

offset()           //获取和设置元素在当前窗口的相对偏移，返回的是一个对象，设置值后自动变成相对定位       Object {top: 50, left:8}

position()       //只能获取元素相对于父亲的偏移，返回的是一个对象，不能设置值

获取值：offset().left     offset().top     position() .left        position() .top

设置值：$("p").offset({left:txtLeft,top:txtTop});

区别：

使用position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移。

使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移。

3.滚动条

scrollTop()     //获取或者设置垂直方向上到页面顶端的距离

scrollLeft()     // 获取或者设置水平方向上到页面左端的距离

scroll()           // 触发滚动事件：$(selector).scroll(function(){…});      

5.jQuery事件绑定机制bind方式              

语法格式：.bind( eventType, [ eventData ], handler )

参数说明

第一个参数：事件类型

第二个参数：传递给事件响应方法的数据对象，可以省略。

事件响应方法中获取数据方式：e.data

第三个参数：事件响应方法  

     $("p").bind("click",function(e){

        //事件响应方法

     });

one方式

语法格式：one( events [, data ], handler )

只绑定一次事件

delegate方式

语法格式：$(selector).delegate( selector, eventType, handler )

语法说明：

第一个参数:selector， 子选择器

第二个参数：事件类型

第三个参数：事件响应方法

         $(".parentBox").delegate("p","click", function(){

             //为.parentBox下面的所有的p标签绑定事件

         });

on方式

jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法

语法格式：$(selector).on( events, [ selector ],[ data ], handler )

参数介绍：

第一个参数：events，事件名

第二个参数：selector,类似delegate

第三个参数: 传递给事件响应方法的参数

第四个参数：handler，事件处理方法

         //绑定一个方法

        $( "#dataTable tbodytr" ).on( "click", function() {

            console.log( $( this ).text() );

        });

 

        //给子元素绑定事件

          $( "#dataTable tbody").on( "click", "tr", function() {

            console.log( $( this ).text() );

         });

 

      //绑定多个事件的方式

      $( "div.test" ).on({

         click: function() {

         $( this ).toggleClass( "active");

         },

      mouseenter: function() {

          $( this ).addClass( "inside" );

        },

     mouseleave: function() {

           $( this ).removeClass( "inside");

          }

       });

解绑事件

·               unbind解绑bind方式绑定的事件( 在jQuery1.7以上被on和off代替)

·                                 $(selector).unbind(); //解绑所有的事件

·                                 $(selector).unbind("click"); //解绑指定的事件

undelegate解绑delegate事件

·                                 $( "p" ).undelegate(); //解绑所有的delegate事件

·                                 $( "p" ).undelegate( "click" ); //解绑所有的click事件

 

·               off解绑on方式绑定的事件

·                                 $( "p" ).off();

·                                 $( "p" ).off( "click", "**" ); // 解绑所有的click事件，两个*表示所有

·                                 $( "body" ).off( "click", "p", foo );

 

            案例1：

            var foo = function() {

              // Code to handle some kind of event

           };

 

             // ... Now foo will be called whenparagraphs are clicked ...

             $( "body" ).on("click", "p", foo );         

            // ... Foo will no longer be called.

        $( "body" ).off("click", "p", foo );

 

         案例2：（了解）解绑命名空间的方式：

         var validate = function() {

           // Code to validate form entries

        };

 

        // Delegate events under the".validator" namespace

         $( "form" ).on("click.validator", "button", validate );

 

        $( "form" ).on("keypress.validator", "input[type='text']", validate );

 

        // Remove event handlers in the".validator" namespace

        $( "form" ).off( ".validator");

触发事件

简单事件触发：$(selector).click();//触发click事件

trigger方法触发事件：$( "#foo" ).trigger( "click" );

triggerHandler触发事件响应方法，不触发浏览器行为：$("input" ).triggerHandler( "focus" );

event对象的简介

event.data              //传递的额外事件响应方法的额外参数

event.currentTarget      //在事件响应方法中等同于this，当前Dom对象

event.target             //事件触发源，不一定===this

event.pageX        

event.pageY

event.stopPropagation() //阻止事件冒泡

e.preventDefault();        //阻止默认行为

event.type             //事件类型：click，dbclick...

event.which           //鼠标的按键类型：左1 中2 右3

6.数据缓存：data( )

获取值：$(“div”).data(“index”);

设置值：$(“div”).data(“index”,3);

&  .data()跟.attr() 方法的区别：

1.        获取数据的时候，attr方法需要传入参数，data方法可以不传入参数，这时候获取到的是一个js对象，即使没有任何data属性。

2.        获取到的数据类型不同，attr方法获取到的数据类型是字符串(String)，data方法获取到的是相应的类型。

3.        data方法获取到数据之后，我们使用一个对象来接收它，那么就可以直接操作(设置值或获取值)这个对象，而attr方法不可以。并且通过这种方式，要比.data(key,value)的方式更高效！

4.        data-attribute属性会在页面初始化的时候放到jQuery对象，被缓存起来，而attr方法不会。