jQuery 入门

程序员文章站 2022-07-14 22:53:01

...

jQuery

jQuery就是JS的一个扩展库，工具库，提供很多方便快捷的方法，所以将JS对象转换为jQuery对象后，能更方便地操作这个对象。

jQuery 能做什么？

选择网页元素（HTML 元素选取）

改变结果集（HTML 元素操作、CSS 操作）

工具方法（HTML DOM 遍历和修改）

事件操作（HTML 事件函数）

特殊效果（特效和动画）

AJAX

http://devdocs.io/jquery/

jQuery 对象和 DOM 原生对象有什么区别？如何转化？

联系

jQuery对象：通过jQuery包装DOM对象后产生的对象；
两者之间可以相互转换；

区别

jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，两者不等价；
jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱使用会报错；

联系

jQuery对象：通过jQuery包装DOM对象后产生的对象；
两者之间可以相互转换；

相互转换：

jQuery对象转成DOM对象---两种转换方式：[index]和.get(index)

jQuery对象是一个数据对象，通过[index]的方法

如：var $v = $("#v") ;    //jQuery对象
var v = $v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

jQuery本身提供，通过.get(index)方法

如：var $v = $("#v"); //jQuery对象
var v = $v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:

对于DOM对象，只需用$()把DOM对象包装起来，就可得到jQuery对象
如：var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象

jQuery中如何绑定事件？(bind、unbind、delegate、live、on、off)

以下为绑定事件方法的优选排序

1. on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

在选择元素上绑定一个或多个事件的事件处理函数。

//Display a paragraph's text in an alert when it is clicked:
$("p").on("click", function(){
alert( $(this).text() );
});

2 off(events,[selector],[fn])

events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin".
selector:一个最初传递到.on()事件处理程序附加的选择器。
fn:事件处理程序函数以前附加事件上，或特殊值false.

在选择元素上移除一个或多个事件的事件处理函数。
off() 方法移除用.on()绑定的事件处理程序。
特定的事件处理程序可以被移除元素上提供事件的名称，命名空间，选择器，或处理函数名称的组合。当有多个过滤参数，所提供的参数都必须匹配的事件处理程序被删除。

//Remove all event handlers from all paragraphs:
$("p").off()

//Remove all delegated click handlers from all paragraphs:
$("p").off( "click", "**" )

//Remove just one previously bound handler by passing it as the third argument:
var foo = function () {
  // code to handle some kind of event
};

// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);


// ... foo will no longer be called.
$("body").off("click", "p", foo);

jQuery中on绑定事件使用事件代理

$("div>ul">.on("click","li",function(){
  console.log($this.text())
})

3. bind(type,[data],fn)

type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个匹配元素的事件上面的处理函数

为每个匹配元素的特定事件绑定事件处理函数。
jQuery 3.0中已弃用此方法，请用on()代替。

//当每个段落被点击的时候，弹出其文本。
$("p").bind("click", function(){
  alert( $(this).text() );
});

//同时绑定多个事件类型
$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

4. unbind(type,[data|fn]])

type:删除元素的一个或多个事件,由空格分隔多个事件值。
fn:要从每个匹配元素的事件中反绑定的事件处理函数

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
jQuery 3.0中已弃用此方法，请用off()代替。
如果没有参数，则删除所有绑定的事件。

//把所有段落的所有事件取消绑定
$("p").unbind()

//将段落的click事件取消绑定
$("p").unbind( "click" )

//删除特定函数的绑定，将函数作为第二个参数传入
var foo = function () {
  // 处理某个事件的代码
};

$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo

5. delegate(selector,[type],[data],fn)

selector:选择器字符串，用于过滤器触发事件的元素。
type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
fn:当事件发生时运行的函数

指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
jQuery 3.0中已弃用此方法，请用on()代替。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

//HTML :
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>

//jQuery :
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

6. live(type, [data], fn)

type:一个或多个事件类型，由空格分隔多个事件。
fn:要从每个匹配元素的事件中反绑定的事件处理函数
jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
从 jQuery 1.7 开始，不再建议使用 .live() 方法。请使用 .on() 来添加事件处理。使用旧版本的用户，应该优先使用 .delegate() 来替代 .live()。


<p>Click me!</p>

//点击生成的p依然据有同样的功能
$("p").live("click", function(){
    $(this).after("<p>Another paragraph!</p>");
});

//阻止默认事件行为和事件冒泡，返回 false
$("a").live("click", function() { return false; });

