Jquery

说说库和框架的区别?

JQ(Jquery,不是冰欺凌哦)就是JS的库,打个比方,比如新买的房子需要改水电,那么就需要水电工人师傅。水电工人师傅身上有个工具箱,里面可以放电笔啊,锤子啊,螺丝刀啊等常用工具。也可以是学生们工具盒里面的铅笔,原子笔,旋笔刀等。总之就是一堆工具的集合。

而框架呢,相当于给我们盖房子的开发商,房子已经盖好了,也就是说整体架构已经弄好了,这个呢开发商盖起的房子就是相当于框架。比如现在很火的backbone.js就是一个JS的框架。

JQ 能做什么?

1  操作以及遍历HTML文档
2  事件的处理
3  动画
4  Ajax

JQ对象和 DOM 原生对象有什么区别?如何转化?

我们直接看下图一看就明白了:

Jquery_第1张图片
DOM和JQ.png

jquery中如何绑定事件?

jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。
jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。

.bind()
$('a').bind('click', function() { alert("That tickles!") });

这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。

.live()
$('a').live('click', function() { alert("That tickles!") });

JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。

.delegate()
$('#container').delegate('a', 'click', function() { alert("That tickles!") });

JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。
为什么.delegate()要比.live()好用?

$('a').live('click', function() { blah() });// 或者$(document).delegate('a', 'click', function() { blah() });

后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a’)元素,把它们存成jQuery对象。

.on()
// Bind
$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} ); 
// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} );//事件代理
 //注意子元素参数位置$( "#members" ).delegate( "li a", "click", function( e ) {} );
function aClick() {
  $("div").show().fadeOut("slow");
}

$("#bind").click(function () {
  $("body").on("click", "#theone", aClick)
    .find("#theone").text("Can Click!");
});

$("#unbind").click(function () {
  $("body").off("click", "#theone", aClick)
    .find("#theone").text("Does nothing...");
});

live方法被废弃
on事件绑定把上面三种方法统一了,用起来更方便.

jquery 如何展示/隐藏元素?

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

//speed : slow fast 毫秒数
//如果任何参数都不传的话,相当于修改 dom.style.display = block|none

jquery 动画如何使用?

$(selector).animate({params},speed,callback);
.animate( properties, options )
options是一组包含动画选项的值的集合。 常用的选项:

duration (default: 400):一个字符串或者数字决定动画将运行多久。默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如:1000) )
easing (default: swing):一个字符串,表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing",其他效果可以使用jQuery Easing Plugin插件
step:每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
complete:在动画完成时执行的函数

如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

JQ DOM 获取

1 text() 元素文本内容
2 html() 包括HTML标记
3 val() 设置或返回表单字段的值
4 attr() 设置或返回表单元素的属性

text() 、html()、val() 如果括号内没有值的话 代表获取元素的文本内容、包括HTML标记的文本内容、和表单元素的value数值。如果有值得话代表设置元素的相关值。

attr() 只有一个参数的话,代表获取该元素属性的属性值。如果有两个数值的话,则代表重新设置该元素属性的属性值。

你可能感兴趣的:(Jquery)