//仅仅阻止默认事件行为
$("a").live("click", function(event){
  event.preventDefault();
});

delegate这个方法可作为live()方法的替代，使得每次事件绑定到特定的DOM元素。
以下两段代码是等同的:

$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
});


$("table").each(function(){
    $("td", this).live("hover", function(){
          $(this).toggleClass("hover");
    });
    
});

jQuery 展示/隐藏元素

1. hide([speed,[easing],[fn]])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

隐藏显示的元素

//隐藏所有段落
$("p").hide()

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

//用200毫秒将段落迅速隐藏，之后弹出一个对话框。
$("p").hide("fast",function(){
   alert("Animation Done.");
 });

2. show([speed,[easing],[fn]])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

显示隐藏的匹配元素。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

//将隐藏的段落用将近4秒的时间显示出来。。。并在之后执行一个反馈。。。
<p style="display: none">Hello</p>

$("p").show(4000,function(){
   $(this).text("Animation Done...");
 });

3. toggle([speed],[easing],[fn])

speed: 隐藏/显示效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

//用200毫秒将段落迅速切换显示状态，之后弹出一个对话框。
jQuery 代码:
$("p").toggle("fast",function(){
   alert("Animation Done.");
 });

//如果这个参数为true ，那么匹配的元素将显示;如果false ，元素是隐藏的

jQuery 代码:
$('#foo').toggle(showOrHide);

//相当于
if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
}

jQuery 动画demo

1. 淡入淡出

1. fadeIn([speed],[easing],[fn])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

//用200毫秒快速将段落淡入，之后弹出一个对话框
jQuery 代码:
("p").fadeIn("fast",function(){
   alert("Animation Done.");
 });

2. fadeOut([speed],[easing],[fn])

通过淡出的方式隐藏匹配元素,参数和用法同上

$('#book').fadeOut('slow', function() {
// Animation complete.
});

3. fadeTo([[speed],opacity,[easing],[fn]])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
opacity:一个0至1之间表示透明度的数字。
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

含义同上，用法如下

//用200毫秒快速将段落的透明度调整到0.25，大约1/4的可见度，之后弹出一个对话框

$("p").fadeTo("fast", 0.25, function(){
   alert("Animation Done.");
 });

4. fadeToggle([speed,[easing],[fn]])

设置淡入淡出开关，用法和含义同上

2. 滑动

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

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn在动画完成时执行的函数，每个元素执行一次。

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

//用200毫秒快速将段落滑下，之后弹出一个对话框

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

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

含义方法同上

用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性将被设置为none，以确保该元素不再影响页面布局。

3. slideToggle([speed],[easing],[fn])

设置滑动开关，含义方法同上

//用200毫秒快速将段落滑上或滑下，之后弹出一个对话框

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

动画队列

//回调地狱
$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('动画执行完毕')
           })
         })
       })
     })
   })
})
//等价于   链式调用
$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
        console.log('真的完毕了')
    })

自定义动画

上面几个简单的动画不能满足需求的时候，jquery提供了自定义动画行为的方法

.animate( properties [, duration ] [, easing ] [, complete ] )

官方文档

properties是一个CSS属性和值的对象,动画将根据这组对象移动。

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

.clearQueue

清除动画队列中未执行的动画

.finish

停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态

.stop( [clearQueue ] [, jumpToEnd ] )

停止当前正在运行的动画

clearQueue(default: false)
jumpToEnd(default: false)

设置和获取元素内部 HTML 内容

.html([val|fn])

//返回p元素的内容。
$('p').html();

//设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");

设置和获取元素内部文本

.val([val|fn|arr])

获得匹配元素的当前值。

//获取文本框中的值
$("input").val();

//设定文本框的值
$("input").val("hello world!");

.text([val|fn])

取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

//返回p元素的文本内容。
$('p').text();

//设置所有 p 元素的文本内容
$("p").text("Hello world!");

//使用函数来设置所有匹配元素的文本内容。
$("p").text(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

设置和获取表单用户输入或者选择的内容and设置和获取元素属性

//获取input text输入的内容
$('input[type=text]').val()
//获取radio的值
$('input[type=radio]').val()
//获取select的值
$('select').val()
//获取select name 属性
$('select').attr('name')
//设置select name属性
$('select').attr("name", "test")
$('select').attr({name: 'test'})

上一篇： iframe高度自适应

下一篇： JQ选择器 DOM操作事件处理